diff --git a/src/lang/en.ts b/src/lang/en.ts
index 5800ca0d..d6a87022 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -595,4 +595,8 @@ export const languageEnglish = {
     dynamicAssets: "Dynamic Assets",
     dynamicAssetsEditDisplay: "Use Dynamic Assets in Display",
     longTermMemory: "Long Term Memory",
+    grid: "Grid",
+    list: "List",
+    trash: "Trash",
+    trashDesc: "Deleted characters are moved to trash. you can restore or delete them permanently. deleted characters are automatically purged after 3 days.",
 }
\ No newline at end of file
diff --git a/src/lib/Others/GridCatalog.svelte b/src/lib/Others/GridCatalog.svelte
index 258592ec..72c68be9 100644
--- a/src/lib/Others/GridCatalog.svelte
+++ b/src/lib/Others/GridCatalog.svelte
@@ -1,12 +1,17 @@
 <script lang="ts">
-    import { characterFormatUpdate, getCharImage } from "../../ts/characters";
-    import { DataBase } from "../../ts/storage/database";
+    import { characterFormatUpdate, getCharImage, removeChar } from "../../ts/characters";
+    import { DataBase, type Database } from "../../ts/storage/database";
     import BarIcon from "../SideBars/BarIcon.svelte";
-    import { User, Users } from "lucide-svelte";
+    import { ArrowLeft, User, Users, Inspect, TrashIcon, Undo2Icon } from "lucide-svelte";
     import { selectedCharID } from "../../ts/stores";
     import TextInput from "../UI/GUI/TextInput.svelte";
+    import Button from "../UI/GUI/Button.svelte";
+    import { language } from "src/lang";
+    import { parseMultilangString } from "src/ts/util";
+  import { checkCharOrder } from "src/ts/storage/globalApi";
     export let endGrid = () => {}
     let search = ''
+    let selected = 0
 
     function changeChar(index = -1){
         characterFormatUpdate(index)
@@ -14,59 +19,123 @@
         endGrid()
     }
 
