diff --git a/src/components/SettingData.svelte b/src/components/SettingData.svelte
index 2a8ba20b..172182e4 100644
--- a/src/components/SettingData.svelte
+++ b/src/components/SettingData.svelte
@@ -1,9 +1,11 @@
 <script>
-  import { server, loading } from '../stores/server';
+  import { server, ar, wl, loading } from '../stores/server';
   import { readSave, updateSave, fromRemote } from '../stores/saveManager';
   import { onMount } from 'svelte';
 
-  let unsubscribe = null;
+  let unsubscribeServer = null;
+  let unsubscribeAr = null;
+  let unsubscribeWl = null;
   let firstLoad = true;
 
   $: if ($fromRemote) {
@@ -18,21 +20,43 @@
     loading.set(true);
     firstLoad = true;
 
-    if (unsubscribe) unsubscribe();
+    if (unsubscribeServer) unsubscribeServer();
+    if (unsubscribeAr) unsubscribeAr();
+    if (unsubscribeWl) unsubscribeWl();
 
     console.log('setting read local');
-    const data = readSave('server');
-    if (data !== null) {
-      const currentServer = data;
+    const serverSave = readSave('server');
+    const arSave = readSave('ar');
+    const wlSave = readSave('wl');
+    if (serverSave !== null) {
+      const currentServer = serverSave;
       server.set(currentServer);
     }
+    if (arSave !== null) {
+      ar.set(arSave);
+    }
+    if (wlSave !== null) {
+      wl.set(wlSave);
+    }
 
-    unsubscribe = server.subscribe((val) => {
+    unsubscribeServer = server.subscribe((val) => {
       if (firstLoad) return;
 
       console.log('server changed', val);
       updateSave('server', val);
     });
+    unsubscribeWl = wl.subscribe((val) => {
+      if (firstLoad) return;
+
+      console.log('wl changed', val);
+      updateSave('wl', val);
+    });
+    unsubscribeAr = ar.subscribe((val) => {
+      if (firstLoad) return;
+
+      console.log('ar changed', val);
+      updateSave('ar', val);
+    });
 
     firstLoad = false;
     loading.set(false);
diff --git a/src/data/dropRates.js b/src/data/dropRates.js
new file mode 100644
index 00000000..1796bca3
--- /dev/null
+++ b/src/data/dropRates.js
@@ -0,0 +1,25 @@
+export const dropRates = {
+  book: [
+    [2.52, 0, 0],
+    [2.52, 1.0, 0.0],
+    [1.79, 2.0, 0.0],
+    [2.197, 1.977, 0.227],
+  ],
+  weapon: [
+    [4.57, 0.0, 0.0, 0.0],
+    [2.58, 2.0, 0.0, 0.0],
+    [2.26, 2.77, 0.21, 0.0],
+    [2.205, 2.404, 0.626, 0.073],
+  ],
+  boss: [
+    [2.09, 0.0, 0.0, 0.0, 1.7],
+    [2.12, 0.0, 0.0, 0.0, 1.72],
+    [1.17, 1.26, 0.0, 0.0, 1.57],
+    [1.21, 1.35, 0.0, 0.0, 1.95],
+    [1.46, 1.42, 0.11, 0.0, 2.03],
+    [1.74, 1.44, 0.11, 0.0, 2.23],
+    [1.93, 1.55, 0.12, 0.013, 2.37],
+    [2.15, 1.61, 0.13, 0.021, 2.55],
+    [2.15, 1.53, 0.19, 0.016, 2.55],
+  ],
+};
diff --git a/src/data/itemGroup.js b/src/data/itemGroup.js
index af5fc513..8f5f04d6 100644
--- a/src/data/itemGroup.js
+++ b/src/data/itemGroup.js
@@ -4,26 +4,32 @@ export const itemGroup = {
   teachings_of_freedom: {
     name: 'Freedom',
     items: [itemList.teachings_of_freedom, itemList.guide_to_freedom, itemList.philosophies_of_freedom],
+    type: 'book',
   },
   teachings_of_ballad: {
     name: 'Ballad',
     items: [itemList.teachings_of_ballad, itemList.guide_to_ballad, itemList.philosophies_of_ballad],
+    type: 'book',
   },
   teachings_of_gold: {
     name: 'Gold',
     items: [itemList.teachings_of_gold, itemList.guide_to_gold, itemList.philosophies_of_gold],
+    type: 'book',
   },
   teachings_of_resistance: {
     name: 'Resistance',
     items: [itemList.teachings_of_resistance, itemList.guide_to_resistance, itemList.philosophies_of_resistance],
+    type: 'book',
   },
   teachings_of_diligence: {
     name: 'Diligence',
     items: [itemList.teachings_of_diligence, itemList.guide_to_diligence, itemList.philosophies_of_diligence],
+    type: 'book',
   },
   teachings_of_prosperity: {
     name: 'Prosperity',
     items: [itemList.teachings_of_prosperity, itemList.guide_to_prosperity, itemList.philosophies_of_prosperity],
+    type: 'book',
   },
   tile_of_decarabians_tower: {
     name: 'Decarabian',
@@ -33,6 +39,7 @@ export const itemGroup = {
       itemList.fragment_of_decarabians_epic,
       itemList.scattered_piece_of_decarabians_dream,
     ],
+    type: 'weapon',
   },
   luminous_sands_from_guyun: {
     name: 'Guyun',
@@ -42,6 +49,7 @@ export const itemGroup = {
       itemList.relic_from_guyun,
       itemList.divine_body_from_guyun,
     ],
+    type: 'weapon',
   },
   boreal_wolfs_milk_tooth: {
     name: 'Boreal Wolf',
@@ -51,6 +59,7 @@ export const itemGroup = {
       itemList.boreal_wolfs_broken_fang,
       itemList.boreal_wolfs_nostalgia,
     ],
+    type: 'weapon',
   },
   mist_veiled_lead_elixir: {
     name: 'Mist Veiled Elixir',
@@ -60,6 +69,7 @@ export const itemGroup = {
       itemList.mist_veiled_gold_elixir,
       itemList.mist_veiled_primo_elixir,
     ],
+    type: 'weapon',
   },
   fetters_of_the_dandelion_gladiator: {
     name: 'Dandelion Gladiator',
@@ -69,6 +79,7 @@ export const itemGroup = {
       itemList.shackles_of_the_dandelion_gladiator,
       itemList.dream_of_the_dandelion_gladiator,
     ],
+    type: 'weapon',
   },
   grain_of_aerosiderite: {
     name: 'Aerosiderite',
@@ -78,6 +89,7 @@ export const itemGroup = {
       itemList.bit_of_aerosiderite,
       itemList.chunk_of_aerosiderite,
     ],
+    type: 'weapon',
   },
   agnidus_agate_sliver: {
     name: 'Agnidus Agate',
@@ -87,6 +99,7 @@ export const itemGroup = {
       itemList.agnidus_agate_chunk,
       itemList.agnidus_agate_gemstone,
     ],
+    type: 'ascension_gem',
   },
   brilliant_diamond_sliver: {
     name: 'Brilliant Diamond',
@@ -96,6 +109,7 @@ export const itemGroup = {
       itemList.brilliant_diamond_chunk,
       itemList.brilliant_diamond_gemstone,
     ],
+    type: 'ascension_gem',
   },
   prithiva_topaz_sliver: {
     name: 'Prithiva Topaz',
@@ -105,6 +119,7 @@ export const itemGroup = {
       itemList.prithiva_topaz_chunk,
       itemList.prithiva_topaz_gemstone,
     ],
+    type: 'ascension_gem',
   },
   shivada_jade_sliver: {
     name: 'Shivada Jade',
@@ -114,6 +129,7 @@ export const itemGroup = {
       itemList.shivada_jade_chunk,
       itemList.shivada_jade_gemstone,
     ],
+    type: 'ascension_gem',
   },
   vajrada_amethyst_sliver: {
     name: 'Vajrada Amethyst',
@@ -123,6 +139,7 @@ export const itemGroup = {
       itemList.vajrada_amethyst_chunk,
       itemList.vajrada_amethyst_gemstone,
     ],
+    type: 'ascension_gem',
   },
   varunada_lazurite_sliver: {
     name: 'Varunada Lazurite',
@@ -132,6 +149,7 @@ export const itemGroup = {
       itemList.varunada_lazurite_chunk,
       itemList.varunada_lazurite_gemstone,
     ],
+    type: 'ascension_gem',
   },
   vayuda_turquoise_sliver: {
     name: 'Vayuda Turquoise',
@@ -141,6 +159,7 @@ export const itemGroup = {
       itemList.vayuda_turquoise_chunk,
       itemList.vayuda_turquoise_gemstone,
     ],
+    type: 'ascension_gem',
   },
   chaos_device: {
     name: 'Chaos',
diff --git a/src/data/itemList.js b/src/data/itemList.js
index d0dfa356..019af550 100644
--- a/src/data/itemList.js
+++ b/src/data/itemList.js
@@ -17,6 +17,7 @@ export const itemList = {
     id: 'fetters_of_the_dandelion_gladiator',
     name: 'Fetters of the Dandelion Gladiator',
     day: ['wednesday', 'saturday'],
+    rarity: 1,
   },
   chaos_device: { id: 'chaos_device', name: 'Chaos Device' },
   divining_scroll: { id: 'divining_scroll', name: 'Divining Scroll' },
@@ -24,6 +25,8 @@ export const itemList = {
     id: 'chains_of_the_dandelion_gladiator',
     name: 'Chains of the Dandelion Gladiator',
     day: ['wednesday', 'saturday'],
+    rarity: 2,
+    parent: 'fetters_of_the_dandelion_gladiator',
   },
   chaos_circuit: { id: 'chaos_circuit', name: 'Chaos Circuit' },
   sealed_scroll: { id: 'sealed_scroll', name: 'Sealed Scroll' },
@@ -31,6 +34,8 @@ export const itemList = {
     id: 'shackles_of_the_dandelion_gladiator',
     name: 'Shackles of the Dandelion Gladiator',
     day: ['wednesday', 'saturday'],
+    rarity: 3,
+    parent: 'fetters_of_the_dandelion_gladiator',
   },
   chaos_core: { id: 'chaos_core', name: 'Chaos Core' },
   forbidden_curse_scroll: {
@@ -41,11 +46,14 @@ export const itemList = {
     id: 'dream_of_the_dandelion_gladiator',
     name: 'Dream of the Dandelion Gladiator',
     day: ['wednesday', 'saturday'],
+    rarity: 4,
+    parent: 'fetters_of_the_dandelion_gladiator',
   },
   tile_of_decarabians_tower: {
     id: 'tile_of_decarabians_tower',
     name: "Tile of Decarabian's Tower",
     day: ['monday', 'thursday'],
+    rarity: 1,
   },
   heavy_horn: { id: 'heavy_horn', name: 'Heavy Horn' },
   firm_arrowhead: { id: 'firm_arrowhead', name: 'Firm Arrowhead' },
@@ -53,6 +61,8 @@ export const itemList = {
     id: 'debris_of_decarabians_city',
     name: "Debris of Decarabian's City",
     day: ['monday', 'thursday'],
+    rarity: 2,
+    parent: 'tile_of_decarabians_tower',
   },
   black_bronze_horn: {
     id: 'black_bronze_horn',
@@ -63,6 +73,8 @@ export const itemList = {
     id: 'fragment_of_decarabians_epic',
     name: "Fragment of Decarabian's Epic",
     day: ['monday', 'thursday'],
+    rarity: 3,
+    parent: 'tile_of_decarabians_tower',
   },
   black_crystal_horn: {
     id: 'black_crystal_horn',
@@ -76,6 +88,8 @@ export const itemList = {
     id: 'scattered_piece_of_decarabians_dream',
     name: "Scattered Piece of Decarabian's Dream",
     day: ['monday', 'thursday'],
+    rarity: 4,
+    parent: 'tile_of_decarabians_tower',
   },
   slime_condensate: { id: 'slime_condensate', name: 'Slime Condensate' },
   slime_secretions: { id: 'slime_secretions', name: 'Slime Secretions' },
@@ -87,6 +101,7 @@ export const itemList = {
     id: 'boreal_wolfs_milk_tooth',
     name: "Boreal Wolf's Milk Tooth",
     day: ['tuesday', 'friday'],
+    rarity: 1,
   },
   dead_ley_line_branch: {
     id: 'dead_ley_line_branch',
@@ -96,6 +111,8 @@ export const itemList = {
     id: 'boreal_wolfs_cracked_tooth',
     name: "Boreal Wolf's Cracked Tooth",
     day: ['tuesday', 'friday'],
+    rarity: 2,
+    parent: 'boreal_wolfs_milk_tooth',
   },
   dead_ley_line_leaves: {
     id: 'dead_ley_line_leaves',
@@ -105,17 +122,22 @@ export const itemList = {
     id: 'boreal_wolfs_broken_fang',
     name: "Boreal Wolf's Broken Fang",
     day: ['tuesday', 'friday'],
+    rarity: 3,
+    parent: 'boreal_wolfs_milk_tooth',
   },
   ley_line_sprouts: { id: 'ley_line_sprouts', name: 'Ley Line Sprouts' },
   boreal_wolfs_nostalgia: {
     id: 'boreal_wolfs_nostalgia',
     name: "Boreal Wolf's Nostalgia",
     day: ['tuesday', 'friday'],
+    rarity: 4,
+    parent: 'boreal_wolfs_milk_tooth',
   },
   grain_of_aerosiderite: {
     id: 'grain_of_aerosiderite',
     name: 'Grain of Aerosiderite',
     day: ['wednesday', 'saturday'],
+    rarity: 1,
   },
   fragile_bone_shard: {
     id: 'fragile_bone_shard',
@@ -126,6 +148,8 @@ export const itemList = {
     id: 'piece_of_aerosiderite',
     name: 'Piece of Aerosiderite',
     day: ['wednesday', 'saturday'],
+    rarity: 2,
+    parent: 'grain_of_aerosiderite',
   },
   sturdy_bone_shard: {
     id: 'sturdy_bone_shard',
@@ -136,6 +160,8 @@ export const itemList = {
     id: 'bit_of_aerosiderite',
     name: 'Bit of Aerosiderite',
     day: ['wednesday', 'saturday'],
+    rarity: 3,
+    parent: 'grain_of_aerosiderite',
   },
   fossilized_bone_shard: {
     id: 'fossilized_bone_shard',
@@ -146,11 +172,14 @@ export const itemList = {
     id: 'chunk_of_aerosiderite',
     name: 'Chunk of Aerosiderite',
     day: ['wednesday', 'saturday'],
+    rarity: 4,
+    parent: 'grain_of_aerosiderite',
   },
   mist_veiled_lead_elixir: {
     id: 'mist_veiled_lead_elixir',
     name: 'Mist Veiled Lead Elixir',
     day: ['tuesday', 'friday'],
+    rarity: 1,
   },
   mist_grass_pollen: {
     id: 'mist_grass_pollen',
@@ -164,6 +193,8 @@ export const itemList = {
     id: 'mist_veiled_mercury_elixir',
     name: 'Mist Veiled Mercury Elixir',
     day: ['tuesday', 'friday'],
+    rarity: 2,
+    parent: 'mist_veiled_lead_elixir',
   },
   mist_grass: { id: 'mist_grass', name: 'Mist Grass' },
   silver_raven_insignia: {
@@ -174,6 +205,8 @@ export const itemList = {
     id: 'mist_veiled_gold_elixir',
     name: 'Mist Veiled Gold Elixir',
     day: ['tuesday', 'friday'],
+    rarity: 3,
+    parent: 'mist_veiled_lead_elixir',
   },
   mist_grass_wick: { id: 'mist_grass_wick', name: 'Mist Grass Wick' },
   golden_raven_insignia: {
@@ -184,11 +217,14 @@ export const itemList = {
     id: 'mist_veiled_primo_elixir',
     name: 'Mist Veiled Primo Elixir',
     day: ['tuesday', 'friday'],
+    rarity: 4,
+    parent: 'mist_veiled_lead_elixir',
   },
   luminous_sands_from_guyun: {
     id: 'luminous_sands_from_guyun',
     name: 'Luminous Sands from Guyun',
     day: ['monday', 'thursday'],
+    rarity: 1,
   },
   hunters_sacrificial_knife: {
     id: 'hunters_sacrificial_knife',
@@ -202,6 +238,8 @@ export const itemList = {
     id: 'lustrous_stone_from_guyun',
     name: 'Lustrous Stone from Guyun',
     day: ['monday', 'thursday'],
+    rarity: 2,
+    parent: 'luminous_sands_from_guyun',
   },
   agents_sacrificial_knife: {
     id: 'agents_sacrificial_knife',
@@ -215,6 +253,8 @@ export const itemList = {
     id: 'relic_from_guyun',
     name: 'Relic from Guyun',
     day: ['monday', 'thursday'],
+    rarity: 3,
+    parent: 'luminous_sands_from_guyun',
   },
   inspectors_sacrificial_knife: {
     id: 'inspectors_sacrificial_knife',
@@ -228,6 +268,8 @@ export const itemList = {
     id: 'divine_body_from_guyun',
     name: 'Divine Body from Guyun',
     day: ['monday', 'thursday'],
+    rarity: 4,
+    parent: 'luminous_sands_from_guyun',
   },
   whopperflower_nectar: {
     id: 'whopperflower_nectar',
@@ -241,35 +283,52 @@ export const itemList = {
   prithiva_topaz_sliver: {
     id: 'prithiva_topaz_sliver',
     name: 'Prithiva Topaz Sliver',
+    rarity: 1,
   },
   cecilia: { id: 'cecilia', name: 'Cecilia' },
   prithiva_topaz_fragment: {
     id: 'prithiva_topaz_fragment',
     name: 'Prithiva Topaz Fragment',
+    rarity: 2,
+    parent: 'prithiva_topaz_sliver',
+  },
+  basalt_pillar: {
+    id: 'basalt_pillar',
+    name: 'Basalt Pillar',
+    rarity: 5,
+    parent: 'prithiva_topaz_sliver',
   },
-  basalt_pillar: { id: 'basalt_pillar', name: 'Basalt Pillar' },
   prithiva_topaz_chunk: {
     id: 'prithiva_topaz_chunk',
     name: 'Prithiva Topaz Chunk',
+    rarity: 3,
+    parent: 'prithiva_topaz_sliver',
   },
   prithiva_topaz_gemstone: {
     id: 'prithiva_topaz_gemstone',
     name: 'Prithiva Topaz Gemstone',
+    rarity: 4,
+    parent: 'prithiva_topaz_sliver',
   },
   teachings_of_ballad: {
     id: 'teachings_of_ballad',
     name: 'Teachings of Ballad',
     day: ['wednesday', 'saturday'],
+    rarity: 2,
   },
   guide_to_ballad: {
     id: 'guide_to_ballad',
     name: 'Guide to Ballad',
     day: ['wednesday', 'saturday'],
+    rarity: 3,
+    parent: 'teachings_of_ballad',
   },
   philosophies_of_ballad: {
     id: 'philosophies_of_ballad',
     name: 'Philosophies of Ballad',
     day: ['wednesday', 'saturday'],
+    rarity: 4,
+    parent: 'teachings_of_ballad',
   },
   tusk_of_monoceros_caeli: {
     id: 'tusk_of_monoceros_caeli',
@@ -278,40 +337,58 @@ export const itemList = {
   agnidus_agate_sliver: {
     id: 'agnidus_agate_sliver',
     name: 'Agnidus Agate Sliver',
+    rarity: 1,
   },
   small_lamp_grass: { id: 'small_lamp_grass', name: 'Small Lamp Grass' },
   agnidus_agate_fragment: {
     id: 'agnidus_agate_fragment',
     name: 'Agnidus Agate Fragment',
+    rarity: 2,
+    parent: 'agnidus_agate_sliver',
+  },
+  everflame_seed: {
+    id: 'everflame_seed',
+    name: 'Everflame Seed',
+    rarity: 5,
+    parent: 'agnidus_agate_sliver',
   },
-  everflame_seed: { id: 'everflame_seed', name: 'Everflame Seed' },
   agnidus_agate_chunk: {
     id: 'agnidus_agate_chunk',
     name: 'Agnidus Agate Chunk',
+    rarity: 3,
+    parent: 'agnidus_agate_sliver',
   },
   agnidus_agate_gemstone: {
     id: 'agnidus_agate_gemstone',
     name: 'Agnidus Agate Gemstone',
+    rarity: 4,
+    parent: 'agnidus_agate_sliver',
   },
   teachings_of_freedom: {
     id: 'teachings_of_freedom',
     name: 'Teachings of Freedom',
     day: ['monday', 'thursday'],
+    rarity: 2,
   },
   guide_to_freedom: {
     id: 'guide_to_freedom',
     name: 'Guide to Freedom',
     day: ['monday', 'thursday'],
+    rarity: 3,
+    parent: 'teachings_of_freedom',
   },
   philosophies_of_freedom: {
     id: 'philosophies_of_freedom',
     name: 'Philosophies of Freedom',
     day: ['monday', 'thursday'],
+    rarity: 4,
+    parent: 'teachings_of_freedom',
   },
   dvalins_sigh: { id: 'dvalins_sigh', name: "Dvalin's Sigh" },
   varunada_lazurite_sliver: {
     id: 'varunada_lazurite_sliver',
     name: 'Varunada Lazurite Sliver',
+    rarity: 1,
   },
   philanemo_mushroom: {
     id: 'philanemo_mushroom',
@@ -320,99 +397,149 @@ export const itemList = {
   varunada_lazurite_fragment: {
     id: 'varunada_lazurite_fragment',
     name: 'Varunada Lazurite Fragment',
+    rarity: 2,
+    parent: 'varunada_lazurite_sliver',
+  },
+  cleansing_heart: {
+    id: 'cleansing_heart',
+    name: 'Cleansing Heart',
+    rarity: 5,
+    parent: 'varunada_lazurite_sliver',
   },
-  cleansing_heart: { id: 'cleansing_heart', name: 'Cleansing Heart' },
   varunada_lazurite_chunk: {
     id: 'varunada_lazurite_chunk',
     name: 'Varunada Lazurite Chunk',
+    rarity: 3,
+    parent: 'varunada_lazurite_sliver',
   },
   varunada_lazurite_gemstone: {
     id: 'varunada_lazurite_gemstone',
     name: 'Varunada Lazurite Gemstone',
+    rarity: 4,
+    parent: 'varunada_lazurite_sliver',
   },
   ring_of_boreas: { id: 'ring_of_boreas', name: 'Ring of Boreas' },
   vajrada_amethyst_sliver: {
     id: 'vajrada_amethyst_sliver',
     name: 'Vajrada Amethyst Sliver',
+    rarity: 1,
   },
   noctilucous_jade: { id: 'noctilucous_jade', name: 'Noctilucous Jade' },
   vajrada_amethyst_fragment: {
     id: 'vajrada_amethyst_fragment',
     name: 'Vajrada Amethyst Fragment',
+    rarity: 2,
+    parent: 'vajrada_amethyst_sliver',
+  },
+  lightning_prism: {
+    id: 'lightning_prism',
+    name: 'Lightning Prism',
+    rarity: 5,
+    parent: 'vajrada_amethyst_sliver',
   },
-  lightning_prism: { id: 'lightning_prism', name: 'Lightning Prism' },
   vajrada_amethyst_chunk: {
     id: 'vajrada_amethyst_chunk',
     name: 'Vajrada Amethyst Chunk',
+    rarity: 3,
+    parent: 'vajrada_amethyst_sliver',
   },
   vajrada_amethyst_gemstone: {
     id: 'vajrada_amethyst_gemstone',
     name: 'Vajrada Amethyst Gemstone',
+    rarity: 4,
+    parent: 'vajrada_amethyst_sliver',
   },
   teachings_of_gold: {
     id: 'teachings_of_gold',
     name: 'Teachings of Gold',
     day: ['wednesday', 'saturday'],
+    rarity: 2,
   },
   guide_to_gold: {
     id: 'guide_to_gold',
     name: 'Guide to Gold',
     day: ['wednesday', 'saturday'],
+    rarity: 3,
+    parent: 'teachings_of_gold',
   },
   philosophies_of_gold: {
     id: 'philosophies_of_gold',
     name: 'Philosophies of Gold',
     day: ['wednesday', 'saturday'],
+    rarity: 4,
+    parent: 'teachings_of_gold',
   },
   windwheel_aster: { id: 'windwheel_aster', name: 'Windwheel Aster' },
   teachings_of_resistance: {
     id: 'teachings_of_resistance',
     name: 'Teachings of Resistance',
     day: ['tuesday', 'friday'],
+    rarity: 2,
   },
   guide_to_resistance: {
     id: 'guide_to_resistance',
     name: 'Guide to Resistance',
     day: ['tuesday', 'friday'],
+    rarity: 3,
+    parent: 'teachings_of_resistance',
   },
   philosophies_of_resistance: {
     id: 'philosophies_of_resistance',
     name: 'Philosophies of Resistance',
     day: ['tuesday', 'friday'],
+    rarity: 4,
+    parent: 'teachings_of_resistance',
   },
   dvalins_plume: { id: 'dvalins_plume', name: "Dvalin's Plume" },
   shivada_jade_sliver: {
     id: 'shivada_jade_sliver',
     name: 'Shivada Jade Sliver',
+    rarity: 1,
   },
   cor_lapis: { id: 'cor_lapis', name: 'Cor Lapis' },
   shivada_jade_fragment: {
     id: 'shivada_jade_fragment',
     name: 'Shivada Jade Fragment',
+    rarity: 2,
+    parent: 'shivada_jade_sliver',
+  },
+  hoarfrost_core: {
+    id: 'hoarfrost_core',
+    name: 'Hoarfrost Core',
+    rarity: 5,
+    parent: 'shivada_jade_sliver',
   },
-  hoarfrost_core: { id: 'hoarfrost_core', name: 'Hoarfrost Core' },
   shivada_jade_chunk: {
     id: 'shivada_jade_chunk',
     name: 'Shivada Jade Chunk',
+    rarity: 3,
+    parent: 'shivada_jade_sliver',
   },
   shivada_jade_gemstone: {
     id: 'shivada_jade_gemstone',
     name: 'Shivada Jade Gemstone',
+    rarity: 4,
+    parent: 'shivada_jade_sliver',
   },
   teachings_of_diligence: {
     id: 'teachings_of_diligence',
     name: 'Teachings of Diligence',
     day: ['tuesday', 'friday'],
+    rarity: 2,
   },
   guide_to_diligence: {
     id: 'guide_to_diligence',
     name: 'Guide to Diligence',
     day: ['tuesday', 'friday'],
+    rarity: 3,
+    parent: 'teachings_of_diligence',
   },
   philosophies_of_diligence: {
     id: 'philosophies_of_diligence',
     name: 'Philosophies of Diligence',
     day: ['tuesday', 'friday'],
+    rarity: 4,
+    parent: 'teachings_of_diligence',
   },
   calla_lily: { id: 'calla_lily', name: 'Calla Lily' },
   shard_of_a_foul_legacy: {
@@ -426,35 +553,52 @@ export const itemList = {
   vayuda_turquoise_sliver: {
     id: 'vayuda_turquoise_sliver',
     name: 'Vayuda Turquoise Sliver',
+    rarity: 1,
   },
   dandelion_seed: { id: 'dandelion_seed', name: 'Dandelion Seed' },
   vayuda_turquoise_fragment: {
     id: 'vayuda_turquoise_fragment',
     name: 'Vayuda Turquoise Fragment',
+    rarity: 2,
+    parent: 'vayuda_turquoise_sliver',
+  },
+  hurricane_seed: {
+    id: 'hurricane_seed',
+    name: 'Hurricane Seed',
+    rarity: 5,
+    parent: 'vayuda_turquoise_sliver',
   },
-  hurricane_seed: { id: 'hurricane_seed', name: 'Hurricane Seed' },
   vayuda_turquoise_chunk: {
     id: 'vayuda_turquoise_chunk',
     name: 'Vayuda Turquoise Chunk',
+    rarity: 3,
+    parent: 'vayuda_turquoise_sliver',
   },
   vayuda_turquoise_gemstone: {
     id: 'vayuda_turquoise_gemstone',
     name: 'Vayuda Turquoise Gemstone',
+    rarity: 4,
+    parent: 'vayuda_turquoise_sliver',
   },
   teachings_of_prosperity: {
     id: 'teachings_of_prosperity',
     name: 'Teachings of Prosperity',
     day: ['monday', 'thursday'],
+    rarity: 2,
   },
   guide_to_prosperity: {
     id: 'guide_to_prosperity',
     name: 'Guide to Prosperity',
     day: ['monday', 'thursday'],
+    rarity: 3,
+    parent: 'teachings_of_prosperity',
   },
   philosophies_of_prosperity: {
     id: 'philosophies_of_prosperity',
     name: 'Philosophies of Prosperity',
     day: ['monday', 'thursday'],
+    rarity: 4,
+    parent: 'teachings_of_prosperity',
   },
   valberry: { id: 'valberry', name: 'Valberry' },
   dvalins_claw: { id: 'dvalins_claw', name: "Dvalin's Claw" },
@@ -466,18 +610,25 @@ export const itemList = {
   brilliant_diamond_sliver: {
     id: 'brilliant_diamond_sliver',
     name: 'Brilliant Diamond Sliver',
+    rarity: 1,
   },
   brilliant_diamond_fragment: {
     id: 'brilliant_diamond_fragment',
     name: 'Brilliant Diamond Fragment',
+    rarity: 2,
+    parent: 'brilliant_diamond_sliver',
   },
   brilliant_diamond_chunk: {
     id: 'brilliant_diamond_chunk',
     name: 'Brilliant Diamond Chunk',
+    rarity: 3,
+    parent: 'brilliant_diamond_sliver',
   },
   brilliant_diamond_gemstone: {
     id: 'brilliant_diamond_gemstone',
     name: 'Brilliant Diamond Gemstone',
+    rarity: 4,
+    parent: 'brilliant_diamond_sliver',
   },
   jueyun_chili: { id: 'jueyun_chili', name: 'Jueyun Chili' },
   silk_flower: { id: 'silk_flower', name: 'Silk Flower' },
diff --git a/src/routes/settings.svelte b/src/routes/settings.svelte
index 200ce91f..e8f6306a 100644
--- a/src/routes/settings.svelte
+++ b/src/routes/settings.svelte
@@ -6,9 +6,10 @@
   import Button from '../components/Button.svelte';
   import Icon from '../components/Icon.svelte';
   import Select from '../components/Select.svelte';
+  import Input from '../components/Input.svelte';
 
   import { driveSignedIn, driveError, driveLoading, synced, localModified, lastSyncTime } from '../stores/dataSync';
-  import { server } from '../stores/server';
+  import { server, ar, wl } from '../stores/server';
 
   const servers = [
     { label: 'Asia/TW/HK/MO', value: 'Asia' },
@@ -17,6 +18,8 @@
   ];
 
   let selectedServer = null;
+  let arInput = '';
+  let wlInput = '';
 
   let changelogOpen = false;
 
@@ -37,6 +40,14 @@
       console.log('setting update');
       selectedServer = servers.find((e) => e.value === val);
     });
+    ar.subscribe((val) => {
+      console.log('ar update');
+      arInput = val;
+    });
+    wl.subscribe((val) => {
+      console.log('wl update');
+      wlInput = val;
+    });
   });
 
   function updateServer() {
@@ -44,7 +55,21 @@
     server.set(selectedServer.value);
   }
 
+  function updateAR() {
+    if (arInput) {
+      ar.set(Number(arInput));
+    }
+  }
+
+  function updateWL() {
+    if (wlInput) {
+      wl.set(Number(wlInput));
+    }
+  }
+
   $: selectedServer, updateServer();
+  $: arInput, updateAR();
+  $: wlInput, updateWL();
 
   $: isSynced = $synced && !$localModified;
 </script>
@@ -57,11 +82,21 @@
   <div class="bg-item rounded-xl mb-4 p-4">
     <p class="text-white">Data Version: <b>1.2 (Ganyu Patch)</b></p>
   </div>
-  <div class="bg-item rounded-xl mb-4 p-4">
-    <div class="flex flex-col md:flex-row md:items-center">
-      <p class="text-white mr-4">Select your server:</p>
+  <div class="bg-item rounded-xl mb-4 p-4 flex flex-col md:flex-row">
+    <div class="flex flex-col md:flex-row md:items-center mr-2">
+      <p class="text-white mr-2">Select your server:</p>
       <Select className="w-64" bind:selected={selectedServer} options={servers} placeholder="Select your server" />
     </div>
+    <div class="flex mt-2 md:mt-0">
+      <div class="flex flex-col md:flex-row md:items-center w-32 mr-2">
+        <p class="text-white mr-2">AR:</p>
+        <Input bind:value={arInput} placeholder="AR" type="number" min="1" />
+      </div>
+      <div class="flex flex-col md:flex-row md:items-center w-32 mr-2">
+        <p class="text-white mr-2">WL:</p>
+        <Input bind:value={wlInput} placeholder="WL" type="number" min="1" />
+      </div>
+    </div>
   </div>
   <div class="bg-item rounded-xl mb-4 p-4">
     <p class="text-white mb-2">
@@ -115,10 +150,14 @@
     </p>
     {#if changelogOpen}
       <div transition:slide class="mt-4">
-        <pre class="bg-background rounded-xl py-2 px-4">2021/02/01 
+        <pre class="bg-background rounded-xl py-2 px-4 whitespace-pre-wrap">2021/02/02 
+- Add resin approximation on todo list
+- Change todo today farmable item view
+- Add WL and AR setting for resin approximation</pre>
+        <pre class="bg-background rounded-xl py-2 px-4 whitespace-pre-wrap mt-2">2021/02/01 
 - Add detail to wish counter
 - Bug fixes</pre>
-        <pre class="bg-background rounded-xl py-2 px-4 mt-2">2021/01/12 
+        <pre class="bg-background rounded-xl py-2 px-4 whitespace-pre-wrap mt-2">2021/01/12 
 - Add Ganyu</pre>
       </div>
     {/if}
diff --git a/src/routes/todo.svelte b/src/routes/todo.svelte
index 08290519..b6d5f351 100644
--- a/src/routes/todo.svelte
+++ b/src/routes/todo.svelte
@@ -1,13 +1,17 @@
 <script>
   import { getContext, onMount, tick } from 'svelte';
-  import { mdiChevronLeft, mdiChevronRight, mdiClose, mdiLoading } from '@mdi/js';
+  import { slide } from 'svelte/transition';
+  import { mdiChevronDown, mdiChevronLeft, mdiChevronRight, mdiClose, mdiInformation, mdiLoading } from '@mdi/js';
   import { todos, loading } from '../stores/todo';
+  import { ar, wl } from '../stores/server';
   import { itemList } from '../data/itemList';
   import Masonry from '../components/Masonry.svelte';
   import Icon from '../components/Icon.svelte';
   import Button from '../components/Button.svelte';
   import TodoDeleteModal from '../components/TodoDeleteModal.svelte';
   import { getCurrentDay } from '../stores/server';
+  import { itemGroup } from '../data/itemGroup';
+  import { dropRates } from '../data/dropRates';
 
   const { open: openModal, close: closeModal } = getContext('simple-modal');
 
@@ -15,13 +19,46 @@
   let columnCount = 1;
   let numberFormat = Intl.NumberFormat();
   let adding = false;
-  let todayOnly = false;
   let isSunday = false;
   let today = getCurrentDay();
-  let summary = [];
+  let summary = {};
+  let todayOnlyItems = {};
+  let resin = 0;
+  let resinDetail = {};
+  let showResinDetail = false;
+  let bookDomainLevel = 0;
+  let weaponDomainLevel = 0;
 
   let id = Math.random();
 
+  async function toggleResinDetail() {
+    showResinDetail = !showResinDetail;
+  }
+
+  function calculateDomainLevel() {
+    const val = $ar;
+
+    if (val >= 45) {
+      bookDomainLevel = 3;
+    } else if (val >= 36) {
+      bookDomainLevel = 2;
+    } else if (val >= 28) {
+      bookDomainLevel = 1;
+    } else {
+      bookDomainLevel = 0;
+    }
+
+    if (val >= 40) {
+      weaponDomainLevel = 3;
+    } else if (val >= 30) {
+      weaponDomainLevel = 2;
+    } else if (val >= 21) {
+      weaponDomainLevel = 1;
+    } else {
+      weaponDomainLevel = 0;
+    }
+  }
+
   async function reorder(index, pos) {
     if ((index === 0 && pos === -1) || (index === $todos.length - 1 && pos === 1)) return;
 
@@ -62,12 +99,6 @@
     );
   }
 
-  function toggleTodayOnly() {
-    today = getCurrentDay();
-    isSunday = today === 'sunday';
-    todayOnly = !todayOnly;
-  }
-
   function decrease(key, val) {
     todos.update((n) => {
       let i = 0;
@@ -90,9 +121,15 @@
   }
 
   async function updateSummary() {
+    const todayOnly = {};
     summary = $todos.reduce((prev, current) => {
       for (const [id, amount] of Object.entries(current.resources)) {
-        if (!isSunday && todayOnly && itemList[id].day && !itemList[id].day.includes(today)) continue;
+        if (!isSunday && itemList[id].day && itemList[id].day.includes(today)) {
+          if (todayOnly[id] === undefined) {
+            todayOnly[id] = 0;
+          }
+          todayOnly[id] += amount;
+        }
 
         if (prev[id] === undefined) {
           prev[id] = 0;
@@ -103,10 +140,121 @@
 
       return prev;
     }, {});
+    todayOnlyItems = todayOnly;
 
     id = Math.random();
     await tick();
     refreshLayout();
+
+    calculateResin();
+  }
+
+  async function calculateResin() {
+    calculateDomainLevel();
+    const books = {};
+    const weapons = {};
+    const ascension = {};
+    resin = 0;
+    resinDetail = {};
+
+    for (const [id, amount] of Object.entries(summary)) {
+      if (itemGroup[id] && itemGroup[id].type === 'book') {
+        if (books[id] === undefined) {
+          books[id] = [0, 0, 0];
+        }
+        books[id][itemList[id].rarity - 2] = amount;
+      } else if (itemGroup[id] && itemGroup[id].type === 'weapon') {
+        if (weapons[id] === undefined) {
+          weapons[id] = [0, 0, 0, 0];
+        }
+        weapons[id][itemList[id].rarity - 1] = amount;
+      } else if (itemGroup[id] && itemGroup[id].type === 'ascension_gem') {
+        if (ascension[id] === undefined) {
+          ascension[id] = [0, 0, 0, 0, 0];
+        }
+        ascension[id][itemList[id].rarity - 1] = amount;
+      } else if (itemList[id].parent) {
+        const parent = itemList[id].parent;
+        if (itemGroup[parent].type === 'book') {
+          if (books[parent] === undefined) {
+            books[parent] = [0, 0, 0];
+          }
+          books[parent][itemList[id].rarity - 2] = amount;
+        } else if (itemGroup[parent].type === 'weapon') {
+          if (weapons[parent] === undefined) {
+            weapons[parent] = [0, 0, 0, 0];
+          }
+          weapons[parent][itemList[id].rarity - 1] = amount;
+        } else if (itemGroup[parent].type === 'ascension_gem') {
+          if (ascension[parent] === undefined) {
+            ascension[parent] = [0, 0, 0, 0, 0];
+          }
+          ascension[parent][itemList[id].rarity - 1] = amount;
+        }
+      }
+    }
+
+    let total = 0;
+    for (const [id, count] of Object.entries(books)) {
+      let currentTotal = 0;
+      while (count.find((e) => e > 0)) {
+        for (let i = 0; i < 3; i++) {
+          count[i] -= dropRates.book[bookDomainLevel][i];
+          if (count[i] <= -3 && i < 2) {
+            count[i] += 3;
+            count[i + 1] -= 1;
+          }
+        }
+
+        currentTotal += 20;
+        total += 20;
+      }
+
+      resinDetail[id] = currentTotal;
+    }
+    resin += total;
+
+    total = 0;
+    for (const [id, count] of Object.entries(weapons)) {
+      let currentTotal = 0;
+      while (count.find((e) => e > 0)) {
+        for (let i = 0; i < 4; i++) {
+          count[i] -= dropRates.weapon[weaponDomainLevel][i];
+          if (count[i] <= -3 && i < 3) {
+            count[i] += 3;
+            count[i + 1] -= 1;
+          }
+        }
+
+        currentTotal += 20;
+        total += 20;
+      }
+      resinDetail[id] = currentTotal;
+    }
+    resin += total;
+
+    const worldLevel = $wl;
+    total = 0;
+    for (const [id, count] of Object.entries(ascension)) {
+      let currentTotal = 0;
+      while (count.find((e) => e > 0)) {
+        for (let i = 0; i < 5; i++) {
+          count[i] -= dropRates.boss[worldLevel][i];
+          if (count[i] <= -3 && i < 3) {
+            count[i] += 3;
+            count[i + 1] -= 1;
+          }
+        }
+
+        currentTotal += 40;
+        total += 40;
+      }
+      resinDetail[id] = currentTotal;
+    }
+    resin += total;
+
+    await tick();
+    refreshLayout();
   }
 
   function updateId() {
@@ -119,7 +267,6 @@
   });
 
   $: $todos, updateSummary();
-  $: todayOnly, updateSummary();
   $: columnCount, updateId();
 </script>
 
@@ -135,18 +282,92 @@
       {:else if $todos.length > 0}
         <div class="flex items-center mb-4">
           <p class="font-bold text-xl mr-2 flex-1">Summary</p>
-          <Button size="md" on:click={toggleTodayOnly}>Show {todayOnly ? 'All Day' : 'Today Only'}</Button>
         </div>
       {:else}
         <p class="font-bold text-xl">Nothing to do yet 😀<br />Add some from the Items page or the Calculator!</p>
       {/if}
+      {#if Object.entries(todayOnlyItems).length > 0}
+        <div class="rounded-xl bg-background px-4 py-2 mb-2">
+          <p class="font-semibold mb-2 text-center">Farmable Today</p>
+          <table class="w-full">
+            {#each Object.entries(todayOnlyItems) as [id, amount]}
+              <tr class="today-only">
+                <td class="text-right border-b border-gray-700 py-1">
+                  <span class={`${amount === 0 ? 'line-through text-gray-600' : 'text-white'} mr-2 whitespace-no-wrap`}>
+                    {numberFormat.format(amount)}
+                    <Icon size={0.5} path={mdiClose} /></span
+                  >
+                </td>
+                <td class="border-b border-gray-700 py-1">
+                  <span class={`${amount === 0 ? 'line-through text-gray-600' : 'text-white'} block`}>
+                    <span class="w-6 inline-block">
+                      <img class="h-6 inline-block mr-1" src={`/images/items/${id}.png`} alt={itemList[id].name} />
+                    </span>
+                    {itemList[id].name}
+                  </span>
+                </td>
+              </tr>
+            {/each}
+          </table>
+        </div>
+      {/if}
+      {#if resin > 0}
+        <div class="rounded-xl bg-background px-4 py-2 mb-2">
+          <div class="flex items-center justify-center cursor-pointer" on:click={toggleResinDetail}>
+            <img src="/images/resin.png" alt="resin" class="w-6 h-6 mr-2" />
+            <span class="mr-2"><span class="font-black">{resin}</span> resin needed</span>
+            <Icon
+              path={mdiChevronDown}
+              className={`duration-100 ease-in ${showResinDetail ? 'transform rotate-180' : ''}`}
+            />
+          </div>
+          {#if showResinDetail}
+            <div transition:slide class="mt-2">
+              <table class="w-full">
+                {#each Object.entries(resinDetail) as [id, amount]}
+                  <tr>
+                    <td class="text-right border-b border-gray-700 py-1">
+                      <div class="flex justify-end items-center">
+                        <span class="text-white mr-2 whitespace-no-wrap">
+                          {numberFormat.format(amount)}
+                        </span>
+                        <img src="/images/resin.png" alt="resin" class="w-6 h-6 mr-2" />
+                      </div>
+                    </td>
+                    <td class="border-b border-gray-700 py-1">
+                      <span class="text-white block">
+                        <span class="w-6 inline-block">
+                          <img class="h-6 inline-block mr-1" src={`/images/items/${id}.png`} alt={itemList[id].name} />
+                        </span>
+                        {itemGroup[id].name}
+                      </span>
+                    </td>
+                  </tr>
+                {/each}
+              </table>
+
+              <span class="mt-4 block text-center">
+                Based on AR:{$ar} and WL:{$wl}
+              </span>
+              <span class="text-gray-400 text-xs text-center block">(change on settings)</span>
+              <span class="mt-2 text-sm block text-center">
+                Approximation calculated from drop rates by
+                <a class="text-primary font-semibold" target="__blank" href="https://discord.gg/ydwdYmr"
+                  >Genshin Impact Data Gathering Discord</a
+                >
+              </span>
+            </div>
+          {/if}
+        </div>
+      {/if}
       <table class="w-full">
-        {#each Object.entries(summary) as [id, amount], i}
+        {#each Object.entries(summary) as [id, amount]}
           <tr>
             <td class="text-right border-b border-gray-700 py-1">
               <span class={`${amount === 0 ? 'line-through text-gray-600' : 'text-white'} mr-2 whitespace-no-wrap`}>
                 {numberFormat.format(amount)}
-                <Icon size={0.5} path={mdiClose} /></span>
+                <Icon size={0.5} path={mdiClose} /></span
+              >
             </td>
             <td class="border-b border-gray-700 py-1">
               <span class={`${amount === 0 ? 'line-through text-gray-600' : 'text-white'} block mb-1`}>
@@ -188,7 +409,8 @@
             <img
               class="h-8 inline-block mr-2"
               src={`/images/weapons/${todo.weapon ? todo.weapon.id : 'any_weapon_1'}.png`}
-              alt={todo.weapon ? todo.weapon.name : `Weapon Level ${todo.level.from}-${todo.level.to}`} />
+              alt={todo.weapon ? todo.weapon.name : `Weapon Level ${todo.level.from}-${todo.level.to}`}
+            />
             <div class="flex-1">
               <p class="font-bold">{todo.weapon ? todo.weapon.name : 'Weapon'}</p>
               <p class="text-gray-500">Level {`${todo.level.from}-${todo.level.to}`}</p>
@@ -197,7 +419,8 @@
             <img
               class="h-8 inline-block mr-2"
               src={`/images/characters/${todo.character ? todo.character.id : 'characters'}.png`}
-              alt={todo.character ? todo.character.name : `Character Level ${todo.level.from}-${todo.level.to}`} />
+              alt={todo.character ? todo.character.name : `Character Level ${todo.level.from}-${todo.level.to}`}
+            />
             <div class="flex-1">
               <p class="font-bold">{todo.character ? todo.character.name : 'Character'}</p>
               <p class="text-gray-500">Level {`${todo.level.from}-${todo.level.to}`}</p>
@@ -217,7 +440,8 @@
             on:click={() => reorder(i, 1)}
             rounded={false}
             size="sm"
-            className="rounded-r-xl">
+            className="rounded-r-xl"
+          >
             <Icon path={mdiChevronRight} color="white" />
           </Button>
         </div>
@@ -227,7 +451,8 @@
               <td class="text-right border-b border-gray-700 py-1">
                 <span class={`${amount === 0 ? 'line-through text-gray-600' : 'text-white'} mr-2 whitespace-no-wrap`}>
                   {numberFormat.format(amount)}
-                  <Icon size={0.5} path={mdiClose} /></span>
+                  <Icon size={0.5} path={mdiClose} /></span
+                >
               </td>
               <td class="border-b border-gray-700 py-1">
                 <span class={amount === 0 ? 'line-through text-gray-600' : 'text-white'}>
@@ -254,3 +479,45 @@
     {/each}
   </Masonry>
 </div>
+
+<style>
+  tr.today-only:last-child {
+    td {
+      @apply border-b-0;
+    }
+  }
+
+  .tooltip {
+    @apply relative;
+
+    &:hover {
+      .tooltip-content {
+        @apply block;
+      }
+    }
+  }
+
+  .tooltip-content {
+    @apply hidden;
+    @apply absolute;
+    @apply bg-gray-400;
+    @apply text-gray-900;
+    @apply rounded-xl;
+    @apply w-64;
+    @apply px-4;
+    @apply py-2;
+    @apply shadow-lg;
+
+    right: -20px;
+    top: 40px;
+
+    &:before {
+      content: '';
+      top: -20px;
+      right: 21px;
+      border: 10px solid transparent;
+      border-bottom: 10px solid #cbd5e0;
+      position: absolute;
+    }
+  }
+</style>
diff --git a/src/stores/server.js b/src/stores/server.js
index 2aad45ea..751a0bcf 100644
--- a/src/stores/server.js
+++ b/src/stores/server.js
@@ -7,6 +7,8 @@ dayjs.extend(utc);
 dayjs.extend(timezone);
 
 export const server = writable('Asia');
+export const ar = writable(50);
+export const wl = writable(7);
 export const loading = writable(true);
 
 const timeOffset = {
diff --git a/static/images/resin.png b/static/images/resin.png
new file mode 100644
index 00000000..757c3529
Binary files /dev/null and b/static/images/resin.png differ