diff --git a/index.html b/index.html
index e70eacb5..adf65010 100644
--- a/index.html
+++ b/index.html
@@ -117,12 +117,13 @@ <h1>Code Run <br> <span class="blueCol">Contribute</span></h1>
     <!-- ================================ Challenge Section Start Here ================================ -->
     <section id="challengeSection">
         <div class="container">
-            <div class="row challengeContainer">
+            <div class="row challengeContainer  g-3 align-items-stretch">
 
                 <!-- ==== Card 1 ==== -->
-                <div class="col-12 col-md-4">
-                    <div class="card">
-                        <div class="card-body">
+                <div class="col-12 col-md-4 d-flex">
+                    <div class="card flex-fill d-flex flex-column">
+                        <div class="card-body d-flex flex-column">
+                    
 
                             <div class="card-TopContainer">
                                 <h5 class="card-Header">Frontend Challenges</h5>
@@ -145,9 +146,10 @@ <h5 class="card-Header">Frontend Challenges</h5>
                 </div>
 
                 <!-- ==== Card 2 ==== -->
-                <div class="col-12 col-md-4">
-                    <div class="card">
-                        <div class="card-body">
+                <div class="col-12 col-md-4 d-flex">
+                    <div class="card flex-fill d-flex flex-column">
+                        <div class="card-body d-flex flex-column">
+                    
 
                             <div class="card-TopContainer">
                                 <h5 class="card-Header">JavaScript Logics</h5>
@@ -169,9 +171,9 @@ <h5 class="card-Header">JavaScript Logics</h5>
                 </div>
 
                 <!-- ==== Card 3 ==== -->
-                <div class="col-12 col-md-4">
-                    <div class="card">
-                        <div class="card-body">
+                <div class="col-12 col-md-4 d-flex">
+                    <div class="card flex-fill d-flex flex-column">
+                        <div class="card-body d-flex flex-column">
 
                             <div class="card-TopContainer">
                                 <h5 class="card-Header">Backend Basics</h5>
@@ -194,9 +196,9 @@ <h5 class="card-Header">Backend Basics</h5>
 
 
                 <!-- ==== Card 4 ==== -->
-                <div class="col-12 col-md-4">
-                    <div class="card">
-                        <div class="card-body">
+                <div class="col-12 col-md-4 d-flex">
+                    <div class="card flex-fill d-flex flex-column">
+                        <div class="card-body d-flex flex-column">
 
                             <div class="card-TopContainer">
                                 <h5 class="card-Header">UI Design Tasks</h5>
@@ -217,9 +219,9 @@ <h5 class="card-Header">UI Design Tasks</h5>
                 </div>
 
                 <!-- ==== Card 5 ==== -->
-                <div class="col-12 col-md-4">
-                    <div class="card">
-                        <div class="card-body">
+                <div class="col-12 col-md-4 d-flex">
+                    <div class="card flex-fill d-flex flex-column">
+                        <div class="card-body d-flex flex-column">
 
                             <div class="card-TopContainer">
                                 <h5 class="card-Header">Open Source Challenges</h5>
@@ -230,7 +232,7 @@ <h5 class="card-Header">Open Source Challenges</h5>
                             <p class="card-Text">Practice real world contribution workflows using Git and GitHub. You'll
                                 learn how to contribute to projects, manage pull requests.</p>
 
-                            <div class="card-CTAButton">
+                            <div class="card-CTAButton mt-auto">
                                 <!-- === Create webpages of open source challenge and add link here === -->
                                 <a href="#" class="card-Btn">Join Now</a>
                             </div>
diff --git a/styles.css b/styles.css
index 3f821f22..c9a15bf2 100644
--- a/styles.css
+++ b/styles.css
@@ -417,7 +417,7 @@ body {
 }
 
 /* Card Styles */
-.card {
+/* .card {
   width: 100%;
   max-width: 300px;
   min-width: 200px;
@@ -435,6 +435,40 @@ body {
   align-items: center;
   flex-direction: column;
   cursor: pointer;
+} */
+.card {
+  flex: 1;
+  /* width: 100%; */
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  max-width: 300px;
+  /* min-width: 200px; */
+  height: 100%;
+  min-height: 350px;
+  background-color: var(--background-color, #292929);
+  margin: 10px;
+  border-radius: 10px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.24);
+  border: 2px solid rgba(7, 7, 7, 0.12);
+  font-size: 16px;
+  transition: all 0.3s ease;
+  position: relative;
+  align-items: stretch;
+  cursor: pointer;
+}
+.card-body {
+  display: flex;
+  flex-direction: column;
+  flex: 1; /* Makes card-body take all available space */
+  padding: 20px;
+}
+
+.card-CTAButton {
+  margin-top: auto; /* Push the button to the bottom */
+}
+.challengeContainer > .col-md-4 {
+  display: flex;
 }
 
 [data-theme="dark"] .card {