diff --git a/package-lock.json b/package-lock.json
index 75f865c..08a8ff1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "axios": "^0.26.1",
         "core-js": "^3.6.5",
         "dayjs": "^1.11.7",
+        "js-cookie": "^3.0.1",
         "vant": "^3.4.7",
         "vue": "^3.0.0",
         "vue-router": "^4.0.0-0",
@@ -8472,6 +8473,14 @@
       "integrity": "sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg==",
       "dev": true
     },
+    "node_modules/js-cookie": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.1.tgz",
+      "integrity": "sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/js-message": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/js-message/-/js-message-1.0.7.tgz",
@@ -21515,6 +21524,11 @@
       "integrity": "sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg==",
       "dev": true
     },
+    "js-cookie": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.1.tgz",
+      "integrity": "sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw=="
+    },
     "js-message": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/js-message/-/js-message-1.0.7.tgz",
diff --git a/package.json b/package.json
index 68df55f..0ddef26 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "axios": "^0.26.1",
     "core-js": "^3.6.5",
     "dayjs": "^1.11.7",
+    "js-cookie": "^3.0.1",
     "vant": "^3.4.7",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0-0",
diff --git a/public/index.html b/public/index.html
index b6027eb..e0e8baa 100644
--- a/public/index.html
+++ b/public/index.html
@@ -9,6 +9,7 @@
     />
     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
     <link rel="stylesheet" href="<%= BASE_URL %>css/flex2html.css" />
+    <link href="https://dev.iconly.io/public/1osUDQK8vVhk/iconly.css" rel="stylesheet"/>
     <title><%= htmlWebpackPlugin.options.title %></title>
     <style>
       [v-cloak] {
diff --git a/src/api/ajax.js b/src/api/ajax.js
index 50b337a..22581e6 100644
--- a/src/api/ajax.js
+++ b/src/api/ajax.js
@@ -1,7 +1,8 @@
+import Cookies from 'js-cookie'
+
 import axios from 'axios'
 import store from '../store'
 
-
 const instance = axios.create({
     baseURL: process.env.VUE_APP_API_URL,
     timeout: 5000,
@@ -13,15 +14,15 @@ instance.interceptors.request.use(
         // if(config.data.showloading || config.params.showloading){
         //     console.log('showloading')
         // }
-        if (sessionStorage.getItem('token')) {  // 判斷是否存在token，如果存在的話，則每個http header都加上token
-            config.headers.Authorization = `${sessionStorage.getItem('token')}`;
+        if (Cookies.get('token')) {  // 判斷是否存在token，如果存在的話，則每個http header都加上token
+            config.headers.Authorization = `${Cookies.get('token')}`;
         }
 
 
         if (config.method === 'post') {
             
             config.data = {        
-              uid: sessionStorage.getItem('uid'),
+              uid: Cookies.get('uid'),
               ...config.data
             }
 
@@ -33,7 +34,7 @@ instance.interceptors.request.use(
         } else if (config.method === 'get') {
         
             config.params = {        
-                uid: sessionStorage.getItem('uid'),
+                uid: Cookies.get('uid'),
                 ...config.params
             }
 
@@ -75,7 +76,6 @@ instance.interceptors.response.use(
 function refreshToken(response) {
     let token = response.headers.authorization
     if (token) {
-        console.log('change token')
         sessionStorage.setItem('token', token);
     }
 }
diff --git a/src/api/index.js b/src/api/index.js
index 9d1f867..3327cbe 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -1,5 +1,11 @@
 import ajax from './ajax'
 
+export const addFavorite = async (userid)=> ajax(`/user/addFavorite`,{userid},"POST")
+
+export const uploadUserConnections = async (uc)=> ajax(`/user/uploadConnections`,{uc},"POST")
+
+export const getUserConnections = async () => ajax(`/user/getConnections`);
+
 export const login = async (params)=> ajax(`/auth/login`,params,"POST")
 
 export const checkLineId = async (lineid)=> ajax(`/auth/checkLineId`,{lineid},"GET")
diff --git a/src/plugins/vant.js b/src/plugins/vant.js
index db262eb..1e06968 100644
--- a/src/plugins/vant.js
+++ b/src/plugins/vant.js
@@ -1,7 +1,7 @@
 import { 
     Locale , Button , Toast, ShareSheet , NavBar ,
     Tab, Tabs, Form, Field, CellGroup , Uploader ,
-    Dialog, Popup, List, Step, Steps 
+    Dialog, Popup, List, Step, Steps ,  SwipeCell
 } from 'vant'
 
 import zhTW from 'vant/es/locale/lang/zh-TW';
@@ -24,5 +24,6 @@ export function vant(app){
         .use(List)
         .use(Step)
         .use(Steps)
+        .use(SwipeCell)
 
 }
diff --git a/src/views/Home.vue b/src/views/Home.vue
index c72decb..2df2889 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -76,8 +76,9 @@
       <van-step v-for="(v,i) in userConnections" :key="i">
         <div class="user-conn">
           <div class="user-conn-left">{{ v.name }}</div>
-          <div class="user-conn-right" @click="goUC(v.nfcurl)">
-            查看
+          <div class="user-conn-right" >
+            <i class="icon-heart" @click="handleAddFavorite">收藏</i>
+            <i class="icon-eye-circle" @click="goUC(v.nfcurl)">查看</i>
           </div>
         </div>
         <p>{{ v.company }}</p>
@@ -89,10 +90,11 @@
 
 <script>
 import dayjs from 'dayjs'
+import Cookies from 'js-cookie'
 
 import { nextTick, onBeforeMount, reactive, ref, toRefs, watch, computed } from 'vue'
 
-import { checkUser, getCard, getCusCard, getVipCard } from '@/api'
+import { checkUser, getCard, getCusCard, getVipCard, addFavorite, uploadUserConnections, getUserConnections } from '@/api'
 
 import { changeMeta } from '@/utils/meta'
 
@@ -261,7 +263,7 @@ export default {
     //人脈紀錄
     const showUserConn = ref(false)
 
-    function saveConnection(data){
+    async function saveConnection(data){
       
       let connData = {
         userid: data.user_id,
@@ -289,10 +291,20 @@ export default {
       }
 
       localStorage.setItem('user_conn',JSON.stringify(n_user_conn)) 
+
+      if(Cookies.get('token')){
+        let res = await uploadUserConnections(JSON.stringify(n_user_conn))
+      }
     }
 
     
-    const userConnections = computed(()=>{
+    const userConnections = computed(async ()=>{
+      if(Cookies.get('token')){
+        let res = await getUserConnections()
+        if(res.code === 200){
+          return JSON.parse(res.data)
+        }
+      }
       return JSON.parse(localStorage.getItem('user_conn'))
     })
 
@@ -301,6 +313,16 @@ export default {
       window.location.href = url + '&nouc=1'
     }
 
+    const handleAddFavorite = async (userid)=>{
+      if(!Cookies.get('token')){
+        return Toast('請先登入會員')
+      }
+      let res = await addFavorite(state.user.user_id)
+      if(res.code === 200){
+        return Toast('收藏成功')
+      }      
+    }
+
     return {
       ...toRefs(state),
       showUserConn,
@@ -309,7 +331,8 @@ export default {
       flexRef,
       isIOs,
       userConnections,
-      goUC
+      goUC,
+      handleAddFavorite
     }
   }
 }
@@ -418,7 +441,11 @@ export default {
     font-weight: 500;
   }
   .user-conn-right{
-    width: 50px
+    width: 70px;
+    i{
+      font-size: 18px;
+      margin:0 5px;
+    }
   }
 }
 </style>