diff --git a/src/App.vue b/src/App.vue
index c6859fd..2b24d06 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -27,6 +27,12 @@ const previewSrc = ref("");
 const isFullscreen = ref(false);
 const isSettingsOpen = ref(false);
 const isTagManagerOpen = ref(false);
+const expandedMainTags = ref<number[]>([]);
+const toggleMainTag = (id: number) => {
+  const index = expandedMainTags.value.indexOf(id);
+  if (index > -1) expandedMainTags.value.splice(index, 1);
+  else expandedMainTags.value.push(id);
+};
 const isEventModalOpen = ref(false);
 
 const toast = ref({ message: "", type: "success", visible: false });
@@ -623,8 +629,20 @@ const handleExport = async () => {
         <div class="flex-1 overflow-hidden p-10 flex gap-10">
           <div class="flex-1 overflow-y-auto space-y-2 pr-4 no-scrollbar">
             <div v-for="mt in mainTags" :key="mt.id" class="space-y-2">
-              <div class="flex items-center justify-between group p-2 hover:bg-[#F2F2F7] rounded-xl"><div class="flex items-center gap-3"><div class="w-4 h-4 rounded-full" :style="{ backgroundColor: mt.color }"></div><span class="font-bold">{{ mt.name }}</span></div><button @click="handleDeleteTag(mt.id)" class="text-[#FF3B30] opacity-0 group-hover:opacity-100"><Trash2 :size="16" /></button></div>
-              <div class="ml-7 space-y-1"><div v-for="st in getSubTags(mt.id)" :key="st.id" class="flex items-center justify-between group p-1.5 hover:bg-[#F2F2F7] rounded-lg"><span class="text-sm">{{ st.name }}</span><button @click="handleDeleteTag(st.id)" class="text-[#FF3B30] opacity-0 group-hover:opacity-100"><Trash2 :size="14" /></button></div></div>
+              <div @click="toggleMainTag(mt.id)" class="flex items-center justify-between group p-2 hover:bg-[#F2F2F7] rounded-xl cursor-pointer">
+                <div class="flex items-center gap-3">
+                  <ChevronRight :size="14" class="text-[#86868B] transition-transform" :class="{ 'rotate-90': expandedMainTags.includes(mt.id) }" />
+                  <div class="w-4 h-4 rounded-full" :style="{ backgroundColor: mt.color }"></div>
+                  <span class="font-bold">{{ mt.name }}</span>
+                </div>
+                <button @click.stop="handleDeleteTag(mt.id)" class="text-[#FF3B30] opacity-0 group-hover:opacity-100"><Trash2 :size="16" /></button>
+              </div>
+              <div v-if="expandedMainTags.includes(mt.id)" class="ml-7 space-y-1 animate-in fade-in slide-in-from-top-1 duration-200">
+                <div v-for="st in getSubTags(mt.id)" :key="st.id" class="flex items-center justify-between group p-1.5 hover:bg-[#F2F2F7] rounded-lg">
+                  <span class="text-sm">{{ st.name }}</span>
+                  <button @click="handleDeleteTag(st.id)" class="text-[#FF3B30] opacity-0 group-hover:opacity-100"><Trash2 :size="14" /></button>
+                </div>
+              </div>
             </div>
           </div>
           <div class="w-64 bg-[#F2F2F7] p-6 rounded-3xl space-y-4 h-fit">