diff --git a/py/cleanup.py b/py/cleanup.py
index ed3548a..4a76d1a 100644
--- a/py/cleanup.py
+++ b/py/cleanup.py
@@ -147,7 +147,7 @@ def wrap_or_not(el, s, ancestor=False) -> ET.Element:
         if el.tag not in EXCLUDE_TAGS:
             next_el = el.getnext()
             if el.tag == "{http://www.tei-c.org/ns/1.0}quote" or el.tag == "{http://www.tei-c.org/ns/1.0}seg":
-                breakpoint_els = el.xpath("./tei:p|./tei:lg|./tei:note",
+                breakpoint_els = el.xpath("./tei:p|./tei:lg|./tei:note|./tei:quote[tei:p]",
                                           namespaces=NSMAP)
                 # quote and seg are inline or block elements but
                 # (Breakpoints: p, lg, note)
diff --git a/scss/style.scss b/scss/style.scss
index 25fecad..e4b4d55 100644
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -753,9 +753,9 @@ wpn-detail-view:has(span[data-bs-toggle="popover"]:hover) details:not([open]) .s
   // letter-spacing: 0.4pt;
 }
 
-// #textcontent-pb .spacing {
-//   letter-spacing: 1pt;
-// }
+#textcontent-pb .spacing {
+  letter-spacing: 1.5pt;
+}
 
 #infocontent-pb {
   font-size: 1em;
diff --git a/wpn-utils/wpn-typo-connections.ts b/wpn-utils/wpn-typo-connections.ts
index b9bb6e4..0990f7a 100644
--- a/wpn-utils/wpn-typo-connections.ts
+++ b/wpn-utils/wpn-typo-connections.ts
@@ -1,15 +1,20 @@
-import { find } from "instantsearch.js/es/lib/utils";
+// Description: This script is used to connect elements in 
+// left and right margin with their anchor in the text.
 
 const connectElements = (query: string, container: boolean) => {
+
     const elements = document.querySelectorAll<HTMLElement>(query);
-    // console.log([...elements]);
+
     [...elements].map((el) => {
+
         let targetId = el.id;
+        
         if (container) {
             targetId = el.id.replace("container-", "");
         } else {
             targetId = "container-" + el.id;
         }
+
         if (targetId.length > 0) {
 
             const color = targetId.includes("metam") ? "bg-danger-subtle" : targetId.includes("-add-") ? "bg-warning-subtle" : "bg-secondary-subtle";
@@ -23,7 +28,10 @@ const connectElements = (query: string, container: boolean) => {
             const spanToElement = checkForConnections(childS, "spanto");
             const targetElement = checkForConnections(childT, "target");
 
-            el.onmouseover = () => {
+            el.onmouseover = (e) => {
+
+                e.preventDefault();
+
                 // console.log(`Connecting ${el.id} to ${targetId}`);
                 target?.classList.add(...["border", border, "border-2", "border-dotted"]);
                 el.classList.add(color);
@@ -38,38 +46,50 @@ const connectElements = (query: string, container: boolean) => {
                     || childS && childS.classList.contains("doubleLineLeft") 
                     || childS && childS.classList.contains("doubleLineRight")
                 ) {
+
                     spanToElement
                         .map(span => {
                             createCanvas(el);
                             drawLine(el, span);
                             span?.classList.add(...["border", border, "border-2", "border-dotted"])
                         });
+
                 } else {
+
                     spanToElement
                         .map(span => span?.classList.add(...["border", border, "border-2", "border-dotted"]));
-                }
+                
+                    }
                 
             };
-            el.onmouseout = () => {
+
+            el.onmouseout = (e) => {
+
+                e.preventDefault();
 
                 target?.classList.remove(...["border", border, "border-2", "border-dotted"]);
                 el.classList.remove(color);
 
+                targetElement.map(target => target?.classList.remove(...["border", border, "border-2", "border-dotted"]));   
+
                 if (childS && childS.classList.contains("lineLeft") 
                     || childS && childS.classList.contains("lineRight") 
                     || childS && childS.classList.contains("doubleLineLeft") 
                     || childS && childS.classList.contains("doubleLineRight")
                 ) {
+
                     spanToElement
                         .map(span => {
                             removeCanvas(el);
                             span?.classList.remove(...["border", border, "border-2", "border-dotted"])
                         });
+
                 } else {
+
                     spanToElement
                         .map(span => span?.classList.remove(...["border", border, "border-2", "border-dotted"]));
+
                 }
-                targetElement.map(target => target?.classList.remove(...["border", border, "border-2", "border-dotted"]));   
 
             };
         }
@@ -77,9 +97,11 @@ const connectElements = (query: string, container: boolean) => {
 };
 
 const findChild = (element: HTMLElement, type: string) => {
+
     const child = element.classList.contains(type) && element.tagName === "DIV" ? element.childNodes[0].childNodes[0] as HTMLElement 
     : element.classList.contains(type) && element.tagName !== "DIV" ? element.childNodes[0] as HTMLElement
     : false;
+
     return child;
 }