diff --git a/about.html b/about.html
index a442527..23d1bc8 100644
--- a/about.html
+++ b/about.html
@@ -177,38 +177,31 @@ <h1 class="heading">About Us</h1>
     <img src="https://source.unsplash.com/1600x900/?quote" alt="quote" class="slide active fade" />
     <img src="https://source.unsplash.com/1600x900/?quote" alt="quote" class="slide fade" />
   </div>
-  <div class="cards-container">
-    <div class="card bg-1">
-      <div class="card-content">
-        <h3>Title</h3>
-        <div>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. At
-          molestias voluptatem laboriosam esse, deserunt eaque est fugiat
-          vitae itaque unde aut quasi soluta quod a perferendis voluptatibus,
-          rerum reiciendis quam.
+  <div class="cards-container" style="display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; padding: 20px; background-color: #f4f4f4;">
+    <div class="card" style="border-radius: 10px; box-shadow: 0 4px 20px rgba(0, 0, 255, 0.3); width: 300px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; background-color: white; transition: transform 0.3s;" onmouseover="this.style.transform='translateY(-5px)'" onmouseout="this.style.transform='translateY(0)'">
+        <div class="card-content" style="padding: 15px; text-align: center; flex-grow: 1;">
+            <h3 style="font-size: 24px; margin: 0; color: white; font-weight: bold; background-color: #007BFF; padding: 10px;">Title</h3>
+            <div style="font-size: 14px; color: #666; margin: 10px 0;">Lorem ipsum dolor sit amet consectetur adipisicing elit. At molestias voluptatem laboriosam esse, deserunt eaque est fugiat vitae itaque unde aut quasi soluta quod a perferendis voluptatibus, rerum reiciendis quam.</div>
         </div>
-        <a href="#" class="goto-btn">Open</a>
-      </div>
+        <a href="#" class="goto-btn" style="display: inline-block; background-color: #ff5722; color: white; border: none; border-radius: 5px; padding: 10px 15px; text-decoration: none; box-shadow: 0 2px 10px rgba(255, 87, 34, 0.5); transition: background-color 0.3s, transform 0.3s; margin: 10px auto; width: 80%; text-align: center;" onmouseover="this.style.backgroundColor='#e64a19'; this.style.transform='translateY(-2px)'" onmouseout="this.style.backgroundColor='#ff5722'; this.style.transform='translateY(0)'">Open</a>
     </div>
-    <div class="card bg-2">
-      <div class="card-content">
-        <h3>Todo Manager</h3>
-        <div>Procrastination is opportunity's natural assassin</div>
-        <a href="to-doLISt/index.html" class="goto-btn">Open</a>
-      </div>
+    
+    <div class="card" style="border-radius: 10px; box-shadow: 0 4px 20px rgba(0, 0, 255, 0.3); width: 300px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; background-color: white; transition: transform 0.3s;" onmouseover="this.style.transform='translateY(-5px)'" onmouseout="this.style.transform='translateY(0)'">
+        <div class="card-content" style="padding: 15px; text-align: center; flex-grow: 1;">
+            <h3 style="font-size: 24px; margin: 0; color: white; font-weight: bold; background-color: #007BFF; padding: 10px;">Todo Manager</h3>
+            <div style="font-size: 14px; color: #666; margin: 10px 0;">Procrastination is opportunity's natural assassin</div>
+        </div>
+        <a href="to-doLISt/index.html" class="goto-btn" style="display: inline-block; background-color: #ff5722; color: white; border: none; border-radius: 5px; padding: 10px 15px; text-decoration: none; box-shadow: 0 2px 10px rgba(255, 87, 34, 0.5); transition: background-color 0.3s, transform 0.3s; margin: 10px auto; width: 80%; text-align: center;" onmouseover="this.style.backgroundColor='#e64a19'; this.style.transform='translateY(-2px)'" onmouseout="this.style.backgroundColor='#ff5722'; this.style.transform='translateY(0)'">Open</a>
     </div>
-    <div class="card bg-3">
-      <div class="card-content">
-        <h3>Countdown Timer</h3>
-        <div>
-          A simple web app for setting up a Countdown from right now to a
-          specific date
+    
+    <div class="card" style="border-radius: 10px; box-shadow: 0 4px 20px rgba(0, 0, 255, 0.3); width: 300px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; background-color: white; transition: transform 0.3s;" onmouseover="this.style.transform='translateY(-5px)'" onmouseout="this.style.transform='translateY(0)'">
+        <div class="card-content" style="padding: 15px; text-align: center; flex-grow: 1;">
+            <h3 style="font-size: 24px; margin: 0; color: white; font-weight: bold; background-color: #007BFF; padding: 10px;">Countdown Timer</h3>
+            <div style="font-size: 14px; color: #666; margin: 10px 0;">A simple web app for setting up a Countdown from right now to a specific date</div>
         </div>
