diff --git a/app/components/Chatbot/ChatEntry.tsx b/app/components/Chatbot/ChatEntry.tsx
index 6fe4f32e..5a6a3af2 100644
--- a/app/components/Chatbot/ChatEntry.tsx
+++ b/app/components/Chatbot/ChatEntry.tsx
@@ -106,11 +106,11 @@ const ReferencePopup = (citation: Citation) => {
   const parsed = citation.text?.match(/^###.*?###\s+"""(.*?)"""$/ms)
   if (!parsed) return undefined
   return (
-    <div className="reference-contents bordered">
+    <div className="reference-contents bordered z-index-2">
       <ReferenceSummary {...citation} titleClass="large-bold" />
       <div className="grey padding-bottom-16 padding-top-32 xs">Referenced excerpt</div>
       <div
-        className="default"
+        className="default inner-html"
         dangerouslySetInnerHTML={{
           __html: md.render(parsed[1]),
         }}
@@ -124,12 +124,12 @@ const ReferenceLink = (citation: Citation) => {
   if (!index || index > MAX_REFERENCES) return ''
 
   return (
-    <>
+    <span className="ref-container">
       <Link id={`${id}-ref`} to={`#${id}`} className={`reference-link ref-${index}`}>
         <span>{index}</span>
       </Link>
       <ReferencePopup {...citation} />
-    </>
+    </span>
   )
 }
 
diff --git a/app/components/Chatbot/chat_entry.css b/app/components/Chatbot/chat_entry.css
index ca01b0d2..f6a8ef75 100644
--- a/app/components/Chatbot/chat_entry.css
+++ b/app/components/Chatbot/chat_entry.css
@@ -75,6 +75,9 @@ article.stampy {
   display: inline-block;
   text-align: center;
 }
+.ref-container {
+  position: relative;
+}
 
 .ref-1 {
   background: #dbffed;
@@ -145,7 +148,7 @@ article.stampy {
 .reference-contents {
   visibility: hidden;
   transition: visibility 0.2s;
-  max-width: 600px;
+  width: 512px;
   word-wrap: break-word;
   background-color: white;
   border: 1px solid var(--colors-cool-grey-200, #dfe3e9);
@@ -153,7 +156,12 @@ article.stampy {
   position: absolute;
   transform: translateX(50%);
   text-decoration: unset;
-  z-index: 3;
+  right: 0px;
+  top: 40px;
+}
+.reference-contents .inner-html {
+  height: 275px;
+  overflow: hidden;
 }
 
 .reference-contents:hover,
diff --git a/app/components/Chatbot/index.tsx b/app/components/Chatbot/index.tsx
index 73f94df6..2261a790 100644
--- a/app/components/Chatbot/index.tsx
+++ b/app/components/Chatbot/index.tsx
@@ -78,7 +78,10 @@ const QuestionInput = ({
   }
 
   return (
-    <div className={'widget-ask ' + (fixed ? 'fixed col-10' : 'col-9')} ref={clickDetectorRef}>
+    <div
+      className={'widget-ask ' + (fixed ? 'fixed col-10 z-index-4' : 'col-9')}
+      ref={clickDetectorRef}
+    >
       {results.length > 0 ? (
         <Button className="full-width suggestion" action={() => handleAsk(results[0].title)}>
           <p className="default">{results[0].title}</p>