diff --git a/src/App.vue b/src/App.vue
index c00d8cb..aba26d4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,72 +1,73 @@
 <template>
-  <div class="flex flex-col h-full justify-between">
-    <div
-      class="max-w-7xl container mx-auto flex justify-between items-center px-4"
-    >
-      <h1 class="text-4xl py-6 font-bold">BHL Quest AI</h1>
-      <button
-        type="button"
-        class="rounded-full bg-primary-color text-primary-text p-2"
-        title="New chat"
-        @click="() => (messages = [])"
+  <div class="relative z-0 flex h-full w-full overflow-hidden">
+    <PanelSettings />
+    <div class="flex flex-col h-full justify-between w-full">
+      <div class="w-full bg-secondary-color">
+        <Navbar />
+      </div>
+      <div
+        ref="chatContainer"
+        class="overflow-y-auto h-full border-t scroll scrollbar-gutter-stable"
       >
-        <IconPlus class="w-5 h-5" />
-      </button>
-    </div>
+        <ChatView
+          class="max-w-7xl container mx-auto px-6 py-4"
+          v-if="messages.length"
+          :messages="messages"
+          :is-loading="isAsking"
+        />
+        <EmptyContainer
+          v-else
+          class="max-w-7xl container mx-auto h-full flex-col flex justify-center px-4"
+          @select="askBHL"
+        />
+      </div>
 
-    <div
-      ref="chatContainer"
-      class="overflow-y-auto h-full border-t scroll scrollbar-gutter-stable"
-    >
-      <ChatView
-        class="max-w-7xl container mx-auto px-6 py-4"
-        v-if="messages.length"
-        :messages="messages"
-        :is-loading="isAsking"
-      />
-      <EmptyContainer
-        v-else
-        class="max-w-7xl container mx-auto h-full flex-col flex justify-center px-4"
-        @select="askBHL"
+      <UserInput
+        class="max-w-7xl container mx-auto px-4"
+        :disabled="isAsking"
+        @submit="askBHL"
       />
     </div>
-
-    <UserInput
-      class="max-w-7xl container mx-auto px-4"
-      :disabled="isAsking"
-      @submit="askBHL"
-    />
   </div>
 </template>
 
 <script setup lang="ts">
-import { defineOptions, ref, nextTick } from 'vue'
+import { defineOptions, ref, nextTick, onBeforeMount } from 'vue'
 import { makeIAMessage, makeUserMessage } from '@/adapters'
 import { BHLQuest } from './services'
+import { MESSAGE_TYPE } from './constants'
+import { useSettings } from './store'
 import EmptyContainer from '@/components/EmptyContainer.vue'
 import ChatView from '@/components/Chat/ChatView.vue'
 import UserInput from '@/components/Chat/User/ChatUserInput.vue'
-import IconPlus from './components/Icon/IconPlus.vue'
-
+import Navbar from '@/components/Navbar.vue'
+import PanelSettings from '@/components/Setting/PanelSettings.vue'
 defineOptions({
   name: 'ChatBHL'
 })
 
 const messages = ref<any[]>([])
 const isAsking = ref<boolean>(false)
