diff --git a/components/About/Feature.css b/components/About/Feature.css
index bae9e9f4..b113f41e 100644
--- a/components/About/Feature.css
+++ b/components/About/Feature.css
@@ -4,15 +4,15 @@
   margin: 10px;
   padding: 50px 20px;
   display: flex;
-  width: 300px;
+  width:300px;
+  height: 200px;
   flex-direction: column;
+  position: relative;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px,
-    rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px,
-    rgba(0, 0, 0, 0.09) 0px 32px 16px;
 }
+
 .feature_card_outer {
   display: flex;
   gap: 10px;
@@ -20,12 +20,67 @@
   justify-content: center;
   margin-bottom: 50px;
 }
+
 .feature .feature_card .icons {
   margin-bottom: 20px;
   font-size: 50px;
   transition: all 0.3s ease;
 }
 
+.feature_box{
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  border-radius: 5px;
+  border: 5px solid #fff;
+  background: #fff;
+  transition: all .4s ease-in;
+  transform-style: preserve-3d;
+  box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px,
+  rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px,
+  rgba(0, 0, 0, 0.09) 0px 32px 16px;
+}
+
+.feature_box:hover{
+  border: 5px solid #1857a0;
+  transform: rotateY(180deg);
+}
+
+.feature_box .card-front {
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.card-back p{
+  font-weight: bolder;
+}
+
+.feature .feature_box .card-front *{
+  align-self: center;
+}
+
+.feature_box .card-back {
+  height: 90%;
+  width: 100%;
+  background: #fff;
+  padding: 10px;
+  margin-top: 10px;
+  backface-visibility: hidden;
+  transform: rotateY(180deg);
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
 .feature .feature_card .book {
   color: #ff6b6b; /* Updated book icon color */
 }
@@ -129,5 +184,6 @@
 @media screen and (max-width: 640px) {
   .feature_card_outer {
     align-items: center;
+    margin: auto;
   }
 }
diff --git a/components/About/Feature.js b/components/About/Feature.js
index 0afca335..fd698f09 100644
--- a/components/About/Feature.js
+++ b/components/About/Feature.js
@@ -32,45 +32,108 @@ export default function Feature(props) {
       >
         <div className="feature_card_outer flex flex-col sm:flex-row ">
           <div className="feature_card dark:bg-gray-900">
-            <MdMenuBook className="icons book" />
-            <p className="font-bold text-xl">Read Books</p>
+            <div className="feature_box">
+              <div className="card-front">
+                <MdMenuBook className="icons book" />
+                <p className="font-bold text-xl">Read Books</p>
+              </div>
+              <div className="card-back">
+                <p>Immerse yourself in captivating stories and thought-provoking ideas from our vast collection of books, spanning genres and cultures.</p>
+              </div>
+            </div>
           </div>
           <div className="feature_card dark:bg-gray-900">
-            <MdUpload className="icons upload text-sky-500" />
-            <p className="font-bold text-xl">Upload Books</p>
+            <div className="feature_box">
+              <div className="card-front">
+                <MdUpload className="icons upload text-sky-500" />
+                <p className="font-bold text-xl">Upload Books</p>
+              </div>
+              <div className="card-back">
+                <p>Share your literary creations with the world. Easily upload and showcase your work on our platform to connect with readers.</p>
+              </div>
+            </div>
           </div>
           <div className="feature_card dark:bg-gray-900">
-            <MdOutlineMoneyOff className="dollar icons text-yellow-400" />
-            <p className="font-bold text-xl">Free of Cost</p>
+            <div className="feature_box">
+              <div className="card-front">
+                <MdOutlineMoneyOff className="dollar icons text-yellow-400" />
+                <p className="font-bold text-xl">Free of Cost</p>
+              </div>
+              <div className="card-back">
+                <p>Enjoy unlimited access to our library of books without any charges. Explore, learn, and expand your horizons at no cost.</p>
+              </div>
+            </div>
           </div>
         </div>
         <div className="feature_card_outer flex flex-col sm:flex-row">
           <div className="feature_card dark:bg-gray-900">
-            <MdPeople className="icons reader" />
-            <p className="font-bold text-xl">Readers Community</p>
+            <div className="feature_box">
+              <div className="card-front">
+                <MdPeople className="icons reader" />
+                <p className="font-bold text-xl">Readers Community</p>
+              </div>
+              <div className="card-back">
+                <p>Join a vibrant community of fellow book enthusiasts. Connect, discuss, and share your thoughts with like-minded readers.</p>
+              </div>
+            </div>
           </div>
           <div className="feature_card dark:bg-gray-900">
-            <MdEmail className="icons letterClose text-blue-500 hover:hidden" />
-            <MdDrafts className="icons letterOpen text-blue-500 hidden hover:block" />
-            <p className="font-bold text-xl">Newsletter</p>
+            <div className="feature_box">
+              <div className="card-front">
+                <MdEmail className="icons letterClose text-blue-500 hover:hidden" />
+                <MdDrafts className="icons letterOpen text-blue-500 hidden hover:block" />
+                <p className="font-bold text-xl">Newsletter</p>
+              </div>
+              <div className="card-back">
+                <p> Stay informed and inspired with our regular newsletter. Get updates on new releases, author interviews, and literary insights</p>
+              </div>
+            </div>
           </div>
           <div className="feature_card dark:bg-gray-900">
-            <MdEmojiEvents className="icons readingChallenge" />
-            <p className="font-bold text-xl">Reading Challenge</p>
+            <div className="feature_box">
+              <div className="card-front">
+                <MdEmojiEvents className="icons readingChallenge" />
+                <p className="font-bold text-xl">Reading Challenge</p>
+              </div>
+              <div className="card-back">
+                <p> Embark on exciting reading challenges that push your reading boundaries. Set goals, discover new authors, and win rewards.</p>
+              </div>
+            </div>
           </div>
         </div>
         <div className=" feature_card_outer flex flex-col sm:flex-row ">
           <div className="feature_card dark:bg-gray-900">
-            <MdTimeline className="icons progressTracking" />
-            <p className="font-bold text-xl">Progress Tracking</p>
+            <div className="feature_box">
+              <div className="card-front">
+                <MdTimeline className="icons progressTracking" />
+                <p className="font-bold text-xl">Progress Tracking</p>
+              </div>
+              <div className="card-back">
+                <p>Keep tabs on your reading journey. Track your progress, set milestones, and celebrate your literary accomplishments.</p>
+              </div>
+            </div>
           </div>
           <div className="feature_card dark:bg-gray-900">
-            <MdMoreTime className="icons readingChallenge text-red-400" />
-            <p className="font-bold text-xl">Read Anytime</p>
+            <div className="feature_box">
+              <div className="card-front">
+                <MdMoreTime className="icons readingChallenge text-red-400" />
+                <p className="font-bold text-xl">Read Anytime</p>
+              </div>
+              <div className="card-back">
+                <p>Whether it's a quiet morning or a late-night escape, enjoy the freedom to read at your convenience, any time you desire.</p>
+              </div>
+            </div>
           </div>
           <div className="feature_card dark:bg-gray-900">
-            <MdPark className="icons readingChallenge text-green-400" />
-            <p className="font-bold text-xl">Read Anywhere</p>
+            <div className="feature_box">
+              <div className="card-front">
+                <MdPark className="icons readingChallenge text-green-400" />
+                <p className="font-bold text-xl">Read Anywhere</p>
+              </div>
+              <div className="card-back">
+                <p> Our platform ensures you can indulge in your favorite reads from the comfort of your home, while traveling, or wherever you go.</p>
+              </div>
+            </div>
           </div>
         </div>
       </Carousel>