From 7bc35a03eafcc80405546e303b7c37fe37e2a4a3 Mon Sep 17 00:00:00 2001
From: coolpengwing <coolpengwing@gmail.com>
Date: Tue, 2 Sep 2025 20:12:45 +0100
Subject: [PATCH 1/4] feat: enhance colors on signin and signup pages

---
 apps/frontend/src/components/layouts/MainLayout.tsx   | 10 ++++------
 .../src/components/pages/signin/PasswordSignIn.tsx    | 11 ++++-------
 .../src/components/pages/signin/SocialSignIn.tsx      |  6 +++---
 apps/frontend/src/components/pages/signin/index.tsx   |  2 +-
 .../src/components/pages/signup/PasswordSignUp.tsx    |  3 +--
 apps/frontend/src/components/pages/signup/index.tsx   |  2 +-
 6 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/apps/frontend/src/components/layouts/MainLayout.tsx b/apps/frontend/src/components/layouts/MainLayout.tsx
index 52ed9fd..80cf209 100644
--- a/apps/frontend/src/components/layouts/MainLayout.tsx
+++ b/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" })}
diff --git a/apps/frontend/src/components/pages/signin/PasswordSignIn.tsx b/apps/frontend/src/components/pages/signin/PasswordSignIn.tsx
index f880a93..b94f1ec 100644
--- a/apps/frontend/src/components/pages/signin/PasswordSignIn.tsx
+++ b/apps/frontend/src/components/pages/signin/PasswordSignIn.tsx
@@ -161,8 +161,7 @@ const PasswordSignIn: FC<{
           </div>
           <Button
             type="submit"
-            color="primary"
-            className="w-full focus:outline-none hover:border-transparent"
+            className="w-full focus:outline-none hover:border-transparent bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white shadow-lg hover:shadow-blue-500/25 transition-all duration-300"
             size="lg"
             onPress={handlePasswordSignIn}
             isLoading={isPasswordSigningIn}
@@ -188,8 +187,7 @@ const PasswordSignIn: FC<{
           />
           <Button
             type="submit"
-            color="primary"
-            className="w-full focus:outline-none hover:border-transparent"
+            className="w-full focus:outline-none hover:border-transparent bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-500 hover:to-teal-500 text-white shadow-lg hover:shadow-emerald-500/25 transition-all duration-300"
             size="lg"
             onPress={handleVerificationEmail}
             isLoading={isSendingEmail}
@@ -199,10 +197,9 @@ const PasswordSignIn: FC<{
           </Button>
           <Button
             type="submit"
-            color="primary"
-            className="w-full border-0"
+            className="w-full text-default-500 hover:text-default-700 bg-transparent hover:bg-default-100 transition-colors duration-200 hover:border-transparent focus:outline-none"
             size="sm"
-            variant={"bordered"}
+            variant="light"
             onPress={handleSwitchAccount}
           >
             Switch account
diff --git a/apps/frontend/src/components/pages/signin/SocialSignIn.tsx b/apps/frontend/src/components/pages/signin/SocialSignIn.tsx
index 370d443..44a7b1b 100644
--- a/apps/frontend/src/components/pages/signin/SocialSignIn.tsx
+++ b/apps/frontend/src/components/pages/signin/SocialSignIn.tsx
@@ -32,7 +32,7 @@ const SocialSignIn: FC<{
     <div className="grid grid-cols-2 gap-4">
       <Button
         variant="flat"
-        className="w-full"
+        className="w-full bg-white/10 hover:bg-white/20 backdrop-blur-md border border-white/20 hover:border-white/30 text-foreground shadow-lg hover:shadow-xl transition-all duration-300 focus:outline-none"
         startContent={<Icon icon="logos:google-icon" width={18} />}
         onPress={() => handleSocialSignIn("google.com")}
         isLoading={
@@ -45,8 +45,8 @@ const SocialSignIn: FC<{
       </Button>
       <Button
         variant="flat"
-        className="w-full"
-        startContent={<Icon icon="logos:github-icon" width={18} />}
+        className="w-full bg-gradient-to-r from-gray-800 to-gray-900 hover:from-gray-700 hover:to-gray-800 text-white shadow-lg hover:shadow-gray-500/25 transition-all duration-300  focus:outline-none"
+        startContent={<Icon icon="lucide:github" width={18} />}
         onPress={() => handleSocialSignIn("github.com")}
         isLoading={
           isSocialSigningIn &&
diff --git a/apps/frontend/src/components/pages/signin/index.tsx b/apps/frontend/src/components/pages/signin/index.tsx
index 166c4ca..02ba965 100644
--- a/apps/frontend/src/components/pages/signin/index.tsx
+++ b/apps/frontend/src/components/pages/signin/index.tsx
@@ -32,7 +32,7 @@ const SignInPage: FC = () => {
         </div>
 
         <Card>
-          <CardBody className="p-6">
+          <CardBody className="p-6 bg-gray-50/50 dark:bg-gray-800/30">
             <div className="space-y-6">
               <div className="space-y-4">
                 {!!errorMessage && (
diff --git a/apps/frontend/src/components/pages/signup/PasswordSignUp.tsx b/apps/frontend/src/components/pages/signup/PasswordSignUp.tsx
index de397dc..81ebd41 100644
--- a/apps/frontend/src/components/pages/signup/PasswordSignUp.tsx
+++ b/apps/frontend/src/components/pages/signup/PasswordSignUp.tsx
@@ -116,8 +116,7 @@ const PasswordSignUp: FC<{
 
       <Button
         type="submit"
-        color="primary"
-        className="w-full focus:outline-none hover:border-transparent"
+        className="w-full focus:outline-none hover:border-transparent bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white shadow-lg hover:shadow-blue-500/25 transition-all duration-300"
         size="lg"
         onPress={handlePasswordSignUp}
         isLoading={isPasswordSigningUp}
diff --git a/apps/frontend/src/components/pages/signup/index.tsx b/apps/frontend/src/components/pages/signup/index.tsx
index 4033fac..dde5c54 100644
--- a/apps/frontend/src/components/pages/signup/index.tsx
+++ b/apps/frontend/src/components/pages/signup/index.tsx
@@ -25,7 +25,7 @@ export const SignUpPage: FC = () => {
         </div>
 
         <Card>
-          <CardBody className="p-6">
+          <CardBody className="p-6 bg-gray-50/50 dark:bg-gray-800/30">
             <div className="space-y-6">
               <div className="space-y-4">
                 {!!errorMessage && (

From d96f3197ecc2b2b66c9b68add58112ed8477bb87 Mon Sep 17 00:00:00 2001
From: coolpengwing <coolpengwing@gmail.com>
Date: Tue, 2 Sep 2025 22:29:35 +0100
Subject: [PATCH 2/4] feat: revamp UI for dashboard and related components with
 improved color styling and layout

---
 .../components/layouts/DashboardLayout.tsx    |   4 +-
 .../src/components/pages/credential/index.tsx |  98 +++++++--------
 .../src/components/pages/dashboard/index.tsx  | 108 +++++++++++------
 .../components/pages/mcp-servers/Filters.tsx  |   7 +-
 .../components/pages/mcp-servers/Header.tsx   |  27 +++--
 .../components/pages/mcp-servers/Search.tsx   |   6 +-
 .../src/components/pages/mcp-servers/Tabs.tsx |  24 ++--
 .../components/pages/mcp-servers/index.tsx    |   6 +-
 .../pages/profile/PersonalInformation.tsx     |  20 ++--
 .../pages/profile/SocialAccounts.tsx          |  14 ++-
 .../src/components/pages/profile/index.tsx    |  24 ++--
 .../pages/profile/security/ChangePassword.tsx |   9 +-
 .../pages/profile/security/index.tsx          |   8 +-
 .../PasswordAccountIdentityVerification.tsx   |   5 +-
 .../SocialAccountIdentityVerification.tsx     |   6 +-
 .../security/multi-factor-auth/index.tsx      |   6 +-
 .../src/components/pages/workflow/index.tsx   | 112 +++++++++---------
 .../ui/credential/CredentialsList.tsx         |  12 +-
 .../src/components/ui/mcp/MCPServerCard.tsx   |  40 +++----
 .../components/ui/navbar/DashboardNavbar.tsx  |  34 ++++--
 .../ui/sidebar/DashboardSidebar.tsx           |  61 +++++++---
 .../src/components/ui/workflow/list/index.tsx |  12 +-
 22 files changed, 367 insertions(+), 276 deletions(-)

diff --git a/apps/frontend/src/components/layouts/DashboardLayout.tsx b/apps/frontend/src/components/layouts/DashboardLayout.tsx
index 29e425e..661449c 100644
--- a/apps/frontend/src/components/layouts/DashboardLayout.tsx
+++ b/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>
diff --git a/apps/frontend/src/components/pages/credential/index.tsx b/apps/frontend/src/components/pages/credential/index.tsx
index 713033d..a25ebe8 100644
--- a/apps/frontend/src/components/pages/credential/index.tsx
+++ b/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>
   );
 };
 
diff --git a/apps/frontend/src/components/pages/dashboard/index.tsx b/apps/frontend/src/components/pages/dashboard/index.tsx
index bc9d239..0d1296e 100644
--- a/apps/frontend/src/components/pages/dashboard/index.tsx
+++ b/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-gray-200/60 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;
diff --git a/apps/frontend/src/components/pages/mcp-servers/Filters.tsx b/apps/frontend/src/components/pages/mcp-servers/Filters.tsx
index 2ac6f02..a2fde85 100644
--- a/apps/frontend/src/components/pages/mcp-servers/Filters.tsx
+++ b/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={
diff --git a/apps/frontend/src/components/pages/mcp-servers/Header.tsx b/apps/frontend/src/components/pages/mcp-servers/Header.tsx
index 3750237..206dd9a 100644
--- a/apps/frontend/src/components/pages/mcp-servers/Header.tsx
+++ b/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>
diff --git a/apps/frontend/src/components/pages/mcp-servers/Search.tsx b/apps/frontend/src/components/pages/mcp-servers/Search.tsx
index 67d382a..4bf6ab7 100644
--- a/apps/frontend/src/components/pages/mcp-servers/Search.tsx
+++ b/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",
+      }}
     />
   );
 };
diff --git a/apps/frontend/src/components/pages/mcp-servers/Tabs.tsx b/apps/frontend/src/components/pages/mcp-servers/Tabs.tsx
index a1b123f..527d198 100644
--- a/apps/frontend/src/components/pages/mcp-servers/Tabs.tsx
+++ b/apps/frontend/src/components/pages/mcp-servers/Tabs.tsx
@@ -23,17 +23,18 @@ const Tabs: FC<{
         variant="underlined"
         classNames={{
           tabList:
-            "gap-6 w-full relative rounded-none p-0 border-b border-divider",
-          cursor: "w-full bg-primary",
-          tab: "max-w-fit px-0 h-12",
+            "gap-8 w-full relative rounded-none p-0 border-b border-gradient-to-r from-indigo-200 to-purple-200 dark:from-indigo-800 dark:to-purple-800",
+          cursor:
+            "w-full bg-gradient-to-r from-indigo-500 to-purple-500 shadow-lg",
+          tab: "max-w-fit px-0 h-12 text-default-600 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors duration-300",
         }}
       >
         <HeroUITab
           key="available"
           title={
             <div className="flex items-center gap-2">
-              <Icon icon="lucide:package" className="w-4 h-4" />
-              <span>Available Servers</span>
+              <Icon icon="lucide:package" className="w-4 h-4 text-indigo-500" />
+              <span className="font-medium">Available Servers</span>
             </div>
           }
           className="focus:outline-none hover:border-transparent p-2 bg-transparent"
@@ -42,10 +43,17 @@ const Tabs: FC<{
           key="installed"
           title={
             <div className="flex items-center gap-2">
-              <Icon icon="lucide:check-circle" className="w-4 h-4" />
-              <span>Installed Servers</span>
+              <Icon
+                icon="lucide:check-circle"
+                className="w-4 h-4 text-emerald-500"
+              />
+              <span className="font-medium">Installed Servers</span>
               {installedServers !== 0 && (
-                <Chip size="sm" variant="flat" color="primary">
+                <Chip
+                  size="sm"
+                  variant="flat"
+                  className="bg-gradient-to-r from-emerald-500/20 to-teal-500/20 text-emerald-700 dark:text-emerald-300 border border-emerald-300/30"
+                >
                   {installedServers}
                 </Chip>
               )}
diff --git a/apps/frontend/src/components/pages/mcp-servers/index.tsx b/apps/frontend/src/components/pages/mcp-servers/index.tsx
index 8ee4fe4..4c6f5e7 100644
--- a/apps/frontend/src/components/pages/mcp-servers/index.tsx
+++ b/apps/frontend/src/components/pages/mcp-servers/index.tsx
@@ -198,9 +198,9 @@ const MCPServersPage: FC = () => {
   };
 
   return (
-    <>
+    <div className="bg-gradient-to-br from-gray-50/20 to-indigo-100/20 dark:from-gray-900/50 dark:to-indigo-900/20 min-h-screen">
       <motion.div
-        className="p-6 space-y-6 max-w-7xl mx-auto"
+        className="p-6 space-y-6"
         variants={containerVariants}
         initial="hidden"
         animate="visible"
@@ -302,7 +302,7 @@ const MCPServersPage: FC = () => {
         installation={installationToUninstall}
         isPending={deleteMutation.isPending}
       />
-    </>
+    </div>
   );
 };
 
diff --git a/apps/frontend/src/components/pages/profile/PersonalInformation.tsx b/apps/frontend/src/components/pages/profile/PersonalInformation.tsx
index 2db7eed..ca48a33 100644
--- a/apps/frontend/src/components/pages/profile/PersonalInformation.tsx
+++ b/apps/frontend/src/components/pages/profile/PersonalInformation.tsx
@@ -63,11 +63,14 @@ const PersonalInformation: FC<{
 
   return (
     <motion.div variants={itemVariants}>
-      <Card className="overflow-visible">
+      <Card className="overflow-visible bg-white/95 dark:bg-gray-800/95 backdrop-blur-md border-2 border-gray-200/60 dark:border-gray-600/70 shadow-xl">
         <CardBody className="space-y-6">
           <div className="flex flex-col items-center md:flex-row gap-6">
             <div className="relative">
-              <Avatar src={user?.photoURL ?? ""} className="w-24 h-24 shadow" />
+              <Avatar
+                src={user?.photoURL ?? ""}
+                className="w-24 h-24 shadow-xl ring-4 ring-violet-500/20 dark:ring-violet-400/30"
+              />
               {/*{isEditing && (*/}
               {/*  <Button*/}
               {/*    isIconOnly*/}
@@ -97,9 +100,8 @@ const PersonalInformation: FC<{
                 {!isEditing ? (
                   <Button
                     isIconOnly
-                    className="focus:outline-none hover:border-transparent"
-                    color="primary"
-                    variant="light"
+                    className="focus:outline-none hover:border-transparent bg-gradient-to-r from-violet-500/10 to-purple-500/10 hover:from-violet-500/20 hover:to-purple-500/20 border border-violet-300/30 hover:border-violet-400/50 text-violet-700 dark:text-violet-300 transition-all duration-300"
+                    variant="flat"
                     onPress={() => setIsEditing(true)}
                     aria-label="Edit name"
                   >
@@ -109,8 +111,8 @@ const PersonalInformation: FC<{
                   <div className="flex gap-1">
                     <Button
                       isIconOnly
-                      color="danger"
-                      variant="light"
+                      className="bg-gradient-to-r from-red-500/10 to-pink-500/10 hover:from-red-500/20 hover:to-pink-500/20 border border-red-300/30 hover:border-red-400/50 text-red-700 dark:text-red-300 transition-all duration-300"
+                      variant="flat"
                       onPress={() => setIsEditing(false)}
                       aria-label="Cancel editing"
                     >
@@ -118,8 +120,8 @@ const PersonalInformation: FC<{
                     </Button>
                     <Button
                       isIconOnly
-                      color="success"
-                      variant="light"
+                      className="bg-gradient-to-r from-emerald-500/10 to-teal-500/10 hover:from-emerald-500/20 hover:to-teal-500/20 border border-emerald-300/30 hover:border-emerald-400/50 text-emerald-700 dark:text-emerald-300 transition-all duration-300"
+                      variant="flat"
                       onPress={handleEditName}
                       isLoading={isSaveNameInProgress}
                       aria-label="Save name"
diff --git a/apps/frontend/src/components/pages/profile/SocialAccounts.tsx b/apps/frontend/src/components/pages/profile/SocialAccounts.tsx
index 02bc483..0a1d27a 100644
--- a/apps/frontend/src/components/pages/profile/SocialAccounts.tsx
+++ b/apps/frontend/src/components/pages/profile/SocialAccounts.tsx
@@ -39,9 +39,11 @@ const SocialAccounts: FC<{
 
   return (
     <motion.div variants={itemVariants}>
-      <Card>
-        <CardHeader className="flex gap-3">
-          <h2 className="text-lg font-semibold">Linked Social Accounts</h2>
+      <Card className="bg-white/95 dark:bg-gray-800/95 backdrop-blur-md border-2 border-gray-200/60 dark:border-gray-600/70 shadow-xl">
+        <CardHeader className="flex gap-3 border-b border-gray-200/30 dark:border-gray-600/30">
+          <h2 className="text-lg font-semibold bg-gradient-to-r from-violet-600 to-purple-600 dark:from-violet-400 dark:to-purple-400 bg-clip-text text-transparent">
+            Linked Social Accounts
+          </h2>
         </CardHeader>
         <CardBody>
           <div className="flex flex-col space-y-4">
@@ -65,10 +67,10 @@ const SocialAccounts: FC<{
                 </div>
 
                 <Button
-                  className={`text-xs px-1 py-1 min-w-28 rounded-full cursor-pointer focus:outline-none hover:border-transparent ${
+                  className={`text-xs px-1 py-1 min-w-28 rounded-full cursor-pointer focus:outline-none hover:border-transparent transition-all duration-300 ${
                     account.connected
-                      ? "bg-danger-100 text-danger-700"
-                      : "bg-primary-100 text-primary-700"
+                      ? "bg-gradient-to-r from-red-500/10 to-pink-500/10 hover:from-red-500/20 hover:to-pink-500/20 border border-red-300/30 hover:border-red-400/50 text-red-700 dark:text-red-300"
+                      : "bg-gradient-to-r from-violet-500/10 to-purple-500/10 hover:from-violet-500/20 hover:to-purple-500/20 border border-violet-300/30 hover:border-violet-400/50 text-violet-700 dark:text-violet-300"
                   }`}
                   startContent={
                     account.connected ? (
diff --git a/apps/frontend/src/components/pages/profile/index.tsx b/apps/frontend/src/components/pages/profile/index.tsx
index d0e1ade..0f404b8 100644
--- a/apps/frontend/src/components/pages/profile/index.tsx
+++ b/apps/frontend/src/components/pages/profile/index.tsx
@@ -29,17 +29,19 @@ const itemVariants = {
 
 const UserProfilePage: FC = () => {
   return (
-    <motion.div
-      className="space-y-6"
-      variants={containerVariants}
-      initial="hidden"
-      animate="show"
-    >
-      <PersonalInformation itemVariants={itemVariants} />
-      <SocialAccounts itemVariants={itemVariants} />
-      <Index itemVariants={itemVariants} />
-      {/*<NotificationPreferences itemVariants={itemVariants} />*/}
-    </motion.div>
+    <div className="bg-gradient-to-br from-gray-50/50 to-violet-50/30 dark:from-gray-900/50 dark:to-violet-900/20 min-h-screen">
+      <motion.div
+        className="space-y-6 p-6"
+        variants={containerVariants}
+        initial="hidden"
+        animate="show"
+      >
+        <PersonalInformation itemVariants={itemVariants} />
+        <SocialAccounts itemVariants={itemVariants} />
+        <Index itemVariants={itemVariants} />
+        {/*<NotificationPreferences itemVariants={itemVariants} />*/}
+      </motion.div>
+    </div>
   );
 };
 
diff --git a/apps/frontend/src/components/pages/profile/security/ChangePassword.tsx b/apps/frontend/src/components/pages/profile/security/ChangePassword.tsx
index d6de1d3..b26bb30 100644
--- a/apps/frontend/src/components/pages/profile/security/ChangePassword.tsx
+++ b/apps/frontend/src/components/pages/profile/security/ChangePassword.tsx
@@ -65,9 +65,8 @@ const ChangePassword: FC = () => {
         </div>
         <Button
           variant="flat"
-          color="primary"
           size="sm"
-          className={"focus:outline-none hover:border-transparent"}
+          className="focus:outline-none hover:border-transparent bg-gradient-to-r from-violet-500/10 to-purple-500/10 hover:from-violet-500/20 hover:to-purple-500/20 border border-violet-300/30 hover:border-violet-400/50 text-violet-700 dark:text-violet-300 transition-all duration-300"
           isDisabled={false}
           onPress={() => setIsPasswordModalOpen(true)}
         >
@@ -170,16 +169,14 @@ const ChangePassword: FC = () => {
               </ModalBody>
               <ModalFooter>
                 <Button
-                  className="focus:outline-none hover:border-transparent"
+                  className="focus:outline-none hover:border-transparent bg-gradient-to-r from-red-500/10 to-pink-500/10 hover:from-red-500/20 hover:to-pink-500/20 border border-red-300/30 hover:border-red-400/50 text-red-700 dark:text-red-300 transition-all duration-300"
                   variant="flat"
-                  color="danger"
                   onPress={onClose}
                 >
                   Cancel
                 </Button>
                 <Button
-                  className="focus:outline-none hover:border-transparent"
-                  color="primary"
+                  className="focus:outline-none hover:border-transparent bg-gradient-to-r from-violet-600 to-purple-600 hover:from-violet-500 hover:to-purple-500 text-white shadow-lg hover:shadow-violet-500/25 transition-all duration-300"
                   onPress={handlePasswordChange}
                   isLoading={isPasswordChangeInProgress}
                   isDisabled={isPasswordChangeInProgress}
diff --git a/apps/frontend/src/components/pages/profile/security/index.tsx b/apps/frontend/src/components/pages/profile/security/index.tsx
index c84d645..d547102 100644
--- a/apps/frontend/src/components/pages/profile/security/index.tsx
+++ b/apps/frontend/src/components/pages/profile/security/index.tsx
@@ -9,9 +9,11 @@ const Index: FC<{
 }> = ({ itemVariants }) => {
   return (
     <motion.div variants={itemVariants}>
-      <Card>
-        <CardHeader className="flex gap-3">
-          <h2 className="text-lg font-semibold">Security</h2>
+      <Card className="bg-white/95 dark:bg-gray-800/95 backdrop-blur-md border-2 border-gray-200/60 dark:border-gray-600/70 shadow-xl">
+        <CardHeader className="flex gap-3 border-b border-gray-200/30 dark:border-gray-600/30">
+          <h2 className="text-lg font-semibold bg-gradient-to-r from-violet-600 to-purple-600 dark:from-violet-400 dark:to-purple-400 bg-clip-text text-transparent">
+            Security
+          </h2>
         </CardHeader>
         <CardBody>
           <div className="space-y-4">
diff --git a/apps/frontend/src/components/pages/profile/security/multi-factor-auth/PasswordAccountIdentityVerification.tsx b/apps/frontend/src/components/pages/profile/security/multi-factor-auth/PasswordAccountIdentityVerification.tsx
index 073e9ba..835b382 100644
--- a/apps/frontend/src/components/pages/profile/security/multi-factor-auth/PasswordAccountIdentityVerification.tsx
+++ b/apps/frontend/src/components/pages/profile/security/multi-factor-auth/PasswordAccountIdentityVerification.tsx
@@ -55,9 +55,8 @@ const PasswordAccountIdentityVerification: FC<{
         }
       />
       <Button
-        className="focus:outline-none hover:border-transparent shrink-0"
-        color="primary"
-        variant="flat"
+        className="focus:outline-none hover:border-transparent shrink-0 bg-gradient-to-r from-violet-600 to-purple-600 hover:from-violet-500 hover:to-purple-500 text-white shadow-lg hover:shadow-violet-500/25 transition-all duration-300"
+        variant="solid"
         onPress={handlePasswordVerification}
         isLoading={isVerifyingPassword}
         isDisabled={isVerifyingPassword}
diff --git a/apps/frontend/src/components/pages/profile/security/multi-factor-auth/SocialAccountIdentityVerification.tsx b/apps/frontend/src/components/pages/profile/security/multi-factor-auth/SocialAccountIdentityVerification.tsx
index e78e396..169f873 100644
--- a/apps/frontend/src/components/pages/profile/security/multi-factor-auth/SocialAccountIdentityVerification.tsx
+++ b/apps/frontend/src/components/pages/profile/security/multi-factor-auth/SocialAccountIdentityVerification.tsx
@@ -46,7 +46,7 @@ const SocialAccountIdentityVerification: FC<{
         ) && (
           <Button
             variant="flat"
-            className="w-full"
+            className="w-full bg-white/10 hover:bg-white/20 backdrop-blur-md border border-white/20 dark:border-gray-700/30 hover:border-white/30 text-foreground shadow-lg hover:shadow-gray-500/25 transition-all duration-300"
             startContent={<Icon icon="logos:google-icon" width={18} />}
             onPress={() => handleSocialAccountVerification("google.com")}
             isLoading={inProgressSocialAccountProvider === "google.com"}
@@ -60,8 +60,8 @@ const SocialAccountIdentityVerification: FC<{
         ) && (
           <Button
             variant="flat"
-            className="w-full"
-            startContent={<Icon icon="logos:github-icon" width={18} />}
+            className="w-full bg-gradient-to-r from-gray-800 to-gray-900 hover:from-gray-700 hover:to-gray-800 text-white shadow-lg hover:shadow-gray-500/25 transition-all duration-300"
+            startContent={<Icon icon="lucide:github" width={18} />}
             onPress={() => handleSocialAccountVerification("github.com")}
             isLoading={inProgressSocialAccountProvider === "github.com"}
             isDisabled={!!inProgressSocialAccountProvider}
diff --git a/apps/frontend/src/components/pages/profile/security/multi-factor-auth/index.tsx b/apps/frontend/src/components/pages/profile/security/multi-factor-auth/index.tsx
index 30c860a..bc8c3cb 100644
--- a/apps/frontend/src/components/pages/profile/security/multi-factor-auth/index.tsx
+++ b/apps/frontend/src/components/pages/profile/security/multi-factor-auth/index.tsx
@@ -287,9 +287,8 @@ const MultiFactorAuth: FC = () => {
               </ModalBody>
               <ModalFooter>
                 <Button
-                  className="focus:outline-none hover:border-transparent"
+                  className="focus:outline-none hover:border-transparent bg-gradient-to-r from-red-500/10 to-pink-500/10 hover:from-red-500/20 hover:to-pink-500/20 border border-red-300/30 hover:border-red-400/50 text-red-700 dark:text-red-300 transition-all duration-300"
                   variant="flat"
-                  color="danger"
                   onPress={onClose}
                 >
                   Cancel
@@ -297,8 +296,7 @@ const MultiFactorAuth: FC = () => {
 
                 {(step === "setup" || step === "disable") && (
                   <Button
-                    className="focus:outline-none hover:border-transparent"
-                    color="primary"
+                    className="focus:outline-none hover:border-transparent bg-gradient-to-r from-violet-600 to-purple-600 hover:from-violet-500 hover:to-purple-500 text-white shadow-lg hover:shadow-violet-500/25 transition-all duration-300"
                     onPress={
                       step === "setup"
                         ? handleMFAVerification
diff --git a/apps/frontend/src/components/pages/workflow/index.tsx b/apps/frontend/src/components/pages/workflow/index.tsx
index 3050f61..f91141a 100644
--- a/apps/frontend/src/components/pages/workflow/index.tsx
+++ b/apps/frontend/src/components/pages/workflow/index.tsx
@@ -44,68 +44,72 @@ const Workflows: FC = () => {
   } = useDisclosure();
 
   return (
-    <motion.div
-      className="p-6 space-y-6"
-      variants={containerVariants}
-      initial="hidden"
-      animate="visible"
-    >
+    <div className="bg-gradient-to-br from-gray-50/20 to-purple-100/20 dark:from-gray-900/50 dark:to-purple-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 Workflows</h1>
-          <p className="text-default-500">
-            Your multi-agentic workflow wizards, reporting for duty 🤖
-          </p>
-        </div>
-        <div className="flex gap-3 items-center">
-          {workflowsList.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-purple-600 to-pink-600 dark:from-purple-400 dark:to-pink-400 bg-clip-text text-transparent">
+              My Workflows
+            </h1>
+            <p className="text-default-600 text-lg">
+              Your multi-agentic workflow wizards, reporting for duty 🤖
+            </p>
+          </div>
+          <div className="flex gap-3 items-center">
+            {workflowsList.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={workflowsList.handleBulkDelete}
+                startContent={
+                  <Icon icon="lucide:trash-2" width="20" height="20" />
+                }
+                isLoading={workflowsList.isDeletionPending}
+                isDisabled={workflowsList.isDeletionPending}
+              >
+                Delete ({workflowsList.numSelected})
+              </Button>
+            )}
             <Button
-              className="focus:outline-none hover:border-transparent rounded-md"
-              color="danger"
-              variant="flat"
-              onPress={workflowsList.handleBulkDelete}
+              className="focus:outline-none rounded-xl bg-white/10 hover:bg-white/20 backdrop-blur-md border border-gray-300/30 hover:border-gray-300/50 text-foreground shadow-lg hover:shadow-gray-500/25 transition-all duration-300"
+              variant="bordered"
               startContent={
-                <Icon icon="lucide:trash-2" width="20" height="20" />
+                <Icon icon="lucide:upload" width="20" height="20" />
               }
-              isLoading={workflowsList.isDeletionPending}
-              isDisabled={workflowsList.isDeletionPending}
+              onPress={onImportModalOpen}
             >
-              Delete ({workflowsList.numSelected})
+              Import
             </Button>
-          )}
-          <Button
-            className="focus:outline-none hover:border-transparent rounded-md"
-            variant="flat"
-            startContent={<Icon icon="lucide:upload" width="20" height="20" />}
-            onPress={onImportModalOpen}
-          >
-            Import
-          </Button>
-          <Button
-            className="focus:outline-none hover:border-transparent rounded-md"
-            color="primary"
-            startContent={<Icon icon="lucide:plus" width="24" height="24" />}
-            onPress={() => {
-              workflowStore.reset();
-              navigate({ to: "/builder" });
-            }}
-          >
-            New Workflow
-          </Button>
-        </div>
-      </motion.div>
-      <motion.div variants={itemVariants}>
-        <WorkflowList workflowsList={workflowsList} />
-      </motion.div>
+            <Button
+              className="focus:outline-none hover:border-transparent rounded-xl bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-500 hover:to-indigo-500 text-white shadow-lg hover:shadow-purple-500/25 transition-all duration-300"
+              startContent={<Icon icon="lucide:plus" width="24" height="24" />}
+              onPress={() => {
+                workflowStore.reset();
+                navigate({ to: "/builder" });
+              }}
+            >
+              New Workflow
+            </Button>
+          </div>
+        </motion.div>
+        <motion.div variants={itemVariants}>
+          <WorkflowList workflowsList={workflowsList} />
+        </motion.div>
 
-      <WorkflowImportModal
-        isOpen={isImportModalOpen}
-        onOpenChange={onImportModalOpenChange}
-      />
-    </motion.div>
+        <WorkflowImportModal
+          isOpen={isImportModalOpen}
+          onOpenChange={onImportModalOpenChange}
+        />
+      </motion.div>
+    </div>
   );
 };
 
diff --git a/apps/frontend/src/components/ui/credential/CredentialsList.tsx b/apps/frontend/src/components/ui/credential/CredentialsList.tsx
index f1dcc94..0bb2b67 100644
--- a/apps/frontend/src/components/ui/credential/CredentialsList.tsx
+++ b/apps/frontend/src/components/ui/credential/CredentialsList.tsx
@@ -31,19 +31,19 @@ const CredentialList: FC<{
         <Input
           isClearable
           classNames={{
-            base: "max-w-full sm:max-w-[30%]",
+            base: "max-w-full sm:max-w-[35%]",
             inputWrapper:
-              "border-1 border-default-200 bg-background hover:border-default-300 focus-within:outline-none transition-colors",
+              "bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm border border-amber-200 dark:border-gray-700/30 hover:border-amber-300/100 focus-within:border-amber-400/100 shadow-md transition-all duration-300",
             input: "text-small",
             clearButton:
               "text-default-400 hover:text-default-600 border-none focus:outline-none bg-transparent",
           }}
-          placeholder="Search credentials by name"
+          placeholder="Search credentials by name..."
           size="md"
           startContent={
             <Icon
               icon="lucide:search"
-              className="text-default-400 pointer-events-none flex-shrink-0"
+              className="text-amber-500 pointer-events-none flex-shrink-0"
               width={18}
               height={18}
             />
@@ -66,7 +66,7 @@ const CredentialList: FC<{
         isHeaderSticky
         classNames={{
           wrapper:
-            "max-h-[calc(100vh-320px)] border border-default-200 shadow-none",
+            "max-h-[calc(100vh-320px)] bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm border border-white/20 dark:border-gray-700/30 shadow-lg rounded-2xl",
           thead: "[&>tr]:first:shadow-none",
           tbody: "[&>tr>td:nth-child(2)]:cursor-pointer",
         }}
@@ -129,7 +129,7 @@ const CredentialList: FC<{
                 <Button
                   size="sm"
                   variant="flat"
-                  className="mt-3 focus:outline-none hover:border-transparent"
+                  className="mt-3 focus:outline-none hover:border-transparent bg-gradient-to-r from-amber-500/10 to-orange-500/10 hover:from-amber-500/20 hover:to-orange-500/20 border border-amber-300/30 hover:border-amber-400/50 transition-all duration-300"
                   onPress={() => credentialsList.setSearchTerm("")}
                   startContent={<Icon icon="lucide:x" width={16} height={16} />}
                 >
diff --git a/apps/frontend/src/components/ui/mcp/MCPServerCard.tsx b/apps/frontend/src/components/ui/mcp/MCPServerCard.tsx
index bc02fd0..f07b1c5 100644
--- a/apps/frontend/src/components/ui/mcp/MCPServerCard.tsx
+++ b/apps/frontend/src/components/ui/mcp/MCPServerCard.tsx
@@ -52,7 +52,7 @@ const MCPServerCard: FC<{
       <motion.div variants={cardVariants} layout>
         <Card
           className={cn(
-            "h-full min-h-[280px] shadow-sm border border-default-300",
+            "h-full min-h-[280px] bg-white/95 dark:bg-gray-800/95 backdrop-blur-md border-2 border-gray-200/60 dark:border-gray-600/70 shadow-lg transition-all duration-300 ring-2 ring-gray-300/30 dark:ring-gray-600/40",
           )}
         >
           <CardBody className="p-4 flex flex-col h-full">
@@ -66,23 +66,22 @@ const MCPServerCard: FC<{
                     radius="md"
                   />
                 ) : (
-                  <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
+                  <div className="w-12 h-12 bg-gradient-to-r from-indigo-500/20 to-purple-500/20 rounded-xl flex items-center justify-center border border-indigo-300/30 shadow-lg">
                     <Icon
                       icon="lucide:server"
-                      className="w-6 h-6 text-primary"
+                      className="w-6 h-6 text-indigo-600"
                     />
                   </div>
                 )}
               </div>
               <div className="flex-1 min-w-0">
-                <h3 className="text-lg font-semibold truncate">
+                <h3 className="text-lg font-semibold truncate text-gray-800 dark:text-gray-200">
                   {server.label}
                 </h3>
                 <Chip
                   size="sm"
                   variant="flat"
-                  color="default"
-                  className="mb-3 bg-default-100 text-default-500"
+                  className="mb-3 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300"
                 >
                   {server.category}
                 </Chip>
@@ -94,8 +93,8 @@ const MCPServerCard: FC<{
                   className={cn(
                     "mb-3",
                     installation?.status === "enabled"
-                      ? "text-success-500 border border-success-400"
-                      : "text-default-500 border border-default-400",
+                      ? "text-emerald-600 border border-emerald-400 bg-emerald-50/50 dark:bg-emerald-900/20"
+                      : "text-gray-600 border border-gray-400 bg-gray-50/50 dark:bg-gray-800/50",
                   )}
                 >
                   {installation?.status}
@@ -104,7 +103,7 @@ const MCPServerCard: FC<{
             </div>
 
             <div className="flex-1 mb-4">
-              <p className="text-default-600 text-sm">
+              <p className="text-default-700 dark:text-default-300 text-sm leading-relaxed">
                 {truncateDescription(
                   installation?.description || server.description,
                 )}
@@ -121,13 +120,15 @@ const MCPServerCard: FC<{
                     key={tool}
                     size="sm"
                     variant="bordered"
-                    color="default"
-                    className="text-xs px-2"
+                    className="text-xs px-1 bg-default-50 border border-default-300/30 text-default-800 dark:text-blue-300"
                     startContent={
-                      <Icon icon="lucide:wrench" className="w-3 h-3" />
+                      <Icon
+                        icon="lucide:wrench"
+                        className="w-3 h-3 text-default-800"
+                      />
                     }
                   >
-                    {tool}
+                    <span className={"px-1"}>{tool}</span>
                   </Chip>
                 ))}
                 {(isInstalled && installation
@@ -136,8 +137,7 @@ const MCPServerCard: FC<{
                   <Chip
                     size="sm"
                     variant="flat"
-                    color="default"
-                    className="text-xs"
+                    className="text-xs bg-gradient-to-r from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-600 text-gray-600 dark:text-gray-300"
                   >
                     +
                     {isInstalled && installation
@@ -154,23 +154,21 @@ const MCPServerCard: FC<{
                     <Button
                       size="sm"
                       variant="flat"
-                      color="secondary"
                       startContent={
                         <Icon icon="lucide:settings" className="w-4 h-4" />
                       }
                       onPress={() => onConfigure?.(installation)}
                       title="Configure"
-                      className="flex-1 focus:outline-none hover:border-transparent "
+                      className="flex-1 focus:outline-none bg-gradient-to-r from-indigo-500/10 to-purple-500/10 hover:from-indigo-500/20 hover:to-purple-500/20 border border-indigo-300/30 hover:border-indigo-400/50 text-indigo-700 dark:text-indigo-300 transition-all duration-300"
                     >
                       Configure
                     </Button>
                     <Button
                       size="sm"
                       variant="flat"
-                      color="danger"
                       onPress={() => onUninstall?.(installation)}
                       title="Uninstall"
-                      className="flex-1 focus:outline-none hover:border-transparent"
+                      className="flex-1 focus:outline-none bg-gradient-to-r from-red-500/10 to-pink-500/10 hover:from-red-500/20 hover:to-pink-500/20 border border-red-300/30 hover:border-red-400/50 text-red-700 dark:text-red-300 transition-all duration-300"
                       startContent={
                         <Icon icon="lucide:trash-2" className="w-4 h-4" />
                       }
@@ -186,7 +184,7 @@ const MCPServerCard: FC<{
                       startContent={
                         <Icon icon="lucide:eye" className="w-4 h-4" />
                       }
-                      className="flex-1 bg-default-200 focus:outline-none hover:border-transparent"
+                      className="flex-1 focus:outline-none bg-gradient-to-r from-gray-500/10 to-slate-500/10 hover:from-gray-500/20 hover:to-slate-500/20 border border-gray-300/30 hover:border-gray-400/50 text-gray-700 dark:text-gray-300 transition-all duration-300"
                       onPress={onOpen}
                     >
                       Details
@@ -198,7 +196,7 @@ const MCPServerCard: FC<{
                         <Icon icon="lucide:download" className="w-4 h-4" />
                       }
                       onPress={() => onInstall?.(server)}
-                      className="flex-1 focus:outline-none hover:border-transparent bg-primary-400 text-white"
+                      className="flex-1 focus:outline-none hover:border-transparent bg-indigo-500 hover:from-indigo-500/90 hover:to-purple-500/90 text-white shadow-lg hover:shadow-indigo-500/25 transition-all duration-300"
                     >
                       Install
                     </Button>
diff --git a/apps/frontend/src/components/ui/navbar/DashboardNavbar.tsx b/apps/frontend/src/components/ui/navbar/DashboardNavbar.tsx
index bdf140f..d5234bd 100644
--- a/apps/frontend/src/components/ui/navbar/DashboardNavbar.tsx
+++ b/apps/frontend/src/components/ui/navbar/DashboardNavbar.tsx
@@ -3,10 +3,6 @@ import {
   NavbarBrand,
   NavbarContent,
   Button,
-  Dropdown,
-  DropdownTrigger,
-  DropdownMenu,
-  DropdownItem,
   cn,
 } from "@heroui/react";
 import { Icon } from "@iconify/react";
@@ -51,10 +47,10 @@ const DashboardNavbar: FC<NavbarProps> = ({ onMenuToggle, isSmallScreen }) => {
       <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>
@@ -62,22 +58,36 @@ const DashboardNavbar: FC<NavbarProps> = ({ onMenuToggle, isSmallScreen }) => {
       </NavbarBrand>
 
       <NavbarContent justify="end">
-        <Dropdown placement="bottom-end">
+        {/* Notification bell - commented out until functionality is implemented */}
+        {/*<Dropdown placement="bottom-end">
           <DropdownTrigger>
             <Button
               isIconOnly
               variant="light"
-              className="text-default-500"
+              className="text-default-500 hover:bg-gray-100/50 dark:hover:bg-gray-800/50 transition-colors duration-300"
               aria-label="Notifications"
             >
               <Icon icon="lucide:bell" width={20} />
             </Button>
           </DropdownTrigger>
-          <DropdownMenu aria-label="Notifications">
-            <DropdownItem key="new">New notifications</DropdownItem>
-            <DropdownItem key="empty">No new notifications</DropdownItem>
+          <DropdownMenu
+            aria-label="Notifications"
+            className="bg-white/95 dark:bg-gray-800/95 backdrop-blur-md border border-gray-200/60 dark:border-gray-600/70 shadow-2xl"
+          >
+            <DropdownItem
+              key="new"
+              className="hover:bg-blue-50 dark:hover:bg-blue-900/20"
+            >
+              New notifications
+            </DropdownItem>
+            <DropdownItem
+              key="empty"
+              className="hover:bg-gray-50 dark:hover:bg-gray-800/50"
+            >
+              No new notifications
+            </DropdownItem>
           </DropdownMenu>
-        </Dropdown>
+        </Dropdown>*/}
 
         {/*<Dropdown placement="bottom-end">*/}
         {/*  <DropdownTrigger>*/}
diff --git a/apps/frontend/src/components/ui/sidebar/DashboardSidebar.tsx b/apps/frontend/src/components/ui/sidebar/DashboardSidebar.tsx
index e2719e3..fedb3fd 100644
--- a/apps/frontend/src/components/ui/sidebar/DashboardSidebar.tsx
+++ b/apps/frontend/src/components/ui/sidebar/DashboardSidebar.tsx
@@ -94,7 +94,7 @@ const DashboardSidebar: FC<SidebarProps> = ({ isCollapsed }) => {
   return (
     <motion.aside
       className={cn(
-        "h-full bg-content1 border-r border-divider flex flex-col z-20",
+        "h-full bg-white/95 dark:bg-gray-800/95 backdrop-blur-md border-r border-gray-200/60 dark:border-gray-600/70 flex flex-col z-20 shadow-lg",
         isCollapsed ? "w-16" : "w-64",
       )}
       initial={false}
@@ -119,13 +119,35 @@ const DashboardSidebar: FC<SidebarProps> = ({ isCollapsed }) => {
               <Link to={item.to}>
                 <div
                   className={cn(
-                    "sidebar-link group",
-                    item.isActive ? "active" : "",
+                    "flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-300 group",
+                    item.isActive
+                      ? "border-l-4 border-l-cyan-500 bg-cyan-50/30 dark:bg-cyan-900/10"
+                      : "hover:bg-gray-50 dark:hover:bg-gray-800/50",
                     isCollapsed ? "justify-center" : "justify-start",
                   )}
                 >
-                  <Icon icon={item.icon} width={20} />
-                  {!isCollapsed && <span>{item.label}</span>}
+                  <Icon
+                    icon={item.icon}
+                    width={20}
+                    className={cn(
+                      "transition-colors duration-300",
+                      item.isActive
+                        ? "text-cyan-600 dark:text-cyan-400"
+                        : "text-gray-500 dark:text-gray-400 group-hover:text-cyan-600 dark:group-hover:text-cyan-400",
+                    )}
+                  />
+                  {!isCollapsed && (
+                    <span
+                      className={cn(
+                        "font-medium transition-colors duration-300",
+                        item.isActive
+                          ? "text-cyan-700 dark:text-cyan-300"
+                          : "text-gray-600 dark:text-gray-300 group-hover:text-cyan-700 dark:group-hover:text-cyan-300",
+                      )}
+                    >
+                      {item.label}
+                    </span>
+                  )}
                 </div>
               </Link>
             </Tooltip>
@@ -133,7 +155,7 @@ const DashboardSidebar: FC<SidebarProps> = ({ isCollapsed }) => {
         </nav>
       </div>
 
-      <Divider />
+      <Divider className="bg-gradient-to-r from-gray-200/50 to-gray-300/50 dark:from-gray-600/50 dark:to-gray-700/50" />
 
       <div className={cn("p-4", isCollapsed ? "items-center" : "")}>
         {!isCollapsed ? (
@@ -141,20 +163,20 @@ const DashboardSidebar: FC<SidebarProps> = ({ isCollapsed }) => {
             <Link to={"/profile"}>
               <div
                 className={cn(
-                  "flex items-center gap-3 mb-4 p-2 rounded-lg transition-colors",
-                  "hover:bg-default-100",
+                  "flex items-center gap-3 mb-4 p-3 rounded-xl transition-all duration-300",
+                  "hover:bg-gray-50 dark:hover:bg-gray-800/50",
                   location.pathname === "/profile"
-                    ? "bg-primary/10 dark:bg-primary/20 shadow-sm ring-1 ring-primary/20"
+                    ? "border-l-3 border-l-cyan-500 bg-cyan-50/30 dark:bg-cyan-900/10"
                     : "",
                 )}
               >
                 <Avatar
                   src={user?.photoURL ?? ""}
                   className={cn(
-                    "flex-shrink-0 shadow",
+                    "flex-shrink-0",
                     location.pathname === "/profile"
-                      ? "ring-2 ring-primary ring-offset-2 ring-offset-background"
-                      : "",
+                      ? "ring-2 ring-cyan-500"
+                      : "ring-1 ring-gray-200 dark:ring-gray-600",
                   )}
                   size="sm"
                 />
@@ -162,12 +184,14 @@ const DashboardSidebar: FC<SidebarProps> = ({ isCollapsed }) => {
                   <p
                     className={cn(
                       "text-sm font-medium truncate",
-                      location.pathname === "/profile" && "text-primary",
+                      location.pathname === "/profile"
+                        ? "text-cyan-700 dark:text-cyan-300"
+                        : "text-gray-800 dark:text-gray-200",
                     )}
                   >
                     {user?.displayName ?? "User"}
                   </p>
-                  <p className="text-xs text-default-500 truncate">
+                  <p className="text-xs text-gray-500 dark:text-gray-400 truncate">
                     {user?.email ?? ""}
                   </p>
                 </div>
@@ -176,9 +200,8 @@ const DashboardSidebar: FC<SidebarProps> = ({ isCollapsed }) => {
 
             <Button
               variant="flat"
-              color="danger"
               startContent={<Icon icon="lucide:log-out" width={16} />}
-              className="w-full justify-start"
+              className="w-full justify-start bg-gradient-to-r from-red-500/10 to-pink-500/10 hover:from-red-500/20 hover:to-pink-500/20 border border-red-300/30 hover:border-red-400/50 text-red-700 dark:text-red-300 transition-all duration-300"
               size="sm"
               onPress={handleSignOut}
             >
@@ -193,8 +216,8 @@ const DashboardSidebar: FC<SidebarProps> = ({ isCollapsed }) => {
                 className={cn(
                   "flex-shrink-0",
                   location.pathname === "/profile"
-                    ? "ring-2 ring-primary ring-offset-2 ring-offset-background shadow-lg"
-                    : "",
+                    ? "ring-2 ring-cyan-500"
+                    : "ring-1 ring-gray-200 dark:ring-gray-600 hover:ring-2 hover:ring-cyan-400 transition-all duration-300",
                 )}
                 size="sm"
               />
@@ -211,9 +234,9 @@ const DashboardSidebar: FC<SidebarProps> = ({ isCollapsed }) => {
               <Button
                 isIconOnly
                 variant="flat"
-                color="danger"
                 size="sm"
                 title="Sign Out"
+                className="bg-gradient-to-r from-red-500/10 to-pink-500/10 hover:from-red-500/20 hover:to-pink-500/20 border border-red-300/30 hover:border-red-400/50 text-red-700 dark:text-red-300 transition-all duration-300"
                 onPress={handleSignOut}
               >
                 <Icon icon="lucide:log-out" width={16} />
diff --git a/apps/frontend/src/components/ui/workflow/list/index.tsx b/apps/frontend/src/components/ui/workflow/list/index.tsx
index bb65f6c..4eb4d3e 100644
--- a/apps/frontend/src/components/ui/workflow/list/index.tsx
+++ b/apps/frontend/src/components/ui/workflow/list/index.tsx
@@ -32,14 +32,14 @@ const WorkflowList: FC<{
         <Input
           isClearable
           classNames={{
-            base: "max-w-full sm:max-w-[30%]",
+            base: "max-w-full sm:max-w-[35%]",
             inputWrapper:
-              "border-1 border-default-200 bg-background hover:border-default-300 focus-within:outline-none transition-colors",
-            input: "text-small",
+              "bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm border border-purple-200 dark:border-gray-700/30 hover:border-purple-300 focus-within:border-purple-400/100 shadow-md transition-all duration-300 ",
+            input: "text-small ",
             clearButton:
               "text-default-400 hover:text-default-600 border-none focus:outline-none bg-transparent",
           }}
-          placeholder="Search workflows by name"
+          placeholder="Search workflows by name..."
           size="md"
           startContent={
             <Icon
@@ -67,7 +67,7 @@ const WorkflowList: FC<{
         isHeaderSticky
         classNames={{
           wrapper:
-            "max-h-[calc(100vh-320px)] border border-default-200 shadow-none",
+            "max-h-[calc(100vh-320px)] bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm border border-white/20 dark:border-gray-700/30 shadow-lg rounded-2xl",
           thead: "[&>tr]:first:shadow-none",
           tbody:
             "[&>tr>td:nth-child(2)]:cursor-pointer [&>tr>td:nth-child(2):hover>span]:underline",
@@ -131,7 +131,7 @@ const WorkflowList: FC<{
                 <Button
                   size="sm"
                   variant="flat"
-                  className="mt-3 focus:outline-none hover:border-transparent"
+                  className="mt-3 focus:outline-none hover:border-transparent bg-gradient-to-r from-purple-500/10 to-indigo-500/10 hover:from-purple-500/20 hover:to-indigo-500/20 border border-purple-300/30 hover:border-purple-400/50 transition-all duration-300"
                   onPress={() => workflowsList.setSearchTerm("")}
                   startContent={<Icon icon="lucide:x" width={16} height={16} />}
                 >

From 6bc942169c3cbeee65930af4ff3877af03e1eb55 Mon Sep 17 00:00:00 2001
From: coolpengwing <coolpengwing@gmail.com>
Date: Tue, 2 Sep 2025 22:40:37 +0100
Subject: [PATCH 3/4] feat: recolor workflow canvas nodes

---
 .../src/components/ui/workflow/builder/node/constants.ts      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/src/components/ui/workflow/builder/node/constants.ts b/apps/frontend/src/components/ui/workflow/builder/node/constants.ts
index 8a3e08c..aee6183 100644
--- a/apps/frontend/src/components/ui/workflow/builder/node/constants.ts
+++ b/apps/frontend/src/components/ui/workflow/builder/node/constants.ts
@@ -21,11 +21,11 @@ export const NODE_SETTINGS: Record<
   },
   aggregator_agent: {
     icon: "tabler:sparkles",
-    color: "#64B5F6",
+    color: "#008eff",
   },
   router_agent: {
     icon: "material-symbols:arrow-split-rounded",
-    color: "#FFB938",
+    color: "#FFA502",
   },
   one_inch_agent: {
     icon: "token-branded:1inch",

From 2f595febc441e5c5533b78cdc4d0008fdd94c90f Mon Sep 17 00:00:00 2001
From: coolpengwing <coolpengwing@gmail.com>
Date: Tue, 2 Sep 2025 22:59:03 +0100
Subject: [PATCH 4/4] feat: update styling for node Info component and fix
 border colors in dashboard cards

---
 .../frontend/src/components/pages/dashboard/index.tsx |  2 +-
 .../ui/workflow/builder/node/generic/Info.tsx         | 11 ++++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/apps/frontend/src/components/pages/dashboard/index.tsx b/apps/frontend/src/components/pages/dashboard/index.tsx
index 0d1296e..e48be08 100644
--- a/apps/frontend/src/components/pages/dashboard/index.tsx
+++ b/apps/frontend/src/components/pages/dashboard/index.tsx
@@ -70,7 +70,7 @@ export const DashboardPage: FC = () => {
           {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-gray-200/60 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`}
+              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 }}
             >
diff --git a/apps/frontend/src/components/ui/workflow/builder/node/generic/Info.tsx b/apps/frontend/src/components/ui/workflow/builder/node/generic/Info.tsx
index 806cbbc..60d14db 100644
--- a/apps/frontend/src/components/ui/workflow/builder/node/generic/Info.tsx
+++ b/apps/frontend/src/components/ui/workflow/builder/node/generic/Info.tsx
@@ -47,21 +47,22 @@ const Info: FC<{
   return (
     <div
       className={cn(
-        "w-fit rounded-lg bg-white font-sans transition-all duration-100 cursor-pointer border-2 shadow-sm border-gray-200 pr-4 flex items-center",
+        "w-fit rounded-xl bg-white font-sans transition-all duration-100 cursor-pointer border-2 shadow-sm border-gray-200 pr-4 flex items-center",
       )}
       style={{
-        borderColor: color,
+        border: `3px solid ${color}90`,
+        backgroundColor: `${color}10`,
       }}
     >
       <div className="flex items-center gap-2.5 p-3">
         <div
           className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-md"
           style={{
-            backgroundColor: `${color}15`,
-            border: `1px solid ${color}30`,
+            backgroundColor: `white`,
+            border: `2px solid ${color}30`,
           }}
         >
-          <Icon icon={icon} className="h-5 w-5" style={{ color }} />
+          <Icon icon={icon} className="h-5 w-5 text-white" color={color} />
         </div>
 
         <div className="min-w-0 flex-1">