diff --git a/src/components/join/Involvement.astro b/src/components/join/Involvement.astro
index 84e5f47..6d2c115 100644
--- a/src/components/join/Involvement.astro
+++ b/src/components/join/Involvement.astro
@@ -7,10 +7,10 @@ import { IoMdCalendar } from "react-icons/io";
 import { RiRobot2Fill } from "react-icons/ri";
 const {image, text, link} = Astro.props;
 ---
-<div class="w-[15vw] relative">
+<div class="w-[15vw] relative group">
 
-    <img src={image} alt="involvement background" class="aspect-[230/425] object-cover rounded-[2vw]"/>
-    <Link href={link} className="group absolute top-0 w-[15vw] pt-[5%] aspect-[230/425] flex flex-col justify-between">
+    <img src={image} alt="involvement background" class="aspect-[230/425] object-cover rounded-[2vw] group-hover:opacity-70 duration-300"/>
+    <Link href={link} className="absolute top-0 w-[15vw] pt-[5%] aspect-[230/425] flex flex-col justify-between">
         <div class="w-full flex justify-end pr-[5%]">
             <div class="bg-white w-fit rounded-full aspect-square p-[0.5vw] text-ieee-black text-[2vw]">
                 {
diff --git a/src/components/join/Involvements.astro b/src/components/join/Involvements.astro
index 8d41dee..b759e9b 100644
--- a/src/components/join/Involvements.astro
+++ b/src/components/join/Involvements.astro
@@ -2,7 +2,7 @@
 import Involvement from "./Involvement.astro";
 import involve from "../../data/involve.json";
 ---
-<div class="px-[8%] flex items-center mb-[10%]">
+<div class="pl-[10%] pr-[6%] flex items-center mb-[10%]">
     <div class="flex w-3/5 justify-between">
         {involve.map((item)=>(
             <Involvement