diff --git a/packages/frontend/src/components/MkEmojiPicker.section.vue b/packages/frontend/src/components/MkEmojiPicker.section.vue
index 6f99fa9200..c745c6b3fa 100644
--- a/packages/frontend/src/components/MkEmojiPicker.section.vue
+++ b/packages/frontend/src/components/MkEmojiPicker.section.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <!-- このコンポーネントの要素のclassは親から利用されるのでむやみに弄らないこと -->
 <!-- フォルダの中にはカスタム絵文字だけ（Unicode絵文字もこっち） -->
-<section v-if="!hasChildSection">
+<section v-if="!hasChildSection" v-panel style="border-radius: 6px; border-bottom: 0.5px solid var(--divider);">
 	<header class="_acrylic" @click="shown = !shown">
 		<i class="toggle ti-fw" :class="shown ? 'ti ti-chevron-down' : 'ti ti-chevron-up'"></i> <slot></slot> (<i class="ti ti-icons"></i>:{{ emojis.length }})
 	</header>
@@ -25,21 +25,21 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</div>
 </section>
 <!-- フォルダの中にはカスタム絵文字やフォルダがある -->
-<section v-else>
+<section v-else v-panel style="border-radius: 6px; border-bottom: 0.5px solid var(--divider);">
   <header class="_acrylic" @click="shown = !shown">
     <i class="toggle ti-fw" :class="shown ? 'ti ti-chevron-down' : 'ti ti-chevron-up'"></i> <slot></slot> (<i class="ti ti-folder"></i>:{{ customEmojiTree.length }} <i class="ti ti-icons"></i>:{{ emojis.length }})
   </header>
   <div v-if="shown" style="padding-left: 9px;">
     <MkEmojiPickerSection
         v-for="child in customEmojiTree"
-        :key="`custom:${child.value}`"
+        :key="`custom:${child.category}`"
         :initialShown="initialShown"
         :emojis="computed(() => customEmojis.filter(e => e.category === child.category).map(e => `:${e.name}:`))"
         :hasChildSection="child.children.length !== 0"
         :customEmojiTree="child.children"
         @chosen="nestedChosen"
     >
-      {{ child.value || i18n.ts.other }}
+      {{ child.category || i18n.ts.other }}
     </MkEmojiPickerSection>
   </div>
   <div v-if="shown" class="body">
diff --git a/packages/frontend/src/components/MkEmojiPicker.vue b/packages/frontend/src/components/MkEmojiPicker.vue
index 9ebd352170..df74571415 100644
--- a/packages/frontend/src/components/MkEmojiPicker.vue
+++ b/packages/frontend/src/components/MkEmojiPicker.vue
@@ -74,14 +74,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<header class="_acrylic">{{ i18n.ts.customEmojis }}</header>
 			<XSection
 				v-for="child in customEmojiFolderRoot.children"
-				:key="`custom:${child.value}`"
+				:key="`custom:${child.category}`"
 				:initialShown="false"
-				:emojis="computed(() => customEmojis.filter(e => child.value === '' ? (e.category === 'null' || !e.category) : e.category === child.value).filter(filterAvailable).map(e => `:${e.name}:`))"
+				:emojis="computed(() => customEmojis.filter(e => child.category === '' ? (e.category === 'null' || !e.category) : e.category === child.category).filter(filterAvailable).map(e => `:${e.name}:`))"
         :hasChildSection="child.children.length !== 0"
         :customEmojiTree="child.children"
 				@chosen="chosen"
 			>
-				{{ child.value || i18n.ts.other }}
+				{{ child.category || i18n.ts.other }}
 			</XSection>
 		</div>
 		<div v-once class="group">
@@ -153,20 +153,19 @@ const searchResultCustom = ref<Misskey.entities.CustomEmoji[]>([]);
 const searchResultUnicode = ref<UnicodeEmojiDef[]>([]);
 const tab = ref<'index' | 'custom' | 'unicode' | 'tags'>('index');
 
-const customEmojiFolderRoot: CustomEmojiFolderTree = { value: "", category: "", children: [] };
+const customEmojiFolderRoot: CustomEmojiFolderTree = { category: "", children: [] };
 
 function parseAndMergeCategories(input: string, root: CustomEmojiFolderTree): CustomEmojiFolderTree {
-	const parts = (input && input !== 'null' ? input : '').split('/');
+	const parts = (input && input !== 'null' ? input : '').split(' / ');
 	let currentNode: CustomEmojiFolderTree = root;
 
 	for (const part of parts) {
-		const path = currentNode.value ? `${currentNode.value}/${part.trim()}` : part.trim();
+		const path = currentNode.category ? `${currentNode.category} / ${part}` : part;
 
-		let existingNode = currentNode.children.find((node) => node.value === path);
+		let existingNode = currentNode.children.find((node) => node.category === path);
 		if (!existingNode) {
 			const newNode: CustomEmojiFolderTree = {
-				value: path,
-				category: currentNode.category ? `${currentNode.category}/${part}` : part,
+				category: path,
 				children: [],
 			};
 			currentNode.children.push(newNode);
@@ -616,8 +615,7 @@ defineExpose({
 				position: sticky;
 				top: 0;
 				left: 0;
-				height: 32px;
-				line-height: 32px;
+				line-height: 28px;
 				z-index: 1;
 				padding: 0 8px;
 				font-size: 12px;
diff --git a/packages/frontend/src/scripts/emojilist.ts b/packages/frontend/src/scripts/emojilist.ts
index 8885bf4b7f..0e5f4f0c0b 100644
--- a/packages/frontend/src/scripts/emojilist.ts
+++ b/packages/frontend/src/scripts/emojilist.ts
@@ -45,7 +45,6 @@ export function getEmojiName(char: string): string | null {
 }
 
 export interface CustomEmojiFolderTree {
-	value: string;
 	category: string;
 	children: CustomEmojiFolderTree[];
 }