diff --git a/web/package-lock.json b/web/package-lock.json
index 03eabd5..06a7233 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@primevue/themes": "^4.2.1",
+        "dayjs": "^1.11.13",
         "papaparse": "^5.4.1",
         "pinia": "^2.2.6",
         "postcss": "^8.4.47",
@@ -1298,6 +1299,11 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
+    "node_modules/dayjs": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
+      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg=="
+    },
     "node_modules/debug": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
diff --git a/web/package.json b/web/package.json
index ba669e7..dd86252 100644
--- a/web/package.json
+++ b/web/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@primevue/themes": "^4.2.1",
+    "dayjs": "^1.11.13",
     "papaparse": "^5.4.1",
     "pinia": "^2.2.6",
     "postcss": "^8.4.47",
diff --git a/web/src/App.vue b/web/src/App.vue
index 2951497..98b71ec 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
 import ItemList from "./components/ItemList.vue";
 import ItemDetail from "./components/ItemDetail.vue";
 import AIHelper from "./components/AIHelper.vue";
@@ -12,7 +12,9 @@ import DecisionPanel from "./components/DecisionPanel.vue";
 
 const store = useDataStore();
 
-
+onMounted(() => {
+  store.loadSettingsFromLocalStorage();
+});
 </script>
 
 <template>