-    function formatChars(search:string){
+    function formatChars(search:string, db:Database, trash = false){
         let charas:{
             image:string
             index:number
-            type:string
+            type:string,
+            name:string
+            desc:string
         }[] = []
 
-        for(let i=0;i<$DataBase.characters.length;i++){
-            const c = $DataBase.characters[i]
+        for(let i=0;i<db.characters.length;i++){
+            const c = db.characters[i]
+            if(c.trashTime && !trash){
+                continue
+            }
+            if(!c.trashTime && trash){
+                continue
+            }
             if(c.name.replace(/ /g,"").toLocaleLowerCase().includes(search.toLocaleLowerCase().replace(/ /g,""))){
                 charas.push({
                     image: c.image,
                     index: i,
-                    type: c.type
+                    type: c.type,
+                    name: c.name,
+                    desc: c.creatorNotes ?? 'No description'
                 })
             }
         }
         return charas
-        
     }
 </script>
 
 <div class="h-full w-full flex justify-center">
-    <div class="h-full p-2 bg-darkbg max-w-full w-2xl flex items-center flex-col ">
-        <h1 class="text-textcolor text-2xl font-bold mt-2">Catalog</h1>
-        <TextInput placeholder="Search" bind:value={search} size="lg" autocomplete="off" marginBottom={true}/>
-        <div class="w-full flex justify-center">
-            <div class="flex flex-wrap gap-2 mx-auto container">
-                {#each formatChars(search) as char}
-                    <div class="flex items-center text-textcolor">
-                        {#if char.image}
-                            <BarIcon onClick={() => {changeChar(char.index)}} additionalStyle={getCharImage(char.image, 'css')}></BarIcon>
-                        {:else}
-                            <BarIcon onClick={() => {changeChar(char.index)}} additionalStyle={char.index === $selectedCharID ? 'background:var(--risu-theme-selected)' : ''}>
-                                {#if char.type === 'group'}
-                                    <Users />
-                                {:else}
-                                    <User/>
-                                {/if}
-                            </BarIcon>
-                        {/if}
-                    </div>
-                {/each}
+    <div class="h-full p-6 bg-darkbg max-w-full w-2xl flex flex-col overflow-y-auto">
+        <h1 class="text-textcolor text-2xl font-bold mt-2 flex items-center mx-4 mb-2">
+            <button class="mr-2 hover:text-textcolor text-textcolor2"><ArrowLeft /></button>
+            <span>Catalog</span>
+        </h1>
+        <div class="mx-4 mb-6 flex flex-col">
+            <TextInput placeholder="Search" bind:value={search} size="lg" autocomplete="off"/>
+            <div class="flex flex-wrap gap-2 mt-2">
+                <Button selected={selected === 0} size="sm" on:click={() => {selected = 0}}>
+                    {language.grid}
+                </Button>
+                <Button selected={selected === 1} size="sm" on:click={() => {selected = 1}}>
+                    {language.list}
+                </Button>
+                <Button selected={selected === 2} size="sm" on:click={() => {selected = 2}}>
+                    {language.trash}
+                </Button>
             </div>
         </div>
+        {#if selected === 0}
+            <div class="w-full flex justify-center">
+                <div class="flex flex-wrap gap-2 w-full justify-center">
+                    {#each formatChars(search, $DataBase) as char}
+                        <div class="flex items-center text-textcolor">
+                            {#if char.image}
+                                <BarIcon onClick={() => {changeChar(char.index)}} additionalStyle={getCharImage(char.image, 'css')}></BarIcon>
+                            {:else}
+                                <BarIcon onClick={() => {changeChar(char.index)}} additionalStyle={char.index === $selectedCharID ? 'background:var(--risu-theme-selected)' : ''}>
+                                    {#if char.type === 'group'}
+                                        <Users />
+                                    {:else}
+                                        <User/>
+                                    {/if}
+                                </BarIcon>
+                            {/if}
+                        </div>
+                    {/each}
+                </div>
+            </div>
+        {:else if selected === 1}
+            {#each formatChars(search, $DataBase) as char}
+                <div class="flex p-2 border border-darkborderc rounded-md mb-2">
+                    <BarIcon onClick={() => {changeChar(char.index)}} additionalStyle={getCharImage(char.image, 'css')}></BarIcon>
+                    <div class="flex-1 flex flex-col ml-2">
+                        <h4 class="text-textcolor font-bold text-lg mb-1">{char.name || "Unnamed"}</h4>
+                        <span class="text-textcolor2">{parseMultilangString(char.desc)['en'] || parseMultilangString(char.desc)['xx'] || 'No description'}</span>
+                        <div class="flex gap-2 justify-end">
+                            <button class="hover:text-textcolor text-textcolor2" on:click={() => {
+                                changeChar(char.index)
+                            }}>
+                                <Inspect />
+                            </button>
+                            <button class="hover:text-textcolor text-textcolor2" on:click={() => {
+                                removeChar(char.index, char.name)
+                            }}>
+                                <TrashIcon />
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            {/each}
+        {:else if selected === 2}
+            <span class="text-textcolor2 text-sm mb-2">{language.trashDesc}</span>
+            {#each formatChars(search, $DataBase, true) as char}
+                <div class="flex p-2 border border-darkborderc rounded-md mb-2">
+                    <BarIcon onClick={() => {changeChar(char.index)}} additionalStyle={getCharImage(char.image, 'css')}></BarIcon>
+                    <div class="flex-1 flex flex-col ml-2">
+                        <h4 class="text-textcolor font-bold text-lg mb-1">{char.name || "Unnamed"}</h4>
+                        <span class="text-textcolor2">{parseMultilangString(char.desc)['en'] || parseMultilangString(char.desc)['xx'] || 'No description'}</span>
+                        <div class="flex gap-2 justify-end">
+                            <button class="hover:text-textcolor text-textcolor2" on:click={() => {
+                                $DataBase.characters[char.index].trashTime = undefined
+                                checkCharOrder()
+                            }}>
+                                <Undo2Icon />
+                            </button>
+                            <button class="hover:text-textcolor text-textcolor2" on:click={() => {
+                                removeChar(char.index, char.name, 'permanent')
+                            }}>
+                                <TrashIcon />
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            {/each}
+        {/if}
     </div>
-</div>
-
-<style>
-    @media (max-width: 640px) {
-        .container {
-            justify-content: center;
-            width: fit-content;
-        }
-    }
-</style>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/src/lib/SideBars/CharConfig.svelte b/src/lib/SideBars/CharConfig.svelte
index dfb9244e..5bebdd00 100644
--- a/src/lib/SideBars/CharConfig.svelte
+++ b/src/lib/SideBars/CharConfig.svelte
@@ -5,7 +5,7 @@
     import { selectedCharID } from "../../ts/stores";
     import { PlusIcon, SmileIcon, TrashIcon, UserIcon, ActivityIcon, BookIcon, User, CurlyBraces, Volume2Icon } from 'lucide-svelte'
     import Check from "../UI/GUI/CheckInput.svelte";
-    import { addCharEmotion, addingEmotion, getCharImage, rmCharEmotion, selectCharImg, makeGroupImage } from "../../ts/characters";
+    import { addCharEmotion, addingEmotion, getCharImage, rmCharEmotion, selectCharImg, makeGroupImage, removeChar } from "../../ts/characters";
     import LoreBook from "./LoreBook/LoreBookSetting.svelte";
     import { alertConfirm, alertNormal, alertSelectChar, alertTOS, showHypaV2Alert } from "../../ts/alert";
     import BarIcon from "./BarIcon.svelte";
@@ -874,20 +874,7 @@
         {/if}
     {/if}
     <Button on:click={async () => {
-        const conf = await alertConfirm(language.removeConfirm + currentChar.data.name)
-        if(!conf){
-            return
-        }
-        const conf2 = await alertConfirm(language.removeConfirm2 + currentChar.data.name)
-        if(!conf2){
-            return
-        }
-        let chars = $DataBase.characters
-        chars.splice($selectedCharID, 1)
-        checkCharOrder()
-        $selectedCharID = -1
-        $DataBase.characters = chars
-
+        removeChar($selectedCharID, currentChar.data.name)
     }} className="mt-2" size="sm">{ currentChar.type === 'group' ? language.removeGroup : language.removeCharacter}</Button>
 {/if}
 
diff --git a/src/ts/characters.ts b/src/ts/characters.ts
index c319d647..fed8b0b8 100644
--- a/src/ts/characters.ts
+++ b/src/ts/characters.ts
@@ -1,6 +1,6 @@
 import { get, writable } from "svelte/store";
 import { DataBase, saveImage, setDatabase, type character, type Chat, defaultSdDataFunc } from "./storage/database";
-import { alertError, alertNormal, alertSelect, alertStore } from "./alert";
+import { alertConfirm, alertError, alertNormal, alertSelect, alertStore } from "./alert";
 import { language } from "../lang";
 import { decode as decodeMsgpack } from "msgpackr";
 import { checkNullish, findCharacterbyId, selectMultipleFile, selectSingleFile, sleep } from "./util";
@@ -508,4 +508,29 @@ export async function addDefaultCharacters() {
         type: 'none',
         msg: ''
     })
+}
+
+export async function removeChar(index:number,name:string, type:'normal'|'permanent'|'permanentForce' = 'normal'){
+    const db = get(DataBase)
+    if(type !== 'permanentForce'){
+        const conf = await alertConfirm(language.removeConfirm + name)
+        if(!conf){
+            return
+        }
+        const conf2 = await alertConfirm(language.removeConfirm2 + name)
+        if(!conf2){
+            return
+        }
+    }
+    let chars = db.characters
+    if(type === 'normal'){
+        chars[index].trashTime = Date.now()
+    }
+    else{
+        chars.splice(index, 1)
+    }
+    checkCharOrder()
+    db.characters = chars
+    setDatabase(db)
+    selectedCharID.set(-1)
 }
\ No newline at end of file
diff --git a/src/ts/storage/database.ts b/src/ts/storage/database.ts
index 387c8678..2d3eeb77 100644
--- a/src/ts/storage/database.ts
+++ b/src/ts/storage/database.ts
@@ -772,6 +772,7 @@ export interface character{
     vits?: OnnxModelFiles
     realmId?:string
     imported?:boolean
+    trashTime?:number
 }
 
 
@@ -815,6 +816,7 @@ export interface groupChat{
     oneAtTime?:boolean
     virtualscript?:string
     lorePlus?:boolean
+    trashTime?:number
 }
 
 export interface botPreset{
diff --git a/src/ts/storage/globalApi.ts b/src/ts/storage/globalApi.ts
index 89cf642d..e98386c0 100644
--- a/src/ts/storage/globalApi.ts
+++ b/src/ts/storage/globalApi.ts
@@ -977,6 +977,14 @@ async function checkNewFormat() {
     if(db.mainPrompt === oldJailbreak){
         db.mainPrompt = defaultJailbreak
     }
+    for(let i=0;i<db.characters.length;i++){
+        const trashTime = db.characters[i].trashTime
+        const targetTrashTime = trashTime ? trashTime + 1000 * 60 * 60 * 24 * 3 : 0
+        if(trashTime && targetTrashTime < Date.now()){
+            db.characters.splice(i,1)
+            i--
+        }
+    }
     setDatabase(db)
     checkCharOrder()
 }
@@ -997,10 +1005,13 @@ export function checkCharOrder() {
     let charIdList:string[] = []
 
     for(let i=0;i<db.characters.length;i++){
-        const charId = db.characters[i].chaId
-        charIdList.push(charId)
+        const char = db.characters[i]
+        const charId = char.chaId
+        if(!char.trashTime){
+            charIdList.push(charId)
+        }
         if(!ordered.includes(charId)){
-            if(charId !== '§temp' && charId !== '§playground'){
+            if(charId !== '§temp' && charId !== '§playground' && !char.trashTime){
                 db.characterOrder.push(charId)
             }
         }