diff --git a/Documentation/docs/components/card sections/ImageAndContentWithStretchedButtons.md b/Documentation/docs/components/card sections/ImageAndContentWithStretchedButtons.md
index 3704a8c..226c501 100644
--- a/Documentation/docs/components/card sections/ImageAndContentWithStretchedButtons.md	
+++ b/Documentation/docs/components/card sections/ImageAndContentWithStretchedButtons.md	
@@ -148,7 +148,7 @@ sidebar_position: 2
 
           {/* <!-- Card --> */}
           <div className="group flex flex-col h-full bg-base-100 border border-base-200 shadow-sm rounded-xl">
-            <div className="h-52 flex flex-col justify-center items-center bg-amber-500 rounded-t-xl">
+            <div className="h-52 flex flex-col justify-center items-center bg-secondary rounded-t-xl">
               <svg
                 className="size-28"
                 width="56"
@@ -185,7 +185,7 @@ sidebar_position: 2
               </svg>
             </div>
             <div className="p-4 md:p-6">
-              <span className="block mb-1 text-xs font-semibold uppercase text-amber-500">
+              <span className="block mb-1 text-xs font-semibold uppercase text-secondary">
                 Slack API
               </span>
               <h3 className="text-xl font-semibold text-secondary-content">
diff --git a/Documentation/static/img/image-and-content-with-stretched-buttons.png b/Documentation/static/img/image-and-content-with-stretched-buttons.png
index 005b5c9..cf4d05a 100644
Binary files a/Documentation/static/img/image-and-content-with-stretched-buttons.png and b/Documentation/static/img/image-and-content-with-stretched-buttons.png differ