diff --git a/example/src/App.tsx b/example/src/App.tsx
index 7d983276f..abd3b8b37 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -95,7 +95,7 @@ class App extends Component<{}, State> {
     window.addEventListener(
       "hashchange",
       this.scrollToHighlightFromHash,
-      false,
+      false
     );
   }
 
@@ -118,7 +118,7 @@ class App extends Component<{}, State> {
   updateHighlight(
     highlightId: string,
     position: Partial<ScaledPosition>,
-    content: Partial<Content>,
+    content: Partial<Content>
   ) {
     console.log("Updating highlight", highlightId, position, content);
 
@@ -159,7 +159,15 @@ class App extends Component<{}, State> {
             position: "relative",
           }}
         >
-          <PdfLoader url={url} beforeLoad={<Spinner />}>
+          <PdfLoader
+            url={url}
+            beforeLoad={<Spinner />}
+            onLoad={(pdfDocument) =>
+              console.log(
+                `PDF document loaded with ${pdfDocument.numPages} pages`
+              )
+            }
+          >
             {(pdfDocument) => (
               <PdfHighlighter
                 pdfDocument={pdfDocument}
@@ -175,7 +183,7 @@ class App extends Component<{}, State> {
                   position,
                   content,
                   hideTipAndSelection,
-                  transformSelection,
+                  transformSelection
                 ) => (
                   <Tip
                     onOpen={transformSelection}
@@ -193,7 +201,7 @@ class App extends Component<{}, State> {
                   hideTip,
                   viewportToScaled,
                   screenshot,
-                  isScrolledTo,
+                  isScrolledTo
                 ) => {
                   const isTextHighlight = !highlight.content?.image;
 
@@ -202,6 +210,10 @@ class App extends Component<{}, State> {
                       isScrolledTo={isScrolledTo}
                       position={highlight.position}
                       comment={highlight.comment}
+                      highlightColor={{
+                        default: "#90EE90",
+                        onScroll: "#FF7F7F",
+                      }}
                     />
                   ) : (
                     <AreaHighlight
@@ -211,9 +223,13 @@ class App extends Component<{}, State> {
                         this.updateHighlight(
                           highlight.id,
                           { boundingRect: viewportToScaled(boundingRect) },
-                          { image: screenshot(boundingRect) },
+                          { image: screenshot(boundingRect) }
                         );
                       }}
+                      highlightColor={{
+                        default: "#90EE90",
+                        onScroll: "#FF7F7F",
+                      }}
                     />
                   );
 
diff --git a/src/components/AreaHighlight.tsx b/src/components/AreaHighlight.tsx
index 178f38a65..0a8901155 100644
--- a/src/components/AreaHighlight.tsx
+++ b/src/components/AreaHighlight.tsx
@@ -11,20 +11,38 @@ interface Props {
   highlight: ViewportHighlight;
   onChange: (rect: LTWHP) => void;
   isScrolledTo: boolean;
+  highlightColor?: { default: string; onScroll: string };
 }
 
 export class AreaHighlight extends Component<Props> {
   render() {
-    const { highlight, onChange, isScrolledTo, ...otherProps } = this.props;
+    const {
+      highlight,
+      onChange,
+      isScrolledTo,
+      highlightColor = {
+        default: "rgba(252, 232, 151, 1.0)",
+        onScroll: "#ff4141",
+      },
+      ...otherProps
+    } = this.props;
 
     return (
       <div
         className={`AreaHighlight ${
           isScrolledTo ? "AreaHighlight--scrolledTo" : ""
         }`}
+        style={{
+          backgroundColor: highlightColor.default,
+        }}
       >
         <Rnd
           className="AreaHighlight__part"
+          style={{
+            background: isScrolledTo
+              ? highlightColor.onScroll
+              : highlightColor.default,
+          }}
           onDragStop={(_, data) => {
             const boundingRect: LTWHP = {
               ...highlight.position.boundingRect,
diff --git a/src/components/Highlight.tsx b/src/components/Highlight.tsx
index 991b10bcc..4c2a025a6 100644
--- a/src/components/Highlight.tsx
+++ b/src/components/Highlight.tsx
@@ -17,6 +17,7 @@ interface Props {
     text: string;
   };
   isScrolledTo: boolean;
+  highlightColor?: { default: string; onScroll: string };
 }
 
 export class Highlight extends Component<Props> {
@@ -26,6 +27,10 @@ export class Highlight extends Component<Props> {
       onClick,
       onMouseOver,
       onMouseOut,
+      highlightColor = {
+        default: "rgba(252, 232, 151, 1.0)",
+        onScroll: "#ff4141",
+      },
       comment,
       isScrolledTo,
     } = this.props;
@@ -55,7 +60,12 @@ export class Highlight extends Component<Props> {
               onClick={onClick}
               // biome-ignore lint/suspicious/noArrayIndexKey: We can use position hash at some point in future
               key={index}
-              style={rect}
+              style={{
+                ...rect,
+                background: isScrolledTo
+                  ? highlightColor.onScroll
+                  : highlightColor.default,
+              }}
               className={"Highlight__part"}
             />
           ))}
diff --git a/src/components/PdfLoader.tsx b/src/components/PdfLoader.tsx
index adfc4d198..150abab22 100644
--- a/src/components/PdfLoader.tsx
+++ b/src/components/PdfLoader.tsx
@@ -12,6 +12,7 @@ interface Props {
   errorMessage?: JSX.Element;
   children: (pdfDocument: PDFDocumentProxy) => JSX.Element;
   onError?: (error: Error) => void;
+  onLoad?: (pdfDocument: PDFDocumentProxy) => void;
   cMapUrl?: string;
   cMapPacked?: boolean;
 }
@@ -85,6 +86,9 @@ export class PdfLoader extends Component<Props, State> {
         };
 
         return getDocument(document).promise.then((pdfDocument) => {
+          if (this.props.onLoad) {
+            this.props.onLoad(pdfDocument);
+          }
           this.setState({ pdfDocument });
         });
       })