diff --git a/client/components/calendar/TaskInfoCard.tsx b/client/components/calendar/TaskInfoCard.tsx
index a912189..d912330 100644
--- a/client/components/calendar/TaskInfoCard.tsx
+++ b/client/components/calendar/TaskInfoCard.tsx
@@ -100,7 +100,10 @@ export function TaskInfoComponent({
       </View>
       <View className="space-y-2">
         <View
-          className={`mr-auto flex flex-row items-center space-x-2 rounded-full border bg-${categoryToBGColor(category)} border-carewallet-lightgray px-2 py-1`}
+          className={clsx(
+            'mr-auto flex flex-row items-center space-x-2 rounded-full border border-carewallet-lightgray px-2 py-1',
+            categoryToBGColor(task?.task_type ?? 'Other')
+          )}
         >
           <View>
             {CategoryIconsMap[TypeToCategoryMap[task?.task_type ?? 'Other']]}
diff --git a/client/screens/TaskList.tsx b/client/screens/TaskList.tsx
index 6e3b5e9..be419e9 100644
--- a/client/screens/TaskList.tsx
+++ b/client/screens/TaskList.tsx
@@ -55,6 +55,8 @@ export default function TaskListScreen() {
   );
   const { roles } = useGroup(userGroup.groupID);
   const { users } = useUsers(roles?.map((role) => role.user_id) || []);
+  const [sortBy, setSortBy] = useState('All Tasks');
+  console.log(sortBy);
 
   // Filter tasks based on search query in multiple fields and labels
   const filteredTasks = tasks?.filter((task) => {