diff --git a/src/adapters/makeIAMessage.ts b/src/adapters/makeIAMessage.ts
index e8a60fb..8bb08bb 100644
--- a/src/adapters/makeIAMessage.ts
+++ b/src/adapters/makeIAMessage.ts
@@ -14,9 +14,10 @@ export function makeIAMessage(response: BHLQuestResponse): BHLQuestMessage {
       (item): BHLQuestMessageReference =>
         ({
           link: item.outlink,
+          pageId: item.pageId,
+          score: item.score,
           text: item.text,
           title: item.reference,
-          pageId: item.pageId,
           pageIndex: item.pageIndex,
           pages: item.pages.map((item) => ({
             id: item.id,
diff --git a/src/components/Chat/BHLQuest/BHLQuestMessage.vue b/src/components/Chat/BHLQuest/BHLQuestMessage.vue
index 3232df0..feb2deb 100644
--- a/src/components/Chat/BHLQuest/BHLQuestMessage.vue
+++ b/src/components/Chat/BHLQuest/BHLQuestMessage.vue
@@ -8,14 +8,14 @@
     />
     <div v-else>I cannot provide an answer to your question.</div>
     <template v-if="message.references">
-      <h3 class="my-2 font-semibold">References</h3>
+      <h3 class="mt-4 font-semibold text-lg">References</h3>
       <ul>
         <li
           v-for="(reference, index) in message.references"
           :key="message.date"
           class="my-2"
         >
-          <ChatAIReference
+          <BHLQuestReference
             :reference="reference"
             :index="index"
           />
@@ -27,7 +27,7 @@
 
 <script setup lang="ts">
 import { BHLQuestMessage } from '@/types'
-import ChatAIReference from './BHLQuestReference.vue'
+import BHLQuestReference from './BHLQuestReference.vue'
 
 type Props = {
   message: BHLQuestMessage
diff --git a/src/components/Chat/BHLQuest/BHLQuestReference.vue b/src/components/Chat/BHLQuest/BHLQuestReference.vue
index 14941a9..783b1c7 100644
--- a/src/components/Chat/BHLQuest/BHLQuestReference.vue
+++ b/src/components/Chat/BHLQuest/BHLQuestReference.vue
@@ -24,6 +24,12 @@
         class="text-primary-color break-all"
       >
         {{ reference.title }}
+        <p
+          v-if="referenceScore"
+          class="text-sm text-gray-500"
+        >
+          Score {{ reference.score.toFixed(4) }}
+        </p>
       </a>
     </div>
     <template v-if="isExpanded">
@@ -46,15 +52,6 @@
           v-html="parseOCRText(text)"
         />
       </div>
-      <div
-        v-if="isImageViewerVisible"
-        class="mt-2"
-      >
-        <ImageViewer
-          :page-ids="reference.pages"
-          :page-index="reference.pageIndex"
-        />
-      </div>
     </template>
   </div>
 </template>
@@ -65,7 +62,6 @@ import { BHLQuestMessageReference } from '@/types'
 import { useSettings } from '@/store'
 import IconChevronLeft from '@/components/Icon/IconChevronLeft.vue'
 import IconChevronDown from '@/components/Icon/IconChevronDown.vue'
-import ImageViewer from '@/components/ImageViewer/ImageViewer.vue'
 
 interface Props {
   index: number
@@ -74,23 +70,19 @@ interface Props {
 
 defineProps<Props>()
 const referenceRef = ref<HTMLElement | null>(null)
-const { referencePreformattedText, referenceExpanded } = useSettings()
+const { referencePreformattedText, referenceExpanded, referenceScore } =
+  useSettings()
 
 const textComponent = computed(() =>
   referencePreformattedText.value ? 'pre' : 'p'
 )
-
 const isExpanded = ref(true)
-const isImageViewerVisible = ref(false)
 
 function parseOCRText(text: string) {
-  return (
-    text
-      //.replaceAll('\r\r', '\r')
-      .replace(/(\r?\r){2,}/g, '')
-      .replace(/(\r\n)+/g, '\r\n')
-      .trim()
-  )
+  return text
+    .replace(/(\r?\r){2,}/g, '')
+    .replace(/(\r\n)+/g, '\r\n')
+    .trim()
 }
 
 watch(
diff --git a/src/components/ImageViewer/ImagePage.vue b/src/components/ImageViewer/ImagePage.vue
deleted file mode 100644
index 2e54a6f..0000000
--- a/src/components/ImageViewer/ImagePage.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-  <div
-    class="relative"
-    :style="{ width: imageWidth + 'px' }"
-  >
-    <img
-      class="object-contain"
-      :style="{ 'max-height': imageHeight + 'px', 'max-width': imageWidth }"
-      :width="imageWidth"
-      v-if="renderImage"
-      :src="`https://www.biodiversitylibrary.org/pagethumb/${pageId},${imageWidth},${imageHeight}`"
-      @load="
-        () => {
-          isLoading = false
-        }
-      "
-    />
-    <div
-      v-if="isLoading"
-      class="bg-white absolute min-w-fit h-full left-0 top-0"
-      :style="{
-        'min-height': imageHeight + 'px',
-        'min-width': imageWidth + 'px',
-        height: props.imageHeight + 'px',
-        left: 0,
-        top: 0
-      }"
-    >
-      <div class="absolute top-1/2 left-1/2 -translate-x-1/2">
-        <div class="flex flex-col justify-center gap-4 items-center">
-          <span class="text-xl">Loading page {{ pageIndex + 1 }}</span>
-          <Loading />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, onBeforeUnmount } from 'vue'
-import Loading from '../Loading.vue'
-
-interface Props {
-  pageIndex: number
-  pageId: number
-  imageWidth: number
-  imageHeight: number
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  imageWidth: 500,
-  imageHeight: 300
-})
-
-const isLoading = ref<boolean>(true)
-const renderImage = ref<boolean>(false)
-
-const timeoutId = setTimeout(() => {
-  renderImage.value = true
-}, 500)
-
-onBeforeUnmount(() => {
-  clearTimeout(timeoutId)
-})
-</script>
diff --git a/src/components/ImageViewer/ImageViewer.vue b/src/components/ImageViewer/ImageViewer.vue
deleted file mode 100644
index 91133e2..0000000
--- a/src/components/ImageViewer/ImageViewer.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-  <VCard class="bg- bg-zinc-700 p-4 flex flex-col gap-4">
-    <div
-      v-bind="containerProps"
-      :style="{ height: imageHeight + 'px' }"
-    >
-      <div v-bind="wrapperProps">
-        <div
-          v-for="item in list"
-          :key="item.index"
-          class="my-2 flex justify-center"
-          :style="{ height: imageHeight + 'px' }"
-        >
-          <ImagePage
-            :image-height="imageHeight"
-            :image-width="imageWidth"
-            :page-index="item.index"
-            :height="imageHeight + 'px'"
-            :style="{ 'max-height': imageHeight + 'px' }"
-            :page-id="item.data"
-          />
-        </div>
-      </div>
-    </div>
-  </VCard>
-</template>
-
-<script setup lang="ts">
-import { computed, onMounted } from 'vue'
-import { useVirtualList, useWindowSize } from '@vueuse/core'
-import VCard from '../VCard.vue'
-import ImagePage from './ImagePage.vue'
-
-interface Props {
-  pageIds: number[]
-  pageIndex: number
-}
-
-const props = defineProps<Props>()
-
-const { height } = useWindowSize()
-const imageHeight = computed(() => height.value - 250)
-const imageWidth = computed(() => Math.trunc(imageHeight.value * 0.75))
-const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(
-  props.pageIds,
-  {
-    itemHeight: imageHeight.value
-  }
-)
-
-onMounted(() => {
-  scrollTo(props.pageIndex)
-})
-</script>
diff --git a/src/components/Setting/PanelSettings.vue b/src/components/Setting/PanelSettings.vue
index 809757c..d38f552 100644
--- a/src/components/Setting/PanelSettings.vue
+++ b/src/components/Setting/PanelSettings.vue
@@ -39,6 +39,7 @@
               Expand
             </label>
           </li>
+
           <li>
             <label>
               <input
@@ -48,6 +49,16 @@
               Preformatted text
             </label>
           </li>
+
+          <li>
+            <label>
+              <input
+                type="checkbox"
+                v-model="referenceScore"
+              />
+              Score
+            </label>
+          </li>
         </ul>
       </div>
       <div class="mb-4">
@@ -70,6 +81,7 @@ const {
   openSettings,
   referenceExpanded,
   referencePreformattedText,
+  referenceScore,
   parameters
 } = useSettings()
 </script>
diff --git a/src/components/VCard.vue b/src/components/VCard.vue
index 5691ff9..f1ff216 100644
--- a/src/components/VCard.vue
+++ b/src/components/VCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="border p-4 rounded-lg border-base-border">
+  <div class="border p-4 rounded-lg border-gray-300">
     <slot />
   </div>
 </template>
diff --git a/src/store/settings.ts b/src/store/settings.ts
index e70843c..d419b27 100644
--- a/src/store/settings.ts
+++ b/src/store/settings.ts
@@ -6,6 +6,7 @@ const state = reactive<StoreSettings>({
   openSettings: true,
   referenceExpanded: true,
   referencePreformattedText: true,
+  referenceScore: true,
   parameters: {
     scoreThreshold: 0.65,
     maxResults: 5
diff --git a/src/types/BHLQuestMessage.ts b/src/types/BHLQuestMessage.ts
index 12fde2f..4db4097 100644
--- a/src/types/BHLQuestMessage.ts
+++ b/src/types/BHLQuestMessage.ts
@@ -2,11 +2,12 @@ import { ChatMessage } from './ChatMessage'
 
 export type BHLQuestMessageReference = {
   link: string
-  text: string[]
-  title: string
-  pageIndex: number
   pageId: number
+  pageIndex: number
   pages: Page[]
+  score: number
+  text: string[]
+  title: string
 }
 
 type Page = {
diff --git a/src/types/StoreSettings.ts b/src/types/StoreSettings.ts
index 7dd344c..4028119 100644
--- a/src/types/StoreSettings.ts
+++ b/src/types/StoreSettings.ts
@@ -1,8 +1,9 @@
 export type StoreSettings = {
   keepChat: boolean
-  referenceExpanded: boolean
   openSettings: boolean
+  referenceExpanded: boolean
   referencePreformattedText: boolean
+  referenceScore: boolean
   parameters: RequestParameters
 }