diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index 4bedd760..237455a3 100644
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -3,50 +3,65 @@
 @section('content')
 
 <style>
-    p.text-primary{
-        font-size:12px;
-        color:#1a5a96;
-        font-weight:bold;
+    .home-tiles .card {
+        border-radius: 12px;
+        border: 2px solid #ebedec;
+        background-color: #f8fafc;
     }
 
-    .card {
-        border-radius: 12px;
+    .home-tiles .card:hover {
+        background-color: #1a5a96;
+        color: white;
+    }
+
+    .home-tiles .card:hover i {
+      text-decoration-color: white;
+      color:white;
     }
 
-    .card:hover span{
+    .home-tiles .card span {
+      font-size: 22px;
+    }
+
+    .home-tiles .card:hover span{
         text-decoration-color: white;
         color:white;
         text-decoration: underline;
     }
 
-    .card:hover p{
+    .home-tiles .card:hover p {
         text-decoration-color: white;
         color:white;
         text-decoration: underline;
     }
+
 </style>
 
 <div class="container mb-4">
   <div class="row">
     <div class="col-12 col-xl-12 ">
-        <h1 class="text-center">Welcome, {{ Auth::user()->name }}</h1>
-        <p class="text-center h5"><b>Choose from the options below:</b></p>
+        <h1 class="text-center text-primary">Welcome, {{ Auth::user()->name }}</h1>
+        <p class="text-center h5 text-primary"><b>Choose from the options below:</b></p>
     </div>
   </div>
 </div>  
 
 
-<div class="container">
-  <div class="row" style="min-height:550px" >
+<div class="container home-tiles">
+  <div class="row" style="min-height:580px" >
 
     <div class="col col-md-6">
-      <div class="card card_hook" style="height: 100%">
-        <a href="{{route('donations.list')}}" class="card-body d-table">
-          <div class="d-table-cell align-middle text-center">
-            <img src="/svgs/give.svg" style="color:white;" alt="Connect" height="55">
-            <p class="text-primary "> <span style="font-size:22px;" >Donations </span></p>
-            <p style="color:black;">Support the charities of your choice with payroll deductions in any amount.</p>
-          </div>  
+      <div class="container h-100">
+
+        <a  href="{{route('donations.list')}}">
+          <div class="card card_hook d-table" style="height: 100%">
+              <div class="card-body d-table-cell align-middle text-center">
+                {{-- <img src="/svgs/give.svg" style="color:white;" alt="Connect" height="55"> --}}
+                <i class="nav-icon fa fa-hand-holding-heart fa-2x"></i><br>
+                <p class="font-weight-bold"> <span>Donations</span></p>
+                <p >Support the charities of your choice with payroll deductions in any amount.</p>
+              </div>  
+          </div>
         </a>
       </div>
     </div>
@@ -55,59 +70,63 @@
       <div class="container h-100" >
           <div class="row h-50 pb-2">
             <div class="col col-md-6">
+              <a href="#" data-toggle="modal" data-target="#learn-more-modal">                  
+                <div class="card px-2 d-table" style="height: 100%">
+                    <div class="card-body d-table-cell align-middle text-center">
+                      {{-- <span  class="card-body text-center" data-toggle="modal" data-target="#learn-more-modal">                   --}}
+                        <i class="nav-icon fas fa-info-circle fa-2x"></i><br>
+                        <p class="font-weight-bold"><span></span></p>
+                        <p class="">Learn more about PECSF and how to donate</p>
+                      {{-- </span> --}}
+                    </div>
 
-              <div class="card card_hook px-4 d-table" style="height: 100%">
-                <div class="d-table-cell align-middle text-center">
-                  <a  class="card-body text-center" data-toggle="modal" data-target="#learn-more-modal">
-                      <i class="x nav-icon fas fa-info-circle  fa-2x bottom-right"></i><br>
-                      <p style="color:black;">Learn more about PECSF and how to donate</p>
-                  </a>
                 </div>
-              </div>
-
+              </a>                    
             </div>
 
             <div class="col col-md-6">
-
-              <div class="card card_hook px-4 d-table" style="height: 100%">
-                <div class="d-table-cell align-middle text-center">
-                  <a class="card-body text-center"  href="{{route('volunteering.index')}}">
-                    <i class="x nav-icon fas fa-hands-helping fa-2x"></i>
-                    <p class="text-primary "> <span style="font-size:20px;">Volunteering</span></p>
-                    <p class="" style="color:black;"> Looking to do more than just donate? Volunteer to help run a campaign or host an event.</p>
-                  </a>
+              <a href="{{route('volunteering.index')}}">
+                <div class="card px-2 d-table" style="height: 100%">
+                  <div class="card-body d-table-cell align-middle text-center">
+                    {{-- <a class="card-body text-center"  href="{{route('volunteering.index')}}"> --}}
+                      <i class="x nav-icon fas fa-hands-helping fa-2x"></i>
+                      <p class="font-weight-bold"><span >Volunteering</span></p>
+                      <p class="" > Looking to do more than just donate? Volunteer to help run a campaign or host an event.</p>
+                    {{-- </a> --}}
+                  </div>
                 </div>
-              </div>
-
+              </a>
             </div>
 
           </div>
+
           <div class="row h-50 pt-2">
             <div class="col col-md-6">
-
-              <div class="card card_hook px-4 d-table" style="height: 100%">
-                <div class="d-table-cell align-middle text-center">
-                  <a href="{{route('bank_deposit_form')}}" class="card-body">
-                      <i class="x nav-icon fa-solid fas fa-money-check-alt fa-2x bottom-right"></i><br>
-                      <p class="text-primary "> <span style="font-size:22px;" >eForm </span></p>
-                      <p style="color:black;">Submit for your cash, cheque, fundraising or gaming bank deposit form.</p>
-                  </a>
+              <a href="{{route('bank_deposit_form')}}">
+                <div class="card px-2 d-table" style="height: 100%">
+                  <div class="card-body d-table-cell align-middle text-center">
+                    {{-- <a href="{{route('bank_deposit_form')}}" class="card-body"> --}}
+                        <i class="nav-icon fas fa-money-check-alt fa-2x "></i><br>
+                        <p class="font-weight-bold "><span>eForm</span></p>
+                        <p >Submit for your cash, cheque, fundraising or gaming bank deposit form.</p>
+                    {{-- </a> --}}
+                  </div>
                 </div>
-              </div>
-
+              </a>
             </div>
+
             <div class="col col-md-6">
-              
-              <div class="card card_hook px-4 d-table" style="height: 100%">
-                <div class="d-table-cell align-middle text-center">
-                  <a href="{{route('contact')}}" class="card-body">
-                      <i class="x nav-icon fas fa-question-circle fa-2x "></i>
-                      <p class="text-primary ">  <span style="font-size:22px;">Contact </span></p>
-                      <p class="">Got questions? &nbsp;&nbsp; We are here to help!</p>
-                  </a>
+              <a href="{{route('contact')}}">              
+                <div class="card px-2 d-table" style="height: 100%">
+                  <div class="card-body d-table-cell align-middle text-center">
+                    {{-- <a href="{{route('contact')}}" class="card-body"> --}}
+                        <i class="nav-icon fas fa-question-circle fa-2x "></i><br>
+                        <p class="text-primary font-weight-bold"><span style="font-size:22px;">Contact</span></p>
+                        <p class="">Got questions? &nbsp;We are here to help!</p>
+                    {{-- </a> --}}
+                  </div>
                 </div>
-              </div>
-
+              </a>
             </div>
           </div>
         </div>
@@ -244,103 +263,6 @@
 
 @push('js')
 <script>
-    var mouseOutTimer = false;
-
-    function reset(){
-        $(".card_hook").css("background","white");
-        $(".card_hook").find("span").css("color","#1a5a96");
-        $(".card_hook").find("i").css("color","#1a5a96");
-        $(".card_hook").find("p").css("color","#000");
-        $(".card_hook").find("p.text-primary").css("color","#1a5a96");
-        $(".card_hook").find("img").css("filter","none");
-    }
-
-    $(".card_hook").mouseout(function(){
-        clearTimeout(mouseOutTimer);
-        mouseOutTimer = setTimeout(function(){
-            reset();
-        },200);
-    });
-
-    $(".card_hook").mouseover(function(){
-        clearTimeout(mouseOutTimer);
-    });
-
-    $(".card_hook").hover(function(){
-        reset();
-        $(this).css("background","#1a5a96");
-        $(this).find("span").css("color","#fff");
-        $(this).find("i").css("color","#fff");
-        $(this).find("img").css("filter","invert(100%) sepia(100%) saturate(0%) hue-rotate(248deg) brightness(106%) contrast(106%)");
-        $(this).find("p").css("color","#fff");
-    });
-
-    $(".card_hook").mouseout(function(){
-      /*  $(".card_hook").removeClass("col-md-3");
-        $(".card_hook").removeClass("col-md-5");
-
-
-
-        $(".card_hook")[1].addClass("col-md-5");
-        $(".card_hook")[0].addClass("col-md-3");
-        $(".card_hook")[2].addClass("col-md-3");
-
-*/
-    });
-
-function sortTable(n) {
-  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
-  table = document.getElementById("myTable2");
-  switching = true;
-  // Set the sorting direction to ascending:
-  dir = "asc";
-  /* Make a loop that will continue until
-  no switching has been done: */
-  while (switching) {
-    // Start by saying: no switching is done:
-    switching = false;
-    rows = table.rows;
-    /* Loop through all table rows (except the
-    first, which contains table headers): */
-    for (i = 1; i < (rows.length - 1); i++) {
-      // Start by saying there should be no switching:
-      shouldSwitch = false;
-      /* Get the two elements you want to compare,
-      one from current row and one from the next: */
-      x = rows[i].getElementsByTagName("TD")[n];
-      y = rows[i + 1].getElementsByTagName("TD")[n];
-      /* Check if the two rows should switch place,
-      based on the direction, asc or desc: */
-      if (dir == "asc") {
-        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
-          // If so, mark as a switch and break the loop:
-          shouldSwitch = true;
-          break;
-        }
-      } else if (dir == "desc") {
-        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
-          // If so, mark as a switch and break the loop:
-          shouldSwitch = true;
-          break;
-        }
-      }
-    }
-    if (shouldSwitch) {
-      /* If a switch has been marked, make the switch
-      and mark that a switch has been done: */
-      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
-      switching = true;
-      // Each time a switch is done, increase this count by 1:
-      switchcount ++;
-    } else {
-      /* If no switching has been done AND the direction is "asc",
-      set the direction to "desc" and run the while loop again. */
-      if (switchcount == 0 && dir == "asc") {
-        dir = "desc";
-        switching = true;
-      }
-    }
-  }
-}
+  
 </script>
 @endpush