diff --git a/12-order-summary-component-thymeleaf/src/main/resources/templates/index.html b/12-order-summary-component-thymeleaf/src/main/resources/templates/index.html
index 4026ae2..da3429e 100644
--- a/12-order-summary-component-thymeleaf/src/main/resources/templates/index.html
+++ b/12-order-summary-component-thymeleaf/src/main/resources/templates/index.html
@@ -61,17 +61,17 @@
             <p class="font-bold text-sm text-dark-blue md:text-base">Annual Plan</p>
             <p class="text-desaturated-blue text-sm md:text-base">$59.99/year</p>
           </div>
-          <button class="underline text-xs text-bright-blue font-bold">
+          <button class="underline text-xs text-bright-blue font-bold hover:no-underline hover:text-warm-blue">
             Change
           </button>
         </div>
 
         <button
-          class="bg-bright-blue rounded-xl drop-shadow-2xl text-white font-bold py-3 my-6 w-[calc(100%-3rem)] md:w-[calc(100%-6rem)] md:my-8"
+          class="bg-bright-blue rounded-xl drop-shadow-2xl text-white font-bold py-3 my-6 w-[calc(100%-3rem)] md:w-[calc(100%-6rem)] md:my-8 hover:bg-warm-blue"
         >
           Proceed to Payment
         </button>
-        <button class="text-desaturated-blue font-bold">Cancel Order</button>
+        <button class="text-desaturated-blue font-bold hover:text-dark-blue">Cancel Order</button>
       </div>
     </div>
 
diff --git a/12-order-summary-component-thymeleaf/tailwind.config.js b/12-order-summary-component-thymeleaf/tailwind.config.js
index 31d01a6..f335bd0 100644
--- a/12-order-summary-component-thymeleaf/tailwind.config.js
+++ b/12-order-summary-component-thymeleaf/tailwind.config.js
@@ -9,6 +9,7 @@ module.exports = {
         'very-pale-blue': 'hsl(225, 100%, 98%)',
         'desaturated-blue': 'hsl(224, 23%, 55%)',
         'dark-blue': 'hsl(223, 47%, 23%)',
+        'warm-blue': 'hsl(245, 83%, 68%)',
       },
       fontFamily: {
         'sans': ['Red Hat Display', 'sans-serif'], // This will set Roboto as the default sans font