diff --git a/packages/api/src/services/labels.ts b/packages/api/src/services/labels.ts
index 7067deec2..21b66fa4c 100644
--- a/packages/api/src/services/labels.ts
+++ b/packages/api/src/services/labels.ts
@@ -148,6 +148,7 @@ export const saveLabelsInLibraryItem = async (
       {
         id: libraryItemId,
         labels: labels.map((l) => deepDelete(l, columnsToDelete)),
+        labelNames: labels.map((l) => l.name),
       },
       userId
     )
diff --git a/packages/web/pages/settings/rules.tsx b/packages/web/pages/settings/rules.tsx
index 3cd9441e5..c74907ade 100644
--- a/packages/web/pages/settings/rules.tsx
+++ b/packages/web/pages/settings/rules.tsx
@@ -25,6 +25,14 @@ type CreateRuleModalProps = {
   revalidate: () => void
 }
 
+const eventTypeObj = {
+  PAGE_CREATED: 'PAGE_CREATED',
+  PAGE_UPDATED: 'PAGE_UPDATED',
+  HIGHLIGHT_CREATED: 'HIGHLIGHT_CREATED',
+  HIGHLIGHT_UPDATED: 'HIGHLIGHT_UPDATED',
+  LABEL_CREATED: 'LABEL_ATTACHED',
+}
+
 const CreateRuleModal = (props: CreateRuleModalProps): JSX.Element => {
   const [form] = Form.useForm()
 
@@ -104,7 +112,7 @@ const CreateRuleModal = (props: CreateRuleModalProps): JSX.Element => {
               const value = Object.values(RuleEventType)[index]
               return (
                 <Select.Option key={key} value={value}>
-                  {key === 'LABEL_CREATED' ? 'LABEL_ATTACHED' : key}
+                  {eventTypeObj[value]}
                 </Select.Option>
               )
             })}
@@ -363,7 +371,7 @@ export default function Rules(): JSX.Element {
           {row.eventTypes.map((eventType: RuleEventType, index: number) => {
             return (
               <Tag color={'geekblue'} key={index}>
-                {eventType}
+                {eventTypeObj[eventType]}
               </Tag>
             )
           })}