diff --git a/src/components/FavoriteComponentsModal.vue b/src/components/FavoriteComponentsModal.vue
new file mode 100644
index 000000000..e311f8163
--- /dev/null
+++ b/src/components/FavoriteComponentsModal.vue
@@ -0,0 +1,179 @@
+<template>
+  <div class="modal-overlay" @click.self="closeModal" v-if="visible">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h2>选择收藏夹组件</h2>
+        <button class="close-button" @click="closeModal">×</button>
+      </div>
+      <div class="modal-body">
+        <ul v-if="favorites.length > 0">
+          <li 
+            v-for="(favorite, index) in favorites" 
+            :key="index"
+            @click="selectFavorite(favorite)"
+          >
+            <!-- Display the favorite name -->
+            <div class="favorite-name">{{ favorite.name }}</div>
+            <!-- TODO: Add a more sophisticated preview -->
+            <button class="delete-button" @click.stop="handleDeleteFavorite(favorite.name)">删除</button>
+          </li>
+        </ul>
+      </div>
+       <div class="modal-footer">
+        <button @click="closeModal">取消</button>
+        <!-- TODO: Add a confirmation button if multiple selection is allowed -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+import type { PPTElement } from '@/types/slides'
+
+// Assuming FavoriteItem is defined in useFavoriteComponents and includes 'name'
+import useFavoriteComponents, { type FavoriteItem } from '@/hooks/useFavoriteComponents'
+
+const props = defineProps<{
+  visible: boolean;
+  favorites: FavoriteItem[]; // Use FavoriteItem type
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void;
+  (e: 'select-favorite', elements: PPTElement[]): void;
+}>()
+
+const { getFavorites, removeFavorite } = useFavoriteComponents()
+
+// We need a local ref to manage the displayed favorites in the modal
+const displayedFavorites = ref<FavoriteItem[]>([])
+
+// Watch the visible prop to load favorites when the modal opens
+watch(() => props.visible, (isVisible) => {
+  if (isVisible) {
+    displayedFavorites.value = getFavorites()
+  }
+})
+
+const closeModal = () => {
+  console.log('closeModal called')
+  emit('update:visible', false)
+  console.log('update:visible emitted')
+}
+
+// Function to handle favorite selection
+const selectFavorite = (favorite: FavoriteItem) => {
+  // Emit the elements array part of the FavoriteItem
+  emit('select-favorite', favorite.elements)
+  closeModal()
+}
+
+const handleDeleteFavorite = (name: string) => {
+  removeFavorite(name)
+  displayedFavorites.value = getFavorites() // This line refreshes the displayed list
+}
+
+// TODO: Implement selection logic
+</script>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background-color: white;
+  padding: 20px;
+  border-radius: 8px;
+  width: 90%;
+  max-width: 500px;
+  max-height: 80%;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+}
+
+.modal-header h2 {
+  margin: 0;
+}
+
+.close-button {
+  background: none;
+  border: none;
+  font-size: 1.5em;
+  cursor: pointer;
+}
+
+.modal-body ul {
+  list-style: none;
+  padding: 0;
+}
+
+.modal-body li {
+  padding: 10px 0;
+  border-bottom: 1px solid #eee;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal-body li:last-child {
+  border-bottom: none;
+}
+
+.favorite-name {
+  flex-grow: 1;
+}
+
+.delete-button {
+  background: none;
+  border: none;
+  color: red;
+  cursor: pointer;
+  margin-left: 10px;
+}
+
+.delete-button:hover {
+  text-decoration: underline;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding-top: 10px;
+  border-top: 1px solid #eee;
+}
+
+.modal-footer button {
+  margin-left: 10px;
+  padding: 8px 15px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: #fff;
+  cursor: pointer;
+}
+
+.modal-footer button:hover {
+  background-color: #f0f0f0;
+}
+</style>
diff --git a/src/hooks/useFavoriteComponents.ts b/src/hooks/useFavoriteComponents.ts
new file mode 100644
index 000000000..be394b63a
--- /dev/null
+++ b/src/hooks/useFavoriteComponents.ts
@@ -0,0 +1,54 @@
+import type { PPTElement } from '@/types/slides'
+
+const STORAGE_KEY = 'pptist-favorite-components'
+
+// TODO: Implement this function
+const generateSvgPreview = async (elements: PPTElement[]): Promise<string> => {
+  console.log('Generating SVG preview for:', elements)
+  // Placeholder implementation
+  await Promise.resolve()
+  return ''
+}
+
+export interface FavoriteItem {
+  elements: PPTElement[];
+  name: string;
+  previewSvg?: string;
+}
+
+export default () => {
+
+  const getFavorites = (): FavoriteItem[] => {
+    const favoritesJson = localStorage.getItem(STORAGE_KEY)
+    return favoritesJson ? JSON.parse(favoritesJson) : []
+  }
+
+  const addFavorite = (elements: PPTElement[], name: string) => {
+    if (!elements || elements.length === 0 || !name) return
+
+    const favorites = getFavorites()
+    
+    const newFavorite: FavoriteItem = {
+      elements: elements,
+      name: name,
+      previewSvg: '',
+    }
+
+    favorites.push(newFavorite)
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(favorites))
+  }
+
+  const removeFavorite = (name: string) => {
+    const favorites = getFavorites()
+    const updatedFavorites = favorites.filter(favorite => favorite.name !== name)
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(updatedFavorites))
+  }
+
+  // TODO: Implement other necessary functions later
+
+  return {
+    addFavorite,
+    getFavorites,
+    removeFavorite,
+  }
+}
\ No newline at end of file
diff --git a/src/views/Editor/Canvas/EditableElement.vue b/src/views/Editor/Canvas/EditableElement.vue
index b191bf0ab..2a9dcdccc 100644
--- a/src/views/Editor/Canvas/EditableElement.vue
+++ b/src/views/Editor/Canvas/EditableElement.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { ElementTypes, type PPTElement } from '@/types/slides'
 import type { ContextmenuItem } from '@/components/Contextmenu/types'
 
