diff --git a/src/components/Ad.svelte b/src/components/Ad.svelte
index e6bc4095..55cfb5e0 100644
--- a/src/components/Ad.svelte
+++ b/src/components/Ad.svelte
@@ -2,9 +2,10 @@
   export let type;
   export let variant;
   export let id;
+  export let style;
 
   let _class = '';
   export { _class as class };
 </script>
 
-<div class={_class} id="nn_{type === 'mobile' ? 'mobile_' : ''}{variant}{id}" />
+<div {style} class={_class} id="nn_{type === 'mobile' ? 'mobile_' : ''}{variant}{id}" />
diff --git a/src/components/Sidebar/Sidebar.svelte b/src/components/Sidebar/Sidebar.svelte
index f57edb9b..017ca9f1 100644
--- a/src/components/Sidebar/Sidebar.svelte
+++ b/src/components/Sidebar/Sidebar.svelte
@@ -11,11 +11,6 @@
   import SidebarMoreItem from './SidebarMoreItem.svelte';
 
   import { showSidebar } from '../../stores/sidebar';
-  import Button from '../Button.svelte';
-
-  import DonateModal from '../DonateModal.svelte';
-
-  const { open: openModal } = getContext('simple-modal');
 
   export let segment;
   export let mobile = false;
@@ -34,17 +29,6 @@
   $: currentLocale = languages.find((e) => e.id === $locale.substring(0, 2)) || { id: 'en', label: 'English' };
   $: locales = languages.filter((e) => e.id !== currentLocale.id);
 
-  function openDonationModal() {
-    openModal(
-      DonateModal,
-      {},
-      {
-        closeButton: false,
-        styleWindow: { background: '#25294A', width: '500px' },
-      },
-    );
-  }
-
   function close() {
     showSidebar.set(false);
   }
@@ -159,10 +143,6 @@
         {/each}
       </div>
     </div>
-    <Button on:click={openDonationModal}>
-      <img class="inline w-8 h-8" src="/images/mora.png" alt="donate" />
-      {$t('sidebar.donate')}
-    </Button>
   </div>
 </div>
 
diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte
index 08ef6ae7..f550eb8a 100644
--- a/src/routes/_layout.svelte
+++ b/src/routes/_layout.svelte
@@ -32,7 +32,9 @@
     await checkLocalSave();
 
     page.subscribe(() => {
-      if (window.reloadAdSlots) window.reloadAdSlots();
+      try {
+        window.reloadAdSlots();
+      } catch (error) {}
     });
   });
 </script>
