diff --git a/app/(pages)/(index-page)/_components/FAQ/AccordionFAQ.module.scss b/app/(pages)/(index-page)/_components/FAQ/AccordionFAQ.module.scss
index f03f941..9bb3deb 100644
--- a/app/(pages)/(index-page)/_components/FAQ/AccordionFAQ.module.scss
+++ b/app/(pages)/(index-page)/_components/FAQ/AccordionFAQ.module.scss
@@ -1,6 +1,7 @@
 //screen sizes >=1840px
 @import '@globals/styles/mixins.scss';
 .container {
+    position: relative;
     display: flex;
     flex-direction: column;
     z-index: 10;
@@ -85,6 +86,14 @@
     }   
 }
 
+@include tablet {
+    .container{
+        .questions {
+            font-size: 1rem;
+        }
+    }
+}
+
 @include phone {
     .container{
         .FAQText {
diff --git a/app/(pages)/(index-page)/_components/FAQ/AccordionFAQ.tsx b/app/(pages)/(index-page)/_components/FAQ/AccordionFAQ.tsx
index 4f39df1..e6d9f38 100644
--- a/app/(pages)/(index-page)/_components/FAQ/AccordionFAQ.tsx
+++ b/app/(pages)/(index-page)/_components/FAQ/AccordionFAQ.tsx
@@ -1,5 +1,6 @@
 'use client';
 import React from 'react';
+import { useState, useEffect, useRef } from 'react';
 import styles from './AccordionFAQ.module.scss';
 import Link from 'next/link';
 import { Accordion, AccordionItem as Item } from '@szhsin/react-accordion';
@@ -116,9 +117,42 @@ const AccordionFAQ = () => {
     */
   }
 
+  const [fixedHeight, setFixedHeight] = useState(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const longestAnswerRef = useRef<HTMLParagraphElement>(null);
+
+  useEffect(() => {
+    if (containerRef.current && longestAnswerRef.current) {
+      const collapsedHeight = containerRef.current.scrollHeight;
+      const longestAnswerHeight = longestAnswerRef.current.scrollHeight;
+
+      setFixedHeight(collapsedHeight + longestAnswerHeight);
+    }
+  }, []);
+
   return (
-    <div className={styles.container}>
+    <div
+      className={styles.container}
+      ref={containerRef}
+      style={{ height: fixedHeight ? `${fixedHeight}px` : 'auto' }}
+    >
       <h1 className={styles.FAQText}>FAQ</h1>
+
+      {/* 
+        Hidden element to measure the longest answer (first question) for calculating fixed height of the container
+      */}
+      <div
+        style={{
+          position: 'absolute',
+          visibility: 'hidden',
+          pointerEvents: 'none',
+        }}
+      >
+        <p ref={longestAnswerRef} className={styles.answer}>
+          {faqs[0].answer}
+        </p>
+      </div>
+
       <Accordion transition transitionTimeout={250}>
         {faqs.map(({ question, answer }, index) => (
           <React.Fragment key={index}>
diff --git a/app/(pages)/(index-page)/_components/FAQ/FAQ.module.scss b/app/(pages)/(index-page)/_components/FAQ/FAQ.module.scss
index 2be15c3..7ff1df0 100644
--- a/app/(pages)/(index-page)/_components/FAQ/FAQ.module.scss
+++ b/app/(pages)/(index-page)/_components/FAQ/FAQ.module.scss
@@ -12,10 +12,11 @@
     width: 68%;
     position: relative;
     background-color: #549645;
-    padding-top: 35%;
+    padding-top: 30%;
 }
 .faq{
     padding: 20%;
+    padding-top: 8%;
     position: relative;
 }
 .donation{
@@ -89,67 +90,72 @@
     top: -60px;
     z-index: 30;
 }
+.grass_2{
+    position: absolute;
+    width: 7%;
+    top: 42%;
+    right: 0;
+}
+//assets in donate section
 .grass_single{
     position: absolute;
     width: 15%;
-    top: -115px;
+    top: -35%;
     right: 15%;
 }
 .grass_1{
     position: absolute;
     width: 12%;
-    top: -200px;
-}
-.grass_2{
-    position: absolute;
-    width: 7%;
-    top: 42%;
-    right: 0;
+    top: -40%;
 }
 .grass_3{
     position: absolute;
     width: 20%;
-    bottom: -225px;
+    bottom: -25%;
     right: 8%;
 }
+
+//assets in faq section
+
 .grass_4{
     position: absolute;
-    width: 7%;
-    bottom: 20%;
+    width: 10.5%;
+    top: 600px;
+    left:0;
 }
 .grass_5{
     position: absolute;
-    width: 16%;
+    width: 23.1%;
     bottom: 2%;
-    left: 40%
+    right: 10%
 }
 .firefly_sm1{
     position: absolute;
     width: 1%;
-    top: 30%;
-    right: 5%;
+    top: 320px;
+    right: 4%;
     animation: jump 6s infinite ease-in-out;
 }
 .firefly_lg1{
     position: absolute;
     width: 1.5%;
-    top: 31%;
+    top: 300px;
     right: 6%;
     animation: jump 5s infinite ease-in-out;
 }
 .firefly_sm2{
     position: absolute;
     width: 1%;
-    bottom: 14%;
-    right: 6%;
-    animation: jump 9s infinite ease-in-out;
+    top: 500px;
+    right: -40%;
+    animation: jump 6.5s infinite ease-in-out;
 }
 .firefly_lg2{
     position: absolute;
-    width: 1%;
-    bottom: 6%;
-    left: 60%;
-    animation: jump 4s infinite ease-in-out;
+    width: 1.5%;
+    bottom: 100px;
+    right: 6%;
+    animation: jump 5.5s infinite ease-in-out;
 }
 @keyframes jump {
     0%, 100% { transform: translateY(0); }
@@ -200,9 +206,6 @@
     .grass_1{
         top: -160px;
     }
-    .grass_3{
-        bottom: -130px;
-    }
 }
 @include sm-desktop { //1164
     // for size 1048 to 1280
@@ -257,6 +260,12 @@
     .grass_light{
         top: -30px;
     }
+    .grass_single{
+        top: -40%;
+    }
+    .grass_1{
+        top: -45%;
+    }
 }
 
 @include phone { //phone 560
diff --git a/app/(pages)/(index-page)/_components/FAQ/FAQ.tsx b/app/(pages)/(index-page)/_components/FAQ/FAQ.tsx
index d1bcbb5..458f6c7 100644
--- a/app/(pages)/(index-page)/_components/FAQ/FAQ.tsx
+++ b/app/(pages)/(index-page)/_components/FAQ/FAQ.tsx
@@ -96,34 +96,6 @@ export default function FAQ() {
           height={10}
           className={style.grass_2}
         />
-        <Image
-          src="/images/faq/grass_texture_4.svg"
-          alt="grass texture"
-          width={201}
-          height={10}
-          className={style.grass_4}
-        />
-        <Image
-          src="/images/faq/grass_texture_5.svg"
-          alt="grass texture"
-          width={230}
-          height={10}
-          className={style.grass_5}
-        />
-        <Image
-          src="/images/faq/firefly_sm.svg"
-          alt="firefly"
-          width={7}
-          height={10}
-          className={style.firefly_sm2}
-        />
-        <Image
-          src="/images/faq/firefly_lg.svg"
-          alt="firefly"
-          width={7}
-          height={10}
-          className={style.firefly_lg2}
-        />
       </div>
       <div className={style.container}>
         <div className={style.faq_donation}>
@@ -152,18 +124,46 @@ export default function FAQ() {
             />
           </div>
           <div className={style.faq}>
+            <Image
+              src="/images/faq/grass_texture_4.svg"
+              alt="grass texture"
+              width={201}
+              height={10}
+              className={style.grass_4}
+            />
+            <Image
+              src="/images/faq/grass_texture_5.svg"
+              alt="grass texture"
+              width={230}
+              height={10}
+              className={style.grass_5}
+            />
             <Image
               src="/images/faq/firefly_sm.svg"
               alt="firefly"
               width={7}
               height={10}
-              className={style.firefly_sm1}
+              className={style.firefly_sm2}
             />
             <Image
               src="/images/faq/firefly_lg.svg"
               alt="firefly"
+              width={11}
+              height={10}
+              className={style.firefly_lg2}
+            />
+            <Image
+              src="/images/faq/firefly_sm.svg"
+              alt="firefly"
               width={7}
               height={10}
+              className={style.firefly_sm1}
+            />
+            <Image
+              src="/images/faq/firefly_lg.svg"
+              alt="firefly"
+              width={11}
+              height={10}
               className={style.firefly_lg1}
             />
             <AccordionFAQ />
diff --git a/app/(pages)/(index-page)/_components/hero/heroMainSection.tsx b/app/(pages)/(index-page)/_components/hero/heroMainSection.tsx
index 25622ba..ad82c31 100644
--- a/app/(pages)/(index-page)/_components/hero/heroMainSection.tsx
+++ b/app/(pages)/(index-page)/_components/hero/heroMainSection.tsx
@@ -75,7 +75,7 @@ export default function HeroSection() {
             className="h-[306px] w-[132px] md:h-[472px] md:w-[216px] lg:h-[472px] lg:w-[216px] xl:h-[561px] xl:w-[264px]"
           />
         </div>
-        <div className="absolute left-[-120px] z-[120] hidden pt-[606px] break-625:block sm:left-[-20px] sm:pt-[606px] md:left-[-60px] md:pt-[582px] lg:left-[0px] lg:pt-[582px] xl:pt-[559px]">
+        <div className="absolute left-[-120px] top-[-1px] z-[120] hidden pt-[606px] break-625:block sm:left-[-20px] sm:pt-[606px] md:left-[-60px] md:pt-[582px] lg:left-[0px] lg:pt-[582px] xl:pt-[559px]">
           <Image
             src="/Hero/grass.svg"
             alt="Grass"
diff --git a/app/(pages)/about-us/_components/Hero/_components/Beach/Beach.module.scss b/app/(pages)/about-us/_components/Hero/_components/Beach/Beach.module.scss
index 269477f..b407aa3 100644
--- a/app/(pages)/about-us/_components/Hero/_components/Beach/Beach.module.scss
+++ b/app/(pages)/about-us/_components/Hero/_components/Beach/Beach.module.scss
@@ -26,7 +26,7 @@
 /* Layer: Water Light */
 .water_light {
     position: absolute;
-    top: -10px;
+    top: -15px;
     width: 100%;
     height: 125px;
     z-index: 30;
diff --git a/app/(pages)/about-us/_components/Values/Values.module.scss b/app/(pages)/about-us/_components/Values/Values.module.scss
index 51375df..a3cbd9a 100644
--- a/app/(pages)/about-us/_components/Values/Values.module.scss
+++ b/app/(pages)/about-us/_components/Values/Values.module.scss
@@ -18,8 +18,9 @@
     .valuesContainer {
         display: flex;
         flex-direction: row;
-        justify-content: space-evenly;
-        gap: 3%;
+        justify-content: space-between;
+        transition: .5s ease-in-out;
+        
 
         h4 {
             color: #123041;
@@ -42,52 +43,39 @@
             padding-bottom: 5%;
         }
 
-        .valuesBoxInclusive {
+        .valuesBoxInclusive,
+        .valuesBoxLearning,
+        .valuesBoxProjects {
             padding: 3% 3% 0% 3% ;
-            background-color: #9EE7E5;
             border-radius: 10px;
-            flex-basis: 100%;
-            transform-origin: left;
-            transition: flex-basis 0.3s ease, transform 0.3s ease;  
+            transition: width 0.3s ease, transform 0.3s ease;  
             display: flex;
             justify-content: space-between;
             align-items: center;
             flex-direction: column;
             text-align: left;
+            width: 30%;
+        }
+
+        .valuesBoxInclusive {
+            background-color: #9EE7E5;
+            transform-origin: left;
         }
 
         .valuesBoxLearning {
-            padding: 3% 3% 0% 3% ;
             background-color: #C2E567;
-            border-radius: 10px;
-            flex-basis: 100%;
-            transition: flex-basis 0.3s ease, transform 0.3s ease;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            flex-direction: column;
-            text-align: left;
         }
 
         .valuesBoxProjects {
-            padding: 3% 3% 0% 3% ;
             background-color: #FFC5AB;
-            border-radius: 10px;
-            flex-basis: 100%;
             transform-origin: right;
-            transition: flex-basis 0.3s ease, transform 0.3s ease;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            flex-direction: column;
-            text-align: left;
         }
 
         .valuesBoxInclusive:hover,
         .valuesBoxLearning:hover,
         .valuesBoxProjects:hover {
-            flex-basis: 140%; 
-            transform: scaleX(1.05);
+            width: 35%;
+            transition: .5s ease-in-out;
         }
     }
 
@@ -95,7 +83,7 @@
 
 @include tablet {
     .container{
-        padding: 8.5%;
+        // padding: 8.5%;
         h1{
             padding: 12% 0% 12% 0%;
         }
@@ -107,25 +95,16 @@
             p{
                 font-size: 1.5rem;
             }
-            .valuesBoxInclusive {
+            .valuesBoxInclusive, .valuesBoxLearning, .valuesBoxProjects{
                 padding: 10% 10% 0% 10% ;
                 margin-bottom: 12.8%;
                 transition: none;
-            }
-            .valuesBoxLearning{
-                padding: 10% 10% 0% 10% ;
-                margin-bottom: 12.8%;
-                transition: none;
-            }
-            .valuesBoxProjects{
-                padding: 10% 10% 0% 10% ;
-                margin-bottom: 12.8%;
-                transition:none
+                width: 100%;
             }
             .valuesBoxInclusive:hover,
             .valuesBoxLearning:hover,
             .valuesBoxProjects:hover {
-                flex-basis:unset;
+                width: 100%;
                 transform:none;
             }
         }