diff --git a/src/client/components/feed/FeedChannelPicker.tsx b/src/client/components/feed/FeedChannelPicker.tsx
index 714a220..5a1ece8 100644
--- a/src/client/components/feed/FeedChannelPicker.tsx
+++ b/src/client/components/feed/FeedChannelPicker.tsx
@@ -1,5 +1,5 @@
 import { Button, Empty, Select, SelectProps } from 'antd';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { trpc } from '../../api/trpc';
 import { useCurrentWorkspaceId } from '../../store/user';
 import { PlusOutlined } from '@ant-design/icons';
@@ -16,6 +16,15 @@ export const FeedChannelPicker: React.FC<FeedChannelPickerProps> = React.memo(
       workspaceId,
     });
 
+    const options = useMemo(
+      () =>
+        allChannels.map((m) => ({
+          label: m.name,
+          value: m.id,
+        })),
+      [allChannels]
+    );
+
     return (
       <Select
         notFoundContent={
@@ -38,13 +47,9 @@ export const FeedChannelPicker: React.FC<FeedChannelPickerProps> = React.memo(
           />
         }
         {...props}
-      >
-        {allChannels.map((m) => (
-          <Select.Option key={m.id} value={m.id}>
-            {m.name}
-          </Select.Option>
-        ))}
-      </Select>
+        options={options}
+        optionFilterProp="label"
+      />
     );
   }
 );
diff --git a/src/client/components/notification/NotificationPicker.tsx b/src/client/components/notification/NotificationPicker.tsx
index 9f35af6..b84e99f 100644
--- a/src/client/components/notification/NotificationPicker.tsx
+++ b/src/client/components/notification/NotificationPicker.tsx
@@ -1,5 +1,5 @@
 import { Button, Empty, Select, SelectProps } from 'antd';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { trpc } from '../../api/trpc';
 import { useCurrentWorkspaceId } from '../../store/user';
 import { ColorTag } from '../ColorTag';
@@ -17,6 +17,21 @@ export const NotificationPicker: React.FC<NotificationPickerProps> = React.memo(
       workspaceId,
     });
 
+    const options = useMemo(
+      () =>
+        allNotification.map((notification) => ({
+          label: (
+            <div>
+              <ColorTag label={notification.type} />
+              {notification.name}
+            </div>
+          ),
+          value: notification.id,
+          desc: notification.name,
+        })),
+      [allNotification]
+    );
+
     return (
       <Select
         notFoundContent={
@@ -39,14 +54,9 @@ export const NotificationPicker: React.FC<NotificationPickerProps> = React.memo(
           />
         }
         {...props}
-      >
-        {allNotification.map((m) => (
-          <Select.Option key={m.id} value={m.id}>
-            <ColorTag label={m.type} />
-            {m.name}
-          </Select.Option>
-        ))}
-      </Select>
+        options={options}
+        optionFilterProp="desc"
+      />
     );
   }
 );