diff --git a/src/lib/Setting/Pages/ThanksPage.svelte b/src/lib/Setting/Pages/ThanksPage.svelte
index 81b869ba..0e6c147f 100644
--- a/src/lib/Setting/Pages/ThanksPage.svelte
+++ b/src/lib/Setting/Pages/ThanksPage.svelte
@@ -2,45 +2,22 @@
     import { language } from "src/lang";
 
 
-    interface SupporterImaged{
-        name: string,
-        image: string,
-    }
-
     interface supporters{
         I: string[],
         II: string[],
         III: string[],
-        IV: SupporterImaged[],
-        V: SupporterImaged[],
+        IV: string[],
+        V: string[],
     }
 
     async function loadSupporters() {
         const dummy:supporters = {
             //random names
-            I: ["John", "Doe"],
-            II: ["Lorem", "Ipsum"],
-            III: ["Dolor", "Sit"],
-            IV: [
-                {
-                    name: "John",
-                    image: "https://placehold.co/600x400",
-                },
-                {
-                    name: "Doe",
-                    image: "https://placehold.co/600x400",
-                },
-            ],
-            V: [
-                {
-                    name: "John",
-                    image: "https://placehold.co/600x400",
-                },
-                {
-                    name: "Doe",
-                    image: "https://placehold.co/600x400",
-                },
-            ],
+            I: ["Preview", "Preview"],
+            II: ["Preview", "Preview"],
+            III: ["Preview", "Preview"],
+            IV: ["Preview"],
+            V: ["Preview"],
         }
         return dummy
     }
@@ -52,12 +29,9 @@
     <h3 class="text-xl font-bold mt-4">Supporter V</h3>
     <div class="flex w-full flex-wrap gap-2"> 
         {#each supporter.V as support}
-            <!-- make a card -->
-            <div class="flex flex-col items-center justify-center p-4 border-selected border rounded">
-                <img class="w-44 h-44 rounded-t" src={support.image} alt={support.name} />
-                <!-- prietty nameplate diamond style -->
-                <div class="w-44 bg-selected rounded-b-lg flex justify-center items-center p-2">
-                    <span class="font-black prism-font prism-font-gold text-xl">{support.name}</span>
+            <div class="flex flex-col items-center justify-center border-selected border rounded">
+                <div class="flex justify-center items-center py-4 px-8">
+                    <span class="font-black prism-font prism-font-gold text-3xl">{support}</span>
                 </div>
             </div>
         {/each}
@@ -65,12 +39,9 @@
     <h3 class="text-xl font-bold mt-4">Supporter IV</h3>
     <div class="flex w-full flex-wrap gap-2"> 
         {#each supporter.IV as support}
-            <!-- make a card -->
-            <div class="flex flex-col items-center justify-center p-4 border-selected border rounded">
-                <img class="w-32 h-32 rounded-t" src={support.image} alt={support.name} />
-                <!-- prietty nameplate diamond style -->
-                <div class="w-32 bg-selected rounded-b-lg flex justify-center items-center p-1">
-                    <span class="font-black prism-font prism-font-silver text-lg">{support.name}</span>
+            <div class="flex flex-col items-center justify-center border-selected border rounded">
+                <div class="flex justify-center items-center py-4 px-8">
+                    <span class="font-black prism-font prism-font-silver text-2xl">{support}</span>
                 </div>
             </div>
         {/each}
@@ -80,8 +51,8 @@
         {#each supporter.III as support}
             <!-- make a card -->
             <div class="flex flex-col items-center justify-center border-selected border rounded">
-                <div class="w-32 flex justify-center items-center p-1">
-                    <span class="font-black prism-font prism-font-silver text-lg">{support}</span>
+                <div class="w-32 flex justify-center items-center py-3 px-6">
+                    <span class="font-black prism-font prism-font-silver text-xl">{support}</span>
                 </div>
             </div>
         {/each}
@@ -119,9 +90,6 @@
     .prism-font-gold{
         background: linear-gradient(to right, #D4AF32, #fff ,#D4AF32, #fff, #D4AF32);
     }
-    .prism-font-ruby{
-        background: linear-gradient(to right, #E0115F, #fff ,#E0115F, #fff, #E0115F);
-    }
     .prism-font-copper{
         background: linear-gradient(to right, #B87333, #fff ,#B87333, #fff, #B87333);
     }
@@ -129,7 +97,7 @@
     .prism-font{
 		text-align: center;
 		color: transparent;
-        background-size: 125px 100%;
+        background-size: 150px 100%;
 		background-clip: text;
 		animation-name: shimmer;
 		animation-duration: 2s;
diff --git a/src/lib/Setting/Settings.svelte b/src/lib/Setting/Settings.svelte
index e6f7854e..619aef96 100644
--- a/src/lib/Setting/Settings.svelte
+++ b/src/lib/Setting/Settings.svelte
@@ -134,8 +134,8 @@
                     <span>{language.advancedSettings}</span>
                 </button>
                 <button class="flex gap-2 items-center hover:text-textcolor"
-                    class:text-textcolor={selected === 7}
-                    class:text-textcolor2={selected !== 7}
+                    class:text-textcolor={selected === 77}
+                    class:text-textcolor2={selected !== 77}
                     on:click={() => {
                     selected = 77
                 }}>
diff --git a/src/lib/SideBars/SideChatList.svelte b/src/lib/SideBars/SideChatList.svelte
index d2c69e88..527c9d7f 100644
--- a/src/lib/SideBars/SideChatList.svelte
+++ b/src/lib/SideBars/SideChatList.svelte
@@ -2,8 +2,8 @@
     import type { character, groupChat } from "src/ts/storage/database";
     import { DataBase } from "src/ts/storage/database";
     import TextInput from "../UI/GUI/TextInput.svelte";
-    import { DownloadIcon, EditIcon, TrashIcon } from "lucide-svelte";
-    import { exportChat } from "src/ts/characters";
+    import { DownloadIcon, EditIcon, FolderUpIcon, TrashIcon } from "lucide-svelte";
+    import { exportChat, importChat } from "src/ts/characters";
     import { alertConfirm, alertError } from "src/ts/alert";
     import { language } from "src/lang";
     import Button from "../UI/GUI/Button.svelte";
@@ -78,7 +78,20 @@
         </button>
     {/each}
     </div>
+    
     <div class="border-t border-selected mt-2">
+        <div class="flex mt-2 ml-2 items-center">
+            <button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" on:click={() => {
+                importChat()
+            }}>
+                <FolderUpIcon size={18}/>
+            </button>
+            <button class="text-textcolor2 hover:text-green-500 cursor-pointer" on:click={() => {
+                editMode = !editMode
+            }}>
+                <EditIcon size={18}/>
+            </button>
+        </div>
         <div class="flex mt-2 items-center">
             <CheckInput bind:check={$DataBase.jailbreakToggle} name={language.jailbreakToggle}/>
         </div>