diff --git a/src/Analysim.Web/ClientApp/src/app/home/home.component.html b/src/Analysim.Web/ClientApp/src/app/home/home.component.html
index 76962df..a7e9603 100644
--- a/src/Analysim.Web/ClientApp/src/app/home/home.component.html
+++ b/src/Analysim.Web/ClientApp/src/app/home/home.component.html
@@ -28,30 +28,39 @@ <h1 class="display-4 text-white font-weight-bold mb-2">AnalySim</h1>
     <div class="col-md-10">
       <div class="row justify-content-center">
         <!-- Website Service1 -->
+
         <div class="col-md-4 mb-4 text-center">
-          <h3>Register for AnalySim</h3>
-                <hr>
-                <p class="lead">Begin building your data or colaborate with a team</p>
-                <a [routerLink]='["/register"]'>Register <i class="fa fa-angle-right fa-xs"></i><i class="fa fa-angle-right fa-xs"></i></a>
-                <!-- <button class="btn btn-outline-success btn-lg " [routerLink]='["/register"]'>Register &raquo;</button> -->
+          <div class="custom-card">
+            <h3>Register for AnalySim</h3>
+            <hr>
+            <p class="lead">Begin building your data or collaborate with a team</p>
+            <a [routerLink]='["/register"]' class="btn btn-primary-custom">
+              Register <i class="fa fa-angle-right fa-xs"></i><i class="fa fa-angle-right fa-xs"></i>
+            </a>
+          </div>
         </div>
+        
         <!-- Website Service2 -->
         <div class="col-md-4 mb-4 text-center">
+          <div class="custom-card">
           <h3>Create your own project</h3>
                 <hr>
                 <p class="lead">Create your own project and share your ideas </p>
-                <a [routerLink]='["/project/create"]'>Create Project <i class="fa fa-angle-right fa-xs"></i><i class="fa fa-angle-right fa-xs"></i></a>
+                <a [routerLink]='["/project/create"]' class="btn btn-primary-custom">Create Project <i class="fa fa-angle-right fa-xs"></i><i class="fa fa-angle-right fa-xs"></i></a>
                 <!-- <button class="btn btn-outline-success btn-lg " [routerLink]='["/project/create"]'>Create Project &raquo;</button> -->
+              </div>
         </div>
         <!-- Website Service2 -->
         <div class="col-md-4 mb-4 text-center">
+          <div class="custom-card">
           <h3>Browse our projects</h3>
                 <hr>
                 <p class="lead">Not ready yet? Get inspired from our projects</p>
-                <a [routerLink]='["/explore"]'>Explore Project <i class="fa fa-angle-right fa-xs"></i><i class="fa fa-angle-right fa-xs"></i></a>
+                <a [routerLink]='["/explore"]' class="btn btn-primary-custom">Explore Project <i class="fa fa-angle-right fa-xs"></i><i class="fa fa-angle-right fa-xs"></i></a>
                 <!-- <button class="btn btn-outline-success btn-lg " [routerLink]='["/explore"]'>Explore Project &raquo;</button> -->
         </div>
       </div>
+      </div>
     </div>
     
   </div> <!-- Row Services End -->
diff --git a/src/Analysim.Web/ClientApp/src/app/home/home.component.scss b/src/Analysim.Web/ClientApp/src/app/home/home.component.scss
index fc6d8aa..58571b2 100644
--- a/src/Analysim.Web/ClientApp/src/app/home/home.component.scss
+++ b/src/Analysim.Web/ClientApp/src/app/home/home.component.scss
@@ -111,3 +111,94 @@ font-family:var(--bs-body-font-family) !important;
         }
     }
 }
+
+
+.custom-card {
+  background: rgba(255, 255, 255, 0.15); // Semi-transparent for glass effect
+  backdrop-filter: blur(10px);
+  border-radius: 15px;
+  padding: 25px;
+  box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.15);
+  transition: all 0.4s ease-in-out;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+
+  &:hover {
+    transform: translateY(-12px) scale(1.02);
+    box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.25);
+  }
+
+  h3 {
+    font-size: 1.8rem;
+    color: #fff;
+    font-weight: 700;
+  }
+
+  p {
+    color: #ddd;
+    font-size: 1.2rem;
+  }
+}
+
+
+
+.custom-card {
+background: #ffffff; // Clean white background
+border-radius: 12px;
+padding: 20px;
+box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); // Soft shadow for depth
+transition: all 0.3s ease-in-out;
+border: 1px solid #ddd;
+text-align: center;
+
+&:hover {
+  transform: translateY(-8px);
+  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15);
+}
+
+h3 {
+  font-size: 1.6rem;
+  color: #021c36; // Dark blue for professionalism
+  font-weight: 500;
+}
+
+p {
+  color: #555;
+  font-size: 1.3rem;
+}
+
+// Responsive adjustments
+@media (max-width: 768px) {
+  padding: 15px;
+  h3 {
+    font-size: 1.4rem;
+  }
+  p {
+    font-size: 1rem;
+  }
+}
+}
+
+// Button styling
+.btn-primary-custom {
+background: #0056b3;
+color: white;
+padding: 10px 20px;
+border-radius: 6px;
+font-size: 1rem;
+font-weight: 400;
+display: inline-block;
+text-transform: uppercase;
+transition: all 0.3s ease-in-out;
+position: relative;
+overflow: hidden;
+text-decoration: none;
+
+&:hover {
+  background: #003366; // Darker blue for hover
+  transform: scale(1.05);
+}
+
+&:active {
+  transform: scale(0.98);
+}
+}
\ No newline at end of file