diff --git a/web/src/DataStore.js b/web/src/DataStore.js
index 2c6283e..554559e 100644
--- a/web/src/DataStore.js
+++ b/web/src/DataStore.js
@@ -7,6 +7,11 @@ state: () => ({
         api_server_url: "http://localhost:8123",
         api_server_token: "",
 
+        keywords: [
+            {token: "cancer", bgcolor:"#ECDCAC"},
+            {token: "data", bgcolor:"#FFA704"},
+        ],
+
         // list of AI models
         // each model has an id, name, enabled flag, and api_key
         ai_models: {
@@ -33,6 +38,15 @@ state: () => ({
             "enabled": true,
             "api_key": ""
         },
+        claude: {
+            "id": "claude",
+            "service_type": "claude",
+            "name": "Claude 3.5 Haiku",
+            "model_name": "claude-3-5-haiku-20241022",
+            "endpoint": "https://api.anthropic.com/v1/messages",
+            "enabled": true,
+            "api_key": ""
+        },
         llama: {
             "id": "llama",
             "service_type": "ollama",
@@ -44,7 +58,6 @@ state: () => ({
         },
         },
 
-        keywords: [],
     },
     // global variables for all components
     /*
@@ -149,7 +162,7 @@ getters: {
     },
 
     keywords_list(state) {
-        return state.keywords.join("\n");
+        return state.config.keywords.join("\n");
     },
 
     has_working_item_title(state) {
@@ -305,9 +318,28 @@ actions: {
     // highlight keywords in text
     // the given keywords are a list of strings
     highlight: function(text, keywords) {
-        let re = new RegExp(keywords.join("|"), "gi");
-        return text.replace(re, function(matched){
-            return "<mark>" + matched + "</mark>";
+        // convert keywords to a dictionary
+        let kws = [];
+        let kwd = {};
+        for (let i in keywords) {
+            let kw = keywords[i];
+            
+            // if kw is a string, convert it to an object
+            if (typeof kw === 'string') {
+                kws.push(kw);
+                kwd[kw] = 'yellow';
+            } else {
+                // put the token to lowercase
+                kws.push(kw.token);
+                kwd[kw.token.toLowerCase()] = kw.bgcolor;
+            }
+        }
+        let re = new RegExp(kws.join("|"), "gi");
+        return text.replace(re, (matched) => {
+            let kw = matched.toLowerCase();
+            let clr = kwd[kw];
+            return `<mark style="background: ${clr};">${matched}</mark>`;
+            // return "<mark>" + matched + "</mark>";
         });
     },
 
@@ -358,18 +390,37 @@ actions: {
         this.llm_prompt_template = text;
     },
 
+    updateSettingsByJSON: function(json) {
+        // copy the items from json to store.config
+        for (let key in this.config) {
+            if (json.hasOwnProperty(key)) {
+                this.config[key] = json[key];
+            }
+        }
+    },
+
     loadSettingsFromLocalStorage: function() {
-        // get keywords from local storage
-        try {
-            let keywords = JSON.parse(localStorage.getItem("keywords"));
-            this.keywords = keywords;
-        } catch (e) {
-            console.log(e);
+        // just load the object from localstorage
+        let x = localStorage.getItem('config');
+
+        if (x == null) {
+            store.msg('No settings from local');
+            return;
         }
 
+        // parse
+        let cfg = JSON.parse(x);
+        console.log('* local storage config:', cfg);
+
+        this.updateSettingsByJSON(cfg);
+
         console.log('* loaded settings from local storage');
     },
 
+    clearSettingsFromLocalStorage: function() {
+        localStorage.removeItem('config');
+    },
+
     msg: function(text, type='info') {
         this.toast.add({
             severity: type, 
diff --git a/web/src/components/ItemDetail.vue b/web/src/components/ItemDetail.vue
index 61840e7..7097539 100644
--- a/web/src/components/ItemDetail.vue
+++ b/web/src/components/ItemDetail.vue
@@ -14,7 +14,7 @@ function highlightText(text) {
     if (store.flag.enable_highlight) {
         return store.highlight(
             text,
-            store.keywords,
+            store.config.keywords,
         )
     }
     return text;
diff --git a/web/src/components/SettingPanel.vue b/web/src/components/SettingPanel.vue
index fac227c..d991fed 100644
--- a/web/src/components/SettingPanel.vue
+++ b/web/src/components/SettingPanel.vue
@@ -1,6 +1,9 @@
 <script setup>
 import { ref } from "vue";
 import { useDataStore } from "../DataStore";
+import dayjs from "dayjs";
+import { fsOpenFile } from "../utils/fs_helper";
+
 const store = useDataStore();
 
 function onClickClose() {
@@ -13,14 +16,8 @@ function onClickRefreshKeywords() {
     keywords.value = store.keywords.join('\n');
 }
 
-function onClickSaveKeywords() {
-    let _v = keywords.value.trim();
-    store.keywords = _v.split('\n');
-
-    // save into the local storage
-    localStorage.setItem('keywords', JSON.stringify(store.keywords));
+function onClickSaveKeywords () {
 
-    store.msg('Updated keywords');
 }
 
 function onClickSave() {
@@ -32,64 +29,100 @@ function onClickSave() {
     store.msg('Saved all settings to your local environment');
 }
 
-function onClickLoad() {
-    // just load the object from localstorage
-    let x = localStorage.getItem('config');
+async function onClickImportSetting() {
+    let { fh, file } = await fsOpenFile({
+        types: [{
+            description: 'Config JSON file',
+            accept: { 'application/json': ['.json'] }
+        }],
+        multiple: false,
+    });
 
-    if (x == null) {
-        store.msg('No settings from local');
-        return;
-    }
+    let text = await file.text();
 
-    // parse
-    let cfg = JSON.parse(x);
+    // parse the content
+    let cfg = JSON.parse(text);
+    store.updateSettingsByJSON(cfg);
+}
 
-    // copy the items from cfg to store.config
-    for (let key in cfg) {
-        store.config[key] = cfg[key];
-    }
+function onClickExportSetting() {
+    let blob = new Blob(
+        [JSON.stringify(store.config, null, 2)],
+        { type: 'application/json' }
+    );
+    let url = URL.createObjectURL(blob);
+    let a = document.createElement('a');
+    a.href = url;
+    let d = dayjs().format('YYYYMMDD-HHmmss');
+    a.download = `config-${d}.json`;
+    a.click();
+}
 
-    store.msg
+function onClickReset() {
+    store.clearSettingsFromLocalStorage();
+    store.msg('Reset all settings to default');
 }
+
+const menu = ref();
+const items = ref([
+    {
+        label: 'Options',
+        items: [
+            {
+                label: 'Import',
+                icon: 'pi pi-upload',
+                command: onClickImportSetting
+            },
+            {
+                label: 'Export',
+                icon: 'pi pi-download',
+                command: onClickExportSetting
+            }
+        ]
+    },
+    {
+        label: 'Others',
+        items: [
+            {
+                label: 'Reset to default',
+                icon: 'pi pi-refresh',
+                command: onClickReset
+            },
+        ]
+    }
+]);
+
+const toggle = (event) => {
+    menu.value.toggle(event);
+};
+
 </script>
 
 <template>
 <div v-if="store.flag.show_setting_panel"
     class="setting-panel">
-    <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
+    <div class="flex flex-row justify-between py-2">
         <div class="title">
             <i class="fa fa-cog"></i>
             Settings
         </div>
         <div class="opers flex flex-row">
-            <Button label="Save" 
-                icon="pi pi-save"
-                severity="secondary"
-                size="small"
+            <Button icon="pi pi-save"
+                label="Save settings"
                 @click="onClickSave"
-                class="mr-2"/>
-
-            <Button label="Save" 
-                icon="pi pi-save"
-                severity="secondary"
                 size="small"
-                @click="onClickLoad"
-                class="mr-2"/>
-
+                class="mr-2"
+                severity="secondary" />
 
-            <Button label="Import"
-                severity="secondary"
-                size="small"
+            <Button type="button" 
                 class="mr-2"
-                icon="pi pi-upload"/>
-            <Button label="Export"
-                severity="secondary"
                 size="small"
-                class="mr-2"
-                icon="pi pi-download"/>
-            <Button icon="pi pi-times" 
-                @click="onClickClose"
-                severity="secondary" />
+                severity="secondary"
+                icon="pi pi-ellipsis-v" 
+                @click="toggle" aria-haspopup="true" 
+                aria-controls="overlay_menu" />
+            <Menu ref="menu" id="overlay_menu" :model="items" :popup="true" />
+
         </div>
     </div>
 
@@ -97,19 +130,12 @@ function onClickLoad() {
         <Tabs value="0">
             <TabList>
                 <Tab value="0">General</Tab>
-                <Tab value="1">Backend</Tab>
+                <!-- <Tab value="1">Backend</Tab> -->
                 <Tab value="chatbot">Chatbot</Tab>
                 <Tab value="2">Other</Tab>
             </TabList>
             <TabPanels>
                 <TabPanel value="chatbot">
-                    <div>
-                        <Button label="Add Model"
-                            severity="secondary"
-                            size="small"
-                            icon="pi pi-plus">
-                        </Button>
-                    </div>
                     <template v-for="model in store.config.ai_models">
                     <div class="mb-3">
                         <p class="m-0 section">
@@ -126,12 +152,12 @@ function onClickLoad() {
                                 class="w-100"/>
                         </div>
 
-                        <div class="label">
+                        <div class="label w-full">
                             API Key
                         </div>
                         <div class="mb-3">
                             <InputText v-model="model.api_key" 
-                                class="w-100"/>
+                                class="w-full"/>
                         </div>
                     </div>
                     </template>
@@ -142,18 +168,35 @@ function onClickLoad() {
                     <p class="m-0">
                         Hightlight Keywords
                     </p>
-                    <Textarea v-model="keywords" 
-                        style="width: 100%;"
-                        rows="5" />
 
-                    <p class="m-0">
-                        <Button @click="onClickRefreshKeywords"
-                            severity="secondary"
-                            label="Get current keywords"></Button>
-                        &nbsp;
+                    <!-- <div class="my-2">
                         <Button @click="onClickSaveKeywords"
-                            label="Update keywords"></Button>
-                    </p>
+                            icon="pi pi-save"
+                            size="small"
+                            severity="secondary"
+                            label="Update keywords">
+                        </Button>
+                    </div> -->
+                    
+                    <ul>
+                        <li v-for="keyword in store.config.keywords"
+                            class="keyword">
+                            <div>
+                                <span class="px-1 mr-1"
+                                    :style="'background:' + keyword.bgcolor">
+                                    <i class="fa fa-tag"></i>
+                                </span>
+                                <span>
+                                    {{ keyword.token }}
+                                </span>
+                            </div>
+                            <div>
+                                <span class="btn">
+                                    <i class="fa fa-trash"></i>
+                                </span>
+                            </div>
+                        </li>
+                    </ul>
 
                 </TabPanel>
 
@@ -215,4 +258,14 @@ function onClickLoad() {
 .label {
     font-size: small;
 }
+.keyword {
+    padding: 0.2rem 0;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+.keyword:hover {
+    background-color: #f8f8f8;
+    font-weight: bold;
+}
 </style>
\ No newline at end of file
diff --git a/web/src/main.js b/web/src/main.js
index 03e9b12..6eaabc7 100644
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -7,8 +7,11 @@ import Aura from '@primevue/themes/aura';
 import App from './App.vue';
 import { createPinia } from 'pinia';
 import { useDataStore } from "./DataStore";
+import { ai_helper } from "./utils/ai_helper";
 import ToastService from 'primevue/toastservice';
 
+window.ai_helper = ai_helper;
+
 const pinia = createPinia()
 const app = createApp(App);
 
@@ -24,8 +27,4 @@ app.use(ToastService);
 const store = useDataStore();
 window.store = store;
 
-// load the data from the local storage
-store.loadSettingsFromLocalStorage();
-
-
 app.mount('#app');
diff --git a/web/src/utils/ai_helper.js b/web/src/utils/ai_helper.js
index d5a9d4d..c375632 100644
--- a/web/src/utils/ai_helper.js
+++ b/web/src/utils/ai_helper.js
@@ -61,6 +61,13 @@ export const ai_helper = {
                 config
             );
         }
+
+        if (config.service_type == 'claude') {
+            return await this._ask_claude(
+                question,
+                config
+            );
+        }
     },
 
     _ask_openai: async function(question, config) {
@@ -91,14 +98,14 @@ export const ai_helper = {
                         "type": "json_object",
                     },
                     "messages": [
-                        {
-                            "role": "system",
-                            "content": "You are a helpful assistant."
-                        },
-                        {
-                            "role": "user",
-                            "content": question
-                        }
+                    {
+                        "role": "system",
+                        "content": "You are a helpful assistant."
+                    },
+                    {
+                        "role": "user",
+                        "content": question
+                    }
                     ]
                 })
             }
@@ -106,10 +113,9 @@ export const ai_helper = {
 
         const data = await rsp.json();
 
-        console.log(data);
-        
         let s = data.choices[0].message.content;
         let result = JSON.parse(s);
+        console.log("* openai result: ", result);
 
         // maybe format the response here before return
         let ret = {
@@ -124,6 +130,61 @@ export const ai_helper = {
     },
 
     _ask_claude: async function(question, config) {
+        let endpoint = config.endpoint;
+
+        // e.g., "model_name": "gpt-4o-mini",
+        let model_name = config.model_name;
+
+        // customize header
+        let headers = {
+            "anthropic-version": "2023-06-01",
+            "content-type": "application/json",
+            "anthropic-dangerous-direct-browser-access": "true",
+            "x-api-key": config.api_key,
+        };
+
+        const rsp = await fetch(endpoint, {
+            method: "POST",
+            headers: headers,
+            body: JSON.stringify({
+                model: model_name,
+                max_tokens: 1024,
+                messages: [
+                {
+                    role: "user",
+                    content: [
+                    {
+                        type: "text", 
+                        text: question
+                    },
+                    ],
+                },
+                // {
+                //     "role": "assistant",
+                //     "content": [{
+                //         "type": "text",
+                //         "text": "Here is the JSON requested:\n{"
+                //     }]
+                // }
+                ],
+            }),
+        });
+
+        const data = await rsp.json();
+
+        console.log(data)
+
+        let s = data.content[0].text;
+        let result = JSON.parse(s);
+        // let result = JSON.parse("{" + s + "}");
+        console.log("* claude result: ", result);
+
+        // maybe format the response here before return
+        let ret = {
+            reason: result['reason'],
+            answer: result['category']
+        };
+        return ret;
     },
 
     _ask_ollama: async function(question, config) {