diff --git a/compass/components/resource/Callout.tsx b/compass/components/resource/Callout.tsx
index fe2e329..c5823c1 100644
--- a/compass/components/resource/Callout.tsx
+++ b/compass/components/resource/Callout.tsx
@@ -6,7 +6,7 @@ interface CalloutProps {
 
 const Callout = ({ children }: CalloutProps) => {
   return (
-    <div className="p-4 mb-4 flex items-center border-gray-300 bg-gray-100 rounded-lg">
+    <div className="p-4 mb-4 flex items-center bg-purple-100 rounded-sm">
       <span className="text-sm text-gray-700">{children}</span>
     </div>
   );
diff --git a/compass/components/resource/Card.tsx b/compass/components/resource/Card.tsx
index a9202ac..b5032e6 100644
--- a/compass/components/resource/Card.tsx
+++ b/compass/components/resource/Card.tsx
@@ -8,7 +8,7 @@ interface TagProps {
 
 const Card: React.FC<TagProps> = ({ text, icon }) => {
   return (
-    <div className="flex flex-row space-x-2 items-start justify-start border border-gray-200 bg-white shadow rounded-md p-4">
+    <div className="flex flex-row space-x-2 items-start justify-start border border-gray-200 bg-white hover:bg-gray-50 shadow rounded-md p-4">
       <span className="h-5 w-5 text-gray-700">
         {icon}
       </span>