@@ -28,6 +28,7 @@ import useOrderElement from '@/hooks/useOrderElement'
 import useAlignElementToCanvas from '@/hooks/useAlignElementToCanvas'
 import useCopyAndPasteElement from '@/hooks/useCopyAndPasteElement'
 import useSelectElement from '@/hooks/useSelectElement'
+import useFavoriteComponents from '@/hooks/useFavoriteComponents'
 
 import { ElementOrderCommands, ElementAlignCommands } from '@/types/edit'
 
@@ -41,6 +42,9 @@ import LatexElement from '@/views/components/element/LatexElement/index.vue'
 import VideoElement from '@/views/components/element/VideoElement/index.vue'
 import AudioElement from '@/views/components/element/AudioElement/index.vue'
 
+import { storeToRefs } from 'pinia'
+import { useMainStore } from '@/store'
+
 const props = defineProps<{
   elementInfo: PPTElement
   elementIndex: number
@@ -72,6 +76,18 @@ const { lockElement, unlockElement } = useLockElement()
 const { copyElement, pasteElement, cutElement } = useCopyAndPasteElement()
 const { selectAllElements } = useSelectElement()
 
+const mainStore = useMainStore()
+const { activeElementList } = storeToRefs(mainStore)
+const { addFavorite } = useFavoriteComponents() 
+
+const addToFavoritesHandler = () => {
+  const favoriteName = prompt('请输入收藏组件的名称：')
+  if (favoriteName !== null && favoriteName.trim() !== '') {
+    addFavorite(activeElementList.value, favoriteName.trim())
+    // console.log('Selected elements added to favorites.')
+  }
+}
+
 const contextmenus = (): ContextmenuItem[] => {
   if (props.elementInfo.lock) {
     return [{
@@ -96,6 +112,10 @@ const contextmenus = (): ContextmenuItem[] => {
       subText: 'Ctrl + V',
       handler: pasteElement,
     },
+    {
+      text: '添加到收藏夹',
+      handler: addToFavoritesHandler,
+    },
     { divider: true },
     {
       text: '水平居中',
diff --git a/src/views/Editor/Canvas/index.vue b/src/views/Editor/Canvas/index.vue
index 05b06faa4..57913f7fd 100644
--- a/src/views/Editor/Canvas/index.vue
+++ b/src/views/Editor/Canvas/index.vue
@@ -93,6 +93,13 @@
     >
       <LinkDialog @close="linkDialogVisible = false" />
     </Modal>
+
+    <FavoriteComponentsModal 
+      :visible="favoriteComponentsModalVisible"
+      :favorites="favoriteComponents"
+      @select-favorite="addFavoriteComponentsToCanvas"
+      @update:visible="newValue => favoriteComponentsModalVisible = newValue"
+    />
   </div>
 </template>
 
@@ -126,6 +133,7 @@ import useScaleCanvas from '@/hooks/useScaleCanvas'
 import useScreening from '@/hooks/useScreening'
 import useSlideHandler from '@/hooks/useSlideHandler'
 import useCreateElement from '@/hooks/useCreateElement'
+import useFavoriteComponents from '@/hooks/useFavoriteComponents'
 
 import EditableElement from './EditableElement.vue'
 import MouseSelection from './MouseSelection.vue'
@@ -138,8 +146,10 @@ import MultiSelectOperate from './Operate/MultiSelectOperate.vue'
 import Operate from './Operate/index.vue'
 import LinkDialog from './LinkDialog.vue'
 import Modal from '@/components/Modal.vue'
+import FavoriteComponentsModal from '@/components/FavoriteComponentsModal.vue'
 
 const mainStore = useMainStore()
+const slidesStore = useSlidesStore()
 const {
   activeElementIdList,
   activeGroupElementId,
@@ -153,7 +163,7 @@ const {
   canvasScale,
   textFormatPainter,
 } = storeToRefs(mainStore)
-const { currentSlide } = storeToRefs(useSlidesStore())
+const { currentSlide } = storeToRefs(slidesStore)
 const { ctrlKeyState, spaceKeyState } = storeToRefs(useKeyboardStore())
 
 const viewportRef = ref<HTMLElement>()
@@ -162,6 +172,13 @@ const alignmentLines = ref<AlignmentLineProps[]>([])
 const linkDialogVisible = ref(false)
 const openLinkDialog = () => linkDialogVisible.value = true
 
+const favoriteComponentsModalVisible = ref(false)
+const favoriteComponents = ref<PPTElement[][]>([])
+
+watch(favoriteComponentsModalVisible, (newValue) => {
+  console.log('favoriteComponentsModalVisible changed:', newValue)
+})
+
 watch(handleElementId, () => {
   mainStore.setActiveGroupElementId('')
 })
@@ -193,6 +210,8 @@ const { enterScreeningFromStart } = useScreening()
 const { updateSlideIndex } = useSlideHandler()
 const { createTextElement, createShapeElement } = useCreateElement()
 
+const { getFavorites } = useFavoriteComponents()
+
 // 组件渲染时，如果存在元素焦点，需要清除
 // 这种情况存在于：有焦点元素的情况下进入了放映模式，再退出时，需要清除原先的焦点（因为可能已经切换了页面）
 onMounted(() => {
@@ -299,6 +318,19 @@ const contextmenus = (): ContextmenuItem[] => {
       subText: 'Ctrl + A',
       handler: selectAllElements,
     },
+    {
+      text: '从收藏夹选择',
+      handler: () => {
+        const favorites = getFavorites()
+        if (favorites.length === 0) {
+          alert('收藏夹中还没有组件。') // Show an alert for now
+        } 
+        else {
+          favoriteComponents.value = favorites
+          favoriteComponentsModalVisible.value = true
+        }
+      },
+    },
     {
       text: '标尺',
       subText: showRuler.value ? '√' : '',
@@ -343,6 +375,46 @@ const contextmenus = (): ContextmenuItem[] => {
   ]
 }
 
+// TODO: Implement function to add selected favorite components to canvas
+const addFavoriteComponentsToCanvas = (elements: PPTElement[]) => {
+  if (!elements || elements.length === 0) return
+
+  const currentElements = JSON.parse(JSON.stringify(currentSlide.value.elements))
+
+  const newElements: PPTElement[] = []
+  const groupIdMap = new Map<string, string>() // Map original group IDs to new group IDs
+
+  elements.forEach(element => {
+    const newElement = { ...element }
+    // Generate a simple unique ID
+    newElement.id = Date.now().toString() + Math.random().toString(36).substring(2)
+
+    // Handle grouped elements
+    if (element.groupId) {
+      if (!groupIdMap.has(element.groupId)) {
+        // Generate a new group ID for this original group
+        groupIdMap.set(element.groupId, Date.now().toString() + Math.random().toString(36).substring(2))
+      }
+      newElement.groupId = groupIdMap.get(element.groupId)
+    }
+
+    // Adjust position (can refine later)
+    newElement.left = (element.left || 0) + 50
+    newElement.top = (element.top || 0) + 50
+
+    newElements.push(newElement)
+  })
+
+  const updatedElements = [...currentElements, ...newElements]
+  currentSlide.value.elements = updatedElements
+
+  // Select the newly added elements
+  const newElementIds = newElements.map(el => el.id)
+  mainStore.setActiveElementIdList(newElementIds)
+
+  favoriteComponentsModalVisible.value = false
+}
+
 provide(injectKeySlideScale, canvasScale)
 </script>