diff --git a/packages/api/src/elastic/types.ts b/packages/api/src/elastic/types.ts
index 1ec528e54..6b32f0c91 100644
--- a/packages/api/src/elastic/types.ts
+++ b/packages/api/src/elastic/types.ts
@@ -1,6 +1,6 @@
 // Define the type of the body for the Search request
-import { PickTuple } from '../util'
 import { PubsubClient } from '../datalayer/pubsub'
+import { PickTuple } from '../util'
 import {
   DateFilter,
   FieldFilter,
@@ -210,6 +210,7 @@ export interface Highlight {
   labels?: Label[]
   highlightPositionPercent?: number | null
   highlightPositionAnchorIndex?: number | null
+  html?: string | null
 }
 
 export interface RecommendingUser {
diff --git a/packages/api/src/generated/graphql.ts b/packages/api/src/generated/graphql.ts
index 3334b1968..e1b744946 100644
--- a/packages/api/src/generated/graphql.ts
+++ b/packages/api/src/generated/graphql.ts
@@ -344,6 +344,7 @@ export type CreateHighlightInput = {
   articleId: Scalars['ID'];
   highlightPositionAnchorIndex?: InputMaybe<Scalars['Int']>;
   highlightPositionPercent?: InputMaybe<Scalars['Float']>;
+  html?: InputMaybe<Scalars['String']>;
   id: Scalars['ID'];
   patch: Scalars['String'];
   prefix?: InputMaybe<Scalars['String']>;
@@ -899,6 +900,7 @@ export type Highlight = {
   createdByMe: Scalars['Boolean'];
   highlightPositionAnchorIndex?: Maybe<Scalars['Int']>;
   highlightPositionPercent?: Maybe<Scalars['Float']>;
+  html?: Maybe<Scalars['String']>;
   id: Scalars['ID'];
   labels?: Maybe<Array<Label>>;
   patch: Scalars['String'];
@@ -1120,6 +1122,7 @@ export type MergeHighlightInput = {
   articleId: Scalars['ID'];
   highlightPositionAnchorIndex?: InputMaybe<Scalars['Int']>;
   highlightPositionPercent?: InputMaybe<Scalars['Float']>;
+  html?: InputMaybe<Scalars['String']>;
   id: Scalars['ID'];
   overlapHighlightIdList: Array<Scalars['String']>;
   patch: Scalars['String'];
@@ -2717,6 +2720,7 @@ export enum UpdateHighlightErrorCode {
 export type UpdateHighlightInput = {
   annotation?: InputMaybe<Scalars['String']>;
   highlightId: Scalars['ID'];
+  html?: InputMaybe<Scalars['String']>;
   quote?: InputMaybe<Scalars['String']>;
   sharedAt?: InputMaybe<Scalars['Date']>;
 };
@@ -4711,6 +4715,7 @@ export type HighlightResolvers<ContextType = ResolverContext, ParentType extends
   createdByMe?: Resolver<ResolversTypes['Boolean'], ParentType, ContextType>;
   highlightPositionAnchorIndex?: Resolver<Maybe<ResolversTypes['Int']>, ParentType, ContextType>;
   highlightPositionPercent?: Resolver<Maybe<ResolversTypes['Float']>, ParentType, ContextType>;
+  html?: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
   id?: Resolver<ResolversTypes['ID'], ParentType, ContextType>;
   labels?: Resolver<Maybe<Array<ResolversTypes['Label']>>, ParentType, ContextType>;
   patch?: Resolver<ResolversTypes['String'], ParentType, ContextType>;
diff --git a/packages/api/src/generated/schema.graphql b/packages/api/src/generated/schema.graphql
index 629d64e48..76ba99cc7 100644
--- a/packages/api/src/generated/schema.graphql
+++ b/packages/api/src/generated/schema.graphql
@@ -296,6 +296,7 @@ input CreateHighlightInput {
   articleId: ID!
   highlightPositionAnchorIndex: Int
   highlightPositionPercent: Float
+  html: String
   id: ID!
   patch: String!
   prefix: String
@@ -796,6 +797,7 @@ type Highlight {
   createdByMe: Boolean!
   highlightPositionAnchorIndex: Int
   highlightPositionPercent: Float
+  html: String
   id: ID!
   labels: [Label!]
   patch: String!
@@ -996,6 +998,7 @@ input MergeHighlightInput {
   articleId: ID!
   highlightPositionAnchorIndex: Int
   highlightPositionPercent: Float
+  html: String
   id: ID!
   overlapHighlightIdList: [String!]!
   patch: String!
@@ -2078,6 +2081,7 @@ enum UpdateHighlightErrorCode {
 input UpdateHighlightInput {
   annotation: String
   highlightId: ID!
+  html: String
   quote: String
   sharedAt: Date
 }
diff --git a/packages/api/src/schema.ts b/packages/api/src/schema.ts
index c298c856a..48e9dff27 100755
--- a/packages/api/src/schema.ts
+++ b/packages/api/src/schema.ts
@@ -682,6 +682,7 @@ const schema = gql`
     highlightPositionPercent: Float
     highlightPositionAnchorIndex: Int
     labels: [Label!]
+    html: String
   }
 
   input CreateHighlightInput {
@@ -696,6 +697,7 @@ const schema = gql`
     sharedAt: Date
     highlightPositionPercent: Float
     highlightPositionAnchorIndex: Int
+    html: String
   }
 
   type CreateHighlightSuccess {
@@ -728,6 +730,7 @@ const schema = gql`
     overlapHighlightIdList: [String!]!
     highlightPositionPercent: Float
     highlightPositionAnchorIndex: Int
+    html: String
   }
 
   type MergeHighlightSuccess {
@@ -754,6 +757,7 @@ const schema = gql`
     annotation: String @sanitize(maxLength: 4000)
     sharedAt: Date
     quote: String @sanitize(maxLength: 6000, minLength: 1)
+    html: String
   }
 
   type UpdateHighlightSuccess {
diff --git a/packages/api/test/resolvers/highlight.test.ts b/packages/api/test/resolvers/highlight.test.ts
index 3a687c12a..5ed90759f 100644
--- a/packages/api/test/resolvers/highlight.test.ts
+++ b/packages/api/test/resolvers/highlight.test.ts
@@ -1,3 +1,11 @@
+import * as chai from 'chai'
+import { expect } from 'chai'
+import chaiString from 'chai-string'
+import 'mocha'
+import { createPubSubClient } from '../../src/datalayer/pubsub'
+import { deletePage, updatePage } from '../../src/elastic/pages'
+import { PageContext } from '../../src/elastic/types'
+import { User } from '../../src/entity/user'
 import { createTestUser, deleteTestUser } from '../db'
 import {
   createTestElasticPage,
@@ -5,25 +13,17 @@ import {
   graphqlRequest,
   request,
 } from '../util'
-import * as chai from 'chai'
-import { expect } from 'chai'
-import 'mocha'
-import { User } from '../../src/entity/user'
-import chaiString from 'chai-string'
-import { createPubSubClient } from '../../src/datalayer/pubsub'
-import { PageContext } from '../../src/elastic/types'
-import { deletePage, updatePage } from '../../src/elastic/pages'
 
 chai.use(chaiString)
 
 const createHighlightQuery = (
-  authToken: string,
   linkId: string,
   highlightId: string,
   shortHighlightId: string,
   highlightPositionPercent = 0.0,
   highlightPositionAnchorIndex = 0,
   annotation = '_annotation',
+  html: string | null = null,
   prefix = '_prefix',
   suffix = '_suffix',
   quote = '_quote',
@@ -43,6 +43,7 @@ const createHighlightQuery = (
         highlightPositionPercent: ${highlightPositionPercent},
         highlightPositionAnchorIndex: ${highlightPositionAnchorIndex}
         annotation: "${annotation}"
+        html: "${html}"
       }
     ) {
       ... on CreateHighlightSuccess {
@@ -51,6 +52,7 @@ const createHighlightQuery = (
           highlightPositionPercent
           highlightPositionAnchorIndex
           annotation
+          html
         }
       }
       ... on CreateHighlightError {
@@ -163,18 +165,20 @@ describe('Highlights API', () => {
   })
 
   context('createHighlightMutation', () => {
-    it('should not fail', async () => {
+    it('does not fail', async () => {
       const highlightId = generateFakeUuid()
       const shortHighlightId = '_short_id'
       const highlightPositionPercent = 35.0
       const highlightPositionAnchorIndex = 15
+      const html = '<p>test</p>'
       const query = createHighlightQuery(
-        authToken,
         pageId,
         highlightId,
         shortHighlightId,
         highlightPositionPercent,
-        highlightPositionAnchorIndex
+        highlightPositionAnchorIndex,
+        '_annotation',
+        html
       )
       const res = await graphqlRequest(query, authToken).expect(200)
 
@@ -185,6 +189,7 @@ describe('Highlights API', () => {
       expect(
         res.body.data.createHighlight.highlight.highlightPositionAnchorIndex
       ).to.eq(highlightPositionAnchorIndex)
+      expect(res.body.data.createHighlight.highlight.html).to.eq(html)
     })
 
     context('when the annotation has HTML reserved characters', () => {
@@ -194,7 +199,6 @@ describe('Highlights API', () => {
         const highlightPositionPercent = 50.0
         const highlightPositionAnchorIndex = 25
         const query = createHighlightQuery(
-          authToken,
           pageId,
           newHighlightId,
           newShortHighlightId,
@@ -217,12 +221,7 @@ describe('Highlights API', () => {
       // create test highlight
       highlightId = generateFakeUuid()
       const shortHighlightId = '_short_id_1'
-      const query = createHighlightQuery(
-        authToken,
-        pageId,
-        highlightId,
-        shortHighlightId
-      )
+      const query = createHighlightQuery(pageId, highlightId, shortHighlightId)
       await graphqlRequest(query, authToken).expect(200)
     })
 
diff --git a/packages/db/elastic_migrations/index_settings.json b/packages/db/elastic_migrations/index_settings.json
index 8671385d5..1d9c977e1 100644
--- a/packages/db/elastic_migrations/index_settings.json
+++ b/packages/db/elastic_migrations/index_settings.json
@@ -123,6 +123,10 @@
           },
           "highlightPositionAnchorIndex": {
             "type": "integer"
+          },
+          "html": {
+            "type": "text",
+            "analyzer": "strip_html_analyzer"
           }
         }
       },