diff --git a/frontend/src/components/LandingPage/About.tsx b/frontend/src/components/LandingPage/About.tsx
index 7f77279..00a4dba 100644
--- a/frontend/src/components/LandingPage/About.tsx
+++ b/frontend/src/components/LandingPage/About.tsx
@@ -1,12 +1,31 @@
 import { MoveDownRight } from "lucide-react";
+import { useContext } from "react";
+import { DarkModeContext } from "./DarkMode";
 
 const About = () => {
+  const { isDarkMode } = useContext(DarkModeContext);
+
   return (
-    <div className="bg-gradient-to-br from-black to-gray-900 rounded-2xl px-8 w-full mx-auto text-white shadow-lg">
+    <div
+      className={`rounded-2xl px-8 w-full mx-auto shadow-lg ${isDarkMode
+        ? "bg-gradient-to-br from-white to-gray-100 text-black"
+        : "bg-gradient-to-br from-black to-gray-900 text-white"
+        }`}
+    >
       <details className="mb-4 cursor-pointer group py-10 border-b border-gray-700">
-        <summary className="lg:text-3xl font-light flex justify-between items-center text-base">
+        <summary className="lg:text-3xl tracking-wide font-light flex justify-between items-center text-base">
           Gradual Liquidation Process
-          <MoveDownRight className="group-open:rotate-[45deg] w-[50px] lg:w-[60px] transition-transform" size={60} color="#fff" strokeWidth={1.25} />
+          <MoveDownRight
+            className="group-open:rotate-[85deg] 
+                 group-open:scale-50 
+                 w-[50px] 
+                 lg:w-[60px] 
+                 transition-transform 
+                 duration-800 
+                 ease-in-out"
+            size={60}
+            strokeWidth={1.25}
+          />
         </summary>
         <p className="mt-2 ml-4 lg:text-xl font-thin font-opensans text-sm">
           To ensure fair market value for collateral, our platform employs limit
@@ -17,9 +36,19 @@ const About = () => {
       </details>
 
       <details className="mb-4 cursor-pointer group py-10 border-b border-gray-700">
-        <summary className="lg:text-3xl tracking-wide font-extralight flex justify-between items-center text-base">
+        <summary className="lg:text-3xl tracking-wide font-light flex justify-between items-center text-base">
           Dynamic Proposal System
-          <MoveDownRight className="group-open:rotate-[45deg] w-[50px] lg:w-[60px] transition-transform" size={60} color="#fff" strokeWidth={1.25} />
+          <MoveDownRight
+            className="group-open:rotate-[85deg] 
+                 group-open:scale-50 
+                 w-[50px] 
+                 lg:w-[60px] 
+                 transition-transform 
+                 duration-800 
+                 ease-in-out"
+            size={60}
+            strokeWidth={1.25}
+          />
         </summary>
         <p className="mt-2 ml-4 lg:text-xl font-thin font-opensans text-sm">
           Users on our platform have the ability to create proposals for lending
@@ -34,9 +63,19 @@ const About = () => {
       </details>
 
       <details className="mb-4 cursor-pointer group py-10 border-b border-gray-700">
-        <summary className="lg:text-3xl tracking-wide font-extralight flex justify-between items-center text-base">
+        <summary className="lg:text-3xl tracking-wide font-light flex justify-between items-center text-base">
           Immutable Deal Creation
-          <MoveDownRight className="group-open:rotate-[45deg] w-[50px] lg:w-[60px] transition-transform" size={60} color="#fff" strokeWidth={1.25} />
+          <MoveDownRight
+            className="group-open:rotate-[85deg] 
+                 group-open:scale-50 
+                 w-[50px] 
+                 lg:w-[60px] 
+                 transition-transform 
+                 duration-800 
+                 ease-in-out"
+            size={60}
+            strokeWidth={1.25}
+          />
         </summary>
         <p className="mt-2 ml-4 lg:text-xl font-thin font-opensans text-sm">
           Details about immutable deal creation.
@@ -44,9 +83,19 @@ const About = () => {
       </details>
 
       <details className="cursor-pointer group py-10">
-        <summary className="lg:text-3xl tracking-wide font-extralight flex justify-between items-center text-base">
+        <summary className="lg:text-3xl tracking-wide font-light flex justify-between items-center text-base">
           Decentralized Peer-to-Peer Lending Deals
-          <MoveDownRight className="group-open:rotate-[45deg] w-[50px] lg:w-[60px] transition-transform" size={60} color="#fff" strokeWidth={1.25} />
+          <MoveDownRight
+            className="group-open:rotate-[85deg] 
+                 group-open:scale-50 
+                 w-[50px] 
+                 lg:w-[60px] 
+                 transition-transform 
+                 duration-800 
+                 ease-in-out"
+            size={60}
+            strokeWidth={1.25}
+          />
         </summary>
         <p className="mt-2 ml-4 lg:text-xl font-thin font-opensans text-sm">
           Peer Protocols decentralized peer-to-peer marketplace serves as the
@@ -60,4 +109,4 @@ const About = () => {
   );
 };
 
-export default About;
+export default About;
\ No newline at end of file
diff --git a/frontend/src/components/LandingPage/Blog.tsx b/frontend/src/components/LandingPage/Blog.tsx
index c22d317..23cf477 100644
--- a/frontend/src/components/LandingPage/Blog.tsx
+++ b/frontend/src/components/LandingPage/Blog.tsx
@@ -13,29 +13,38 @@ const BlogPost: React.FC<BlogPostProps> = ({ title, summary }) => {
   const { isDarkMode } = useContext(DarkModeContext);
 
   return (
-    <div className="rounded-lg overflow-hidden shadow-lg border border-black mb-6 md:mb-0">
-      <Image
-        src="/images/Deon.png"
-        alt="Card image"
-        width={30}
-        height={4}
-        className="w-full"
-      />
-      <div className="px-6 py-4">
-        <div className="font-bold text-xl text-black mb-2">{title}</div>
-        <p className={`${isDarkMode ? "text-white" : "text-gray-700 text-left"}`}>
-          {summary}
-        </p>
+    <div
+      className={`rounded-lg overflow-hidden shadow-lg border border-black bg-white text-black h-full flex flex-col m-8 md:m-0 ${isDarkMode && 'border-white'}`}
+    >
+      <div className="w-full h-48 relative">
+        <Image
+          src="/images/Deon.png"
+          alt="Card image"
+          fill
+          className="object-cover"
+        />
       </div>
-      <div className="flex lg:justify-center justify-start px-8 my-4">
-        <Link href="/blog">
-        <button className="bg-black text-white py-2 px-4 rounded border border-transparent hover:bg-white hover:text-black hover:border-black">
-          See More
-        </button>
+      <div className="px-6 py-4 flex-grow flex flex-col h-64">
+        <div className='font-bold text-xl mb-6 md:mb-11 h-14 text-black'>
+          {title}
+        </div>
+        <div className="flex-grow overflow-hidden">
+          <p className='text-black text-left line-clamp-5'>
+            {summary}
+          </p>
+        </div>
+      </div>
+      <div className="px-6 pb-6 pt-2">
+        <Link href="/blog" className="block w-full">
+          <button
+            className='py-2 px-4 rounded border border-transparent bg-black text-white hover:bg-white hover:text-black hover:border-black w-full'
+          >
+            See More
+          </button>
         </Link>
       </div>
     </div>
   );
 };
 
-export default BlogPost;
+export default BlogPost;
\ No newline at end of file
diff --git a/frontend/src/components/LandingPage/Features.tsx b/frontend/src/components/LandingPage/Features.tsx
index 8ea5e6f..e2a6ea1 100644
--- a/frontend/src/components/LandingPage/Features.tsx
+++ b/frontend/src/components/LandingPage/Features.tsx
@@ -14,7 +14,9 @@ const Features = () => {
     >
 
       {/* Card 1 */}
-      <div className="w-[19rem] lg:w-[26rem] h-[100%] pb-3 bg-black z-10 relative rounded-2xl">
+      <div className={`w-[19rem] lg:w-[26rem] h-[100%] pb-3 z-10 relative rounded-2xl 
+  ${isDarkMode ? "bg-white" : "bg-black"}`}>
+
         <div className={`border-2 border-current z-20 w-[18.5rem] lg:w-[25rem] lg:py-16 lg:px-10 rounded-2xl lg:shadow-custom shadow-custom2 mb-3 p-8 ${isDarkMode ? "bg-black text-white" : "bg-white text-black"
           }`}>
           <div className="flex">
@@ -23,7 +25,7 @@ const Features = () => {
               width={40}
               height={40}
               alt=""
-              className="lg:w-[40px] w-6"
+              className={`lg:w-[40px] w-6 ${isDarkMode ? "invert" : ""}`}
             />
             <p className="font-semibold lg:py-5 p-1">
               Transparent Marketplace
@@ -36,8 +38,10 @@ const Features = () => {
       </div>
 
       {/* Card 2 */}
-      <div className="w-[19rem] lg:w-[26rem] h-[100%] pb-3 bg-black z-10 relative rounded-2xl">
-        <div className={`border-2 border-current z-20 w-[18.5rem] lg:w-[25rem] lg:py-16 lg:px-10 rounded-2xl lg:shadow-custom shadow-custom2 mb-3 p-8 ${isDarkMode ? "bg-black text-white" : "bg-white text-black"
+      <div className={`w-[19rem] lg:w-[26rem] h-[100%] pb-3 z-10 relative rounded-2xl 
+  ${isDarkMode ? "bg-white" : "bg-black"}`}>
+
+        <div className={`border-2 border-current z-20 w-[18.5rem] lg:w-[25rem] lg:py-16 lg:px-10 rounded-2xl  lg:shadow-custom shadow-custom2 mb-3 p-8 ${isDarkMode ? "bg-black text-white" : "bg-white text-black"
           }`}>
           <div className="flex">
             <Image
@@ -45,7 +49,7 @@ const Features = () => {
               width={40}
               height={40}
               alt=""
-              className="lg:w-[40px] w-6"
+              className={`lg:w-[40px] w-6 ${isDarkMode ? "invert" : ""}`}
             />
             <p className="font-semibold lg:py-5 p-1">
               User-Centric Interface
@@ -59,7 +63,9 @@ const Features = () => {
 
 
       {/* Card 3 */}
-      <div className="w-[19rem] lg:w-[26rem] h-[100%] pb-3 bg-black z-10 relative rounded-2xl">
+      <div className={`w-[19rem] lg:w-[26rem] h-[100%] pb-3 z-10 relative rounded-2xl 
+  ${isDarkMode ? "bg-white" : "bg-black"}`}>
+
         <div className={`border-2 border-current z-20 w-[18.5rem] lg:w-[25rem] lg:py-16 lg:px-10 rounded-2xl lg:shadow-custom shadow-custom2 mb-3 p-8 ${isDarkMode ? "bg-black text-white" : "bg-white text-black"
           }`}>
           <div className="flex items-center">
@@ -68,7 +74,7 @@ const Features = () => {
               width={40}
               height={40}
               alt=""
-              className="lg:w-[40px] lg:h-[40px] w-6"
+              className={`lg:w-[40px] w-6 ${isDarkMode ? "invert" : ""}`}
             />
             <p className="font-semibold lg:py-5 p-1">
               Transparent Marketplace