-        <a href="components/CountdownTimer.html" class="goto-btn">Open</a>
-      </div>
+        <a href="components/CountdownTimer.html" class="goto-btn" style="display: inline-block; background-color: #ff5722; color: white; border: none; border-radius: 5px; padding: 10px 15px; text-decoration: none; box-shadow: 0 2px 10px rgba(255, 87, 34, 0.5); transition: background-color 0.3s, transform 0.3s; margin: 10px auto; width: 80%; text-align: center;" onmouseover="this.style.backgroundColor='#e64a19'; this.style.transform='translateY(-2px)'" onmouseout="this.style.backgroundColor='#ff5722'; this.style.transform='translateY(0)'">Open</a>
     </div>
-  
-  </div>
+</div>
   <script>
     let slideIndex = 0;
     const showSlides = async () => {
diff --git a/blog.css b/blog.css
index 229a7e2..5951e73 100644
--- a/blog.css
+++ b/blog.css
@@ -1,58 +1,108 @@
-.card-container{
-   
+.card-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 2rem; /* Consistent spacing between cards */
+    padding: 2rem;
 }
 
-.card{
-    display: inline-block;
-    margin: 3rem;
-    background-color: rgb(192 196 255);
+.card {
+    background-color: #ffffff;
     border-radius: 1rem;
-    box-shadow: rgb(158, 153, 153) 2px 2px 13px;
+    box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 20px;
+    transition: transform 0.3s, box-shadow 0.3s;
+    overflow: hidden;
+    width: 280px; /* Adjusted width for better card size */
+    height: 400px; /* Reduced height for compact design */
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    position: relative;
 }
 
-.imgs{
-    height: 100%;
+.imgs {
+    height: 160px; /* Adjusted height for better proportions */
     width: 100%;
-    background-position: cover;
+    background-position: center;
+    background-size: cover;
+    border-top-left-radius: 1rem;
+    border-top-right-radius: 1rem;
+    background-color: #cccccc;
 }
 
-.heading{
+.heading {
     text-align: center;
-    background-color: rgb(194 156 215);
+    background-color: #4a90e2;
     margin: 0;
-    padding: 0;
+    padding: 1rem;
+    font-size: 1.1rem;
+    font-weight: bold;
+    color: #ffffff !important ; /* Set heading text color to white */
+    line-height: 1.3; /* Improved line height for readability */
+    height: auto;
+    display: -webkit-box;
+    -webkit-line-clamp: 2; /* Limit to 2 lines */
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-word; /* Break long words gracefully */
 }
 
-.author{
-   text-align: center;
-   text-transform: capitalize;
-   background-color: rgb(219 208 224);
-   margin: 0;
-   padding: 0;
+.author {
+    text-align: center;
+    text-transform: capitalize;
+    background-color: #e1f5fe;
+    margin: 0;
+    padding: 0.5rem;
+    font-size: 1rem;
+    font-style: italic;
+    color: #333;
 }
 
-.read{
-    padding: 0.2rem;
-    margin: 2rem;
-    justify-content: center;
-    place-items: center;
+.read {
+    padding: 0.6rem 1.2rem; /* Adjusted padding for better button size */
+    margin: 1rem auto 0 auto; /* Center button with consistent space on top */
+    margin-bottom: 1.5rem; /* Add space below the button */
+    display: block;
     text-align: center;
     outline: none;
     border: none;
-    position: relative;
-    left: 2.5rem;
     border-radius: 7px;
-    background-color: blue;
+    background-color: #ff5722;
     color: white;
-    box-shadow: 2px 2px 13px rgb(141, 132, 132);
+    box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 15px;
+    transition: background-color 0.3s, transform 0.3s;
+    text-transform: uppercase;
+    font-size: 1rem;
+    cursor: pointer;
 }
 
-.card:hover{
-  transition: 0.2s;
-  transform: scale(1.02);
+.card:hover {
+    transform: translateY(-5px);
+    box-shadow: rgba(0, 0, 0, 0.3) 0px 8px 25px;
 }
 
-.read:hover{
-    transform: scale(0.9);
-    transition: 0.3s;
-}
\ No newline at end of file
+.read:hover {
+    background-color: #e64a19;
+    transform: scale(1.05);
+}
+
+.card p {
+    padding: 0 1rem;
+    font-size: 1rem;
+    line-height: 1.4rem;
+    color: #666;
+}
+
+/* Responsive Design for Smaller Screens */
+@media (max-width: 768px) {
+    .card-container {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .card {
+        width: 90%; /* Take up more width on small screens */
+        margin-bottom: 1.5rem;
+    }
+}