diff --git a/src/renderer/src/components/__tests__/DividerWithText.test.tsx b/src/renderer/src/components/__tests__/DividerWithText.test.tsx
new file mode 100644
index 0000000000..d624f6869e
--- /dev/null
+++ b/src/renderer/src/components/__tests__/DividerWithText.test.tsx
@@ -0,0 +1,62 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import DividerWithText from '../DividerWithText'
+
+describe('DividerWithText', () => {
+  it('should render with correct structure and text', () => {
+    const text = 'Section Title'
+    render(<DividerWithText text={text} />)
+
+    // Verify text is rendered
+    const textElement = screen.getByText(text)
+    expect(textElement).toBeInTheDocument()
+    expect(textElement.tagName).toBe('SPAN')
+
+    // Verify structure
+    const dividerContainer = textElement.parentElement as HTMLElement
+    expect(dividerContainer).toBeTruthy()
+    expect(dividerContainer.tagName).toBe('DIV')
+    expect(dividerContainer.children.length).toBe(2)
+
+    // Verify line element exists
+    const lineElement = dividerContainer.children[1] as HTMLElement
+    expect(lineElement.tagName).toBe('DIV')
+  })
+
+  it('should apply custom styles', () => {
+    const customStyle = {
+      marginTop: '20px',
+      marginBottom: '30px',
+      padding: '10px'
+    }
+
+    const { container } = render(<DividerWithText text="Styled" style={customStyle} />)
+    const dividerContainer = container.firstChild as HTMLElement
+
+    expect(dividerContainer).toHaveStyle(customStyle)
+  })
+
+  it('should handle edge cases for text prop', () => {
+    // Empty string
+    const { container, rerender } = render(<DividerWithText text="" />)
+    const emptySpan = container.querySelector('span')
+    expect(emptySpan).toBeTruthy()
+    expect(emptySpan?.textContent).toBe('')
+
+    // Long text
+    const longText = 'This is a very long section title that might wrap or cause layout issues'
+    rerender(<DividerWithText text={longText} />)
+    expect(screen.getByText(longText)).toBeInTheDocument()
+
+    // Special characters
+    const specialText = '特殊字符 & Symbols: <>&"\'@#$%'
+    rerender(<DividerWithText text={specialText} />)
+    expect(screen.getByText(specialText)).toBeInTheDocument()
+  })
+
+  it('should match snapshot', () => {
+    const { container } = render(<DividerWithText text="Test Divider" />)
+    expect(container.firstChild).toMatchSnapshot()
+  })
+})
diff --git a/src/renderer/src/components/__tests__/EmojiIcon.test.tsx b/src/renderer/src/components/__tests__/EmojiIcon.test.tsx
new file mode 100644
index 0000000000..3d5717c808
--- /dev/null
+++ b/src/renderer/src/components/__tests__/EmojiIcon.test.tsx
@@ -0,0 +1,70 @@
+import { render } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import EmojiIcon from '../EmojiIcon'
+
+describe('EmojiIcon', () => {
+  it('should render with provided emoji', () => {
+    const { container } = render(<EmojiIcon emoji="🚀" />)
+
+    // Should render the emoji
+    expect(container.textContent).toContain('🚀')
+
+    // Should also render emoji in background
+    const background = container.querySelector('div > div')
+    expect(background?.textContent).toContain('🚀')
+  })
+
+  it('should render default emoji when no emoji provided', () => {
+    const { container } = render(<EmojiIcon emoji="" />)
+
+    // Background should have default star emoji
+    const background = container.querySelector('div > div')
+    expect(background?.textContent).toContain('⭐️')
+
+    // Foreground should be empty (the actual emoji prop value)
+    const emojiContainer = container.firstChild as HTMLElement
+    // Remove background text to get only foreground text
+    const foregroundText = emojiContainer.textContent?.replace(background?.textContent || '', '')
+    expect(foregroundText).toBe('')
+  })
+
+  it('should apply custom className', () => {
+    const customClass = 'custom-emoji-class'
+    const { container } = render(<EmojiIcon emoji="😊" className={customClass} />)
+
+    const emojiContainer = container.firstChild as HTMLElement
+    expect(emojiContainer).toHaveClass(customClass)
+  })
+
+  it('should match snapshot', () => {
+    const { container } = render(<EmojiIcon emoji="🎉" />)
+    expect(container.firstChild).toMatchSnapshot()
+  })
+
+  it('should handle special emojis correctly', () => {
+    const specialEmojis = ['👨‍💻', '🏃‍♀️', '👨‍👩‍👧‍👦', '🇨🇳']
+
+    specialEmojis.forEach((emoji) => {
+      const { container } = render(<EmojiIcon emoji={emoji} />)
+      expect(container.textContent).toContain(emoji)
+    })
+  })
+
+  it('should apply custom size and fontSize props', () => {
+    const { container } = render(<EmojiIcon emoji="🌟" size={40} fontSize={24} />)
+    const emojiContainer = container.firstChild as HTMLElement
+
+    // Verify that the component renders with custom props
+    expect(emojiContainer).toHaveStyle({ width: '40px', height: '40px' })
+    expect(emojiContainer).toHaveStyle({ fontSize: '24px' })
+  })
+
+  it('should handle empty string emoji', () => {
+    const { container } = render(<EmojiIcon emoji="" />)
+    const backgroundElement = container.querySelector('div > div')
+
+    // Should show default emoji in background when emoji is empty
+    expect(backgroundElement?.textContent).toContain('⭐️')
+  })
+})
diff --git a/src/renderer/src/components/__tests__/__snapshots__/DividerWithText.test.tsx.snap b/src/renderer/src/components/__tests__/__snapshots__/DividerWithText.test.tsx.snap
new file mode 100644
index 0000000000..b7e3e21468
--- /dev/null
+++ b/src/renderer/src/components/__tests__/__snapshots__/DividerWithText.test.tsx.snap
@@ -0,0 +1,34 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`DividerWithText > should match snapshot 1`] = `
+.c0 {
+  display: flex;
+  align-items: center;
+  margin: 0px 0;
+}
+
+.c1 {
+  font-size: 12px;
+  color: var(--color-text-2);
+  margin-right: 8px;
+}
+
+.c2 {
+  flex: 1;
+  height: 1px;
+  background-color: var(--color-border);
+}
+
+<div
+  class="c0"
+>
+  <span
+    class="c1"
+  >
+    Test Divider
+  </span>
+  <div
+    class="c2"
+  />
+</div>
+`;
diff --git a/src/renderer/src/components/__tests__/__snapshots__/EmojiIcon.test.tsx.snap b/src/renderer/src/components/__tests__/__snapshots__/EmojiIcon.test.tsx.snap
new file mode 100644
index 0000000000..f25036ca0f
--- /dev/null
+++ b/src/renderer/src/components/__tests__/__snapshots__/EmojiIcon.test.tsx.snap
@@ -0,0 +1,42 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`EmojiIcon > should match snapshot 1`] = `
+.c0 {
+  width: 26px;
+  height: 26px;
+  border-radius: 13px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-size: 15px;
+  position: relative;
+  overflow: hidden;
+  margin-right: 3px;
+}
+
+.c1 {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 200%;
+  transform: scale(1.5);
+  filter: blur(5px);
+  opacity: 0.4;
+}
+
+<div
+  class="c0"
+>
+  <div
+    class="c1"
+  >
+    🎉
+  </div>
+  🎉
+</div>
+`;