diff --git a/packages/api/src/resolvers/highlight/index.ts b/packages/api/src/resolvers/highlight/index.ts
index d2783a26d..120554c86 100644
--- a/packages/api/src/resolvers/highlight/index.ts
+++ b/packages/api/src/resolvers/highlight/index.ts
@@ -74,12 +74,18 @@ export const createHighlightResolver = authorized<
     }
   }
 
+  // unescape HTML entities
+  const annotation = input.annotation
+    ? unescapeHtml(input.annotation)
+    : undefined
+
   try {
     const highlight: HighlightData = {
+      ...input,
       updatedAt: new Date(),
       createdAt: new Date(),
       userId: claims.uid,
-      ...input,
+      annotation,
     }
 
     if (
diff --git a/packages/api/test/resolvers/highlight.test.ts b/packages/api/test/resolvers/highlight.test.ts
index d179c0ba0..bd7a6d1dc 100644
--- a/packages/api/test/resolvers/highlight.test.ts
+++ b/packages/api/test/resolvers/highlight.test.ts
@@ -23,6 +23,7 @@ const createHighlightQuery = (
   shortHighlightId: string,
   highlightPositionPercent = 0.0,
   highlightPositionAnchorIndex = 0,
+  annotation = '_annotation',
   prefix = '_prefix',
   suffix = '_suffix',
   quote = '_quote',
@@ -41,6 +42,7 @@ const createHighlightQuery = (
         articleId: "${linkId}",
         highlightPositionPercent: ${highlightPositionPercent},
         highlightPositionAnchorIndex: ${highlightPositionAnchorIndex}
+        annotation: "${annotation}"
       }
     ) {
       ... on CreateHighlightSuccess {
@@ -48,6 +50,7 @@ const createHighlightQuery = (
           id
           highlightPositionPercent
           highlightPositionAnchorIndex
+          annotation
         }
       }
       ... on CreateHighlightError {
@@ -177,6 +180,28 @@ describe('Highlights API', () => {
         res.body.data.createHighlight.highlight.highlightPositionAnchorIndex
       ).to.eq(highlightPositionAnchorIndex)
     })
+
+    context('when the annotation has HTML reserved characters', () => {
+      it('unescapes the annotation and creates', async () => {
+        const newHighlightId = generateFakeUuid()
+        const newShortHighlightId = '_short_id_4'
+        const highlightPositionPercent = 50.0
+        const highlightPositionAnchorIndex = 25
+        const query = createHighlightQuery(
+          authToken,
+          pageId,
+          newHighlightId,
+          newShortHighlightId,
+          highlightPositionPercent,
+          highlightPositionAnchorIndex,
+          '-> <-'
+        )
+        const res = await graphqlRequest(query, authToken).expect(200)
+        expect(res.body.data.createHighlight.highlight.annotation).to.eql(
+          '-> <-'
+        )
+      })
+    })
   })
 
   context('mergeHighlightMutation', () => {