diff --git a/agenta-web/src/components/AppSelector/AppSelector.tsx b/agenta-web/src/components/AppSelector/AppSelector.tsx
index 2829d24629..2435aa389c 100644
--- a/agenta-web/src/components/AppSelector/AppSelector.tsx
+++ b/agenta-web/src/components/AppSelector/AppSelector.tsx
@@ -49,11 +49,11 @@ const useStyles = createUseStyles({
             borderColor: themeMode === "dark" ? "rgba(256, 256, 256, 0.2)" : "rgba(5, 5, 5, 0.1)",
         },
     }),
-    createCard: {
+    createCard: ({themeMode}: StyleProps) => ({
         fontSize: 20,
-        backgroundColor: "hsl(0, 0%, 100%)",
-        borderColor: "hsl(0, 0%, 10%) !important",
-        color: "#FFFFFF",
+        backgroundColor: themeMode === "dark" ? "" : "hsl(0, 0%, 100%)",
+        borderColor: themeMode === "dark" ? "hsl(0, 0%, 100%)" : "hsl(0, 0%, 10%) !important",
+        color: themeMode === "dark" ? "#fff" : "#000",
         boxShadow: "0px 4px 8px rgba(0, 0, 0, 0.1)",
 
         width: 300,
@@ -63,16 +63,16 @@ const useStyles = createUseStyles({
         justifyContent: "center",
         cursor: "pointer",
         "& .ant-card-meta-title": {
-            color: "hsl(0, 0%, 10%)",
+            color: themeMode === "dark" ? "#fff" : "#000",
         },
-    },
-    createCardMeta: {
+    }),
+    createCardMeta: ({themeMode}: StyleProps) => ({
         height: "90%",
         display: "flex",
         alignItems: "center",
         justifyContent: "space-evenly",
-        color: "hsl(0, 0%, 10%)",
-    },
+        color: themeMode === "dark" ? "#fff" : "#000",
+    }),
     closeIcon: {
         fontSize: 20,
         color: "red",