[FEAT] Enhance colors in dashboard and related components

apps/frontend/src/components/layouts/DashboardLayout.tsx

@@ -32,12 +32,12 @@ const DashboardLayout: FC<PropsWithChildren> = ({ children }) => {
         <DashboardSidebar isCollapsed={isSidebarCollapsed} />
 
         <motion.main
-          className="flex-1 overflow-auto p-4 md:p-6"
+          className="flex-1 overflow-auto w-full"
           initial={{ opacity: 0, y: 10 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
         >
-          <div className="max-w-7xl mx-auto">{children}</div>
+          {children}
         </motion.main>
       </div>
     </div>

apps/frontend/src/components/layouts/MainLayout.tsx

@@ -28,10 +28,10 @@ const MainLayout: FC<PropsWithChildren> = ({ children }) => {
         <NavbarBrand>
           <Link to={"/"}>
             <div className="flex items-center gap-2">
-              <div className="bg-primary-500 text-white p-1 rounded-md">
+              <div className="bg-gradient-to-br from-blue-500 to-purple-600 text-white p-1 rounded-md shadow-lg">
                 <Icon icon="lucide:workflow" width={24} />
               </div>
-              <span className="font-semibold text-lg text-primary-500">
+              <span className="font-semibold text-lg bg-gradient-to-r from-blue-600 via-purple-500 to-cyan-400 bg-clip-text text-transparent">
                 FloAgenticAI
               </span>
             </div>
@@ -40,8 +40,7 @@ const MainLayout: FC<PropsWithChildren> = ({ children }) => {
         <NavbarContent justify="end">
           {user ? (
             <Button
-              className="focus:outline-none hover:border-transparent"
-              color="primary"
+              className="focus:outline-none hover:border-transparent bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-500 hover:to-blue-600 text-white shadow-lg hover:shadow-blue-500/25 transition-all duration-300"
               size="sm"
               variant="solid"
               onPress={() => navigate({ to: "/dashboard" })}
@@ -58,8 +57,7 @@ const MainLayout: FC<PropsWithChildren> = ({ children }) => {
               </Link>
 
               <Button
-                className="focus:outline-none hover:border-transparent"
-                color="primary"
+                className="focus:outline-none hover:border-transparent bg-gradient-to-r from-indigo-600 to-blue-600 hover:from-indigo-500 hover:to-blue-500 text-white shadow-lg hover:shadow-indigo-500/25 transition-all duration-300"
                 size="sm"
                 variant="solid"
                 onPress={() => navigate({ to: "/signup" })}

apps/frontend/src/components/pages/credential/index.tsx

@@ -33,60 +33,62 @@ const Credentials: FC = () => {
   const [openNewCredentialModal, setOpenNewCredentialModal] = useState(false);
 
   return (
-    <motion.div
-      className="p-6 space-y-6"
-      variants={containerVariants}
-      initial="hidden"
-      animate="visible"
-    >
+    <div className="bg-gradient-to-br from-gray-50/50 to-amber-50/30 dark:from-gray-900/50 dark:to-orange-900/20 min-h-screen">
       <motion.div
-        variants={itemVariants}
-        className="mb-4 flex justify-between items-center"
+        className="p-6 space-y-6"
+        variants={containerVariants}
+        initial="hidden"
+        animate="visible"
       >
-        <div>
-          <h1 className="text-2xl font-bold">My Credentials</h1>
-          <p className="text-default-500">
-            Your secret keys and tokens, safe and sound 🔐
-          </p>
-        </div>
-        <div className="flex gap-3 items-center">
-          {credentialsList.numSelected > 0 && (
+        <motion.div
+          variants={itemVariants}
+          className="mb-4 flex justify-between items-center"
+        >
+          <div>
+            <h1 className="text-3xl font-bold bg-gradient-to-r from-amber-600 to-orange-600 dark:from-amber-400 dark:to-orange-400 bg-clip-text text-transparent">
+              My Credentials
+            </h1>
+            <p className="text-default-600 text-lg">
+              Your secret keys and tokens, safe and sound 🔐
+            </p>
+          </div>
+          <div className="flex gap-3 items-center">
+            {credentialsList.numSelected > 0 && (
+              <Button
+                className="focus:outline-none hover:border-transparent rounded-xl bg-gradient-to-r from-red-500 to-pink-500 hover:from-red-600 hover:to-pink-600 text-white shadow-lg hover:shadow-red-500/25 transition-all duration-300"
+                variant="solid"
+                onPress={credentialsList.handleBulkDelete}
+                startContent={
+                  <Icon icon="lucide:trash-2" width="20" height="20" />
+                }
+                isLoading={credentialsList.isDeletionPending}
+                isDisabled={credentialsList.isDeletionPending}
+              >
+                Delete ({credentialsList.numSelected})
+              </Button>
+            )}
             <Button
-              className="focus:outline-none hover:border-transparent rounded-md"
-              color="danger"
-              variant="flat"
-              onPress={credentialsList.handleBulkDelete}
-              startContent={
-                <Icon icon="lucide:trash-2" width="20" height="20" />
-              }
-              isLoading={credentialsList.isDeletionPending}
-              isDisabled={credentialsList.isDeletionPending}
+              className="focus:outline-none hover:border-transparent rounded-xl bg-gradient-to-r from-amber-600 to-orange-600 hover:from-amber-500 hover:to-orange-500 text-white shadow-lg hover:shadow-amber-500/25 transition-all duration-300"
+              startContent={<Icon icon="lucide:plus" width="24" height="24" />}
+              onPress={() => {
+                setOpenNewCredentialModal(true);
+              }}
             >
-              Delete ({credentialsList.numSelected})
+              New Credential
             </Button>
-          )}
-          <Button
-            className="focus:outline-none hover:border-transparent rounded-md"
-            color="primary"
-            startContent={<Icon icon="lucide:plus" width="24" height="24" />}
-            onPress={() => {
-              setOpenNewCredentialModal(true);
-            }}
-          >
-            New Credential
-          </Button>
-        </div>
+          </div>
+        </motion.div>
+        <motion.div variants={itemVariants}>
+          <CredentialList credentialsList={credentialsList} />
+        </motion.div>
+        {openNewCredentialModal && (
+          <NewCredentialModal
+            openNewCredentialModal={openNewCredentialModal}
+            setOpenNewCredentialModal={setOpenNewCredentialModal}
+          />
+        )}
       </motion.div>
-      <motion.div variants={itemVariants}>
-        <CredentialList credentialsList={credentialsList} />
-      </motion.div>
-      {openNewCredentialModal && (
-        <NewCredentialModal
-          openNewCredentialModal={openNewCredentialModal}
-          setOpenNewCredentialModal={setOpenNewCredentialModal}
-        />
-      )}
-    </motion.div>
+    </div>
   );
 };
 

apps/frontend/src/components/pages/dashboard/index.tsx

@@ -31,57 +31,89 @@ export const DashboardPage: FC = () => {
       name: "Total Workflows",
       value: workflows.length,
       icon: "lucide:bot",
+      gradient: "from-blue-500 to-cyan-500",
+      bgGradient: "from-blue-500/100 to-cyan-500/100",
+      borderColor: "border-blue-500/80",
+      shadowColor: "shadow-blue-500/25",
     },
     {
       name: "Active Workflows",
       value: workflows.filter((w) => w.isActive).length,
       icon: "lucide:zap",
+      gradient: "from-emerald-500 to-teal-500",
+      bgGradient: "from-emerald-500/100 to-teal-500/100",
+      borderColor: "border-emerald-500/80",
+      shadowColor: "shadow-emerald-500/25",
     },
   ];
 
   return (
-    <motion.div
-      className="p-6 space-y-6"
-      variants={containerVariants}
-      initial="hidden"
-      animate="visible"
-    >
-      <motion.div variants={itemVariants} className="mb-8">
-        <h1 className="text-2xl font-bold">
-          Welcome back, {user?.displayName}! 👋
-        </h1>
-        <p className="text-default-500">
-          Let's see what your AI allies are up to today ✨
-        </p>
-      </motion.div>
+    <div className="bg-gradient-to-br from-gray-50/20 to-blue-100/20 dark:from-gray-950/70 dark:to-blue-950/30 min-h-screen">
       <motion.div
-        variants={itemVariants}
-        className="grid gap-6 sm:grid-cols-2 w-fit min-w-[600px]"
+        className="p-6 space-y-6"
+        variants={containerVariants}
+        initial="hidden"
+        animate="visible"
       >
-        {stats.map((stat) => (
-          <div
-            key={stat.name}
-            className="bg-content1 border border-default-200 rounded-xl p-6 flex items-center justify-between"
-          >
-            <div>
-              <p className="text-sm font-medium text-default-500">
-                {stat.name}
-              </p>
-              {isLoading ? (
-                <Spinner size="sm" className="mt-2" />
-              ) : (
-                <p className="text-3xl font-bold text-default-900">
-                  {stat.value}
+        <motion.div variants={itemVariants} className="mb-8">
+          <h1 className="text-3xl font-bold bg-gradient-to-r from-blue-600 via-purple-600 to-cyan-500 dark:from-blue-400 dark:via-purple-400 dark:to-cyan-400 bg-clip-text text-transparent">
+            Welcome back, {user?.displayName}! 👋
+          </h1>
+          <p className="text-default-600 text-lg">
+            Let's see what your AI allies are up to today ✨
+          </p>
+        </motion.div>
+        <motion.div
+          variants={itemVariants}
+          className="grid gap-6 sm:grid-cols-2 w-fit min-w-[600px]"
+        >
+          {stats.map((stat) => (
+            <motion.div
+              key={stat.name}
+              className={`${stat.borderColor} border-r-8 border-b-8 bg-white/90 dark:bg-gray-800/90 backdrop-blur-sm border-3 border-${stat.borderColor} dark:border-gray-600/70 rounded-2xl p-6 flex items-center justify-between shadow-lg hover:shadow-xl ${stat.shadowColor} hover:scale-105 transition-all duration-300`}
+              whileHover={{ y: -2 }}
+              transition={{ type: "spring", stiffness: 300 }}
+            >
+              <div>
+                <p
+                  className={`text-sm font-medium  bg-gradient-to-r ${stat.gradient} bg-clip-text text-transparent`}
+                >
+                  {stat.name}
                 </p>
-              )}
-            </div>
-            <div className="bg-primary/10 p-3 rounded-full">
-              <Icon icon={stat.icon} className="w-6 h-6 text-primary" />
-            </div>
-          </div>
-        ))}
+                {isLoading ? (
+                  <Spinner size="sm" className="mt-2" />
+                ) : (
+                  <p
+                    className={`text-3xl font-bold bg-gradient-to-r ${stat.gradient} bg-clip-text text-transparent`}
+                  >
+                    {stat.value}
+                  </p>
+                )}
+              </div>
+              <motion.div
+                className={`bg-gradient-to-r ${stat.bgGradient} p-4 rounded-2xl shadow-lg border border-gray-200/30 dark:border-gray-600/30`}
+                animate={{ y: [0, -3, 0] }}
+                transition={{
+                  duration: 2.5,
+                  repeat: Infinity,
+                  ease: "easeInOut",
+                  repeatDelay: 0.5,
+                }}
+              >
+                <Icon
+                  icon={stat.icon}
+                  className={
+                    stat.icon === "lucide:bot"
+                      ? "w-8 h-8 text-white dark:text-blue-400"
+                      : "w-8 h-8 text-white dark:text-emerald-400"
+                  }
+                />
+              </motion.div>
+            </motion.div>
+          ))}
+        </motion.div>
       </motion.div>
-    </motion.div>
+    </div>
   );
 };
 export default DashboardPage;

apps/frontend/src/components/pages/mcp-servers/Filters.tsx

@@ -53,10 +53,11 @@ const Filters: FC<{
               key={category}
               size="md"
               variant={selectedCategory === category ? "solid" : "bordered"}
-              color={selectedCategory === category ? "primary" : "default"}
               className={cn(
-                "cursor-pointer transition-all duration-200 ",
-                selectedCategory !== category ? "hover:bg-default-100" : "px-2",
+                "cursor-pointer transition-all duration-300 ",
+                selectedCategory !== category
+                  ? "hover:bg-default-100"
+                  : "bg-indigo-500 text-white hover:bg-indigo-500/90",
               )}
               onClick={() => handleCategoryFilter(category)}
               endContent={

apps/frontend/src/components/pages/mcp-servers/Header.tsx

@@ -11,21 +11,28 @@ const Header: FC<{
     <motion.div variants={itemVariants} className="mb-6">
       <div className="flex items-center justify-between mb-4">
         <div>
-          <h1 className="text-3xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+          <h1 className="text-3xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 dark:from-indigo-400 dark:to-purple-400 bg-clip-text text-transparent">
             MCP Servers
           </h1>
-          <p className="text-default-500 mt-1">
-            Discover, install, and manage Model Context Protocol servers
+          <p className="text-default-600 text-lg mt-1">
+            Discover, install, and manage Model Context Protocol servers 🔌
           </p>
         </div>
-        <div className="flex items-center gap-4 text-sm text-default-500">
-          <div className="flex items-center gap-2">
-            <Icon icon="lucide:server" className="w-4 h-4" />
-            <span>{totalServers} available</span>
+        <div className="flex items-center gap-6">
+          <div className="flex items-center gap-2 bg-white/10 dark:bg-gray-800/30 backdrop-blur-sm border border-default-200/80 dark:border-gray-700/30 rounded-full px-4 py-2 shadow-md">
+            <Icon icon="lucide:server" className="w-4 h-4 text-indigo-500" />
+            <span className="text-sm font-medium text-default-700">
+              {totalServers} available
+            </span>
           </div>
-          <div className="flex items-center gap-2">
-            <Icon icon="lucide:check-circle" className="w-4 h-4" />
-            <span>{installedServers} installed</span>
+          <div className="flex items-center gap-2 bg-white/10 dark:bg-gray-800/30 backdrop-blur-sm border border-default-200/80 dark:border-gray-700/30 rounded-full px-4 py-2 shadow-md">
+            <Icon
+              icon="lucide:check-circle"
+              className="w-4 h-4 text-emerald-500"
+            />
+            <span className="text-sm font-medium text-default-700">
+              {installedServers} installed
+            </span>
           </div>
         </div>
       </div>

apps/frontend/src/components/pages/mcp-servers/Search.tsx

@@ -28,11 +28,15 @@ const Search: FC<{
       value={searchQuery}
       onValueChange={setSearchQuery}
       startContent={
-        <Icon icon="lucide:search" className="w-4 h-4 text-default-400" />
+        <Icon icon="lucide:search" className="w-4 h-4 text-indigo-500" />
       }
       className="flex-1"
       size="lg"
       variant="bordered"
+      classNames={{
+        inputWrapper:
+          "bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm border border-indigo-200 dark:border-gray-700/30 hover:border-indigo-300/100 focus-within:border-indigo-400/100 shadow-md transition-all duration-300",
+      }}
     />
   );
 };