diff --git a/src/lang/en.ts b/src/lang/en.ts
index c6793efa..a0db97c8 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -490,6 +490,7 @@ export const languageEnglish = {
     cancel: "Cancel",
     renameFolder: "Rename Folder",
     changeFolderColor: "Change Folder Color",
+    changeFolderImage: "Change Folder Image",
     fullWordMatching: "Full Word Matching",
     botSettingAtStart: "Bot Menu when Launch",
     triggerStart: "On chat Send",
diff --git a/src/lang/ko.ts b/src/lang/ko.ts
index 943ea439..9d3cfa0b 100644
--- a/src/lang/ko.ts
+++ b/src/lang/ko.ts
@@ -441,6 +441,7 @@ export const languageKorean = {
     "cancel": "취소",
     "renameFolder": "폴더 이름 변경하기",
     "changeFolderColor": "폴더 색상 변경하기",
+    "changeFolderImage": "폴더 이미지 변경하기",
     "fullWordMatching": "단어 단위 매칭",
     "botSettingAtStart": "실행 시 봇 설정으로 시작하기",
     "triggerStart": "채팅 보낼 시",
diff --git a/src/lib/SideBars/Sidebar.svelte b/src/lib/SideBars/Sidebar.svelte
index 9d7dcbe6..20f4b9cf 100644
--- a/src/lib/SideBars/Sidebar.svelte
+++ b/src/lib/SideBars/Sidebar.svelte
@@ -37,9 +37,9 @@
     import SidebarAvatar from "./SidebarAvatar.svelte";
     import BaseRoundedButton from "../UI/BaseRoundedButton.svelte";
     import { get } from "svelte/store";
-    import { getCharacterIndexObject } from "src/ts/util";
+    import { getCharacterIndexObject, selectSingleFile } from "src/ts/util";
     import { v4 } from "uuid";
-    import { checkCharOrder } from "src/ts/globalApi.svelte";
+    import { checkCharOrder, getFileSrc, saveAsset } from "src/ts/globalApi.svelte";
     import { alertInput, alertSelect } from "src/ts/alert";
     import SideChatList from "./SideChatList.svelte";
     import { ConnectionIsHost, ConnectionOpenStore, RoomIdStore } from "src/ts/sync/multiuser";
@@ -59,7 +59,7 @@
   }
 
   type sortTypeNormal = { type:'normal',img: string, index: number, name:string }
-  type sortType =  sortTypeNormal|{type:'folder',folder:sortTypeNormal[],id:string, name:string, color:string}
+  type sortType =  sortTypeNormal|{type:'folder',folder:sortTypeNormal[],id:string, name:string, color:string, img?:string}
   let charImages: sortType[] = $state([]);
   let IconRounded = $state(false)
   let openFolders:string[] = $state([])
@@ -109,7 +109,8 @@
           type: "folder",
           id: folder.id,
           name: folder.name,
-          color: folder.color
+          color: folder.color,
+          img: folder.img,
         });
       }
     }
@@ -472,10 +473,10 @@
           {:else if char.type === "folder"}
             {#key char.color}
             {#key char.name}
-              <SidebarAvatar src="slot" size="56" rounded={IconRounded} bordered name={char.name} color={char.color}
+              <SidebarAvatar src="slot" size="56" rounded={IconRounded} bordered name={char.name} color={char.color} backgroundimg={char.img}
               oncontextmenu={async (e) => {
                 e.preventDefault()
-                const sel = parseInt(await alertSelect([language.renameFolder,language.changeFolderColor,language.cancel]))
+                const sel = parseInt(await alertSelect([language.renameFolder,language.changeFolderColor,language.changeFolderImage,language.cancel]))
                 if(sel === 0){
                   const v = await alertInput(language.changeFolderName)
                   const db = DBState.db
@@ -501,6 +502,40 @@
                   db.characterOrder[ind] = oder
                   setDatabase(db)
                 }
+                else if(sel === 2) {
+                  const sel = parseInt(await alertSelect(['Reset to Default Image', 'Select Image File']))
+                  const db = DBState.db
+                  const oder = db.characterOrder[ind]
+                  if(typeof(oder) === 'string'){
+                    return
+                  }
+
+                  switch (sel) {
+                    case 0:
+                      oder.imgFile = null
+                      oder.img = ''
+                      break;
+                  
+                    case 1:
+                      const folderImage = await selectSingleFile([
+                        'png',
+                        'jpg',
+                        'webp',
+                      ])
+
+                      if(!folderImage) {
+                        return
+                      }
+
+                      const folderImageData = await saveAsset(folderImage.data)
+
+                      oder.imgFile = folderImageData
+                      oder.img = await getFileSrc(folderImageData)
+                      db.characterOrder[ind] = oder
+                      setDatabase(db)
+                      break;
+                  }
+                }
               }}
               onClick={() => {
                 if(char.type !== 'folder'){
diff --git a/src/lib/SideBars/SidebarAvatar.svelte b/src/lib/SideBars/SidebarAvatar.svelte
index 3be150d1..48602d8a 100644
--- a/src/lib/SideBars/SidebarAvatar.svelte
+++ b/src/lib/SideBars/SidebarAvatar.svelte
@@ -9,6 +9,7 @@
     onClick?: any;
     bordered?: boolean;
     color?: string;
+    backgroundimg?: string;
     children?: import('svelte').Snippet;
     oncontextmenu?: (event: MouseEvent & {
         currentTarget: EventTarget & HTMLDivElement;
@@ -23,6 +24,7 @@
     onClick = () => {},
     bordered = false,
     color = '',
+    backgroundimg = '',
     children,
     oncontextmenu
   }: Props = $props();
@@ -55,8 +57,15 @@
         style:width={size + "px"}
         style:height={size + "px"}
         style:minWidth={size + "px"}
+        style:background-image={backgroundimg ? `url('${backgroundimg}')` : undefined}
+        style:background-size={backgroundimg ? "cover" : undefined}
+        style:background-position={backgroundimg ? "center" : undefined}
         class:rounded-md={!rounded} class:rounded-full={rounded} 
-      >{@render children?.()}</div>
+      >
+      {#if !backgroundimg}
+        {@render children?.()}
+      {/if}
+    </div>
     {:else}
       {#await src}
         <div
diff --git a/src/ts/globalApi.svelte.ts b/src/ts/globalApi.svelte.ts
index 6ce26b3a..e79e84e4 100644
--- a/src/ts/globalApi.svelte.ts
+++ b/src/ts/globalApi.svelte.ts
@@ -1081,6 +1081,14 @@ export function getUnpargeables(db: Database, uptype: 'basename' | 'pure' = 'bas
             addUnparge(v.icon);
         });
     }
+
+    if(db.characterOrder){
+        db.characterOrder.forEach((item) => {
+            if (typeof item === 'object' && 'imgFile' in item) {
+                addUnparge(item.imgFile);
+            }
+        })
+    }
     return unpargeable;
 }
 
diff --git a/src/ts/storage/database.svelte.ts b/src/ts/storage/database.svelte.ts
index a6dd04fc..3310d448 100644
--- a/src/ts/storage/database.svelte.ts
+++ b/src/ts/storage/database.svelte.ts
@@ -1203,6 +1203,8 @@ export interface folder{
     data:string[]
     color:string
     id:string
+    imgFile?:string
+    img?:string
 }