diff --git a/apps/web/app/(landing)/Showcase.tsx b/apps/web/app/(landing)/Showcase.tsx
index 8e00baf6..9955c7c3 100644
--- a/apps/web/app/(landing)/Showcase.tsx
+++ b/apps/web/app/(landing)/Showcase.tsx
@@ -114,13 +114,13 @@ function Feature({
 }) {
   return (
     <div
-      className={clsx(className, !isActive && "opacity-75 hover:opacity-100")}
+      className={clsx(className ,"focus:outline-none", !isActive && "opacity-75 hover:opacity-100")}
       {...props}
     >
       <div
         className={clsx(
           "w-9 rounded-lg",
-          isActive ? "bg-blue-600" : "bg-slate-500",
+          isActive ? `bg-indigo-500` : "bg-slate-500",
         )}
       >
         <svg aria-hidden="true" className="h-9 w-9" fill="none">
@@ -129,8 +129,8 @@ function Feature({
       </div>
       <h3
         className={clsx(
-          "mt-6 text-sm font-medium",
-          isActive ? "text-blue-600" : "text-gray-300",
+          "mt-4 text-sm font-medium",
+          isActive ? `text-indigo-300` : "text-gray-300",
         )}
       >
         {feature.name}
@@ -138,7 +138,7 @@ function Feature({
       <p className="mt-2 font-display text-xl text-gray-200">
         {feature.summary}
       </p>
-      <p className="mt-4 text-sm text-gray-300">{feature.description}</p>
+      <p className="mt-2 text-sm text-gray-300">{feature.description}</p>
     </div>
   );
 }