diff --git a/src/components/board/Officer.astro b/src/components/board/Officer.astro
index 02935cf..b97d6c1 100644
--- a/src/components/board/Officer.astro
+++ b/src/components/board/Officer.astro
@@ -7,28 +7,36 @@ const { name, position, picture, email } = Astro.props;
 
 <div class="text-white">
     <div class="text-ieee-yellow">
-        <Link href={email} className="flex items-center ml-[3%] py-[0.5vh]">
-            <MdEmail className="text-[1.5vw] mr-[0.5%]" />
-            <p class="text-[0.8vw]">
+        <Link
+            href={`mailto:${email}`}
+            className="flex items-center ml-[3%] py-[0.5vh] group"
+        >
+            <MdEmail
+                className="md:text-[1.5vw] text-[2.5vw] mr-[0.5%] group-hover:scale-110 group-hover:opacity-70 duration-300"
+            />
+            <p class="md:text-[0.8vw] text-[2vw]">
                 {email}
             </p>
         </Link>
     </div>
 
     <div
-        class="w-[20vw] aspect-[334/440] bg-gradient-to-t from-ieee-blue-100/5 to-ieee-blue-100/25 rounded-[10%] flex flex-col items-center"
+        class="md:w-[20vw] w-[35vw] aspect-[334/440] bg-gradient-to-t from-ieee-blue-100/5 to-ieee-blue-100/25 rounded-[10%] flex flex-col items-center relative"
     >
         <img
             src={picture}
             alt="officer"
-            class="w-[18vw] rounded-[10%] pt-[5%] pb-[3%] relative"
+            class="md:w-[18vw] w-[31vw] md:rounded-[1.5vw] rounded-[3vw] mt-[5%] mb-[3%]"
         />
         <div
-            class="bg-white w-fit rounded-full aspect-square p-[0.4vw] text-ieee-black text-[1.8vw] absolute ml-[13.5vw] mt-[3vh]"
+            class="bg-white w-fit rounded-full aspect-square md:p-[0.4vw] p-[0.8vw] text-ieee-black md:text-[1.8vw] text-[3.5vw] absolute md:right-[1.5vw] md:top-[1.5vw] right-[2.5vw] top-[2.5vw]"
         >
             <FaGear />
         </div>
-        <div class="w-full flex justify-between px-[7%]">
+        <p
+            data-inview
+            class="in-view:animate-fade-right md:text-[2vw] text-[3.5vw] font-light md:leading-[2.5vw] leading-[5vw]"
+        >
             <p
                 data-inview
                 class="in-view:animate-fade-right text-[2vw] font-light leading-[4.5vh]"
@@ -37,10 +45,10 @@ const { name, position, picture, email } = Astro.props;
             </p>
             <div
                 data-inview
-                class="in-view:animate-fade-up text-[0.8vw] w-[8vw] border-[0.11vw] border-white/90 rounded-full p-[0.5%] h-fit text-center"
+                class="md:mt-[0.5vw] mt-[1.5vw] in-view:animate-fade-up md:text-[0.8vw] text-[1.5vw] md:w-[8vw] w-[15vw] border-[0.11vw] border-white/90 rounded-full p-[0.5%] h-fit text-center"
             >
                 {position}
             </div>
-        </div>
+        </p>
     </div>
 </div>
diff --git a/src/components/board/Officers.astro b/src/components/board/Officers.astro
index 62f4b82..b25315e 100644
--- a/src/components/board/Officers.astro
+++ b/src/components/board/Officers.astro
@@ -14,30 +14,37 @@ const types = ["All", ...typeOrder];
 const currentFilter = "All";
 ---
 
-<div class="text-white flex flex-col items-center mt-[15vh] mb-[10vh]">
-    <div data-inview class="relative w-[21vw] in-view:animate-fade-down">
+<div
+    class="text-white flex flex-col items-center md:mt-[10vw] mt-[20vw] mb-[10vh]"
+>
+    <div
+        data-inview
+        class="relative w-[40vw] md:w-[21vw] in-view:animate-fade-down"
+    >
         <Image src={about} alt="About background image" />
         <Image
             src={neko}
             alt="About image"
-            class="absolute top-[10%] left-[16%] aspect-[399/491] object-cover w-[14vw] rounded-[2vw]"
+            class="absolute top-[10%] left-[16%] aspect-[399/491] object-cover w-[27vw] md:ww-[14vw] rounded-[2vw]"
         />
     </div>
 
-    <div class="text-[2.5vw] flex items-center mt-[2vh]">
+    <div class="text-[5vw] md:text-[2.5vw] flex items-center mt-[2vh]">
         <LiaDotCircle className="mr-[1vw] pt-[0.5%]" />
         <p>MEET THE BOARD</p>
     </div>
 
-    <p class="text-[1.3vw] w-[56%] my-[3%] font-extralight text-center">
-        Erat hendrerit tristique erat; parturient cursus fringilla feugiat. Eget
-        faucibus fames ridiculus nec egestas convallis cubilia malesuada. Tellus
-        nibh vivamus tempus molestie tristique quis
+    <p
+        class="md:text-[1.3vw] text-[2.5vw] md:w-[56%] w-[70%] my-[3%] font-extralight text-center"
+    >
+        Our board comprises 31 students of varying majors, colleges, and
+        interests! Feel free to reach out for any questions about our position
+        or experiences.
     </p>
 
     <Filter filters={types} currentFilter={currentFilter} />
 
-    <div class="grid gap-[3vw] grid-cols-3 mt-[4vh]">
+    <div class="grid gap-[3vw] md:grid-cols-3 grid-cols-2 mt-[10vh]">
         {
             officers.map((officer) => (
                 <div