diff --git a/src/components/CodeAnnotations.tsx b/src/components/CodeAnnotations.tsx
index b2a3ff2..06d6402 100644
--- a/src/components/CodeAnnotations.tsx
+++ b/src/components/CodeAnnotations.tsx
@@ -25,7 +25,7 @@ export default function CodeAnnotations({
     >
       <ArrowDrawingProvider>
         <Svg />
-        <DrawingCancelationButton />
+        <DrawingCompletionPopover />
         <SelectionPopover />
       </ArrowDrawingProvider>
     </ContainerDiv>
@@ -95,18 +95,21 @@ function Markers() {
   )
 }
 
-function DrawingCancelationButton() {
+function DrawingCompletionPopover() {
   const currentArrow = useCurrentArrowDrawing()
   const drawing = useDrawingEventHandlers()
   if (!currentArrow) {
     return null
   }
   return (
-    <button
-      className='drawing-cancelation-button'
-      onClick={() => drawing.cancelArrow()}
-    >
-      To cancel the current arrow, hit <kbd>esc</kbd> or click here
-    </button>
+    <div className="drawing-completion-popover">
+      Click on a second highlight to complete arrow.
+      {" "}
+      <button
+        onClick={() => drawing.cancelArrow()}
+      >
+        Click here to cancel or hit <kbd>Esc</kbd>
+      </button>
+    </div>
   )
 }
diff --git a/src/index.scss b/src/index.scss
index c67aab8..ad7d7fc 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -30,7 +30,6 @@ body {
     display: grid;
     grid-template-columns: auto auto 1fr;
     align-items: center;
-    font-family: 'Roboto Mono', monospace;
     row-gap: 0.5rem;
 
     .line-annotations {
@@ -62,6 +61,7 @@ body {
     }
 
     .line-number {
+      font-family: 'Roboto Mono', monospace;
       grid-column: 2;
       color: gray;
       text-align: right;
@@ -92,29 +92,22 @@ body {
       height: 100%;
       mix-blend-mode: multiply;
     }
-
-    .drawing-cancelation-button {
-      pointer-events: auto;
-      position: sticky;
-      bottom: 1rem;
-      left: 1rem;
-      font-size: 1rem;
-      max-width: 10rem;
-      text-align: left;
-      outline: 0;
-      padding: 0.5rem;
-      margin: 0;
-      border: 1px solid black;
-      border-radius: 0.25rem;
-      background: #fff;
-
-      &:hover {
-        background: #eee;
-      }
-    }
   }
 }
 
+.drawing-completion-popover {
+  pointer-events: auto;
+  position: sticky;
+  bottom: 1rem;
+  left: 1rem;
+  background: #ddf7ff;
+  border: 1px solid #447;
+  padding: 0.5rem 0;
+  max-width: 20rem;
+  border-radius: 0.25rem;
+  text-align: center;
+}
+
 .popover {
   --top: auto;
   --left: auto;