diff --git a/app/components/course-page/course-stage-step/community-solution-card.hbs b/app/components/course-page/course-stage-step/community-solution-card.hbs
index cdd372586..a0c71b222 100644
--- a/app/components/course-page/course-stage-step/community-solution-card.hbs
+++ b/app/components/course-page/course-stage-step/community-solution-card.hbs
@@ -13,7 +13,7 @@
 
   <div class={{if this.isExpanded "visible" "hidden"}}>
     <button
-      class="mb-3 border hover:bg-gray-100 hover:border-gray-300 transition-colors px-4 py-5 text-gray-700 text-sm rounded flex flex-col items-center w-full group"
+      class="mb-3 border border-gray-300 bg-gradient-to-br from-white to-gray-100 hover:border-gray-400 transition-colors px-4 py-5 text-gray-700 text-sm rounded flex flex-col items-center w-full group"
       type="button"
       {{on "click" this.handleCollapseButtonClick}}
       data-test-collapse-button
@@ -36,7 +36,7 @@
 
     {{#if this.isCollapsed}}
       <button
-        class="mt-4 border hover:bg-gray-100 hover:border-gray-300 transition-colors px-4 py-5 text-gray-700 text-sm rounded flex flex-col items-center w-full group"
+        class="mt-4 border border-gray-300 bg-gradient-to-br from-white to-gray-100 hover:border-gray-400 px-4 py-5 text-gray-700 text-sm rounded flex flex-col items-center w-full group"
         type="button"
         {{on "click" this.handleExpandButtonClick}}
         data-test-expand-button
@@ -48,7 +48,7 @@
       </button>
     {{else}}
       <button
-        class="mt-4 border hover:bg-gray-100 hover:border-gray-300 transition-colors px-4 py-5 text-gray-700 text-sm rounded flex flex-col items-center w-full group"
+        class="mt-4 border border-gray-300 bg-gradient-to-br from-white to-gray-100 hover:border-gray-400 transition-colors px-4 py-5 text-gray-700 text-sm rounded flex flex-col items-center w-full group"
         type="button"
         {{on "click" this.handleCollapseButtonClick}}
         data-test-collapse-button