-const chatContainer = ref(null)
+const chatContainer = ref<HTMLElement | null>(null)
+const { keepChat, parameters } = useSettings()
 
 async function askBHL(question: string) {
-  isAsking.value = true
-  messages.value.push(makeUserMessage(question))
+  const userMessage = makeUserMessage(question)
+
+  messages.value = keepChat.value
+    ? [...messages.value, userMessage]
+    : [userMessage]
+
   nextTick(scrollToBottom)
 
+  isAsking.value = true
+
   try {
-    const response = await BHLQuest.ask({ question })
+    const response = await BHLQuest.ask({ question, ...parameters.value })
 
     messages.value.push(makeIAMessage(response))
-    isAsking.value = false
     nextTick(scrollToBottom)
+    isAsking.value = false
   } catch (e) {
     isAsking.value = false
     console.log(e)
@@ -74,8 +75,26 @@ async function askBHL(question: string) {
 }
 
 function scrollToBottom() {
-  chatContainer.value.scrollTop = chatContainer.value.scrollHeight
+  if (chatContainer.value) {
+    const index = messages.value.findLastIndex(
+      (m) => m.type === MESSAGE_TYPE.User
+    )
+    const element = chatContainer.value.firstChild.children[index]
+    const distance = element.offsetTop - chatContainer.value.offsetTop - 16
+
+    chatContainer.value.scrollTop = distance
+  }
 }
+
+onBeforeMount(() => {
+  const queryString = window.location.search
+  const parameters = new URLSearchParams(queryString)
+  const ask = parameters.get('ask')
+
+  if (ask) {
+    askBHL(ask)
+  }
+})
 </script>
 
 <style>
diff --git a/src/adapters/makeIAMessage.ts b/src/adapters/makeIAMessage.ts
index c086cbf..2b7c561 100644
--- a/src/adapters/makeIAMessage.ts
+++ b/src/adapters/makeIAMessage.ts
@@ -10,15 +10,19 @@ export function makeIAMessage(response: BHLQuestResponse): BHLQuestMessage {
     type: MESSAGE_TYPE.IA,
     text: response.summary,
     date: +new Date(),
-    references: response.results.map(
-      (item): BHLQuestMessageReference => ({
-        link: item.outlink,
-        text: item.text,
-        title: item.reference,
-        pageId: item.pageId,
-        pageIndex: item.pageIndex,
-        pages: item.pages
-      })
+    references: response.results?.map(
+      (item): BHLQuestMessageReference =>
+        ({
+          link: item.outlink,
+          text: item.text,
+          title: item.reference,
+          pageId: item.pageId,
+          pageIndex: item.pageIndex,
+          pages: item.pages.map((item) => ({
+            id: item.id,
+            pageNumber: item.pageSeq
+          }))
+        } || [])
     )
   }
 }
diff --git a/src/assets/stylesheets/style.css b/src/assets/stylesheets/style.css
index e8f07e3..f21d197 100644
--- a/src/assets/stylesheets/style.css
+++ b/src/assets/stylesheets/style.css
@@ -4,9 +4,11 @@
   --base-background-color: 255, 255, 255;
   --base-border-color: 156, 163, 175;
   --btn-disabled-color: 148, 163, 184;
-  --primary-color: 8, 145, 178;
+  --primary-color: 61, 144, 200;
   --primary-text-color: 255, 255, 255;
+  --secondary-color: 246, 237, 226;
   --text-color: 33, 53, 71;
+  --text-highlight-color: 241, 228, 215;
 
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
diff --git a/src/components/Chat/BHLQuest/BHLQuestMessage.vue b/src/components/Chat/BHLQuest/BHLQuestMessage.vue
index 514ee6b..7420f5a 100644
--- a/src/components/Chat/BHLQuest/BHLQuestMessage.vue
+++ b/src/components/Chat/BHLQuest/BHLQuestMessage.vue
@@ -2,22 +2,26 @@
   <div>
     <div class="font-bold text-lg text-primary-color">BHL Quest</div>
     <div
+      v-if="message.text"
       class="whitespace-pre-wrap"
       v-html="message.text"
     />
-    <h3 class="my-2 font-semibold">References</h3>
-    <ul>
-      <li
-        v-for="(reference, index) in message.references"
-        :key="message.date"
-        class="my-2"
-      >
-        <ChatAIReference
-          :reference="reference"
-          :index="index"
-        />
-      </li>
-    </ul>
+    <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>
+      <ul>
+        <li
+          v-for="(reference, index) in message.references"
+          :key="message.date"
+          class="my-2"
+        >
+          <ChatAIReference
+            :reference="reference"
+            :index="index"
+          />
+        </li>
+      </ul>
+    </template>
   </div>
 </template>
 
diff --git a/src/components/Chat/BHLQuest/BHLQuestReference.vue b/src/components/Chat/BHLQuest/BHLQuestReference.vue
index eb1c3bd..a9e7a7b 100644
--- a/src/components/Chat/BHLQuest/BHLQuestReference.vue
+++ b/src/components/Chat/BHLQuest/BHLQuestReference.vue
@@ -26,21 +26,43 @@
         {{ reference.title }}
       </a>
     </div>
-    <div
-      v-if="isExpanded"
-      class="mt-2"
-    >
-      <ImageViewer
-        :page-ids="reference.pages"
-        :page-index="reference.pageIndex"
-      />
-    </div>
+    <template v-if="isExpanded">
+      <div
+        v-for="(text, index) in reference.text"
+        class="py-4 px-8"
+      >
+        <a
+          class="text-primary-color"
+          :href="`https://www.biodiversitylibrary.org/page/${
+            reference.pages[reference.pageIndex + index].id
+          }`"
+          >Page #{{
+            reference.pages[reference.pageIndex + index].pageNumber
+          }}</a
+        >
+        <component
+          :is="textComponent"
+          class="text-wrap font-main"
+          v-html="text.trim()"
+        />
+      </div>
+      <div
+        v-if="isImageViewerVisible"
+        class="mt-2"
+      >
+        <ImageViewer
+          :page-ids="reference.pages"
+          :page-index="reference.pageIndex"
+        />
+      </div>
+    </template>
   </div>
 </template>
 
 <script setup lang="ts">
-import { nextTick, ref, watch } from 'vue'
+import { nextTick, ref, watch, computed } from 'vue'
 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'
@@ -52,9 +74,14 @@ interface Props {
 
 const props = defineProps<Props>()
 const referenceRef = ref<HTMLElement | null>(null)
+const { referencePreformattedText, referenceExpanded } = useSettings()
 
-const isExpanded = ref(false)
+const textComponent = computed(() =>
+  referencePreformattedText.value ? 'pre' : 'p'
+)
 
+const isExpanded = ref(true)
+const isImageViewerVisible = ref(false)
 watch(isExpanded, () => {
   if (isExpanded) {
     nextTick(() => {
@@ -62,4 +89,14 @@ watch(isExpanded, () => {
     })
   }
 })
+
+watch(referenceExpanded, (newVal) => {
+  isExpanded.value = newVal
+})
 </script>
+
+<style>
+em {
+  background-color: rgb(var(--text-highlight-color));
+}
+</style>
diff --git a/src/components/Chat/User/ChatUserMessage.vue b/src/components/Chat/User/ChatUserMessage.vue
index e2d04fa..90360fa 100644
--- a/src/components/Chat/User/ChatUserMessage.vue
+++ b/src/components/Chat/User/ChatUserMessage.vue
@@ -1,14 +1,19 @@
 <template>
   <div>
     <div class="font-bold text-lg">You</div>
-    <div class="whitespace-pre-wrap font-semibold text-2xl">
+    <div class="whitespace-pre-wrap font-semibold text-2xl flex items-center">
       {{ message.text }}
+      <a :href="`?ask=${message.text}`">
+        <IconLink class="w-6 h-6 text-primary-color" />
+      </a>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import { ChatMessage } from '@/types'
+import IconLink from '@/components/Icon/IconLink.vue'
 
 type Props = {
   message: ChatMessage
diff --git a/src/components/Icon/IconLink.vue b/src/components/Icon/IconLink.vue
new file mode 100644
index 0000000..841fc8e
--- /dev/null
+++ b/src/components/Icon/IconLink.vue
@@ -0,0 +1,15 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"
+    />
+  </svg>
+</template>
diff --git a/src/components/Icon/IconSettings.vue b/src/components/Icon/IconSettings.vue
new file mode 100644
index 0000000..efdf86d
--- /dev/null
+++ b/src/components/Icon/IconSettings.vue
@@ -0,0 +1,15 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75"
+    />
+  </svg>
+</template>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
new file mode 100644
index 0000000..c57e933
--- /dev/null
+++ b/src/components/Navbar.vue
@@ -0,0 +1,21 @@
+<template>
+  <div
+    class="max-w-7xl container mx-auto flex justify-between items-center px-4"
+  >
+    <h1 class="text-4xl py-4 font-semibold">BHL Quest AI</h1>
+    <button
+      type="button"
+      class="rounded-full bg-primary-color text-primary-text p-2"
+      title="New chat"
+      @click="() => (openSettings = !openSettings)"
+    >
+      <IconSettings class="w-5 h-5" />
+    </button>
+  </div>
+</template>
+<script setup>
+import IconSettings from '@/components/Icon/IconSettings.vue'
+import { useSettings } from '@/store'
+
+const { openSettings } = useSettings()
+</script>
diff --git a/src/components/Setting/PanelSettings.vue b/src/components/Setting/PanelSettings.vue
new file mode 100644
index 0000000..847d3ed
--- /dev/null
+++ b/src/components/Setting/PanelSettings.vue
@@ -0,0 +1,68 @@
+<template>
+  <div
+    v-if="openSettings"
+    class="h-screen w-96 text-white bg-zinc-700 bg-opacity-100 transform translate-x-0 transition-transform duration-300 ease-in-out"
+  >
+    <div class="border-b border-zinc-500">
+      <h1 class="text-2xl py-5 px-6">Settings</h1>
+    </div>
+    <div class="px-6 py-4">
+      <div class="mb-6">
+        <h2 class="text-lg font-bold my-2">Chat</h2>
+        <ul>
+          <li>
+            <label>
+              <input
+                type="checkbox"
+                v-model="keepChat"
+              />
+              Keep chat history
+            </label>
+          </li>
+        </ul>
+      </div>
+      <div class="mb-6">
+        <h2 class="text-lg font-bold my-2">References</h2>
+        <ul>
+          <li>
+            <label>
+              <input
+                type="checkbox"
+                v-model="referenceExpanded"
+              />
+              Expand
+            </label>
+          </li>
+          <li>
+            <label>
+              <input
+                type="checkbox"
+                v-model="referencePreformattedText"
+              />
+              Preformatted text
+            </label>
+          </li>
+        </ul>
+      </div>
+      <div class="mb-4">
+        <h2 class="text-lg font-bold my-2">Request</h2>
+        <SettingMaxRecords v-model="parameters.maxResults" />
+        <SettingScoreThreshold v-model="parameters.scoreThreshold" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useSettings } from '@/store'
+import SettingScoreThreshold from './SettingScoreThreshold.vue'
+import SettingMaxRecords from './SettingMaxResults.vue'
+
+const {
+  keepChat,
+  openSettings,
+  referenceExpanded,
+  referencePreformattedText,
+  parameters
+} = useSettings()
+</script>
diff --git a/src/components/Setting/SettingMaxResults.vue b/src/components/Setting/SettingMaxResults.vue
new file mode 100644
index 0000000..fe4af2a
--- /dev/null
+++ b/src/components/Setting/SettingMaxResults.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <label class="block">Max results</label>
+    <input
+      class="text-black rounded-sm py-1 px-4 w-20"
+      type="number"
+      v-between-numbers="[1, 5]"
+      v-model="maxResults"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { vBetweenNumbers } from '@/directives'
+const maxResults = defineModel<number>()
+</script>
diff --git a/src/components/Setting/SettingScoreThreshold.vue b/src/components/Setting/SettingScoreThreshold.vue
new file mode 100644
index 0000000..d2e801c
--- /dev/null
+++ b/src/components/Setting/SettingScoreThreshold.vue
@@ -0,0 +1,17 @@
+<template>
+  <label class="block">Score threshold</label>
+  <input
+    class="text-black rounded-sm py-1 px-4 w-20"
+    type="number"
+    step="0.05"
+    min="0.1"
+    max="1.0"
+    v-between-numbers="[0.1, 1]"
+    v-model.number="scoreThreshold"
+  />
+</template>
+
+<script setup lang="ts">
+import { vBetweenNumbers } from '@/directives'
+const scoreThreshold = defineModel<number>()
+</script>
diff --git a/src/directives/betweenNumbers.ts b/src/directives/betweenNumbers.ts
new file mode 100644
index 0000000..aefa41e
--- /dev/null
+++ b/src/directives/betweenNumbers.ts
@@ -0,0 +1,24 @@
+import { Directive } from 'vue'
+
+export const vBetweenNumbers: Directive = {
+  mounted: (el, binding, vnode) => {
+    const [min, max] = binding.value
+
+    el.handler = () => {
+      const { value } = el
+
+      if (value < min) {
+        el.value = min
+        vnode.el.dispatchEvent(new CustomEvent('input'))
+      } else if (value > max) {
+        el.value = max
+        vnode.el.dispatchEvent(new CustomEvent('input'))
+      }
+    }
+
+    el.addEventListener('change', el.handler)
+  },
+  unmounted: (el) => {
+    el.removeEventListener('change', el.handler)
+  }
+}
diff --git a/src/directives/index.ts b/src/directives/index.ts
new file mode 100644
index 0000000..60f1438
--- /dev/null
+++ b/src/directives/index.ts
@@ -0,0 +1 @@
+export * from './betweenNumbers'
diff --git a/src/store/index.ts b/src/store/index.ts
new file mode 100644
index 0000000..eca32dd
--- /dev/null
+++ b/src/store/index.ts
@@ -0,0 +1 @@
+export * from './settings'
diff --git a/src/store/settings.ts b/src/store/settings.ts
new file mode 100644
index 0000000..b100ab3
--- /dev/null
+++ b/src/store/settings.ts
@@ -0,0 +1,31 @@
+import { reactive, toRefs } from 'vue'
+
+type RequestParameters = {
+  maxResults: number
+  scoreThreshold: number
+}
+
+type State = {
+  keepChat: boolean
+  referenceExpanded: boolean
+  openSettings: boolean
+  referencePreformattedText: boolean
+  parameters: RequestParameters
+}
+
+const state = reactive<State>({
+  keepChat: false,
+  openSettings: true,
+  referenceExpanded: true,
+  referencePreformattedText: true,
+  parameters: {
+    scoreThreshold: 0.65,
+    maxResults: 5
+  }
+})
+
+export function useSettings() {
+  return {
+    ...toRefs(state)
+  }
+}
diff --git a/src/types/BHLQuestMessage.ts b/src/types/BHLQuestMessage.ts
index 370fd0a..25feee5 100644
--- a/src/types/BHLQuestMessage.ts
+++ b/src/types/BHLQuestMessage.ts
@@ -6,7 +6,12 @@ export type BHLQuestMessageReference = {
   title: string
   pageIndex: number
   pageId: number
-  pages: number[]
+  pages: Page[]
+}
+
+type Page = {
+  id: number
+  pageNumber: number
 }
 
 export type BHLQuestMessage = ChatMessage & {
diff --git a/src/types/BHLQuestResponse.ts b/src/types/BHLQuestResponse.ts
index be5d864..c5dadec 100644
--- a/src/types/BHLQuestResponse.ts
+++ b/src/types/BHLQuestResponse.ts
@@ -12,12 +12,17 @@ type Metadata = {
   version: string
 }
 
+type Page = {
+  id: number
+  pageSeq: number
+}
+
 type Result = {
   chunkId: number
   itemId: number
   pageId: number
   pageIndex: number
-  pages: number[]
+  pages: Page[]
   score: number
   crossScore: number
   outlink: string
diff --git a/tailwind.config.js b/tailwind.config.js
index dde2faf..7994138 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -16,11 +16,11 @@ export default {
       fontFamily: {
         main: [
           'Inter',
-          'system - ui',
+          'system-ui',
           'Avenir',
           'Helvetica',
           'Arial',
-          'sans - serif'
+          'sans-serif'
         ]
       },
       colors: {
@@ -32,6 +32,11 @@ export default {
         primary: {
           color: withOpacity('--primary-color'),
           text: withOpacity('--primary-text-color')
+        },
+
+        secondary: {
+          color: withOpacity('--secondary-color'),
+          text: withOpacity('--secondary-text-color')
         }
       }
     }
diff --git a/tsconfig.json b/tsconfig.json
index 460b82b..1165868 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,7 +3,7 @@
     "target": "ES2020",
     "useDefineForClassFields": true,
     "module": "ESNext",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
     "skipLibCheck": true,
 
     /* Bundler mode */