diff --git a/frontend/src/Components/common/Footer/LegalSection/PrivacyPolicyPage.jsx b/frontend/src/Components/common/Footer/LegalSection/PrivacyPolicyPage.jsx
index feac66e..3b3ff2d 100644
--- a/frontend/src/Components/common/Footer/LegalSection/PrivacyPolicyPage.jsx
+++ b/frontend/src/Components/common/Footer/LegalSection/PrivacyPolicyPage.jsx
@@ -34,60 +34,57 @@ const dataArray = [
 
 const PrivacyPolicyPage = () => {
   const [activeIndex, setActiveIndex] = useState(null);
-
+  
   const toggleBtn = (index) => {
     setActiveIndex(activeIndex === index ? null : index);
   };
 
   return (
-    <>
-      <div className='bg-gradient'>
-        <div className='max-w-4xl mx-auto py-12 px-4 sm:px-6 lg:px-8'>
-          <h1 className='text-3xl md:text-4xl lg:text-5xl text-center font-semibold text-[#2596be] mb-8'>
+    <motion.div // Wrap with motion.div for entry animation
+      initial={{ opacity: 0, y: 60 }} // Initial animation properties
+      animate={{ opacity: 10, y: 5 }} // Animation when component mounts
+      transition={{ duration: 2 }} // Transition duration
+      className='min-h-screen' style={{ backgroundColor: '#1d2026' }}>
+      <div className='max-w-4xl mx-auto py-12 px-4 sm:px-6 lg:px-8'>
+        <h1 className='text-3xl md:text-4xl lg:text-5xl text-center font-semibold text-[#2596be] mb-8'>
             Privacy Policy
-          </h1>
-
-          <div className=''>
-            {dataArray.map((data, index) => (
-              <motion.div
-                key={index}
-                className='shadow-md cursor-pointer py-2 px-3 bg-white mt-8 rounded-md'
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
-              >
-                <div
-                  className='flex flex-row justify-between items-center'
-                  onClick={() => toggleBtn(index)}
-                  style={{ cursor: 'pointer' }}
-                >
-                  <p className='text-lg md:text-xl text-[#353b48] font-bold tracking-normal md:tracking-wider'>
-                    {data.title}
-                  </p>
-                  <div>
-                    <span className='text-xl md:text-3xl text-[#2f3640]'>
-                      {activeIndex === index ? '-' : '+'}
-                    </span>
-                  </div>
+        </h1>
+        <div>
+          {dataArray.map((data, index) => (
+            <motion.div
+              key={index}
+              className={`shadow-lg cursor-pointer py-3 px-5 bg-white mt-6 rounded-lg`}
+              // className={`shadow-lg cursor-pointer py-4 px-6 bg-white mt-6 rounded-lg`}
+              whileHover={{ scale: 1.05 }}
+              onClick={() => toggleBtn(index)}>
+              <div className='flex justify-between items-center'>
+                <p className='text-lg md:text-xl font-semibold text-gray-800'>
+                  {data.title}
+                </p>
+                <div>
+                  <span className='text-xl md:text-2xl text-gray-600'>
+                    {activeIndex === index ? '-' : '+'}
+                  </span>
                 </div>
-                {activeIndex === index && (
-                  <motion.div
-                    initial={{ height: 0, opacity: 0 }}
-                    animate={{ height: 'auto', opacity: 1 }}
-                    transition={{ duration: 0.5 }}
-                    className='overflow-hidden'
-                  >
-                    <p className='text-[#718093] text-sm sm:text-base leading-6 sm:leading-7 md:leading-8 tracking-wide md:tracking-wider text-justify px-3'>
+              </div>
+              {activeIndex === index && (
+                <motion.div
+                  initial={{ height: 0, opacity: 0 }}
+                  animate={{ height: 'auto', opacity: 1 }}
+                  transition={{ duration: 0.5 }}
+                  className='overflow-hidden'>
+                  <div className='py-4'>
+                    <p className='text-gray-700 text-sm md:text-base leading-6'>
                       {data.para}
                     </p>
-                  </motion.div>
-                )}
-              </motion.div>
-            ))}
-          </div>
+                  </div>
+                </motion.div>
+              )}
+            </motion.div>
+          ))}
         </div>
       </div>
-    </>
+    </motion.div>
   );
 };