@@ -57,7 +59,7 @@
 {#if $preloading && $delayedPreloading}
   <div transition:fade class="loading-bar" />
 {/if}
-<div class="lg:ml-64 px-4 md:px-8 py-8 flex flex-col md:pb-32">
+<div class="lg:ml-64 px-4 md:px-8 py-8 flex flex-col md:pb-24">
   <p class="text-gray-400">
     {$t('footer.affliate')}<br />
     {$t('footer.copyright')}
diff --git a/src/routes/achievement/index.svelte b/src/routes/achievement/index.svelte
index bad54aa7..a9801560 100644
--- a/src/routes/achievement/index.svelte
+++ b/src/routes/achievement/index.svelte
@@ -19,6 +19,7 @@
   import Icon from '../../components/Icon.svelte';
   import Select from '../../components/Select.svelte';
   import { pushToast } from '../../stores/toast';
+  import Ad from '../../components/Ad.svelte';
 
   export let data;
 
@@ -297,154 +298,165 @@
   <meta property="og:description" content="Track your Genshin Impact achievement easily" />
 </svelte:head>
 
-<div class="lg:ml-64 pt-20 px-4 lg:px-8 lg:pt-8 max-w-screen-xl">
-  <div class="flex flex-col md:flex-row items-center space-y-2 md:space-y-0 md:space-x-2 mb-2 md:mb-0">
-    <h1 class="font-display font-black text-3xl md:text-4xl text-white">{$t('achievement.title')}</h1>
-    <div class="flex space-x-2">
-      <p class="text-gray-400 text-xl rounded-xl bg-black bg-opacity-50 px-2 py-1">
-        {finishedAchievement}
-        {$t('achievement.of')}
-        {totalAchievement}
-      </p>
-      <div class="text-gray-400 text-xl rounded-xl bg-black bg-opacity-50 px-2 py-1 flex items-center">
-        <p>{obtainedPrimogem} {$t('achievement.of')} {totalPrimogem}</p>
-        <img src="/images/primogem.png" class="w-4 h-4 ml-1" alt="primogem" />
+<div class="flex">
+  <div class="lg:ml-64 pt-20 px-4 lg:px-8 lg:pt-8 max-w-screen-xl">
+    <div class="flex flex-col md:flex-row items-center space-y-2 md:space-y-0 md:space-x-2 mb-2 md:mb-0">
+      <h1 class="font-display font-black text-3xl md:text-4xl text-white">{$t('achievement.title')}</h1>
+      <div class="flex space-x-2">
+        <p class="text-gray-400 text-xl rounded-xl bg-black bg-opacity-50 px-2 py-1">
+          {finishedAchievement}
+          {$t('achievement.of')}
+          {totalAchievement}
+        </p>
+        <div class="text-gray-400 text-xl rounded-xl bg-black bg-opacity-50 px-2 py-1 flex items-center">
+          <p>{obtainedPrimogem} {$t('achievement.of')} {totalPrimogem}</p>
+          <img src="/images/primogem.png" class="w-4 h-4 ml-1" alt="primogem" />
+        </div>
+      </div>
+      <div class="flex space-x-2 items-center">
+        <Button
+          size="sm"
+          on:click={() => {
+            showFilter = !showFilter;
+          }}
+        >
+          <Icon path={mdiFilter} color="white" />
+        </Button>
+        <div class="pl-4 text-white">
+          <Checkbox checked={sort} on:change={() => changeSort(!sort)}>{$t('achievement.sort')}</Checkbox>
+        </div>
       </div>
     </div>
-    <div class="flex space-x-2 items-center">
-      <Button
-        size="sm"
-        on:click={() => {
-          showFilter = !showFilter;
-        }}
-      >
-        <Icon path={mdiFilter} color="white" />
-      </Button>
-      <div class="pl-4 text-white">
-        <Checkbox checked={sort} on:change={() => changeSort(!sort)}>{$t('achievement.sort')}</Checkbox>
-      </div>
-    </div>
-  </div>
-  {#if showFilter}
-    <div class="mb-2 flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-2">
-      <div
-        class="flex flex-1 relative items-center bg-background rounded-2xl h-14
+    {#if showFilter}
+      <div class="mb-2 flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-2">
+        <div
+          class="flex flex-1 relative items-center bg-background rounded-2xl h-14
        focus-within:border-primary border-2 border-transparent ease-in duration-100"
-        style="min-height: 3.5rem;"
-      >
-        <input
-          placeholder={$t('achievement.search')}
-          on:input={search}
-          bind:value={nameFilter}
-          class="pl-4 w-full min-h-full pr-4 text-white placeholder-gray-500 leading-none bg-transparent border-none focus:outline-none"
+          style="min-height: 3.5rem;"
+        >
+          <input
+            placeholder={$t('achievement.search')}
+            on:input={search}
+            bind:value={nameFilter}
+            class="pl-4 w-full min-h-full pr-4 text-white placeholder-gray-500 leading-none bg-transparent border-none focus:outline-none"
+          />
+        </div>
+        <Select
+          multiselect
+          options={versions}
+          bind:selected={versionFilter}
+          placeholder={$t('achievement.version')}
+          className="w-full md:w-40"
+          on:change={updateSelectFilter}
+        />
+        <Select
+          multiselect
+          options={types}
+          bind:selected={typeFilter}
+          placeholder={$t('achievement.type')}
+          className="w-full md:w-56"
+          on:change={updateSelectFilter}
         />
       </div>
-      <Select
-        multiselect
-        options={versions}
-        bind:selected={versionFilter}
-        placeholder={$t('achievement.version')}
-        className="w-full md:w-40"
-        on:change={updateSelectFilter}
-      />
-      <Select
-        multiselect
-        options={types}
-        bind:selected={typeFilter}
-        placeholder={$t('achievement.type')}
-        className="w-full md:w-56"
-        on:change={updateSelectFilter}
-      />
-    </div>
-  {/if}
-  <div class="flex flex-col lg:flex-row space-y-3 lg:space-y-0 lg:space-x-3">
-    <div class="flex flex-col space-y-2 lg:h-screen lg:overflow-auto lg:sticky lg:pr-1 pb-4 category">
-      {#each categories as category, index (category.id)}
-        <div
-          class="rounded-xl p-2 cursor-pointer flex flex-col {category.id === active ? 'bg-primary' : 'bg-item'}"
-          on:click={() => changeCategory(category.id, index)}
-        >
-          <p class="font-semibold {category.id === active ? 'text-black' : 'text-white'}">{category.name}</p>
-          <div class="flex">
-            <p class="flex-1 {category.id === active ? 'text-gray-900' : 'text-gray-400'}">
-              {category.finished}/{category.total}
-              ({((category.finished / category.total) * 100).toFixed(0)}%)
-            </p>
-            <p class={category.id === active ? 'text-gray-900' : 'text-gray-400'}>
-              {category.primogem}
-            </p>
-            <img src="/images/primogem.png" class="w-6 h-6 ml-1" alt="primogem" />
-          </div>
-        </div>
-      {/each}
-    </div>
-    <div class="flex flex-col space-y-2 flex-1 pt-20 lg:pt-2" bind:this={achievementContainer}>
-      {#each list as el, index}
-        {#if Array.isArray(el)}
-          <div class="bg-item rounded-xl px-2 py-1 text-white flex flex-col">
-            {#each el as it, i}
-              <div
-                class="flex items-center {i !== 0 ? 'border-t border-gray-700 pt-1' : ''} 
-                {i > 0 && el[i - 1].checked !== true ? 'opacity-25' : ''}"
-              >
-                <div class="flex-1 pr-1">
-                  <p class="font-semibold">
-                    {it.name}
-                    <span class="ml-1 rounded-xl bg-background px-2 text-gray-400 text-sm font-normal select-none">
-                      {it.ver}
-                    </span>
-                    {#if it.commissions}
-                      <span class="ml-1 rounded-xl bg-background px-2 text-gray-400 text-sm font-normal select-none">
-                        {$t('achievement.commissions')}
-                      </span>
-                    {/if}
-                  </p>
-                  <p class="text-gray-400">{it.desc}</p>
-                </div>
-                <div class="flex items-center">
-                  <p class="mr-1">{it.reward}</p>
-                  <img src="/images/primogem.png" class="w-8 h-8" alt="primogem" />
-                </div>
-                <div>
-                  <Check
-                    checked={list[index][i].checked}
-                    on:change={() => toggle({ index, subindex: i, primogem: it.reward })}
-                    inverted
-                    disabled={i > 0 && !el[i - 1].checked}
-                  />
-                </div>
-              </div>
-            {/each}
-          </div>
-        {:else}
-          <div class="bg-item rounded-xl px-2 py-1 text-white flex items-center">
-            <div class="flex-1 pr-1">
-              <p class="font-semibold">
-                {el.name}
-                <span class="ml-1 rounded-xl bg-background px-2 text-gray-400 text-sm font-normal select-none">
-                  {el.ver}
-                </span>
-                {#if el.commissions}
-                  <span class="ml-1 rounded-xl bg-background px-2 text-gray-400 text-sm font-normal select-none">
-                    {$t('achievement.commissions')}
-                  </span>
-                {/if}
+    {/if}
+    <div class="flex flex-col lg:flex-row space-y-3 lg:space-y-0 lg:space-x-3">
+      <div class="flex flex-col space-y-2 lg:h-screen lg:overflow-auto lg:sticky lg:pr-1 pb-4 category">
+        {#each categories as category, index (category.id)}
+          <div
+            class="rounded-xl p-2 cursor-pointer flex flex-col {category.id === active ? 'bg-primary' : 'bg-item'}"
+            on:click={() => changeCategory(category.id, index)}
+          >
+            <p class="font-semibold {category.id === active ? 'text-black' : 'text-white'}">{category.name}</p>
+            <div class="flex">
+              <p class="flex-1 {category.id === active ? 'text-gray-900' : 'text-gray-400'}">
+                {category.finished}/{category.total}
+                ({((category.finished / category.total) * 100).toFixed(0)}%)
               </p>
-              <p class="text-gray-400">{el.desc}</p>
-            </div>
-            <div class="flex items-center">
-              <p class="mr-1">{el.reward}</p>
-              <img src="/images/primogem.png" class="w-8 h-8" alt="primogem" />
-            </div>
-            <div>
-              <Check checked={list[index].checked} on:change={() => toggle({ index, primogem: el.reward })} inverted />
+              <p class={category.id === active ? 'text-gray-900' : 'text-gray-400'}>
+                {category.primogem}
+              </p>
+              <img src="/images/primogem.png" class="w-6 h-6 ml-1" alt="primogem" />
             </div>
           </div>
-        {/if}
-      {/each}
+        {/each}
+      </div>
+      <div class="flex flex-col space-y-2 flex-1 pt-20 lg:pt-2" bind:this={achievementContainer}>
+        {#each list as el, index}
+          {#if Array.isArray(el)}
+            <div class="bg-item rounded-xl px-2 py-1 text-white flex flex-col">
+              {#each el as it, i}
+                <div
+                  class="flex items-center {i !== 0 ? 'border-t border-gray-700 pt-1' : ''} 
+                {i > 0 && el[i - 1].checked !== true ? 'opacity-25' : ''}"
+                >
+                  <div class="flex-1 pr-1">
+                    <p class="font-semibold">
+                      {it.name}
+                      <span class="ml-1 rounded-xl bg-background px-2 text-gray-400 text-sm font-normal select-none">
+                        {it.ver}
+                      </span>
+                      {#if it.commissions}
+                        <span class="ml-1 rounded-xl bg-background px-2 text-gray-400 text-sm font-normal select-none">
+                          {$t('achievement.commissions')}
+                        </span>
+                      {/if}
+                    </p>
+                    <p class="text-gray-400">{it.desc}</p>
+                  </div>
+                  <div class="flex items-center">
+                    <p class="mr-1">{it.reward}</p>
+                    <img src="/images/primogem.png" class="w-8 h-8" alt="primogem" />
+                  </div>
+                  <div>
+                    <Check
+                      checked={list[index][i].checked}
+                      on:change={() => toggle({ index, subindex: i, primogem: it.reward })}
+                      inverted
+                      disabled={i > 0 && !el[i - 1].checked}
+                    />
+                  </div>
+                </div>
+              {/each}
+            </div>
+          {:else}
+            <div class="bg-item rounded-xl px-2 py-1 text-white flex items-center">
+              <div class="flex-1 pr-1">
+                <p class="font-semibold">
+                  {el.name}
+                  <span class="ml-1 rounded-xl bg-background px-2 text-gray-400 text-sm font-normal select-none">
+                    {el.ver}
+                  </span>
+                  {#if el.commissions}
+                    <span class="ml-1 rounded-xl bg-background px-2 text-gray-400 text-sm font-normal select-none">
+                      {$t('achievement.commissions')}
+                    </span>
+                  {/if}
+                </p>
+                <p class="text-gray-400">{el.desc}</p>
+              </div>
+              <div class="flex items-center">
+                <p class="mr-1">{el.reward}</p>
+                <img src="/images/primogem.png" class="w-8 h-8" alt="primogem" />
+              </div>
+              <div>
+                <Check
+                  checked={list[index].checked}
+                  on:change={() => toggle({ index, primogem: el.reward })}
+                  inverted
+                />
+              </div>
+            </div>
+          {/if}
+        {/each}
+      </div>
     </div>
   </div>
+  <div class="hidden xl:block">
+    <Ad class="ml-4 mt-8" type="desktop" variant="mpu" id="1" />
+  </div>
 </div>
+<Ad type="desktop" variant="lb" id="2" />
+<Ad type="mobile" variant="lb" id="1" />
 
 <style>
   .category {
diff --git a/src/routes/calculator/index.svelte b/src/routes/calculator/index.svelte
index 192a8fb1..4583cf61 100644
--- a/src/routes/calculator/index.svelte
+++ b/src/routes/calculator/index.svelte
@@ -14,6 +14,7 @@
   import Button from '../../components/Button.svelte';
   import Icon from '../../components/Icon.svelte';
   import HowToModal from '../../components/CalculatorHowToModal.svelte';
+  import Ad from '../../components/Ad.svelte';
 
   const { open: openModal } = getContext('simple-modal');
 
@@ -81,6 +82,8 @@
     </h1>
   </div>
   <WeaponCalculator />
+  <Ad class="flex justify-center mt-8 mb-2" type="desktop" variant="lb" id="1" />
+  <Ad class="flex justify-center my-4" type="mobile" variant="mpu" id="2" />
   <div
     id="character"
     class="flex flex-col items-center md:flex-row-reverse md:justify-end md:items-start lg:items-center mt-8 mb-2"
@@ -100,6 +103,8 @@
     </h1>
   </div>
   <CharacterCalculator />
+  <Ad class="flex justify-center mt-8 mb-2" type="desktop" variant="lb" id="3" />
+  <Ad class="flex justify-center my-4" type="mobile" variant="mpu" id="1" />
   <div
     id="resin"
     class="flex flex-col items-center md:flex-row-reverse md:justify-end md:items-start lg:items-center mt-8 mb-2"
diff --git a/src/routes/characters/[id].svelte b/src/routes/characters/[id].svelte
index 550a2ba1..bf682f0b 100644
--- a/src/routes/characters/[id].svelte
+++ b/src/routes/characters/[id].svelte
@@ -30,6 +30,7 @@
   import { weaponList } from '../../data/weaponList';
   import artifacts from '../../data/artifacts/en.json';
   import weapons from '../../data/weapons/en.json';
+  import Ad from '../../components/Ad.svelte';
 
   const rarityColor = {
     1: 'text-white',
@@ -183,182 +184,186 @@
     content="Genshin Impact {character.name} build guide, constellation, and skill information"
   />
 </svelte:head>
-<div class="lg:ml-64 pt-20 lg:pt-8 max-w-screen-xl">
-  <div class="flex flex-col xl:flex-row items-start">
-    <img
-      class="character-image object-cover md:pl-8 self-center xl:self-auto"
-      src="/images/characters/full/{id}.png"
-      alt={character.name}
-    />
-    <div class="flex flex-col items-start mt-4 xl:mt-0 side-detail pt-4 xl:pt-0">
-      <div class="flex items-center px-4 md:px-8">
-        <h1 class="font-display font-black text-4xl leading-10 md:leading-normal md:text-5xl text-white mr-4 z-0">
-          {character.name}
-        </h1>
-        <img
-          class="h-10 mr-4 z-10 object-contain"
-          src="/images/elements/{character.element.id}.png"
-          alt={character.element.name}
-        />
+<div class="lg:ml-64 pt-20 lg:pt-8">
+  <div class="flex">
+    <div class="flex flex-col xl:flex-row items-start max-w-screen-xl">
+      <img
+        class="character-image object-cover md:pl-8 self-center xl:self-auto"
+        src="/images/characters/full/{id}.png"
+        alt={character.name}
+      />
+      <div class="flex flex-col items-start mt-4 xl:mt-0 side-detail pt-4 xl:pt-0">
+        <div class="flex items-center px-4 md:px-8">
+          <h1 class="font-display font-black text-4xl leading-10 md:leading-normal md:text-5xl text-white mr-4 z-0">
+            {character.name}
+          </h1>
+          <img
+            class="h-10 mr-4 z-10 object-contain"
+            src="/images/elements/{character.element.id}.png"
+            alt={character.element.name}
+          />
+          <div
+            class="flex space-y-1 lg:space-y-0 lg:space-x-1 {editConstellation
+              ? 'flex-col'
+              : ''} md:flex-row items-center"
+          >
+            {#if constellationCountTotal > -1}
+              <p class="text-3xl text-gray-200 bg-black bg-opacity-50 rounded-xl px-2 font-semibold">
+                C{constellationCountTotal}
+              </p>
+            {/if}
+            {#if editConstellation}
+              <div class="flex flex-wrap space-x-1">
+                <Button size="sm" on:click={() => editConstellationCount(1)}>
+                  <Icon path={mdiPlus} />
+                </Button>
+                <Button size="sm" on:click={() => editConstellationCount(-1)}>
+                  <Icon path={mdiMinus} />
+                </Button>
+                <Button size="sm" on:click={saveConstellationCount}>
+                  <Icon path={mdiContentSave} />
+                </Button>
+              </div>
+            {:else}
+              <div
+                class="ml-2 rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2"
+                on:click={() => {
+                  editConstellation = true;
+                }}
+              >
+                <Icon path={mdiPencil} className="text-gray-400" />
+              </div>
+            {/if}
+          </div>
+        </div>
         <div
-          class="flex space-y-1 lg:space-y-0 lg:space-x-1 {editConstellation
-            ? 'flex-col'
-            : ''} md:flex-row items-center"
+          class="{character.rarity === 5
+            ? 'text-legendary-from'
+            : 'text-rare-from'} px-4 md:px-8 text-2xl flex items-center z-0 -mt-2 md:-mt-4"
         >
-          {#if constellationCountTotal > -1}
-            <p class="text-3xl text-gray-200 bg-black bg-opacity-50 rounded-xl px-2 font-semibold">
-              C{constellationCountTotal}
-            </p>
-          {/if}
-          {#if editConstellation}
-            <div class="flex flex-wrap space-x-1">
-              <Button size="sm" on:click={() => editConstellationCount(1)}>
-                <Icon path={mdiPlus} />
-              </Button>
-              <Button size="sm" on:click={() => editConstellationCount(-1)}>
-                <Icon path={mdiMinus} />
-              </Button>
-              <Button size="sm" on:click={saveConstellationCount}>
-                <Icon path={mdiContentSave} />
-              </Button>
-            </div>
-          {:else}
-            <div
-              class="ml-2 rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2"
-              on:click={() => {
-                editConstellation = true;
-              }}
-            >
-              <Icon path={mdiPencil} className="text-gray-400" />
-            </div>
-          {/if}
-        </div>
-      </div>
-      <div
-        class="{character.rarity === 5
-          ? 'text-legendary-from'
-          : 'text-rare-from'} px-4 md:px-8 text-2xl flex items-center z-0 -mt-2 md:-mt-4"
-      >
-        <Icon path={mdiStar} />
-        <Icon path={mdiStar} />
-        <Icon path={mdiStar} />
-        <Icon path={mdiStar} />
-        {#if character.rarity === 5}
           <Icon path={mdiStar} />
-        {/if}
-        <Icon path={mdiCircle} size={0.4} className="mx-2 mt-1" color="white" />
-        <p class="text-base text-white font-semibold mt-1">{character.weapon.name}</p>
-      </div>
-      <p class="text-gray-200 px-4 md:px-8">{data.description}</p>
-      <div class="flex flex-col md:flex-row mt-4 space-y-4 md:space-y-0 md:space-x-4 px-4 md:px-8">
-        <div class="text-gray-200 rounded-xl border border-gray-200 border-opacity-25 p-4">
-          <p>{$t('characters.talentBook')}</p>
-          <div class="flex items-center mt-2">
-            <div class="mr-2 h-12 w-12 bg-background rounded-xl p-1">
-              <img src="/images/items/{bookId}.png" alt={book.name} class="h-full max-w-full object-contain" />
+          <Icon path={mdiStar} />
+          <Icon path={mdiStar} />
+          <Icon path={mdiStar} />
+          {#if character.rarity === 5}
+            <Icon path={mdiStar} />
+          {/if}
+          <Icon path={mdiCircle} size={0.4} className="mx-2 mt-1" color="white" />
+          <p class="text-base text-white font-semibold mt-1">{character.weapon.name}</p>
+        </div>
+        <p class="text-gray-200 px-4 md:px-8">{data.description}</p>
+        <div class="flex flex-col md:flex-row mt-4 space-y-4 md:space-y-0 md:space-x-4 px-4 md:px-8">
+          <div class="text-gray-200 rounded-xl border border-gray-200 border-opacity-25 p-4">
+            <p>{$t('characters.talentBook')}</p>
+            <div class="flex items-center mt-2">
+              <div class="mr-2 h-12 w-12 bg-background rounded-xl p-1">
+                <img src="/images/items/{bookId}.png" alt={book.name} class="h-full max-w-full object-contain" />
+              </div>
+              <p class="mb-1 font-semibold">{book.name}</p>
             </div>
-            <p class="mb-1 font-semibold">{book.name}</p>
           </div>
-        </div>
-        <div class="text-gray-200 rounded-xl border border-gray-200 border-opacity-25 p-4">
-          <p>{$t('characters.ascensionMaterial')}</p>
-          <div class="flex items-center mt-2">
-            {#each materials as material}
-              {#if material.item.id !== 'none'}
-                <div class="mr-2 h-12 w-12 bg-background rounded-xl p-1">
-                  <img
-                    src="/images/items/{material.item.id}.png"
-                    alt={material.item.name}
-                    title={material.item.name}
-                    class="h-full max-w-full object-contain mx-auto"
-                  />
-                </div>
-              {/if}
-            {/each}
-          </div>
-        </div>
-      </div>
-      <div class="md:px-4 mt-4 block overflow-x-auto whitespace-no-wrap w-screen md:w-auto">
-        <div class="px-4" style="width: min-content;">
-          <div class="table max-w-full rounded-xl border border-gray-200 border-opacity-25">
-            <table class="text-gray-200 w-full">
-              <tr>
-                <td class="text-center whitespace-no-wrap border-gray-700 font-semibold px-2">
-                  {$t('characters.asc')}
-                </td>
-                <td class="text-center whitespace-no-wrap border-gray-700 font-semibold px-2">
-                  {$t('characters.lvl')}
-                </td>
-                <td class="text-center whitespace-no-wrap border-gray-700 font-semibold px-2">
-                  {$t('characters.hp')}
-                </td>
-                <td class="text-center whitespace-no-wrap border-gray-700 font-semibold px-2">
-                  {$t('characters.atk')}
-                </td>
-                <td class="text-center whitespace-no-wrap border-gray-700 font-semibold px-2">
-                  {$t('characters.def')}
-                </td>
-                <td class="text-center whitespace-no-wrap border-gray-700 font-semibold px-2"
-                  >{$t('characters.critRate')}
-                </td>
-                <td class="text-center whitespace-no-wrap border-gray-700 font-semibold px-2"
-                  >{$t('characters.critDamage')}
-                </td>
-                {#if data.statGrow !== 'critRate' && data.statGrow !== 'critDamage'}
-                  <td class="text-center whitespace-no-wrap border-gray-700 font-semibold px-2">
-                    {$t(`characters.${data.statGrow}`)}
-                  </td>
+          <div class="text-gray-200 rounded-xl border border-gray-200 border-opacity-25 p-4">
+            <p>{$t('characters.ascensionMaterial')}</p>
+            <div class="flex items-center mt-2">
+              {#each materials as material}
+                {#if material.item.id !== 'none'}
+                  <div class="mr-2 h-12 w-12 bg-background rounded-xl p-1">
+                    <img
+                      src="/images/items/{material.item.id}.png"
+                      alt={material.item.name}
+                      title={material.item.name}
+                      class="h-full max-w-full object-contain mx-auto"
+                    />
+                  </div>
                 {/if}
-              </tr>
-              {#each showedIndex as index, i}
+              {/each}
+            </div>
+          </div>
+        </div>
+        <div class="md:px-4 mt-4 block overflow-x-auto whitespace-no-wrap w-screen md:w-auto">
+          <div class="px-4" style="width: min-content;">
+            <div class="table max-w-full rounded-xl border border-gray-200 border-opacity-25">
+              <table class="text-gray-200 w-full">
                 <tr>
-                  {#if i % 2 === 0}
-                    <td rowspan={2} class="text-center border-t border-gray-700 px-2">{ascen[i]}</td>
-                  {/if}
-                  <td class="text-center border-t border-gray-700 px-2">{level[i]}</td>
-                  <td class="text-center border-t border-gray-700 px-2">{Math.round(data.hp[index])}</td>
-                  <td class="text-center border-t border-gray-700 px-2">{Math.round(data.atk[index])}</td>
-                  <td class="text-center border-t border-gray-700 px-2">{Math.round(data.def[index])}</td>
-                  {#if data.statGrow === 'critRate'}
-                    <td class="text-center border-t border-gray-700 px-2">
-                      {numberFormat.format(data.critRate[index] * 100)}%
-                    </td>
-                  {:else}
-                    <td class="text-center border-t border-gray-700 px-2">5%</td>
-                  {/if}
-                  {#if data.statGrow === 'critDamage'}
-                    <td class="text-center border-t border-gray-700 px-2">
-                      {numberFormat.format(data.critDamage[index] * 100)}%
-                    </td>
-                  {:else}
-                    <td class="text-center border-t border-gray-700 px-2">50%</td>
-                  {/if}
-                  {#if data.statGrow !== 'critRate' && data.statGrow !== 'critDamage' && data.statGrow !== 'em'}
-                    <td class="text-center border-t border-gray-700 px-2">
-                      {numberFormat.format(data[data.statGrow][index] * 100)}%
-                    </td>
-                  {:else if data.statGrow === 'em'}
-                    <td class="text-center border-t border-gray-700 px-2">
-                      {numberFormat.format(data[data.statGrow][index])}
+                  <td class="text-center whitespace-no-wrap border-gray-700 font-semibold px-2">
+                    {$t('characters.asc')}
+                  </td>
+                  <td class="text-center whitespace-no-wrap border-gray-700 font-semibold px-2">
+                    {$t('characters.lvl')}
+                  </td>
+                  <td class="text-center whitespace-no-wrap border-gray-700 font-semibold px-2">
+                    {$t('characters.hp')}
+                  </td>
+                  <td class="text-center whitespace-no-wrap border-gray-700 font-semibold px-2">
+                    {$t('characters.atk')}
+                  </td>
+                  <td class="text-center whitespace-no-wrap border-gray-700 font-semibold px-2">
+                    {$t('characters.def')}
+                  </td>
+                  <td class="text-center whitespace-no-wrap border-gray-700 font-semibold px-2"
+                    >{$t('characters.critRate')}
+                  </td>
+                  <td class="text-center whitespace-no-wrap border-gray-700 font-semibold px-2"
+                    >{$t('characters.critDamage')}
+                  </td>
+                  {#if data.statGrow !== 'critRate' && data.statGrow !== 'critDamage'}
+                    <td class="text-center whitespace-no-wrap border-gray-700 font-semibold px-2">
+                      {$t(`characters.${data.statGrow}`)}
                     </td>
                   {/if}
                 </tr>
-              {/each}
-            </table>
+                {#each showedIndex as index, i}
+                  <tr>
+                    {#if i % 2 === 0}
+                      <td rowspan={2} class="text-center border-t border-gray-700 px-2">{ascen[i]}</td>
+                    {/if}
+                    <td class="text-center border-t border-gray-700 px-2">{level[i]}</td>
+                    <td class="text-center border-t border-gray-700 px-2">{Math.round(data.hp[index])}</td>
+                    <td class="text-center border-t border-gray-700 px-2">{Math.round(data.atk[index])}</td>
+                    <td class="text-center border-t border-gray-700 px-2">{Math.round(data.def[index])}</td>
+                    {#if data.statGrow === 'critRate'}
+                      <td class="text-center border-t border-gray-700 px-2">
+                        {numberFormat.format(data.critRate[index] * 100)}%
+                      </td>
+                    {:else}
+                      <td class="text-center border-t border-gray-700 px-2">5%</td>
+                    {/if}
+                    {#if data.statGrow === 'critDamage'}
+                      <td class="text-center border-t border-gray-700 px-2">
+                        {numberFormat.format(data.critDamage[index] * 100)}%
+                      </td>
+                    {:else}
+                      <td class="text-center border-t border-gray-700 px-2">50%</td>
+                    {/if}
+                    {#if data.statGrow !== 'critRate' && data.statGrow !== 'critDamage' && data.statGrow !== 'em'}
+                      <td class="text-center border-t border-gray-700 px-2">
+                        {numberFormat.format(data[data.statGrow][index] * 100)}%
+                      </td>
+                    {:else if data.statGrow === 'em'}
+                      <td class="text-center border-t border-gray-700 px-2">
+                        {numberFormat.format(data[data.statGrow][index])}
+                      </td>
+                    {/if}
+                  </tr>
+                {/each}
+              </table>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="flex mt-4 mx-4 md:mx-8">
-        <Button className="mr-4" on:click={() => scrollToView(talentDiv)}>
-          {$t('characters.talents')}
-        </Button>
-        <Button on:click={() => scrollToView(constellationDiv)}>
-          {$t('characters.constellations')}
-        </Button>
+        <div class="flex mt-4 mx-4 md:mx-8">
+          <Button className="mr-4" on:click={() => scrollToView(talentDiv)}>
+            {$t('characters.talents')}
+          </Button>
+          <Button on:click={() => scrollToView(constellationDiv)}>
+            {$t('characters.constellations')}
+          </Button>
+        </div>
       </div>
     </div>
+    <Ad class="ml-4" type="desktop" variant="mpu" id="1" />
   </div>
-  <div class="flex flex-col mt-4 text-white px-4 md:px-8">
+  <Ad class="flex justify-center my-4" type="mobile" variant="mpu" id="2" />
+  <div class="flex flex-col mt-4 text-white px-4 md:px-8 max-w-screen-xl">
     {#if builds.length > 1}
       <div class="flex mt-4 items-center">
         {#each builds as item, i}
@@ -547,7 +552,8 @@
   >
     {$t('characters.source')}
   </a>
-  <div class="flex flex-col mt-4 text-white px-4 md:px-8" bind:this={talentDiv}>
+  <Ad class="ml-8 mt-4 mb-2" type="desktop" variant="lb" id="1" />
+  <div class="flex flex-col mt-4 text-white px-4 md:px-8 max-w-screen-xl" bind:this={talentDiv}>
     <a href="/characters/{id}/#talents" class="font-black font-display text-2xl mt-4">
       {$t('characters.talents')}
     </a>
@@ -555,13 +561,15 @@
     <SkillCard {id} image="talent_2" data={data.elementalSkill} withQuote={true} />
     <SkillCard {id} image="talent_3" data={data.burst} withQuote={true} />
   </div>
-  <div class="flex flex-col text-white px-4 md:px-8">
+  <div class="flex flex-col text-white px-4 md:px-8 max-w-screen-xl">
     <p class="font-black font-display text-2xl mt-4">{$t('characters.passiveTalents')}</p>
     {#each data.passives as passive, i}
       <PassiveSkillCard {id} image="talent_{i + 4}" data={passive} />
     {/each}
   </div>
-  <div class="flex flex-col text-white px-4 md:px-8" id="constellations" bind:this={constellationDiv}>
+  <Ad class="ml-8 mt-4 mb-2" type="desktop" variant="lb" id="3" />
+  <Ad class="flex justify-center mt-4 mb-2" type="mobile" variant="mpu" id="1" />
+  <div class="flex flex-col text-white px-4 md:px-8 max-w-screen-xl" id="constellations" bind:this={constellationDiv}>
     <a href="/characters/{id}/#constellations" class="font-black font-display text-2xl mt-4">
       {$t('characters.constellations')}
     </a>
diff --git a/src/routes/characters/index.svelte b/src/routes/characters/index.svelte
index d7bd1ccd..2d9235fe 100644
--- a/src/routes/characters/index.svelte
+++ b/src/routes/characters/index.svelte
@@ -11,6 +11,7 @@
   import { readSave, updateSave } from '../../stores/saveManager';
   import Select from '../../components/Select.svelte';
   import Button from '../../components/Button.svelte';
+  import Ad from '../../components/Ad.svelte';
 
   const sortOptions = [
     { label: $t('characters.name'), value: 'name' },
@@ -207,6 +208,13 @@
     }
   }
 
+  function changeViewType(val) {
+    type = val;
+    try {
+      window.reloadAdSlots();
+    } catch (error) {}
+  }
+
   onMount(async () => {
     await getConstellation();
   });
@@ -229,9 +237,7 @@
     <div class="flex text-white" style="height: fit-content;">
       <button
         class="{type === 'grid' ? 'bg-background' : 'bg-item'} p-2 rounded-l-xl cursor-pointer hover:bg-opacity-75"
-        on:click={() => {
-          type = 'grid';
-        }}
+        on:click={() => changeViewType('grid')}
       >
         <Icon path={mdiViewGrid} />
       </button>
@@ -239,9 +245,7 @@
         class="{type === 'table'
           ? 'bg-background'
           : 'bg-item'} bg-background p-2 rounded-r-xl cursor-pointer hover:bg-opacity-75"
-        on:click={() => {
-          type = 'table';
-        }}
+        on:click={() => changeViewType('table')}
       >
         <Icon path={mdiViewList} />
       </button>
@@ -249,157 +253,166 @@
   </div>
 
   {#if type === 'grid'}
-    <div class="flex flex-col lg:flex-row flex-wrap px-4 md:pl-8 md:pr-4 mb-4">
-      <div class="flex mr-2 mb-2 lg:mb-0">
-        <Select
-          bind:selected={sortBySelect}
-          on:change={orderSelectChanged}
-          options={sortOptions}
-          className="w-full md:w-48 mr-2"
-          placeholder={$t('characters.sortBy')}
-        />
-        <Button on:click={orderGridChange}>
-          <Icon path={sortOrder ? mdiSortAscending : mdiSortDescending} />
-        </Button>
-      </div>
-      <div class="flex flex-col md:flex-row">
-        <div class="flex items-center justify-center md:justify-start md:mr-4">
-          <button
-            on:click={() => toggleElement('pyro')}
-            class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {elementFilter.pyro
-              ? ''
-              : 'opacity-25'}"
-          >
-            <img src="/images/elements/pyro.png" alt="pyro" class="w-8 h-8" style="min-width: 2rem;" />
-          </button>
-          <button
-            on:click={() => toggleElement('hydro')}
-            class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {elementFilter.hydro
-              ? ''
-              : 'opacity-25'}"
-          >
-            <img src="/images/elements/hydro.png" alt="hydro" class="w-8 h-8" style="min-width: 2rem;" />
-          </button>
-          <button
-            on:click={() => toggleElement('anemo')}
-            class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {elementFilter.anemo
-              ? ''
-              : 'opacity-25'}"
-          >
-            <img src="/images/elements/anemo.png" alt="anemo" class="w-8 h-8" style="min-width: 2rem;" />
-          </button>
-          <button
-            on:click={() => toggleElement('electro')}
-            class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {elementFilter.electro
-              ? ''
-              : 'opacity-25'}"
-          >
-            <img src="/images/elements/electro.png" alt="electro" class="w-8 h-8" style="min-width: 2rem;" />
-          </button>
-          <button
-            on:click={() => toggleElement('cryo')}
-            class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {elementFilter.cryo
-              ? ''
-              : 'opacity-25'}"
-          >
-            <img src="/images/elements/cryo.png" alt="cryo" class="w-8 h-8" style="min-width: 2rem;" />
-          </button>
-          <button
-            on:click={() => toggleElement('geo')}
-            class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {elementFilter.geo
-              ? ''
-              : 'opacity-25'}"
-          >
-            <img src="/images/elements/geo.png" alt="geo" class="w-8 h-8" style="min-width: 2rem;" />
-          </button>
-        </div>
-        <div class="flex items-center justify-center md:justify-start">
-          <button
-            on:click={() => toggleWeapon('sword')}
-            class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {weaponFilter.sword
-              ? ''
-              : 'opacity-25'}"
-          >
-            <img src="/images/weapons/sword.png" alt="sword" class="w-8 h-8" style="min-width: 2rem;" />
-          </button>
-          <button
-            on:click={() => toggleWeapon('claymore')}
-            class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {weaponFilter.claymore
-              ? ''
-              : 'opacity-25'}"
-          >
-            <img src="/images/weapons/claymore.png" alt="claymore" class="w-8 h-8" style="min-width: 2rem;" />
-          </button>
-          <button
-            on:click={() => toggleWeapon('polearm')}
-            class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {weaponFilter.polearm
-              ? ''
-              : 'opacity-25'}"
-          >
-            <img src="/images/weapons/polearm.png" alt="polearm" class="w-8 h-8" style="min-width: 2rem;" />
-          </button>
-          <button
-            on:click={() => toggleWeapon('catalyst')}
-            class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {weaponFilter.catalyst
-              ? ''
-              : 'opacity-25'}"
-          >
-            <img src="/images/weapons/catalyst.png" alt="catalyst" class="w-8 h-8" style="min-width: 2rem;" />
-          </button>
-          <button
-            on:click={() => toggleWeapon('bow')}
-            class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {weaponFilter.bow
-              ? ''
-              : 'opacity-25'}"
-          >
-            <img src="/images/weapons/bow.png" alt="bow" class="w-8 h-8" style="min-width: 2rem;" />
-          </button>
-        </div>
-      </div>
-    </div>
-    <div class="px-4 md:pl-6 md:pr-4 flex flex-wrap max-w-screen-xl mt-2">
-      {#each chars as [id, char] (id)}
-        <a
-          href="/characters/{id}"
-          class="m-2 cell relative cursor-pointer transition duration-100 hover:opacity-100 hover:shadow-xl rounded-xl {!showConstellation ||
-          constellation[id]
-            ? ''
-            : 'opacity-50'}"
-        >
-          <div
-            class="w-full rounded-t-xl bg-opacity-50 overflow-hidden {char.rarity === 5
-              ? 'bg-legendary-from'
-              : 'bg-rare-from'}"
-          >
-            <img class="w-full h-full" src={`/images/characters/${id}.png`} alt={char.name} />
+    <div class="flex">
+      <div>
+        <div class="flex flex-col lg:flex-row flex-wrap px-4 md:pl-8 md:pr-4 mb-4">
+          <div class="flex mr-2 mb-2 lg:mb-0">
+            <Select
+              bind:selected={sortBySelect}
+              on:change={orderSelectChanged}
+              options={sortOptions}
+              className="w-full md:w-48 mr-2"
+              placeholder={$t('characters.sortBy')}
+            />
+            <Button on:click={orderGridChange}>
+              <Icon path={sortOrder ? mdiSortAscending : mdiSortDescending} />
+            </Button>
           </div>
-          <div
-            class="absolute top-0 right-0 bg-black bg-opacity-75 rounded-full flex items-center shadow-md"
-            style="padding: 4px; margin: -10px;"
-          >
-            {#if constellation[id]}
-              <span class="mx-1 text-white text-xs font-semibold">
-                C{Math.max(0, constellation[id].default + constellation[id].wish + constellation[id].manual - 1)}
-              </span>
-            {/if}
-            <img class="w-4 h-4" src={`/images/elements/${char.element.id}.png`} alt={char.element.name} />
-          </div>
-          <div class="relative overflow-hidden bg-item rounded-b-xl" style="height: 29px">
-            <div class="w-full  overflow-hidden absolute bottom-0">
-              <p class="text-white p-1 text-center text-sm">
-                {char.name}
-              </p>
+          <div class="flex flex-col md:flex-row">
+            <div class="flex items-center justify-center md:justify-start md:mr-4">
+              <button
+                on:click={() => toggleElement('pyro')}
+                class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {elementFilter.pyro
+                  ? ''
+                  : 'opacity-25'}"
+              >
+                <img src="/images/elements/pyro.png" alt="pyro" class="w-8 h-8" style="min-width: 2rem;" />
+              </button>
+              <button
+                on:click={() => toggleElement('hydro')}
+                class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {elementFilter.hydro
+                  ? ''
+                  : 'opacity-25'}"
+              >
+                <img src="/images/elements/hydro.png" alt="hydro" class="w-8 h-8" style="min-width: 2rem;" />
+              </button>
+              <button
+                on:click={() => toggleElement('anemo')}
+                class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {elementFilter.anemo
+                  ? ''
+                  : 'opacity-25'}"
+              >
+                <img src="/images/elements/anemo.png" alt="anemo" class="w-8 h-8" style="min-width: 2rem;" />
+              </button>
+              <button
+                on:click={() => toggleElement('electro')}
+                class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {elementFilter.electro
+                  ? ''
+                  : 'opacity-25'}"
+              >
+                <img src="/images/elements/electro.png" alt="electro" class="w-8 h-8" style="min-width: 2rem;" />
+              </button>
+              <button
+                on:click={() => toggleElement('cryo')}
+                class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {elementFilter.cryo
+                  ? ''
+                  : 'opacity-25'}"
+              >
+                <img src="/images/elements/cryo.png" alt="cryo" class="w-8 h-8" style="min-width: 2rem;" />
+              </button>
+              <button
+                on:click={() => toggleElement('geo')}
+                class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {elementFilter.geo
+                  ? ''
+                  : 'opacity-25'}"
+              >
+                <img src="/images/elements/geo.png" alt="geo" class="w-8 h-8" style="min-width: 2rem;" />
+              </button>
+            </div>
+            <div class="flex items-center justify-center md:justify-start">
+              <button
+                on:click={() => toggleWeapon('sword')}
+                class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {weaponFilter.sword
+                  ? ''
+                  : 'opacity-25'}"
+              >
+                <img src="/images/weapons/sword.png" alt="sword" class="w-8 h-8" style="min-width: 2rem;" />
+              </button>
+              <button
+                on:click={() => toggleWeapon('claymore')}
+                class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {weaponFilter.claymore
+                  ? ''
+                  : 'opacity-25'}"
+              >
+                <img src="/images/weapons/claymore.png" alt="claymore" class="w-8 h-8" style="min-width: 2rem;" />
+              </button>
+              <button
+                on:click={() => toggleWeapon('polearm')}
+                class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {weaponFilter.polearm
+                  ? ''
+                  : 'opacity-25'}"
+              >
+                <img src="/images/weapons/polearm.png" alt="polearm" class="w-8 h-8" style="min-width: 2rem;" />
+              </button>
+              <button
+                on:click={() => toggleWeapon('catalyst')}
+                class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {weaponFilter.catalyst
+                  ? ''
+                  : 'opacity-25'}"
+              >
+                <img src="/images/weapons/catalyst.png" alt="catalyst" class="w-8 h-8" style="min-width: 2rem;" />
+              </button>
+              <button
+                on:click={() => toggleWeapon('bow')}
+                class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {weaponFilter.bow
+                  ? ''
+                  : 'opacity-25'}"
+              >
+                <img src="/images/weapons/bow.png" alt="bow" class="w-8 h-8" style="min-width: 2rem;" />
+              </button>
             </div>
           </div>
-        </a>
-      {/each}
-    </div>
-    {#if showConstellation}
-      <div class="mt-12 mb-4 mx-4 md:mx-8 max-w-screen-xl md:flex items-center bg-background rounded-xl p-4">
-        <img class="h-16 float-left md:float-none mr-2 md:mr-0" src="/images/paimon_faq.png" alt="Paimon" />
-        <p class="md:ml-4 text-gray-200 ">{$t('characters.faq')}</p>
+        </div>
+        <div class="px-4 md:pl-6 md:pr-4 flex flex-wrap max-w-screen-xl mt-2">
+          {#each chars as [id, char] (id)}
+            <a
+              href="/characters/{id}"
+              class="m-2 cell relative cursor-pointer transition duration-100 hover:opacity-100 hover:shadow-xl rounded-xl {!showConstellation ||
+              constellation[id]
+                ? ''
+                : 'opacity-50'}"
+            >
+              <div
+                class="w-full rounded-t-xl bg-opacity-50 overflow-hidden {char.rarity === 5
+                  ? 'bg-legendary-from'
+                  : 'bg-rare-from'}"
+              >
+                <img class="w-full h-full" src={`/images/characters/${id}.png`} alt={char.name} />
+              </div>
+              <div
+                class="absolute top-0 right-0 bg-black bg-opacity-75 rounded-full flex items-center shadow-md"
+                style="padding: 4px; margin: -10px;"
+              >
+                {#if constellation[id]}
+                  <span class="mx-1 text-white text-xs font-semibold">
+                    C{Math.max(0, constellation[id].default + constellation[id].wish + constellation[id].manual - 1)}
+                  </span>
+                {/if}
+                <img class="w-4 h-4" src={`/images/elements/${char.element.id}.png`} alt={char.element.name} />
+              </div>
+              <div class="relative overflow-hidden bg-item rounded-b-xl" style="height: 29px">
+                <div class="w-full  overflow-hidden absolute bottom-0">
+                  <p class="text-white p-1 text-center text-sm">
+                    {char.name}
+                  </p>
+                </div>
+              </div>
+            </a>
+          {/each}
+        </div>
+        {#if showConstellation}
+          <div
+            class="mt-12 mb-4 ml-4 mr-4 md:ml-8 md:mr-0 max-w-screen-xl md:flex items-center bg-background rounded-xl p-4"
+          >
+            <img class="h-16 float-left md:float-none mr-2 md:mr-0" src="/images/paimon_faq.png" alt="Paimon" />
+            <p class="md:ml-4 text-gray-200 ">{$t('characters.faq')}</p>
+          </div>
+        {/if}
       </div>
-    {/if}
+      <div class="hidden xl:block">
+        <Ad class="ml-4" type="desktop" variant="mpu" id="1" />
+      </div>
+    </div>
   {:else}
     <p class="text-gray-400 px-4 md:px-8 font-medium pb-2 mt-4">
       ※ {$t('characters.subtitle')}
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 342f60a0..4fdf9d08 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -17,14 +17,20 @@
   import Achievement from './_index/achievement.svelte';
   import Furnishing from './_index/furnishing.svelte';
   import Build from './_index/build.svelte';
+  import Ad from '../components/Ad.svelte';
 
   let refreshLayout;
+  let isMobile = false;
 
   const onDone = debounce(() => {
     refreshLayout();
   }, 100);
 
   onMount(() => {
+    if (window.innerWidth < 500) {
+      isMobile = true;
+    }
+
     setTimeout(() => {
       refreshLayout();
     }, 1000);
@@ -53,16 +59,27 @@
     <Welcome on:done={onDone} />
     <Wish on:done={onDone} />
     <Banner on:done={onDone} />
+    {#if isMobile}
+      <div class="flex justify-center">
+        <Ad type="mobile" variant="mpu" id="1" />
+      </div>
+    {/if}
     <Build on:done={onDone} />
     <Event on:done={onDone} />
     <Item on:done={onDone} />
     <Discord on:done={onDone} />
     <Calculator on:done={onDone} />
     <Reminder on:done={onDone} />
+    {#if isMobile}
+      <div class="flex justify-center">
+        <Ad type="mobile" variant="mpu" id="2" />
+      </div>
+    {/if}
     <Achievement on:done={onDone} />
     <Furnishing on:done={onDone} />
     <Twitter on:done={onDone} />
     <!-- <div class="flex flex-col space-y-4">
     </div> -->
   </Masonry>
+  <Ad class="ml-4 mt-2" type="desktop" variant="lb" id="1" />
 </div>
diff --git a/src/routes/settings/index.svelte b/src/routes/settings/index.svelte
index 48c10d40..f6490ada 100644
--- a/src/routes/settings/index.svelte
+++ b/src/routes/settings/index.svelte
@@ -12,6 +12,7 @@
   import Input from '../../components/Input.svelte';
   import DeleteAccountModal from './_deleteAccount.svelte';
   import ResetAccountModal from './_resetAccount.svelte';
+  import DonateModal from '../../components/DonateModal.svelte';
 
   import { driveSignedIn, driveError, driveLoading, synced, localModified, lastSyncTime } from '../../stores/dataSync';
   import { server, ar, wl } from '../../stores/server';
@@ -234,6 +235,17 @@
     );
   }
 
+  function openDonationModal() {
+    openModal(
+      DonateModal,
+      {},
+      {
+        closeButton: false,
+        styleWindow: { background: '#25294A', width: '500px' },
+      },
+    );
+  }
+
   onMount(() => {
     mounted = true;
   });
@@ -250,7 +262,7 @@
   <title>Settings - Paimon.moe</title>
 </svelte:head>
 
-<div class="lg:ml-64 pt-20 px-4 md:px-8 lg:pt-8">
+<div class="lg:ml-64 pt-20 px-4 md:px-8 lg:pt-8 max-w-screen-xl">
   <div class="bg-item rounded-xl mb-4 p-4">
     <p class="text-white">{$t('settings.version')} <b>2.1</b></p>
   </div>
@@ -344,6 +356,11 @@
       ><Icon path={mdiGithub} /> Github Issues</a
     >
     {$t('settings.thanks')}
+    <br />
+    <Button on:click={openDonationModal}>
+      <img class="inline w-8 h-8" src="/images/mora.png" alt="donate" />
+      {$t('sidebar.donate')}
+    </Button>
   </div>
   <div class="bg-item rounded-xl mb-4 p-4 text-white">
     <p class="font-semibold">Credits</p>
diff --git a/src/routes/timeline/index.svelte b/src/routes/timeline/index.svelte
index 9a611f6e..9608afb4 100644
--- a/src/routes/timeline/index.svelte
+++ b/src/routes/timeline/index.svelte
@@ -16,6 +16,7 @@
   import DetailModal from './_detail.svelte';
   import { getAccountPrefix } from '../../stores/account';
   import { readSave } from '../../stores/saveManager';
+  import Ad from '../../components/Ad.svelte';
 
   const { open: openModal } = getContext('simple-modal');
 
@@ -223,7 +224,6 @@
 
   $: todayOffset = Math.abs(firstDay.diff(today, 'day', true));
   $: showAsLocalTime, onCheckLocalTime();
-
 </script>
 
 <svelte:head>
@@ -239,13 +239,19 @@
 </svelte:head>
 
 <div class="lg:ml-64 pt-20 lg:pt-8">
-  <h1 class="font-display px-4 md:px-8 font-black text-5xl text-white">{$t('timeline.title')}</h1>
-  {#if !loading}
-    <div class="px-4 md:px-8 text-white select-none">
-      <Checkbox bind:checked={showAsLocalTime}>
-        {$t('timeline.localTime')} ({browserTimeZone} - {$server} Server)
-      </Checkbox>
+  <div class="flex">
+    <div>
+      <h1 class="font-display px-4 md:px-8 font-black text-5xl text-white">{$t('timeline.title')}</h1>
+      <div class="px-4 md:px-8 text-white select-none">
+        <Checkbox bind:checked={showAsLocalTime}>
+          {$t('timeline.localTime')} ({browserTimeZone} - {$server} Server)
+        </Checkbox>
+      </div>
     </div>
+    <Ad class="flex flex-1 justify-center" type="desktop" variant="lb" id="1" />
+  </div>
+  <Ad type="mobile" variant="lb" id="1" />
+  {#if !loading}
     <div class="w-full overflow-x-auto px-4 md:px-8" bind:this={timelineContainer} on:wheel={transformScroll}>
       <div
         style={`padding-top: 50px; width: min-content; padding-right: ${2 * padding * dayWidth}px; height: ${
@@ -337,5 +343,4 @@
     background: rgba(0, 0, 0, 0.35);
     @apply rounded-xl;
   }
-
 </style>
diff --git a/src/routes/wish/tally/index.svelte b/src/routes/wish/tally/index.svelte
index ff8d2170..3e10da73 100644
--- a/src/routes/wish/tally/index.svelte
+++ b/src/routes/wish/tally/index.svelte
@@ -1,5 +1,6 @@
 <script>
   import { t } from 'svelte-i18n';
+  import Ad from '../../../components/Ad.svelte';
   import Button from '../../../components/Button.svelte';
   import { banners } from '../../../data/banners';
   import Item from './_item.svelte';
@@ -23,15 +24,18 @@
     <p class="text-gray-400 px-4 md:px-8 font-medium pb-4" style="margin-top: -1rem;">
       ※ {$t('wish.tally.subtitle')}
     </p>
-
     <div class="px-4 md:px-8">
+      <Ad class="my-4" type="desktop" variant="lb" id="1" />
       <ItemNew
         type="character"
         banner={banners.characters[18]}
         id={300019}
         featured={banners.characters[18].featured}
       />
+      <Ad class="my-4 flex justify-center" type="mobile" variant="mpu" id="2" />
+      <Ad type="mobile" variant="lb" id="1" />
       <ItemNew type="weapon" banner={banners.weapons[17]} id={400018} featured={banners.weapons[17].featured} />
+      <Ad class="my-4" type="desktop" variant="lb" id="3" />
       <ItemNew
         type="character"
         banner={banners.characters[17]}