diff --git a/src/client.js b/src/client.js
index 47400a87..966ce35a 100644
--- a/src/client.js
+++ b/src/client.js
@@ -11,6 +11,8 @@ localforage.config({
   description: 'paimonmoe local storage',
 });
 
+window.localforage = localforage;
+
 startClient();
 
 sapper.start({
diff --git a/src/components/DataSync.svelte b/src/components/DataSync.svelte
index d9186f27..8231ee76 100644
--- a/src/components/DataSync.svelte
+++ b/src/components/DataSync.svelte
@@ -99,7 +99,7 @@
 
   async function useRemoteData() {
     // check if old local storage version
-    if (remoteSave['converted'] === undefined) {
+    if (!remoteSave['converted'] === undefined) {
       for (const key in remoteSave) {
         if (key.endsWith('ar') || key.endsWith('wl')) {
           await updateSave(key, Number(remoteSave[key]), true);
@@ -109,7 +109,8 @@
           key.endsWith('accounts') ||
           key.endsWith('locale') ||
           key.endsWith('server') ||
-          key.endsWith('update-time')
+          key.endsWith('update-time') ||
+          key.endsWith('converted')
         ) {
           await updateSave(key, remoteSave[key], true);
         } else if (
@@ -126,8 +127,35 @@
       }
       console.log('finished convert from google drive');
     } else {
-      for (const k in remoteSave) {
-        await updateSave(k, remoteSave[k], true);
+      for (const key in remoteSave) {
+        if (typeof remoteSave[key] === 'string') {
+          console.log('converting', key);
+          if (key.endsWith('ar') || key.endsWith('wl')) {
+            await updateSave(key, Number(remoteSave[key]), true);
+          } else if (key.endsWith('collectables-updated')) {
+            await updateSave(key, remoteSave[key] === 'true', true);
+          } else if (
+            key.endsWith('accounts') ||
+            key.endsWith('locale') ||
+            key.endsWith('server') ||
+            key.endsWith('update-time') ||
+            key.endsWith('converted')
+          ) {
+            await updateSave(key, remoteSave[key], true);
+          } else if (
+            key.endsWith('wish-counter-character-event') ||
+            key.endsWith('wish-counter-weapon-event') ||
+            key.endsWith('wish-counter-standard') ||
+            key.endsWith('wish-counter-beginners')
+          ) {
+            const converted = convertTime(JSON.parse(remoteSave[key]));
+            await updateSave(key, converted, true);
+          } else {
+            await updateSave(key, JSON.parse(remoteSave[key]), true);
+          }
+        } else {
+          await updateSave(key, remoteSave[key], true);
+        }
       }
     }
 
diff --git a/src/components/SettingData.svelte b/src/components/SettingData.svelte
index 2e554367..e8c0df1e 100644
--- a/src/components/SettingData.svelte
+++ b/src/components/SettingData.svelte
@@ -9,9 +9,9 @@
   let unsubscribeWl = null;
   let firstLoad = true;
 
-  $: if ($fromRemote) {
-    readLocalData();
-  }
+  // $: if ($fromRemote) {
+  //   readLocalData();
+  // }
 
   onMount(async () => {
     await readLocalData();
diff --git a/src/data/banners.js b/src/data/banners.js
index 664ae51d..b64fc295 100644
--- a/src/data/banners.js
+++ b/src/data/banners.js
@@ -142,6 +142,7 @@ export const banners = {
       start: '2021-05-18 18:00:00',
       end: '2021-06-08 15:00:00',
       color: '#A6D6E0',
+      featuredRare: ['xingqiu', 'beidou', 'xinyan'],
       featured: ['eula'],
     },
   ],
diff --git a/src/routes/_index/banner.svelte b/src/routes/_index/banner.svelte
index a0b80503..a6addc0d 100644
--- a/src/routes/_index/banner.svelte
+++ b/src/routes/_index/banner.svelte
@@ -59,6 +59,7 @@
     await tick();
     dispatch('done');
   });
+
 </script>
 
 <div class="bg-item rounded-xl p-4 flex flex-col">
@@ -68,20 +69,20 @@
       {#each Object.entries(featured) as [_, item], i}
         <div
           class="flex flex-col pt-2"
-          style="background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 27%, rgba(0,0,0,0.75) 70%, rgba(0,0,0,0) 100%); 
-          {i ===
-          0
-            ? 'margin-right: 20%;'
-            : ''}"
+          style="background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 17%, rgba(0,0,0,0.75) 70%, rgba(0,0,0,0) 100%); 
+          {i === 0 ? 'margin-right: 20%;' : ''}"
         >
-          <h3 class="text-3xl ml-4 font-black leading-6">
+          <h3 class="text-3xl ml-6 font-black leading-6">
             {#if loading}
               <Icon path={mdiLoading} spin size={0.8} />
             {:else}
               {item.count}
             {/if}
           </h3>
-          <p class="ml-4 font-sm leading-2">{$t(`home.banner.featured.${i}`)}</p>
+          <p class="ml-6 font-sm leading-2">
+            <span class="font-semibold">{$t(`home.banner.featured.${i}`)}</span>
+            {$t('home.banner.summoned')}
+          </p>
         </div>
       {/each}
     </div>
@@ -96,7 +97,7 @@
       <p class="text-white leading-4">{$t('home.banner.avg')} <span class="font-semibold">{item.average}</span></p>
     </div>
   {/each}
-  <p class="text-gray-400 pl-2 mt-1">※ {$t('home.banner.subtitle', { values: { user }})}</p>
+  <p class="text-gray-400 pl-2 mt-1">※ {$t('home.banner.subtitle', { values: { user } })}</p>
   <a
     href="/wish/tally"
     class="flex justify-end items-center self-end lg:self-start text-white mt-4 bg-background-secondary rounded-xl py-2 px-4
diff --git a/src/routes/wish/_counter.svelte b/src/routes/wish/_counter.svelte
index 9c7e9859..5658ca33 100644
--- a/src/routes/wish/_counter.svelte
+++ b/src/routes/wish/_counter.svelte
@@ -179,9 +179,14 @@
     console.log('wish read local');
     const prefix = getAccountPrefix();
     const data = await readSave(`${prefix}${path}`);
-    console.log(data);
+
     if (data !== null) {
-      const counterData = data;
+      let counterData = data;
+      if (typeof data === 'string') {
+        counterData = JSON.parse(data);
+        await updateSave(`${prefix}${path}`, JSON.parse(data), true);
+      }
+
       total = counterData.total;
       legendary = counterData.legendary;
       rare = counterData.rare;
diff --git a/src/routes/wish/_summary.svelte b/src/routes/wish/_summary.svelte
index 16cf883c..41d05cda 100644
--- a/src/routes/wish/_summary.svelte
+++ b/src/routes/wish/_summary.svelte
@@ -29,7 +29,9 @@
   }
 
   $: if ($updateTime) {
-    readLocalData();
+    setTimeout(() => {
+      readLocalData();
+    }, 1000);
   }
 
   onMount(async () => {
diff --git a/src/routes/wish/tally/_itemNew.svelte b/src/routes/wish/tally/_itemNew.svelte
index 6c4de2b7..56aee309 100644
--- a/src/routes/wish/tally/_itemNew.svelte
+++ b/src/routes/wish/tally/_itemNew.svelte
@@ -108,6 +108,7 @@
   const rareInclude = {
     300011: ['rosaria'],
     300012: ['yanfei', 'noelle', 'diona'],
+    300013: ['xingqiu', 'beidou', 'xinyan'],
   };
   let promotedRarePercentage = 0;
 
@@ -175,7 +176,7 @@
       if (id > 300011 && id < 400000) {
         const totalRare = data.list.reduce(
           (prev, current) => {
-            if (rareInclude[id].includes(current.name)) {
+            if (banner.featuredRare.includes(current.name)) {
               prev.total += current.count;
             }
             if (featured[1] === current.name) {
@@ -289,11 +290,11 @@
 
 <div class="flex flex-col bg-item rounded-xl px-4 pt-4 pb-2 mb-4 space-y-4">
   <div class="flex flex-col xl:flex-row">
-    <a href="/wish/tally/{id}">
+    <a href="/wish/tally/{id}" class="xl:mr-4">
       <img
         src="/images/banners/{banner.name} {banner.image}.png"
         alt={banner.name}
-        class="rounded-xl xl:h-64 xl:mr-4"
+        class="rounded-xl xl:h-64 w-auto"
       />
     </a>
     <div class="h-4 xl:h-0" />
diff --git a/src/stores/saveManager.js b/src/stores/saveManager.js
index e7854f3e..462c851e 100644
--- a/src/stores/saveManager.js
+++ b/src/stores/saveManager.js
@@ -129,6 +129,7 @@ export const getLocalSaveJson = async () => {
 };
 
 export const updateSave = async (key, data, isFromRemote) => {
+  console.log('updateSave', key, isFromRemote);
   if (!isFromRemote) {
     localModified.set(true);
   }