diff --git a/components/ui/base-card.jsx b/components/ui/base-card.tsx
similarity index 90%
rename from components/ui/base-card.jsx
rename to components/ui/base-card.tsx
index 2d7aeb5..f743b23 100644
--- a/components/ui/base-card.jsx
+++ b/components/ui/base-card.tsx
@@ -39,12 +39,13 @@ const BaseCard = ({
   buttonPath,
   isDisabled,
   extraSteps = [],
+  colors
 }) => {
   return (
     <>
-      {/* <div className="flex relative flex-col mx-auto py-8 px-4 rounded-xl items-center sm:mt-4 justify-center overflow-hidden border bg-background md:shadow-xl"> */}
-      <ShineBorder className="relative flex-col md:w-[80vw] sm:w-[80vw] xl:mt-0 rounded-3xl xl:w-[23rem] xl:h-[29rem] mx-auto  items-center sm:mt-4 justify-center overflow-hidden border bg-background md:shadow-xl" 
-       color={["#25AFAA", "#FE8FB5"]}  > 
+      {/* <div className="flex relative flex-col mx-auto py-2 px-2 rounded-xl items-center sm:mt-4 justify-center overflow-hidden border bg-background md:shadow-xl"> */}
+      <ShineBorder className="relative flex-col md:w-[80vw] sm:w-[80vw] xl:mt-0 rounded-3xl xl:w-[22rem] xl:h-[29rem] mx-auto  items-center sm:mt-4 justify-center overflow-hidden border bg-background md:shadow-xl" 
+       color={[`${colors}`]}  > 
            {/* <span 
             className={cn(
               "text-xs font-medium  px-2.5 py-0.5 rounded-full relative",
@@ -87,8 +88,8 @@ const BaseCard = ({
               className={cn("relative p-[3px] mt-6 mb-6", buttonStyle)}
               disabled={isDisabled}
             >
-              <div className="absolute inset-0 bg-gradient-to-r from-[#25AFAA] to-[#4C054C] rounded-lg" />
-              <div className="flex items-center px-8 py-2 rounded-[6px] text-white relative group transition duration-200 ">
+              <div className="absolute inset-0 dark:border-white dark:border-[0.01px] border-white bg-gradient-to-r rounded-lg" />
+              <div className="flex items-center px-8 py-2 rounded-[6px] text-black dark:text-white relative group transition duration-200 ">
                 Start Learning
                 <ChevronRightIcon className="ml-2 transition-transform duration-300 group-hover:translate-x-1" />
               </div>