diff --git a/web/app/components/apps/app-card.spec.tsx b/web/app/components/apps/app-card.spec.tsx
new file mode 100644
index 0000000000..5854820214
--- /dev/null
+++ b/web/app/components/apps/app-card.spec.tsx
@@ -0,0 +1,1066 @@
+import React from 'react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { AppModeEnum } from '@/types/app'
+import { AccessMode } from '@/models/access-control'
+
+// Mock react-i18next - return key as per testing skills
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}))
+
+// Mock next/navigation
+const mockPush = jest.fn()
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: mockPush,
+  }),
+}))
+
+// Mock use-context-selector with stable mockNotify reference for tracking calls
+// Include createContext for components that use it (like Toast)
+const mockNotify = jest.fn()
+jest.mock('use-context-selector', () => {
+  const React = require('react')
+  return {
+    createContext: (defaultValue: any) => React.createContext(defaultValue),
+    useContext: () => ({
+      notify: mockNotify,
+    }),
+    useContextSelector: (_context: any, selector: any) => selector({
+      notify: mockNotify,
+    }),
+  }
+})
+
+// Mock app context
+jest.mock('@/context/app-context', () => ({
+  useAppContext: () => ({
+    isCurrentWorkspaceEditor: true,
+  }),
+}))
+
+// Mock provider context
+const mockOnPlanInfoChanged = jest.fn()
+jest.mock('@/context/provider-context', () => ({
+  useProviderContext: () => ({
+    onPlanInfoChanged: mockOnPlanInfoChanged,
+  }),
+}))
+
+// Mock global public store
+jest.mock('@/context/global-public-context', () => ({
+  useGlobalPublicStore: (selector: (s: any) => any) => selector({
+    systemFeatures: {
+      webapp_auth: { enabled: false },
+      branding: { enabled: false },
+    },
+  }),
+}))
+
+// Mock API services - import for direct manipulation
+import * as appsService from '@/service/apps'
+import * as workflowService from '@/service/workflow'
+
+jest.mock('@/service/apps', () => ({
+  deleteApp: jest.fn(() => Promise.resolve()),
+  updateAppInfo: jest.fn(() => Promise.resolve()),
+  copyApp: jest.fn(() => Promise.resolve({ id: 'new-app-id' })),
+  exportAppConfig: jest.fn(() => Promise.resolve({ data: 'yaml: content' })),
+}))
+
+jest.mock('@/service/workflow', () => ({
+  fetchWorkflowDraft: jest.fn(() => Promise.resolve({ environment_variables: [] })),
+}))
+
+jest.mock('@/service/explore', () => ({
+  fetchInstalledAppList: jest.fn(() => Promise.resolve({ installed_apps: [{ id: 'installed-1' }] })),
+}))
+
+jest.mock('@/service/access-control', () => ({
+  useGetUserCanAccessApp: () => ({
+    data: { result: true },
+    isLoading: false,
+  }),
+}))
+
+// Mock hooks
+jest.mock('@/hooks/use-async-window-open', () => ({
+  useAsyncWindowOpen: () => jest.fn(),
+}))
+
+// Mock utils
+jest.mock('@/utils/app-redirection', () => ({
+  getRedirection: jest.fn(),
+}))
+
+jest.mock('@/utils/var', () => ({
+  basePath: '',
+}))
+
+jest.mock('@/utils/time', () => ({
+  formatTime: () => 'Jan 1, 2024',
+}))
+
+// Mock dynamic imports
+jest.mock('next/dynamic', () => {
+  const React = require('react')
+  return (importFn: () => Promise<any>) => {
+    const fnString = importFn.toString()
+
+    if (fnString.includes('create-app-modal') || fnString.includes('explore/create-app-modal')) {
+      return function MockEditAppModal({ show, onHide, onConfirm }: any) {
+        if (!show) return null
+        return React.createElement('div', { 'data-testid': 'edit-app-modal' },
+          React.createElement('button', { 'onClick': onHide, 'data-testid': 'close-edit-modal' }, 'Close'),
+          React.createElement('button', {
+            'onClick': () => onConfirm?.({
+              name: 'Updated App',
+              icon_type: 'emoji',
+              icon: '🎯',
+              icon_background: '#FFEAD5',
+              description: 'Updated description',
+              use_icon_as_answer_icon: false,
+              max_active_requests: null,
+            }),
+            'data-testid': 'confirm-edit-modal',
+          }, 'Confirm'),
+        )
+      }
+    }
+    if (fnString.includes('duplicate-modal')) {
+      return function MockDuplicateAppModal({ show, onHide, onConfirm }: any) {
+        if (!show) return null
+        return React.createElement('div', { 'data-testid': 'duplicate-modal' },
+          React.createElement('button', { 'onClick': onHide, 'data-testid': 'close-duplicate-modal' }, 'Close'),
+          React.createElement('button', {
+            'onClick': () => onConfirm?.({
+              name: 'Copied App',
+              icon_type: 'emoji',
+              icon: '📋',
+              icon_background: '#E4FBCC',
+            }),
+            'data-testid': 'confirm-duplicate-modal',
+          }, 'Confirm'),
+        )
+      }
+    }
+    if (fnString.includes('switch-app-modal')) {
+      return function MockSwitchAppModal({ show, onClose, onSuccess }: any) {
+        if (!show) return null
+        return React.createElement('div', { 'data-testid': 'switch-modal' },
+          React.createElement('button', { 'onClick': onClose, 'data-testid': 'close-switch-modal' }, 'Close'),
+          React.createElement('button', { 'onClick': onSuccess, 'data-testid': 'confirm-switch-modal' }, 'Switch'),
+        )
+      }
+    }
+    if (fnString.includes('base/confirm')) {
+      return function MockConfirm({ isShow, onCancel, onConfirm }: any) {
+        if (!isShow) return null
+        return React.createElement('div', { 'data-testid': 'confirm-dialog' },
+          React.createElement('button', { 'onClick': onCancel, 'data-testid': 'cancel-confirm' }, 'Cancel'),
+          React.createElement('button', { 'onClick': onConfirm, 'data-testid': 'confirm-confirm' }, 'Confirm'),
+        )
+      }
+    }
+    if (fnString.includes('dsl-export-confirm-modal')) {
+      return function MockDSLExportModal({ onClose, onConfirm }: any) {
+        return React.createElement('div', { 'data-testid': 'dsl-export-modal' },
+          React.createElement('button', { 'onClick': () => onClose?.(), 'data-testid': 'close-dsl-export' }, 'Close'),
+          React.createElement('button', { 'onClick': () => onConfirm?.(true), 'data-testid': 'confirm-dsl-export' }, 'Export with secrets'),
+          React.createElement('button', { 'onClick': () => onConfirm?.(false), 'data-testid': 'confirm-dsl-export-no-secrets' }, 'Export without secrets'),
+        )
+      }
+    }
+    if (fnString.includes('app-access-control')) {
+      return function MockAccessControl({ onClose, onConfirm }: any) {
+        return React.createElement('div', { 'data-testid': 'access-control-modal' },
+          React.createElement('button', { 'onClick': onClose, 'data-testid': 'close-access-control' }, 'Close'),
+          React.createElement('button', { 'onClick': onConfirm, 'data-testid': 'confirm-access-control' }, 'Confirm'),
+        )
+      }
+    }
+    return () => null
+  }
+})
+
+/**
+ * Mock components that require special handling in test environment.
+ *
+ * Per frontend testing skills (mocking.md), we should NOT mock simple base components.
+ * However, the following require mocking due to:
+ * - Portal-based rendering that doesn't work well in happy-dom
+ * - Deep dependency chains importing ES modules (like ky) incompatible with Jest
+ * - Complex state management that requires controlled test behavior
+ */
+
+// Popover uses portals for positioning which requires mocking in happy-dom environment
+jest.mock('@/app/components/base/popover', () => {
+  const MockPopover = ({ htmlContent, btnElement, btnClassName }: any) => {
+    const [isOpen, setIsOpen] = React.useState(false)
+    // Call btnClassName to cover lines 430-433
+    const computedClassName = typeof btnClassName === 'function' ? btnClassName(isOpen) : ''
+    return React.createElement('div', { 'data-testid': 'custom-popover', 'className': computedClassName },
+      React.createElement('div', {
+        'onClick': () => setIsOpen(!isOpen),
+        'data-testid': 'popover-trigger',
+      }, btnElement),
+      isOpen && React.createElement('div', {
+        'data-testid': 'popover-content',
+        'onMouseLeave': () => setIsOpen(false),
+      },
+      typeof htmlContent === 'function' ? htmlContent({ open: isOpen, onClose: () => setIsOpen(false), onClick: () => setIsOpen(false) }) : htmlContent,
+      ),
+    )
+  }
+  return { __esModule: true, default: MockPopover }
+})
+
+// Tooltip uses portals for positioning - minimal mock preserving popup content as title attribute
+jest.mock('@/app/components/base/tooltip', () => ({
+  __esModule: true,
+  default: ({ children, popupContent }: any) => React.createElement('div', { title: popupContent }, children),
+}))
+
+// TagSelector imports service/tag which depends on ky ES module - mock to avoid Jest ES module issues
+jest.mock('@/app/components/base/tag-management/selector', () => ({
+  __esModule: true,
+  default: ({ tags }: any) => {
+    const React = require('react')
+    return React.createElement('div', { 'aria-label': 'tag-selector' },
+      tags?.map((tag: any) => React.createElement('span', { key: tag.id }, tag.name)),
+    )
+  },
+}))
+
+// AppTypeIcon has complex icon mapping logic - mock for focused component testing
+jest.mock('@/app/components/app/type-selector', () => ({
+  AppTypeIcon: () => React.createElement('div', { 'data-testid': 'app-type-icon' }),
+}))
+
+// Import component after mocks
+import AppCard from './app-card'
+
+// ============================================================================
+// Test Data Factories
+// ============================================================================
+
+const createMockApp = (overrides: Record<string, any> = {}) => ({
+  id: 'test-app-id',
+  name: 'Test App',
+  description: 'Test app description',
+  mode: AppModeEnum.CHAT,
+  icon: '🤖',
+  icon_type: 'emoji' as const,
+  icon_background: '#FFEAD5',
+  icon_url: null,
+  author_name: 'Test Author',
+  created_at: 1704067200,
+  updated_at: 1704153600,
+  tags: [],
+  use_icon_as_answer_icon: false,
+  max_active_requests: null,
+  access_mode: AccessMode.PUBLIC,
+  has_draft_trigger: false,
+  enable_site: true,
+  enable_api: true,
+  api_rpm: 60,
+  api_rph: 3600,
+  is_demo: false,
+  model_config: {} as any,
+  app_model_config: {} as any,
+  site: {} as any,
+  api_base_url: 'https://api.example.com',
+  ...overrides,
+})
+
+// ============================================================================
+// Tests
+// ============================================================================
+
+describe('AppCard', () => {
+  const mockApp = createMockApp()
+  const mockOnRefresh = jest.fn()
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      render(<AppCard app={mockApp} />)
+      // Use title attribute to target specific element
+      expect(screen.getByTitle('Test App')).toBeInTheDocument()
+    })
+
+    it('should display app name', () => {
+      render(<AppCard app={mockApp} />)
+      expect(screen.getByTitle('Test App')).toBeInTheDocument()
+    })
+
+    it('should display app description', () => {
+      render(<AppCard app={mockApp} />)
+      expect(screen.getByTitle('Test app description')).toBeInTheDocument()
+    })
+
+    it('should display author name', () => {
+      render(<AppCard app={mockApp} />)
+      expect(screen.getByTitle('Test Author')).toBeInTheDocument()
+    })
+
+    it('should render app icon', () => {
+      // AppIcon component renders the emoji icon from app data
+      const { container } = render(<AppCard app={mockApp} />)
+      // Check that the icon container is rendered (AppIcon renders within the card)
+      const iconElement = container.querySelector('[class*="icon"]') || container.querySelector('img')
+      expect(iconElement || screen.getByText(mockApp.icon)).toBeTruthy()
+    })
+
+    it('should render app type icon', () => {
+      render(<AppCard app={mockApp} />)
+      expect(screen.getByTestId('app-type-icon')).toBeInTheDocument()
+    })
+
+    it('should display formatted edit time', () => {
+      render(<AppCard app={mockApp} />)
+      expect(screen.getByText(/edited/i)).toBeInTheDocument()
+    })
+  })
+
+  describe('Props', () => {
+    it('should handle different app modes', () => {
+      const workflowApp = { ...mockApp, mode: AppModeEnum.WORKFLOW }
+      render(<AppCard app={workflowApp} />)
+      expect(screen.getByTitle('Test App')).toBeInTheDocument()
+    })
+
+    it('should handle app with tags', () => {
+      const appWithTags = {
+        ...mockApp,
+        tags: [{ id: 'tag1', name: 'Tag 1', type: 'app', binding_count: 0 }],
+      }
+      render(<AppCard app={appWithTags} />)
+      // Verify the tag selector component renders
+      expect(screen.getByLabelText('tag-selector')).toBeInTheDocument()
+    })
+
+    it('should render with onRefresh callback', () => {
+      render(<AppCard app={mockApp} onRefresh={mockOnRefresh} />)
+      expect(screen.getByTitle('Test App')).toBeInTheDocument()
+    })
+  })
+
+  describe('Access Mode Icons', () => {
+    it('should show public icon for public access mode', () => {
+      const publicApp = { ...mockApp, access_mode: AccessMode.PUBLIC }
+      const { container } = render(<AppCard app={publicApp} />)
+      const tooltip = container.querySelector('[title="app.accessItemsDescription.anyone"]')
+      expect(tooltip).toBeInTheDocument()
+    })
+
+    it('should show lock icon for specific groups access mode', () => {
+      const specificApp = { ...mockApp, access_mode: AccessMode.SPECIFIC_GROUPS_MEMBERS }
+      const { container } = render(<AppCard app={specificApp} />)
+      const tooltip = container.querySelector('[title="app.accessItemsDescription.specific"]')
+      expect(tooltip).toBeInTheDocument()
+    })
+
+    it('should show organization icon for organization access mode', () => {
+      const orgApp = { ...mockApp, access_mode: AccessMode.ORGANIZATION }
+      const { container } = render(<AppCard app={orgApp} />)
+      const tooltip = container.querySelector('[title="app.accessItemsDescription.organization"]')
+      expect(tooltip).toBeInTheDocument()
+    })
+
+    it('should show external icon for external access mode', () => {
+      const externalApp = { ...mockApp, access_mode: AccessMode.EXTERNAL_MEMBERS }
+      const { container } = render(<AppCard app={externalApp} />)
+      const tooltip = container.querySelector('[title="app.accessItemsDescription.external"]')
+      expect(tooltip).toBeInTheDocument()
+    })
+  })
+
+  describe('Card Interaction', () => {
+    it('should handle card click', () => {
+      render(<AppCard app={mockApp} />)
+      const card = screen.getByTitle('Test App').closest('[class*="cursor-pointer"]')
+      expect(card).toBeInTheDocument()
+    })
+
+    it('should call getRedirection on card click', () => {
+      const { getRedirection } = require('@/utils/app-redirection')
+      render(<AppCard app={mockApp} />)
+      const card = screen.getByTitle('Test App').closest('[class*="cursor-pointer"]')!
+      fireEvent.click(card)
+      expect(getRedirection).toHaveBeenCalledWith(true, mockApp, mockPush)
+    })
+  })
+
+  describe('Operations Menu', () => {
+    it('should render operations popover', () => {
+      render(<AppCard app={mockApp} />)
+      expect(screen.getByTestId('custom-popover')).toBeInTheDocument()
+    })
+
+    it('should show edit option when popover is opened', async () => {
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+
+      await waitFor(() => {
+        expect(screen.getByText('app.editApp')).toBeInTheDocument()
+      })
+    })
+
+    it('should show duplicate option when popover is opened', async () => {
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+
+      await waitFor(() => {
+        expect(screen.getByText('app.duplicate')).toBeInTheDocument()
+      })
+    })
+
+    it('should show export option when popover is opened', async () => {
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+
+      await waitFor(() => {
+        expect(screen.getByText('app.export')).toBeInTheDocument()
+      })
+    })
+
+    it('should show delete option when popover is opened', async () => {
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+
+      await waitFor(() => {
+        expect(screen.getByText('common.operation.delete')).toBeInTheDocument()
+      })
+    })
+
+    it('should show switch option for chat mode apps', async () => {
+      const chatApp = { ...mockApp, mode: AppModeEnum.CHAT }
+      render(<AppCard app={chatApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+
+      await waitFor(() => {
+        expect(screen.getByText(/switch/i)).toBeInTheDocument()
+      })
+    })
+
+    it('should show switch option for completion mode apps', async () => {
+      const completionApp = { ...mockApp, mode: AppModeEnum.COMPLETION }
+      render(<AppCard app={completionApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+
+      await waitFor(() => {
+        expect(screen.getByText(/switch/i)).toBeInTheDocument()
+      })
+    })
+
+    it('should not show switch option for workflow mode apps', async () => {
+      const workflowApp = { ...mockApp, mode: AppModeEnum.WORKFLOW }
+      render(<AppCard app={workflowApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+
+      await waitFor(() => {
+        expect(screen.queryByText(/switch/i)).not.toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('Modal Interactions', () => {
+    it('should open edit modal when edit button is clicked', async () => {
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+
+      await waitFor(() => {
+        const editButton = screen.getByText('app.editApp')
+        fireEvent.click(editButton)
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('edit-app-modal')).toBeInTheDocument()
+      })
+    })
+
+    it('should open duplicate modal when duplicate button is clicked', async () => {
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+
+      await waitFor(() => {
+        const duplicateButton = screen.getByText('app.duplicate')
+        fireEvent.click(duplicateButton)
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('duplicate-modal')).toBeInTheDocument()
+      })
+    })
+
+    it('should open confirm dialog when delete button is clicked', async () => {
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+
+      await waitFor(() => {
+        const deleteButton = screen.getByText('common.operation.delete')
+        fireEvent.click(deleteButton)
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('confirm-dialog')).toBeInTheDocument()
+      })
+    })
+
+    it('should close confirm dialog when cancel is clicked', async () => {
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+
+      await waitFor(() => {
+        const deleteButton = screen.getByText('common.operation.delete')
+        fireEvent.click(deleteButton)
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('confirm-dialog')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByTestId('cancel-confirm'))
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('confirm-dialog')).not.toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('Styling', () => {
+    it('should have correct card container styling', () => {
+      const { container } = render(<AppCard app={mockApp} />)
+      const card = container.querySelector('[class*="h-[160px]"]')
+      expect(card).toBeInTheDocument()
+    })
+
+    it('should have rounded corners', () => {
+      const { container } = render(<AppCard app={mockApp} />)
+      const card = container.querySelector('[class*="rounded-xl"]')
+      expect(card).toBeInTheDocument()
+    })
+  })
+
+  describe('API Callbacks', () => {
+    it('should call deleteApp API when confirming delete', async () => {
+      render(<AppCard app={mockApp} onRefresh={mockOnRefresh} />)
+
+      // Open popover and click delete
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('common.operation.delete'))
+      })
+
+      // Confirm delete
+      await waitFor(() => {
+        expect(screen.getByTestId('confirm-dialog')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByTestId('confirm-confirm'))
+
+      await waitFor(() => {
+        expect(appsService.deleteApp).toHaveBeenCalled()
+      })
+    })
+
+    it('should call onRefresh after successful delete', async () => {
+      render(<AppCard app={mockApp} onRefresh={mockOnRefresh} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('common.operation.delete'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('confirm-dialog')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByTestId('confirm-confirm'))
+
+      await waitFor(() => {
+        expect(mockOnRefresh).toHaveBeenCalled()
+      })
+    })
+
+    it('should handle delete failure', async () => {
+      (appsService.deleteApp as jest.Mock).mockRejectedValueOnce(new Error('Delete failed'))
+
+      render(<AppCard app={mockApp} onRefresh={mockOnRefresh} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('common.operation.delete'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('confirm-dialog')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByTestId('confirm-confirm'))
+
+      await waitFor(() => {
+        expect(appsService.deleteApp).toHaveBeenCalled()
+        expect(mockNotify).toHaveBeenCalledWith({ type: 'error', message: expect.stringContaining('Delete failed') })
+      })
+    })
+
+    it('should call updateAppInfo API when editing app', async () => {
+      render(<AppCard app={mockApp} onRefresh={mockOnRefresh} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.editApp'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('edit-app-modal')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByTestId('confirm-edit-modal'))
+
+      await waitFor(() => {
+        expect(appsService.updateAppInfo).toHaveBeenCalled()
+      })
+    })
+
+    it('should call copyApp API when duplicating app', async () => {
+      render(<AppCard app={mockApp} onRefresh={mockOnRefresh} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.duplicate'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('duplicate-modal')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByTestId('confirm-duplicate-modal'))
+
+      await waitFor(() => {
+        expect(appsService.copyApp).toHaveBeenCalled()
+      })
+    })
+
+    it('should call onPlanInfoChanged after successful duplication', async () => {
+      render(<AppCard app={mockApp} onRefresh={mockOnRefresh} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.duplicate'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('duplicate-modal')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByTestId('confirm-duplicate-modal'))
+
+      await waitFor(() => {
+        expect(mockOnPlanInfoChanged).toHaveBeenCalled()
+      })
+    })
+
+    it('should handle copy failure', async () => {
+      (appsService.copyApp as jest.Mock).mockRejectedValueOnce(new Error('Copy failed'))
+
+      render(<AppCard app={mockApp} onRefresh={mockOnRefresh} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.duplicate'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('duplicate-modal')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByTestId('confirm-duplicate-modal'))
+
+      await waitFor(() => {
+        expect(appsService.copyApp).toHaveBeenCalled()
+        expect(mockNotify).toHaveBeenCalledWith({ type: 'error', message: 'app.newApp.appCreateFailed' })
+      })
+    })
+
+    it('should call exportAppConfig API when exporting', async () => {
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.export'))
+      })
+
+      await waitFor(() => {
+        expect(appsService.exportAppConfig).toHaveBeenCalled()
+      })
+    })
+
+    it('should handle export failure', async () => {
+      (appsService.exportAppConfig as jest.Mock).mockRejectedValueOnce(new Error('Export failed'))
+
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.export'))
+      })
+
+      await waitFor(() => {
+        expect(appsService.exportAppConfig).toHaveBeenCalled()
+        expect(mockNotify).toHaveBeenCalledWith({ type: 'error', message: 'app.exportFailed' })
+      })
+    })
+  })
+
+  describe('Switch Modal', () => {
+    it('should open switch modal when switch button is clicked', async () => {
+      const chatApp = { ...mockApp, mode: AppModeEnum.CHAT }
+      render(<AppCard app={chatApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.switch'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('switch-modal')).toBeInTheDocument()
+      })
+    })
+
+    it('should close switch modal when close button is clicked', async () => {
+      const chatApp = { ...mockApp, mode: AppModeEnum.CHAT }
+      render(<AppCard app={chatApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.switch'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('switch-modal')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByTestId('close-switch-modal'))
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('switch-modal')).not.toBeInTheDocument()
+      })
+    })
+
+    it('should call onRefresh after successful switch', async () => {
+      const chatApp = { ...mockApp, mode: AppModeEnum.CHAT }
+      render(<AppCard app={chatApp} onRefresh={mockOnRefresh} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.switch'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('switch-modal')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByTestId('confirm-switch-modal'))
+
+      await waitFor(() => {
+        expect(mockOnRefresh).toHaveBeenCalled()
+      })
+    })
+
+    it('should open switch modal for completion mode apps', async () => {
+      const completionApp = { ...mockApp, mode: AppModeEnum.COMPLETION }
+      render(<AppCard app={completionApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.switch'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('switch-modal')).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('Open in Explore', () => {
+    it('should show open in explore option when popover is opened', async () => {
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+
+      await waitFor(() => {
+        expect(screen.getByText('app.openInExplore')).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('Workflow Export with Environment Variables', () => {
+    it('should check for secret environment variables in workflow apps', async () => {
+      const workflowApp = { ...mockApp, mode: AppModeEnum.WORKFLOW }
+      render(<AppCard app={workflowApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.export'))
+      })
+
+      await waitFor(() => {
+        expect(workflowService.fetchWorkflowDraft).toHaveBeenCalled()
+      })
+    })
+
+    it('should show DSL export modal when workflow has secret variables', async () => {
+      (workflowService.fetchWorkflowDraft as jest.Mock).mockResolvedValueOnce({
+        environment_variables: [{ value_type: 'secret', name: 'API_KEY' }],
+      })
+
+      const workflowApp = { ...mockApp, mode: AppModeEnum.WORKFLOW }
+      render(<AppCard app={workflowApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.export'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('dsl-export-modal')).toBeInTheDocument()
+      })
+    })
+
+    it('should check for secret environment variables in advanced chat apps', async () => {
+      const advancedChatApp = { ...mockApp, mode: AppModeEnum.ADVANCED_CHAT }
+      render(<AppCard app={advancedChatApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.export'))
+      })
+
+      await waitFor(() => {
+        expect(workflowService.fetchWorkflowDraft).toHaveBeenCalled()
+      })
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle empty description', () => {
+      const appNoDesc = { ...mockApp, description: '' }
+      render(<AppCard app={appNoDesc} />)
+      expect(screen.getByText('Test App')).toBeInTheDocument()
+    })
+
+    it('should handle long app name', () => {
+      const longNameApp = {
+        ...mockApp,
+        name: 'This is a very long app name that might overflow the container',
+      }
+      render(<AppCard app={longNameApp} />)
+      expect(screen.getByText(longNameApp.name)).toBeInTheDocument()
+    })
+
+    it('should handle empty tags array', () => {
+      const noTagsApp = { ...mockApp, tags: [] }
+      // With empty tags, the component should still render successfully
+      render(<AppCard app={noTagsApp} />)
+      expect(screen.getByTitle('Test App')).toBeInTheDocument()
+    })
+
+    it('should handle missing author name', () => {
+      const noAuthorApp = { ...mockApp, author_name: '' }
+      render(<AppCard app={noAuthorApp} />)
+      expect(screen.getByTitle('Test App')).toBeInTheDocument()
+    })
+
+    it('should handle null icon_url', () => {
+      const nullIconApp = { ...mockApp, icon_url: null }
+      // With null icon_url, the component should fall back to emoji icon and render successfully
+      render(<AppCard app={nullIconApp} />)
+      expect(screen.getByTitle('Test App')).toBeInTheDocument()
+    })
+
+    it('should use created_at when updated_at is not available', () => {
+      const noUpdateApp = { ...mockApp, updated_at: 0 }
+      render(<AppCard app={noUpdateApp} />)
+      expect(screen.getByText(/edited/i)).toBeInTheDocument()
+    })
+
+    it('should handle agent chat mode apps', () => {
+      const agentApp = { ...mockApp, mode: AppModeEnum.AGENT_CHAT }
+      render(<AppCard app={agentApp} />)
+      expect(screen.getByTitle('Test App')).toBeInTheDocument()
+    })
+
+    it('should handle advanced chat mode apps', () => {
+      const advancedApp = { ...mockApp, mode: AppModeEnum.ADVANCED_CHAT }
+      render(<AppCard app={advancedApp} />)
+      expect(screen.getByTitle('Test App')).toBeInTheDocument()
+    })
+
+    it('should handle apps with multiple tags', () => {
+      const multiTagApp = {
+        ...mockApp,
+        tags: [
+          { id: 'tag1', name: 'Tag 1', type: 'app', binding_count: 0 },
+          { id: 'tag2', name: 'Tag 2', type: 'app', binding_count: 0 },
+          { id: 'tag3', name: 'Tag 3', type: 'app', binding_count: 0 },
+        ],
+      }
+      render(<AppCard app={multiTagApp} />)
+      // Verify the tag selector renders (actual tag display is handled by the real TagSelector component)
+      expect(screen.getByLabelText('tag-selector')).toBeInTheDocument()
+    })
+
+    it('should handle edit failure', async () => {
+      (appsService.updateAppInfo as jest.Mock).mockRejectedValueOnce(new Error('Edit failed'))
+
+      render(<AppCard app={mockApp} onRefresh={mockOnRefresh} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.editApp'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('edit-app-modal')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByTestId('confirm-edit-modal'))
+
+      await waitFor(() => {
+        expect(appsService.updateAppInfo).toHaveBeenCalled()
+        expect(mockNotify).toHaveBeenCalledWith({ type: 'error', message: expect.stringContaining('Edit failed') })
+      })
+    })
+
+    it('should close edit modal after successful edit', async () => {
+      render(<AppCard app={mockApp} onRefresh={mockOnRefresh} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.editApp'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('edit-app-modal')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByTestId('confirm-edit-modal'))
+
+      await waitFor(() => {
+        expect(mockOnRefresh).toHaveBeenCalled()
+      })
+    })
+
+    it('should render all app modes correctly', () => {
+      const modes = [
+        AppModeEnum.CHAT,
+        AppModeEnum.COMPLETION,
+        AppModeEnum.WORKFLOW,
+        AppModeEnum.ADVANCED_CHAT,
+        AppModeEnum.AGENT_CHAT,
+      ]
+
+      modes.forEach((mode) => {
+        const testApp = { ...mockApp, mode }
+        const { unmount } = render(<AppCard app={testApp} />)
+        expect(screen.getByTitle('Test App')).toBeInTheDocument()
+        unmount()
+      })
+    })
+
+    it('should handle workflow draft fetch failure during export', async () => {
+      (workflowService.fetchWorkflowDraft as jest.Mock).mockRejectedValueOnce(new Error('Fetch failed'))
+
+      const workflowApp = { ...mockApp, mode: AppModeEnum.WORKFLOW }
+      render(<AppCard app={workflowApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.export'))
+      })
+
+      await waitFor(() => {
+        expect(workflowService.fetchWorkflowDraft).toHaveBeenCalled()
+        expect(mockNotify).toHaveBeenCalledWith({ type: 'error', message: 'app.exportFailed' })
+      })
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Additional Edge Cases for Coverage
+  // --------------------------------------------------------------------------
+  describe('Additional Coverage', () => {
+    it('should handle onRefresh callback in switch modal success', async () => {
+      const chatApp = createMockApp({ mode: AppModeEnum.CHAT })
+      render(<AppCard app={chatApp} onRefresh={mockOnRefresh} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.switch'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('switch-modal')).toBeInTheDocument()
+      })
+
+      // Trigger success callback
+      fireEvent.click(screen.getByTestId('confirm-switch-modal'))
+
+      await waitFor(() => {
+        expect(mockOnRefresh).toHaveBeenCalled()
+      })
+    })
+
+    it('should render popover menu with correct styling for different app modes', async () => {
+      // Test completion mode styling
+      const completionApp = createMockApp({ mode: AppModeEnum.COMPLETION })
+      const { unmount } = render(<AppCard app={completionApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        expect(screen.getByText('app.editApp')).toBeInTheDocument()
+      })
+
+      unmount()
+
+      // Test workflow mode styling
+      const workflowApp = createMockApp({ mode: AppModeEnum.WORKFLOW })
+      render(<AppCard app={workflowApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        expect(screen.getByText('app.editApp')).toBeInTheDocument()
+      })
+    })
+
+    it('should stop propagation when clicking tag selector area', () => {
+      const multiTagApp = createMockApp({
+        tags: [{ id: 'tag1', name: 'Tag 1', type: 'app', binding_count: 0 }],
+      })
+
+      render(<AppCard app={multiTagApp} />)
+
+      const tagSelector = screen.getByLabelText('tag-selector')
+      expect(tagSelector).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/apps/empty.spec.tsx b/web/app/components/apps/empty.spec.tsx
new file mode 100644
index 0000000000..d69c7b3e1b
--- /dev/null
+++ b/web/app/components/apps/empty.spec.tsx
@@ -0,0 +1,60 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import Empty from './empty'
+
+// Mock react-i18next - return key as per testing skills
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}))
+
+describe('Empty', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      render(<Empty />)
+      expect(screen.getByText('app.newApp.noAppsFound')).toBeInTheDocument()
+    })
+
+    it('should render 36 placeholder cards', () => {
+      const { container } = render(<Empty />)
+      const placeholderCards = container.querySelectorAll('.bg-background-default-lighter')
+      expect(placeholderCards).toHaveLength(36)
+    })
+
+    it('should display the no apps found message', () => {
+      render(<Empty />)
+      // Use pattern matching for resilient text assertions
+      expect(screen.getByText('app.newApp.noAppsFound')).toBeInTheDocument()
+    })
+  })
+
+  describe('Styling', () => {
+    it('should have correct container styling for overlay', () => {
+      const { container } = render(<Empty />)
+      const overlay = container.querySelector('.pointer-events-none')
+      expect(overlay).toBeInTheDocument()
+      expect(overlay).toHaveClass('absolute', 'inset-0', 'z-20')
+    })
+
+    it('should have correct styling for placeholder cards', () => {
+      const { container } = render(<Empty />)
+      const card = container.querySelector('.bg-background-default-lighter')
+      expect(card).toHaveClass('inline-flex', 'h-[160px]', 'rounded-xl')
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle multiple renders without issues', () => {
+      const { rerender } = render(<Empty />)
+      expect(screen.getByText('app.newApp.noAppsFound')).toBeInTheDocument()
+
+      rerender(<Empty />)
+      expect(screen.getByText('app.newApp.noAppsFound')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/apps/footer.spec.tsx b/web/app/components/apps/footer.spec.tsx
new file mode 100644
index 0000000000..4bf381bf4f
--- /dev/null
+++ b/web/app/components/apps/footer.spec.tsx
@@ -0,0 +1,101 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import Footer from './footer'
+
+// Mock react-i18next - return key as per testing skills
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}))
+
+describe('Footer', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      render(<Footer />)
+      expect(screen.getByRole('contentinfo')).toBeInTheDocument()
+    })
+
+    it('should display the community heading', () => {
+      render(<Footer />)
+      // Use pattern matching for resilient text assertions
+      expect(screen.getByText('app.join')).toBeInTheDocument()
+    })
+
+    it('should display the community intro text', () => {
+      render(<Footer />)
+      expect(screen.getByText('app.communityIntro')).toBeInTheDocument()
+    })
+  })
+
+  describe('Links', () => {
+    it('should render GitHub link with correct href', () => {
+      const { container } = render(<Footer />)
+      const githubLink = container.querySelector('a[href="https://github.com/langgenius/dify"]')
+      expect(githubLink).toBeInTheDocument()
+    })
+
+    it('should render Discord link with correct href', () => {
+      const { container } = render(<Footer />)
+      const discordLink = container.querySelector('a[href="https://discord.gg/FngNHpbcY7"]')
+      expect(discordLink).toBeInTheDocument()
+    })
+
+    it('should render Forum link with correct href', () => {
+      const { container } = render(<Footer />)
+      const forumLink = container.querySelector('a[href="https://forum.dify.ai"]')
+      expect(forumLink).toBeInTheDocument()
+    })
+
+    it('should have 3 community links', () => {
+      render(<Footer />)
+      const links = screen.getAllByRole('link')
+      expect(links).toHaveLength(3)
+    })
+
+    it('should open links in new tab', () => {
+      render(<Footer />)
+      const links = screen.getAllByRole('link')
+      links.forEach((link) => {
+        expect(link).toHaveAttribute('target', '_blank')
+        expect(link).toHaveAttribute('rel', 'noopener noreferrer')
+      })
+    })
+  })
+
+  describe('Styling', () => {
+    it('should have correct footer styling', () => {
+      render(<Footer />)
+      const footer = screen.getByRole('contentinfo')
+      expect(footer).toHaveClass('relative', 'shrink-0', 'grow-0')
+    })
+
+    it('should have gradient text styling on heading', () => {
+      render(<Footer />)
+      const heading = screen.getByText('app.join')
+      expect(heading).toHaveClass('text-gradient')
+    })
+  })
+
+  describe('Icons', () => {
+    it('should render icons within links', () => {
+      const { container } = render(<Footer />)
+      const svgElements = container.querySelectorAll('svg')
+      expect(svgElements.length).toBeGreaterThanOrEqual(3)
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle multiple renders without issues', () => {
+      const { rerender } = render(<Footer />)
+      expect(screen.getByRole('contentinfo')).toBeInTheDocument()
+
+      rerender(<Footer />)
+      expect(screen.getByRole('contentinfo')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/apps/hooks/use-apps-query-state.spec.ts b/web/app/components/apps/hooks/use-apps-query-state.spec.ts
new file mode 100644
index 0000000000..73386e5029
--- /dev/null
+++ b/web/app/components/apps/hooks/use-apps-query-state.spec.ts
@@ -0,0 +1,363 @@
+/**
+ * Test suite for useAppsQueryState hook
+ *
+ * This hook manages app filtering state through URL search parameters, enabling:
+ * - Bookmarkable filter states (users can share URLs with specific filters active)
+ * - Browser history integration (back/forward buttons work with filters)
+ * - Multiple filter types: tagIDs, keywords, isCreatedByMe
+ *
+ * The hook syncs local filter state with URL search parameters, making filter
+ * navigation persistent and shareable across sessions.
+ */
+import { act, renderHook } from '@testing-library/react'
+
+// Mock Next.js navigation hooks
+const mockPush = jest.fn()
+const mockPathname = '/apps'
+let mockSearchParams = new URLSearchParams()
+
+jest.mock('next/navigation', () => ({
+  usePathname: jest.fn(() => mockPathname),
+  useRouter: jest.fn(() => ({
+    push: mockPush,
+  })),
+  useSearchParams: jest.fn(() => mockSearchParams),
+}))
+
+// Import the hook after mocks are set up
+import useAppsQueryState from './use-apps-query-state'
+
+describe('useAppsQueryState', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockSearchParams = new URLSearchParams()
+  })
+
+  describe('Basic functionality', () => {
+    it('should return query object and setQuery function', () => {
+      const { result } = renderHook(() => useAppsQueryState())
+
+      expect(result.current.query).toBeDefined()
+      expect(typeof result.current.setQuery).toBe('function')
+    })
+
+    it('should initialize with empty query when no search params exist', () => {
+      const { result } = renderHook(() => useAppsQueryState())
+
+      expect(result.current.query.tagIDs).toBeUndefined()
+      expect(result.current.query.keywords).toBeUndefined()
+      expect(result.current.query.isCreatedByMe).toBe(false)
+    })
+  })
+
+  describe('Parsing search params', () => {
+    it('should parse tagIDs from URL', () => {
+      mockSearchParams.set('tagIDs', 'tag1;tag2;tag3')
+
+      const { result } = renderHook(() => useAppsQueryState())
+
+      expect(result.current.query.tagIDs).toEqual(['tag1', 'tag2', 'tag3'])
+    })
+
+    it('should parse single tagID from URL', () => {
+      mockSearchParams.set('tagIDs', 'single-tag')
+
+      const { result } = renderHook(() => useAppsQueryState())
+
+      expect(result.current.query.tagIDs).toEqual(['single-tag'])
+    })
+
+    it('should parse keywords from URL', () => {
+      mockSearchParams.set('keywords', 'search term')
+
+      const { result } = renderHook(() => useAppsQueryState())
+
+      expect(result.current.query.keywords).toBe('search term')
+    })
+
+    it('should parse isCreatedByMe as true from URL', () => {
+      mockSearchParams.set('isCreatedByMe', 'true')
+
+      const { result } = renderHook(() => useAppsQueryState())
+
+      expect(result.current.query.isCreatedByMe).toBe(true)
+    })
+
+    it('should parse isCreatedByMe as false for other values', () => {
+      mockSearchParams.set('isCreatedByMe', 'false')
+
+      const { result } = renderHook(() => useAppsQueryState())
+
+      expect(result.current.query.isCreatedByMe).toBe(false)
+    })
+
+    it('should parse all params together', () => {
+      mockSearchParams.set('tagIDs', 'tag1;tag2')
+      mockSearchParams.set('keywords', 'test')
+      mockSearchParams.set('isCreatedByMe', 'true')
+
+      const { result } = renderHook(() => useAppsQueryState())
+
+      expect(result.current.query.tagIDs).toEqual(['tag1', 'tag2'])
+      expect(result.current.query.keywords).toBe('test')
+      expect(result.current.query.isCreatedByMe).toBe(true)
+    })
+  })
+
+  describe('Updating query state', () => {
+    it('should update keywords via setQuery', () => {
+      const { result } = renderHook(() => useAppsQueryState())
+
+      act(() => {
+        result.current.setQuery({ keywords: 'new search' })
+      })
+
+      expect(result.current.query.keywords).toBe('new search')
+    })
+
+    it('should update tagIDs via setQuery', () => {
+      const { result } = renderHook(() => useAppsQueryState())
+
+      act(() => {
+        result.current.setQuery({ tagIDs: ['tag1', 'tag2'] })
+      })
+
+      expect(result.current.query.tagIDs).toEqual(['tag1', 'tag2'])
+    })
+
+    it('should update isCreatedByMe via setQuery', () => {
+      const { result } = renderHook(() => useAppsQueryState())
+
+      act(() => {
+        result.current.setQuery({ isCreatedByMe: true })
+      })
+
+      expect(result.current.query.isCreatedByMe).toBe(true)
+    })
+
+    it('should support partial updates via callback', () => {
+      const { result } = renderHook(() => useAppsQueryState())
+
+      act(() => {
+        result.current.setQuery({ keywords: 'initial' })
+      })
+
+      act(() => {
+        result.current.setQuery(prev => ({ ...prev, isCreatedByMe: true }))
+      })
+
+      expect(result.current.query.keywords).toBe('initial')
+      expect(result.current.query.isCreatedByMe).toBe(true)
+    })
+  })
+
+  describe('URL synchronization', () => {
+    it('should sync keywords to URL', async () => {
+      const { result } = renderHook(() => useAppsQueryState())
+
+      act(() => {
+        result.current.setQuery({ keywords: 'search' })
+      })
+
+      // Wait for useEffect to run
+      await act(async () => {
+        await new Promise(resolve => setTimeout(resolve, 0))
+      })
+
+      expect(mockPush).toHaveBeenCalledWith(
+        expect.stringContaining('keywords=search'),
+        { scroll: false },
+      )
+    })
+
+    it('should sync tagIDs to URL with semicolon separator', async () => {
+      const { result } = renderHook(() => useAppsQueryState())
+
+      act(() => {
+        result.current.setQuery({ tagIDs: ['tag1', 'tag2'] })
+      })
+
+      await act(async () => {
+        await new Promise(resolve => setTimeout(resolve, 0))
+      })
+
+      expect(mockPush).toHaveBeenCalledWith(
+        expect.stringContaining('tagIDs=tag1%3Btag2'),
+        { scroll: false },
+      )
+    })
+
+    it('should sync isCreatedByMe to URL', async () => {
+      const { result } = renderHook(() => useAppsQueryState())
+
+      act(() => {
+        result.current.setQuery({ isCreatedByMe: true })
+      })
+
+      await act(async () => {
+        await new Promise(resolve => setTimeout(resolve, 0))
+      })
+
+      expect(mockPush).toHaveBeenCalledWith(
+        expect.stringContaining('isCreatedByMe=true'),
+        { scroll: false },
+      )
+    })
+
+    it('should remove keywords from URL when empty', async () => {
+      mockSearchParams.set('keywords', 'existing')
+
+      const { result } = renderHook(() => useAppsQueryState())
+
+      act(() => {
+        result.current.setQuery({ keywords: '' })
+      })
+
+      await act(async () => {
+        await new Promise(resolve => setTimeout(resolve, 0))
+      })
+
+      // Should be called without keywords param
+      expect(mockPush).toHaveBeenCalled()
+    })
+
+    it('should remove tagIDs from URL when empty array', async () => {
+      mockSearchParams.set('tagIDs', 'tag1;tag2')
+
+      const { result } = renderHook(() => useAppsQueryState())
+
+      act(() => {
+        result.current.setQuery({ tagIDs: [] })
+      })
+
+      await act(async () => {
+        await new Promise(resolve => setTimeout(resolve, 0))
+      })
+
+      expect(mockPush).toHaveBeenCalled()
+    })
+
+    it('should remove isCreatedByMe from URL when false', async () => {
+      mockSearchParams.set('isCreatedByMe', 'true')
+
+      const { result } = renderHook(() => useAppsQueryState())
+
+      act(() => {
+        result.current.setQuery({ isCreatedByMe: false })
+      })
+
+      await act(async () => {
+        await new Promise(resolve => setTimeout(resolve, 0))
+      })
+
+      expect(mockPush).toHaveBeenCalled()
+    })
+  })
+
+  describe('Edge cases', () => {
+    it('should handle empty tagIDs string in URL', () => {
+      // NOTE: This test documents current behavior where ''.split(';') returns ['']
+      // This could potentially cause filtering issues as it's treated as a tag with empty name
+      // rather than absence of tags. Consider updating parseParams if this is problematic.
+      mockSearchParams.set('tagIDs', '')
+
+      const { result } = renderHook(() => useAppsQueryState())
+
+      expect(result.current.query.tagIDs).toEqual([''])
+    })
+
+    it('should handle empty keywords', () => {
+      mockSearchParams.set('keywords', '')
+
+      const { result } = renderHook(() => useAppsQueryState())
+
+      expect(result.current.query.keywords).toBeUndefined()
+    })
+
+    it('should handle undefined tagIDs', () => {
+      const { result } = renderHook(() => useAppsQueryState())
+
+      act(() => {
+        result.current.setQuery({ tagIDs: undefined })
+      })
+
+      expect(result.current.query.tagIDs).toBeUndefined()
+    })
+
+    it('should handle special characters in keywords', () => {
+      // Use URLSearchParams constructor to properly simulate URL decoding behavior
+      // URLSearchParams.get() decodes URL-encoded characters
+      mockSearchParams = new URLSearchParams('keywords=test%20with%20spaces')
+
+      const { result } = renderHook(() => useAppsQueryState())
+
+      expect(result.current.query.keywords).toBe('test with spaces')
+    })
+  })
+
+  describe('Memoization', () => {
+    it('should return memoized object reference when query unchanged', () => {
+      const { result, rerender } = renderHook(() => useAppsQueryState())
+
+      const firstResult = result.current
+      rerender()
+      const secondResult = result.current
+
+      expect(firstResult.query).toBe(secondResult.query)
+    })
+
+    it('should return new object reference when query changes', () => {
+      const { result } = renderHook(() => useAppsQueryState())
+
+      const firstQuery = result.current.query
+
+      act(() => {
+        result.current.setQuery({ keywords: 'changed' })
+      })
+
+      expect(result.current.query).not.toBe(firstQuery)
+    })
+  })
+
+  describe('Integration scenarios', () => {
+    it('should handle sequential updates', async () => {
+      const { result } = renderHook(() => useAppsQueryState())
+
+      act(() => {
+        result.current.setQuery({ keywords: 'first' })
+      })
+
+      act(() => {
+        result.current.setQuery(prev => ({ ...prev, tagIDs: ['tag1'] }))
+      })
+
+      act(() => {
+        result.current.setQuery(prev => ({ ...prev, isCreatedByMe: true }))
+      })
+
+      expect(result.current.query.keywords).toBe('first')
+      expect(result.current.query.tagIDs).toEqual(['tag1'])
+      expect(result.current.query.isCreatedByMe).toBe(true)
+    })
+
+    it('should clear all filters', () => {
+      mockSearchParams.set('tagIDs', 'tag1;tag2')
+      mockSearchParams.set('keywords', 'search')
+      mockSearchParams.set('isCreatedByMe', 'true')
+
+      const { result } = renderHook(() => useAppsQueryState())
+
+      act(() => {
+        result.current.setQuery({
+          tagIDs: undefined,
+          keywords: undefined,
+          isCreatedByMe: false,
+        })
+      })
+
+      expect(result.current.query.tagIDs).toBeUndefined()
+      expect(result.current.query.keywords).toBeUndefined()
+      expect(result.current.query.isCreatedByMe).toBe(false)
+    })
+  })
+})
diff --git a/web/app/components/apps/hooks/use-dsl-drag-drop.spec.ts b/web/app/components/apps/hooks/use-dsl-drag-drop.spec.ts
new file mode 100644
index 0000000000..ab04127b19
--- /dev/null
+++ b/web/app/components/apps/hooks/use-dsl-drag-drop.spec.ts
@@ -0,0 +1,493 @@
+/**
+ * Test suite for useDSLDragDrop hook
+ *
+ * This hook provides drag-and-drop functionality for DSL files, enabling:
+ * - File drag detection with visual feedback (dragging state)
+ * - YAML/YML file filtering (only accepts .yaml and .yml files)
+ * - Enable/disable toggle for conditional drag-and-drop
+ * - Cleanup on unmount (removes event listeners)
+ */
+import { act, renderHook } from '@testing-library/react'
+import { useDSLDragDrop } from './use-dsl-drag-drop'
+
+describe('useDSLDragDrop', () => {
+  let container: HTMLDivElement
+  let mockOnDSLFileDropped: jest.Mock
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    container = document.createElement('div')
+    document.body.appendChild(container)
+    mockOnDSLFileDropped = jest.fn()
+  })
+
+  afterEach(() => {
+    document.body.removeChild(container)
+  })
+
+  // Helper to create drag events
+  const createDragEvent = (type: string, files: File[] = []) => {
+    const dataTransfer = {
+      types: files.length > 0 ? ['Files'] : [],
+      files,
+    }
+
+    const event = new Event(type, { bubbles: true, cancelable: true }) as DragEvent
+    Object.defineProperty(event, 'dataTransfer', {
+      value: dataTransfer,
+      writable: false,
+    })
+    Object.defineProperty(event, 'preventDefault', {
+      value: jest.fn(),
+      writable: false,
+    })
+    Object.defineProperty(event, 'stopPropagation', {
+      value: jest.fn(),
+      writable: false,
+    })
+
+    return event
+  }
+
+  // Helper to create a mock file
+  const createMockFile = (name: string) => {
+    return new File(['content'], name, { type: 'application/x-yaml' })
+  }
+
+  describe('Basic functionality', () => {
+    it('should return dragging state', () => {
+      const containerRef = { current: container }
+      const { result } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      expect(result.current.dragging).toBe(false)
+    })
+
+    it('should initialize with dragging as false', () => {
+      const containerRef = { current: container }
+      const { result } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      expect(result.current.dragging).toBe(false)
+    })
+  })
+
+  describe('Drag events', () => {
+    it('should set dragging to true on dragenter with files', () => {
+      const containerRef = { current: container }
+      const { result } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      const file = createMockFile('test.yaml')
+      const event = createDragEvent('dragenter', [file])
+
+      act(() => {
+        container.dispatchEvent(event)
+      })
+
+      expect(result.current.dragging).toBe(true)
+    })
+
+    it('should not set dragging on dragenter without files', () => {
+      const containerRef = { current: container }
+      const { result } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      const event = createDragEvent('dragenter', [])
+
+      act(() => {
+        container.dispatchEvent(event)
+      })
+
+      expect(result.current.dragging).toBe(false)
+    })
+
+    it('should handle dragover event', () => {
+      const containerRef = { current: container }
+      renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      const event = createDragEvent('dragover')
+
+      act(() => {
+        container.dispatchEvent(event)
+      })
+
+      expect(event.preventDefault).toHaveBeenCalled()
+      expect(event.stopPropagation).toHaveBeenCalled()
+    })
+
+    it('should set dragging to false on dragleave when leaving container', () => {
+      const containerRef = { current: container }
+      const { result } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      // First, enter with files
+      const enterEvent = createDragEvent('dragenter', [createMockFile('test.yaml')])
+      act(() => {
+        container.dispatchEvent(enterEvent)
+      })
+      expect(result.current.dragging).toBe(true)
+
+      // Then leave with null relatedTarget (leaving container)
+      const leaveEvent = createDragEvent('dragleave')
+      Object.defineProperty(leaveEvent, 'relatedTarget', {
+        value: null,
+        writable: false,
+      })
+
+      act(() => {
+        container.dispatchEvent(leaveEvent)
+      })
+
+      expect(result.current.dragging).toBe(false)
+    })
+
+    it('should not set dragging to false on dragleave when within container', () => {
+      const containerRef = { current: container }
+      const childElement = document.createElement('div')
+      container.appendChild(childElement)
+
+      const { result } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      // First, enter with files
+      const enterEvent = createDragEvent('dragenter', [createMockFile('test.yaml')])
+      act(() => {
+        container.dispatchEvent(enterEvent)
+      })
+      expect(result.current.dragging).toBe(true)
+
+      // Then leave but to a child element
+      const leaveEvent = createDragEvent('dragleave')
+      Object.defineProperty(leaveEvent, 'relatedTarget', {
+        value: childElement,
+        writable: false,
+      })
+
+      act(() => {
+        container.dispatchEvent(leaveEvent)
+      })
+
+      expect(result.current.dragging).toBe(true)
+
+      container.removeChild(childElement)
+    })
+  })
+
+  describe('Drop functionality', () => {
+    it('should call onDSLFileDropped for .yaml file', () => {
+      const containerRef = { current: container }
+      renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      const file = createMockFile('test.yaml')
+      const dropEvent = createDragEvent('drop', [file])
+
+      act(() => {
+        container.dispatchEvent(dropEvent)
+      })
+
+      expect(mockOnDSLFileDropped).toHaveBeenCalledWith(file)
+    })
+
+    it('should call onDSLFileDropped for .yml file', () => {
+      const containerRef = { current: container }
+      renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      const file = createMockFile('test.yml')
+      const dropEvent = createDragEvent('drop', [file])
+
+      act(() => {
+        container.dispatchEvent(dropEvent)
+      })
+
+      expect(mockOnDSLFileDropped).toHaveBeenCalledWith(file)
+    })
+
+    it('should call onDSLFileDropped for uppercase .YAML file', () => {
+      const containerRef = { current: container }
+      renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      const file = createMockFile('test.YAML')
+      const dropEvent = createDragEvent('drop', [file])
+
+      act(() => {
+        container.dispatchEvent(dropEvent)
+      })
+
+      expect(mockOnDSLFileDropped).toHaveBeenCalledWith(file)
+    })
+
+    it('should not call onDSLFileDropped for non-yaml file', () => {
+      const containerRef = { current: container }
+      renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      const file = createMockFile('test.json')
+      const dropEvent = createDragEvent('drop', [file])
+
+      act(() => {
+        container.dispatchEvent(dropEvent)
+      })
+
+      expect(mockOnDSLFileDropped).not.toHaveBeenCalled()
+    })
+
+    it('should set dragging to false on drop', () => {
+      const containerRef = { current: container }
+      const { result } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      // First, enter with files
+      const enterEvent = createDragEvent('dragenter', [createMockFile('test.yaml')])
+      act(() => {
+        container.dispatchEvent(enterEvent)
+      })
+      expect(result.current.dragging).toBe(true)
+
+      // Then drop
+      const dropEvent = createDragEvent('drop', [createMockFile('test.yaml')])
+      act(() => {
+        container.dispatchEvent(dropEvent)
+      })
+
+      expect(result.current.dragging).toBe(false)
+    })
+
+    it('should handle drop with no dataTransfer', () => {
+      const containerRef = { current: container }
+      renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      const event = new Event('drop', { bubbles: true, cancelable: true }) as DragEvent
+      Object.defineProperty(event, 'dataTransfer', {
+        value: null,
+        writable: false,
+      })
+      Object.defineProperty(event, 'preventDefault', {
+        value: jest.fn(),
+        writable: false,
+      })
+      Object.defineProperty(event, 'stopPropagation', {
+        value: jest.fn(),
+        writable: false,
+      })
+
+      act(() => {
+        container.dispatchEvent(event)
+      })
+
+      expect(mockOnDSLFileDropped).not.toHaveBeenCalled()
+    })
+
+    it('should handle drop with empty files array', () => {
+      const containerRef = { current: container }
+      renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      const dropEvent = createDragEvent('drop', [])
+
+      act(() => {
+        container.dispatchEvent(dropEvent)
+      })
+
+      expect(mockOnDSLFileDropped).not.toHaveBeenCalled()
+    })
+
+    it('should only process the first file when multiple files are dropped', () => {
+      const containerRef = { current: container }
+      renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      const file1 = createMockFile('test1.yaml')
+      const file2 = createMockFile('test2.yaml')
+      const dropEvent = createDragEvent('drop', [file1, file2])
+
+      act(() => {
+        container.dispatchEvent(dropEvent)
+      })
+
+      expect(mockOnDSLFileDropped).toHaveBeenCalledTimes(1)
+      expect(mockOnDSLFileDropped).toHaveBeenCalledWith(file1)
+    })
+  })
+
+  describe('Enabled prop', () => {
+    it('should not add event listeners when enabled is false', () => {
+      const containerRef = { current: container }
+      const { result } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+          enabled: false,
+        }),
+      )
+
+      const file = createMockFile('test.yaml')
+      const enterEvent = createDragEvent('dragenter', [file])
+
+      act(() => {
+        container.dispatchEvent(enterEvent)
+      })
+
+      expect(result.current.dragging).toBe(false)
+    })
+
+    it('should return dragging as false when enabled is false even if state is true', () => {
+      const containerRef = { current: container }
+      const { result, rerender } = renderHook(
+        ({ enabled }) =>
+          useDSLDragDrop({
+            onDSLFileDropped: mockOnDSLFileDropped,
+            containerRef,
+            enabled,
+          }),
+        { initialProps: { enabled: true } },
+      )
+
+      // Set dragging state
+      const enterEvent = createDragEvent('dragenter', [createMockFile('test.yaml')])
+      act(() => {
+        container.dispatchEvent(enterEvent)
+      })
+      expect(result.current.dragging).toBe(true)
+
+      // Disable the hook
+      rerender({ enabled: false })
+      expect(result.current.dragging).toBe(false)
+    })
+
+    it('should default enabled to true', () => {
+      const containerRef = { current: container }
+      const { result } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      const enterEvent = createDragEvent('dragenter', [createMockFile('test.yaml')])
+
+      act(() => {
+        container.dispatchEvent(enterEvent)
+      })
+
+      expect(result.current.dragging).toBe(true)
+    })
+  })
+
+  describe('Cleanup', () => {
+    it('should remove event listeners on unmount', () => {
+      const containerRef = { current: container }
+      const removeEventListenerSpy = jest.spyOn(container, 'removeEventListener')
+
+      const { unmount } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      unmount()
+
+      expect(removeEventListenerSpy).toHaveBeenCalledWith('dragenter', expect.any(Function))
+      expect(removeEventListenerSpy).toHaveBeenCalledWith('dragover', expect.any(Function))
+      expect(removeEventListenerSpy).toHaveBeenCalledWith('dragleave', expect.any(Function))
+      expect(removeEventListenerSpy).toHaveBeenCalledWith('drop', expect.any(Function))
+
+      removeEventListenerSpy.mockRestore()
+    })
+  })
+
+  describe('Edge cases', () => {
+    it('should handle null containerRef', () => {
+      const containerRef = { current: null }
+      const { result } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      expect(result.current.dragging).toBe(false)
+    })
+
+    it('should handle containerRef changing to null', () => {
+      const containerRef = { current: container as HTMLDivElement | null }
+      const { result, rerender } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      containerRef.current = null
+      rerender()
+
+      expect(result.current.dragging).toBe(false)
+    })
+  })
+})
diff --git a/web/app/components/apps/index.spec.tsx b/web/app/components/apps/index.spec.tsx
new file mode 100644
index 0000000000..b5dafa5905
--- /dev/null
+++ b/web/app/components/apps/index.spec.tsx
@@ -0,0 +1,113 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+
+// Mock react-i18next - return key as per testing skills
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}))
+
+// Track mock calls
+let documentTitleCalls: string[] = []
+let educationInitCalls: number = 0
+
+// Mock useDocumentTitle hook
+jest.mock('@/hooks/use-document-title', () => ({
+  __esModule: true,
+  default: (title: string) => {
+    documentTitleCalls.push(title)
+  },
+}))
+
+// Mock useEducationInit hook
+jest.mock('@/app/education-apply/hooks', () => ({
+  useEducationInit: () => {
+    educationInitCalls++
+  },
+}))
+
+// Mock List component
+jest.mock('./list', () => ({
+  __esModule: true,
+  default: () => {
+    const React = require('react')
+    return React.createElement('div', { 'data-testid': 'apps-list' }, 'Apps List')
+  },
+}))
+
+// Import after mocks
+import Apps from './index'
+
+describe('Apps', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    documentTitleCalls = []
+    educationInitCalls = 0
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      render(<Apps />)
+      expect(screen.getByTestId('apps-list')).toBeInTheDocument()
+    })
+
+    it('should render List component', () => {
+      render(<Apps />)
+      expect(screen.getByText('Apps List')).toBeInTheDocument()
+    })
+
+    it('should have correct container structure', () => {
+      const { container } = render(<Apps />)
+      const wrapper = container.firstChild as HTMLElement
+      expect(wrapper).toHaveClass('relative', 'flex', 'h-0', 'shrink-0', 'grow', 'flex-col')
+    })
+  })
+
+  describe('Hooks', () => {
+    it('should call useDocumentTitle with correct title', () => {
+      render(<Apps />)
+      expect(documentTitleCalls).toContain('common.menus.apps')
+    })
+
+    it('should call useEducationInit', () => {
+      render(<Apps />)
+      expect(educationInitCalls).toBeGreaterThan(0)
+    })
+  })
+
+  describe('Integration', () => {
+    it('should render full component tree', () => {
+      render(<Apps />)
+
+      // Verify container exists
+      expect(screen.getByTestId('apps-list')).toBeInTheDocument()
+
+      // Verify hooks were called
+      expect(documentTitleCalls.length).toBeGreaterThanOrEqual(1)
+      expect(educationInitCalls).toBeGreaterThanOrEqual(1)
+    })
+
+    it('should handle multiple renders', () => {
+      const { rerender } = render(<Apps />)
+      expect(screen.getByTestId('apps-list')).toBeInTheDocument()
+
+      rerender(<Apps />)
+      expect(screen.getByTestId('apps-list')).toBeInTheDocument()
+    })
+  })
+
+  describe('Styling', () => {
+    it('should have overflow-y-auto class', () => {
+      const { container } = render(<Apps />)
+      const wrapper = container.firstChild as HTMLElement
+      expect(wrapper).toHaveClass('overflow-y-auto')
+    })
+
+    it('should have background styling', () => {
+      const { container } = render(<Apps />)
+      const wrapper = container.firstChild as HTMLElement
+      expect(wrapper).toHaveClass('bg-background-body')
+    })
+  })
+})
diff --git a/web/app/components/apps/list.spec.tsx b/web/app/components/apps/list.spec.tsx
new file mode 100644
index 0000000000..f470d84f80
--- /dev/null
+++ b/web/app/components/apps/list.spec.tsx
@@ -0,0 +1,580 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { AppModeEnum } from '@/types/app'
+
+// Mock react-i18next - return key as per testing skills
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}))
+
+// Mock next/navigation
+const mockReplace = jest.fn()
+const mockRouter = { replace: mockReplace }
+jest.mock('next/navigation', () => ({
+  useRouter: () => mockRouter,
+}))
+
+// Mock app context
+const mockIsCurrentWorkspaceEditor = jest.fn(() => true)
+const mockIsCurrentWorkspaceDatasetOperator = jest.fn(() => false)
+jest.mock('@/context/app-context', () => ({
+  useAppContext: () => ({
+    isCurrentWorkspaceEditor: mockIsCurrentWorkspaceEditor(),
+    isCurrentWorkspaceDatasetOperator: mockIsCurrentWorkspaceDatasetOperator(),
+  }),
+}))
+
+// Mock global public store
+jest.mock('@/context/global-public-context', () => ({
+  useGlobalPublicStore: () => ({
+    systemFeatures: {
+      branding: { enabled: false },
+    },
+  }),
+}))
+
+// Mock custom hooks
+const mockSetQuery = jest.fn()
+jest.mock('./hooks/use-apps-query-state', () => ({
+  __esModule: true,
+  default: () => ({
+    query: { tagIDs: [], keywords: '', isCreatedByMe: false },
+    setQuery: mockSetQuery,
+  }),
+}))
+
+jest.mock('./hooks/use-dsl-drag-drop', () => ({
+  useDSLDragDrop: () => ({
+    dragging: false,
+  }),
+}))
+
+const mockSetActiveTab = jest.fn()
+jest.mock('@/hooks/use-tab-searchparams', () => ({
+  useTabSearchParams: () => ['all', mockSetActiveTab],
+}))
+
+// Mock service hooks
+const mockRefetch = jest.fn()
+jest.mock('@/service/use-apps', () => ({
+  useInfiniteAppList: () => ({
+    data: {
+      pages: [{
+        data: [
+          {
+            id: 'app-1',
+            name: 'Test App 1',
+            description: 'Description 1',
+            mode: AppModeEnum.CHAT,
+            icon: '🤖',
+            icon_type: 'emoji',
+            icon_background: '#FFEAD5',
+            tags: [],
+            author_name: 'Author 1',
+            created_at: 1704067200,
+            updated_at: 1704153600,
+          },
+          {
+            id: 'app-2',
+            name: 'Test App 2',
+            description: 'Description 2',
+            mode: AppModeEnum.WORKFLOW,
+            icon: '⚙️',
+            icon_type: 'emoji',
+            icon_background: '#E4FBCC',
+            tags: [],
+            author_name: 'Author 2',
+            created_at: 1704067200,
+            updated_at: 1704153600,
+          },
+        ],
+        total: 2,
+      }],
+    },
+    isLoading: false,
+    isFetchingNextPage: false,
+    fetchNextPage: jest.fn(),
+    hasNextPage: false,
+    error: null,
+    refetch: mockRefetch,
+  }),
+}))
+
+// Mock tag store
+jest.mock('@/app/components/base/tag-management/store', () => ({
+  useStore: () => false,
+}))
+
+// Mock config
+jest.mock('@/config', () => ({
+  NEED_REFRESH_APP_LIST_KEY: 'needRefreshAppList',
+}))
+
+// Mock pay hook
+jest.mock('@/hooks/use-pay', () => ({
+  CheckModal: () => null,
+}))
+
+// Mock debounce hook
+jest.mock('ahooks', () => ({
+  useDebounceFn: (fn: () => void) => ({ run: fn }),
+}))
+
+// Mock dynamic imports
+jest.mock('next/dynamic', () => {
+  const React = require('react')
+  return (importFn: () => Promise<any>) => {
+    const fnString = importFn.toString()
+
+    if (fnString.includes('tag-management')) {
+      return function MockTagManagement() {
+        return React.createElement('div', { 'data-testid': 'tag-management-modal' })
+      }
+    }
+    if (fnString.includes('create-from-dsl-modal')) {
+      return function MockCreateFromDSLModal({ show, onClose }: any) {
+        if (!show) return null
+        return React.createElement('div', { 'data-testid': 'create-dsl-modal' },
+          React.createElement('button', { 'onClick': onClose, 'data-testid': 'close-dsl-modal' }, 'Close'),
+        )
+      }
+    }
+    return () => null
+  }
+})
+
+/**
+ * Mock child components for focused List component testing.
+ * These mocks isolate the List component's behavior from its children.
+ * Each child component (AppCard, NewAppCard, Empty, Footer) has its own dedicated tests.
+ */
+jest.mock('./app-card', () => ({
+  __esModule: true,
+  default: ({ app }: any) => {
+    const React = require('react')
+    return React.createElement('div', { 'data-testid': `app-card-${app.id}`, 'role': 'article' }, app.name)
+  },
+}))
+
+jest.mock('./new-app-card', () => {
+  const React = require('react')
+  return React.forwardRef((_props: any, _ref: any) => {
+    return React.createElement('div', { 'data-testid': 'new-app-card', 'role': 'button' }, 'New App Card')
+  })
+})
+
+jest.mock('./empty', () => ({
+  __esModule: true,
+  default: () => {
+    const React = require('react')
+    return React.createElement('div', { 'data-testid': 'empty-state', 'role': 'status' }, 'No apps found')
+  },
+}))
+
+jest.mock('./footer', () => ({
+  __esModule: true,
+  default: () => {
+    const React = require('react')
+    return React.createElement('footer', { 'data-testid': 'footer', 'role': 'contentinfo' }, 'Footer')
+  },
+}))
+
+/**
+ * Mock base components that have deep dependency chains or require controlled test behavior.
+ *
+ * Per frontend testing skills (mocking.md), we generally should NOT mock base components.
+ * However, the following require mocking due to:
+ * - Deep dependency chains importing ES modules (like ky) incompatible with Jest
+ * - Need for controlled interaction behavior in tests (onChange, onClear handlers)
+ * - Complex internal state that would make tests flaky
+ *
+ * These mocks preserve the component's props interface to test List's integration correctly.
+ */
+jest.mock('@/app/components/base/tab-slider-new', () => ({
+  __esModule: true,
+  default: ({ value, onChange, options }: any) => {
+    const React = require('react')
+    return React.createElement('div', { 'data-testid': 'tab-slider', 'role': 'tablist' },
+      options.map((opt: any) =>
+        React.createElement('button', {
+          'key': opt.value,
+          'data-testid': `tab-${opt.value}`,
+          'role': 'tab',
+          'aria-selected': value === opt.value,
+          'onClick': () => onChange(opt.value),
+        }, opt.text),
+      ),
+    )
+  },
+}))
+
+jest.mock('@/app/components/base/input', () => ({
+  __esModule: true,
+  default: ({ value, onChange, onClear }: any) => {
+    const React = require('react')
+    return React.createElement('div', { 'data-testid': 'search-input' },
+      React.createElement('input', {
+        'data-testid': 'search-input-field',
+        'role': 'searchbox',
+        'value': value || '',
+        onChange,
+      }),
+      React.createElement('button', {
+        'data-testid': 'clear-search',
+        'aria-label': 'Clear search',
+        'onClick': onClear,
+      }, 'Clear'),
+    )
+  },
+}))
+
+jest.mock('@/app/components/base/tag-management/filter', () => ({
+  __esModule: true,
+  default: ({ value, onChange }: any) => {
+    const React = require('react')
+    return React.createElement('div', { 'data-testid': 'tag-filter', 'role': 'listbox' },
+      React.createElement('button', {
+        'data-testid': 'add-tag-filter',
+        'onClick': () => onChange([...value, 'new-tag']),
+      }, 'Add Tag'),
+    )
+  },
+}))
+
+jest.mock('@/app/components/datasets/create/website/base/checkbox-with-label', () => ({
+  __esModule: true,
+  default: ({ label, isChecked, onChange }: any) => {
+    const React = require('react')
+    return React.createElement('label', { 'data-testid': 'created-by-me-checkbox' },
+      React.createElement('input', {
+        'type': 'checkbox',
+        'role': 'checkbox',
+        'checked': isChecked,
+        'aria-checked': isChecked,
+        onChange,
+        'data-testid': 'created-by-me-input',
+      }),
+      label,
+    )
+  },
+}))
+
+// Import after mocks
+import List from './list'
+
+describe('List', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockIsCurrentWorkspaceEditor.mockReturnValue(true)
+    mockIsCurrentWorkspaceDatasetOperator.mockReturnValue(false)
+    localStorage.clear()
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      render(<List />)
+      expect(screen.getByTestId('tab-slider')).toBeInTheDocument()
+    })
+
+    it('should render tab slider with all app types', () => {
+      render(<List />)
+
+      expect(screen.getByTestId('tab-all')).toBeInTheDocument()
+      expect(screen.getByTestId(`tab-${AppModeEnum.WORKFLOW}`)).toBeInTheDocument()
+      expect(screen.getByTestId(`tab-${AppModeEnum.ADVANCED_CHAT}`)).toBeInTheDocument()
+      expect(screen.getByTestId(`tab-${AppModeEnum.CHAT}`)).toBeInTheDocument()
+      expect(screen.getByTestId(`tab-${AppModeEnum.AGENT_CHAT}`)).toBeInTheDocument()
+      expect(screen.getByTestId(`tab-${AppModeEnum.COMPLETION}`)).toBeInTheDocument()
+    })
+
+    it('should render search input', () => {
+      render(<List />)
+      expect(screen.getByTestId('search-input')).toBeInTheDocument()
+    })
+
+    it('should render tag filter', () => {
+      render(<List />)
+      expect(screen.getByTestId('tag-filter')).toBeInTheDocument()
+    })
+
+    it('should render created by me checkbox', () => {
+      render(<List />)
+      expect(screen.getByTestId('created-by-me-checkbox')).toBeInTheDocument()
+    })
+
+    it('should render app cards when apps exist', () => {
+      render(<List />)
+
+      expect(screen.getByTestId('app-card-app-1')).toBeInTheDocument()
+      expect(screen.getByTestId('app-card-app-2')).toBeInTheDocument()
+    })
+
+    it('should render new app card for editors', () => {
+      render(<List />)
+      expect(screen.getByTestId('new-app-card')).toBeInTheDocument()
+    })
+
+    it('should render footer when branding is disabled', () => {
+      render(<List />)
+      expect(screen.getByTestId('footer')).toBeInTheDocument()
+    })
+
+    it('should render drop DSL hint for editors', () => {
+      render(<List />)
+      expect(screen.getByText('app.newApp.dropDSLToCreateApp')).toBeInTheDocument()
+    })
+  })
+
+  describe('Tab Navigation', () => {
+    it('should call setActiveTab when tab is clicked', () => {
+      render(<List />)
+
+      fireEvent.click(screen.getByTestId(`tab-${AppModeEnum.WORKFLOW}`))
+
+      expect(mockSetActiveTab).toHaveBeenCalledWith(AppModeEnum.WORKFLOW)
+    })
+
+    it('should call setActiveTab for all tab', () => {
+      render(<List />)
+
+      fireEvent.click(screen.getByTestId('tab-all'))
+
+      expect(mockSetActiveTab).toHaveBeenCalledWith('all')
+    })
+  })
+
+  describe('Search Functionality', () => {
+    it('should render search input field', () => {
+      render(<List />)
+      expect(screen.getByTestId('search-input-field')).toBeInTheDocument()
+    })
+
+    it('should handle search input change', () => {
+      render(<List />)
+
+      const input = screen.getByTestId('search-input-field')
+      fireEvent.change(input, { target: { value: 'test search' } })
+
+      expect(mockSetQuery).toHaveBeenCalled()
+    })
+
+    it('should clear search when clear button is clicked', () => {
+      render(<List />)
+
+      fireEvent.click(screen.getByTestId('clear-search'))
+
+      expect(mockSetQuery).toHaveBeenCalled()
+    })
+  })
+
+  describe('Tag Filter', () => {
+    it('should render tag filter component', () => {
+      render(<List />)
+      expect(screen.getByTestId('tag-filter')).toBeInTheDocument()
+    })
+
+    it('should handle tag filter change', () => {
+      render(<List />)
+
+      fireEvent.click(screen.getByTestId('add-tag-filter'))
+
+      // Tag filter change triggers debounced setTagIDs
+      expect(screen.getByTestId('tag-filter')).toBeInTheDocument()
+    })
+  })
+
+  describe('Created By Me Filter', () => {
+    it('should render checkbox with correct label', () => {
+      render(<List />)
+      expect(screen.getByText('app.showMyCreatedAppsOnly')).toBeInTheDocument()
+    })
+
+    it('should handle checkbox change', () => {
+      render(<List />)
+
+      const checkbox = screen.getByTestId('created-by-me-input')
+      fireEvent.click(checkbox)
+
+      expect(mockSetQuery).toHaveBeenCalled()
+    })
+  })
+
+  describe('Non-Editor User', () => {
+    it('should not render new app card for non-editors', () => {
+      mockIsCurrentWorkspaceEditor.mockReturnValue(false)
+
+      render(<List />)
+
+      expect(screen.queryByTestId('new-app-card')).not.toBeInTheDocument()
+    })
+
+    it('should not render drop DSL hint for non-editors', () => {
+      mockIsCurrentWorkspaceEditor.mockReturnValue(false)
+
+      render(<List />)
+
+      expect(screen.queryByText(/drop dsl file to create app/i)).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Dataset Operator Redirect', () => {
+    it('should redirect dataset operators to datasets page', () => {
+      mockIsCurrentWorkspaceDatasetOperator.mockReturnValue(true)
+
+      render(<List />)
+
+      expect(mockReplace).toHaveBeenCalledWith('/datasets')
+    })
+  })
+
+  describe('Local Storage Refresh', () => {
+    it('should call refetch when refresh key is set in localStorage', () => {
+      localStorage.setItem('needRefreshAppList', '1')
+
+      render(<List />)
+
+      expect(mockRefetch).toHaveBeenCalled()
+      expect(localStorage.getItem('needRefreshAppList')).toBeNull()
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle multiple renders without issues', () => {
+      const { rerender } = render(<List />)
+      expect(screen.getByTestId('tab-slider')).toBeInTheDocument()
+
+      rerender(<List />)
+      expect(screen.getByTestId('tab-slider')).toBeInTheDocument()
+    })
+
+    it('should render app cards correctly', () => {
+      render(<List />)
+
+      expect(screen.getByText('Test App 1')).toBeInTheDocument()
+      expect(screen.getByText('Test App 2')).toBeInTheDocument()
+    })
+
+    it('should render with all filter options visible', () => {
+      render(<List />)
+
+      expect(screen.getByTestId('search-input')).toBeInTheDocument()
+      expect(screen.getByTestId('tag-filter')).toBeInTheDocument()
+      expect(screen.getByTestId('created-by-me-checkbox')).toBeInTheDocument()
+    })
+  })
+
+  describe('Dragging State', () => {
+    it('should show drop hint when DSL feature is enabled for editors', () => {
+      render(<List />)
+      expect(screen.getByText('app.newApp.dropDSLToCreateApp')).toBeInTheDocument()
+    })
+  })
+
+  describe('App Type Tabs', () => {
+    it('should render all app type tabs', () => {
+      render(<List />)
+
+      expect(screen.getByTestId('tab-all')).toBeInTheDocument()
+      expect(screen.getByTestId(`tab-${AppModeEnum.WORKFLOW}`)).toBeInTheDocument()
+      expect(screen.getByTestId(`tab-${AppModeEnum.ADVANCED_CHAT}`)).toBeInTheDocument()
+      expect(screen.getByTestId(`tab-${AppModeEnum.CHAT}`)).toBeInTheDocument()
+      expect(screen.getByTestId(`tab-${AppModeEnum.AGENT_CHAT}`)).toBeInTheDocument()
+      expect(screen.getByTestId(`tab-${AppModeEnum.COMPLETION}`)).toBeInTheDocument()
+    })
+
+    it('should call setActiveTab for each app type', () => {
+      render(<List />)
+
+      const appModes = [
+        AppModeEnum.WORKFLOW,
+        AppModeEnum.ADVANCED_CHAT,
+        AppModeEnum.CHAT,
+        AppModeEnum.AGENT_CHAT,
+        AppModeEnum.COMPLETION,
+      ]
+
+      appModes.forEach((mode) => {
+        fireEvent.click(screen.getByTestId(`tab-${mode}`))
+        expect(mockSetActiveTab).toHaveBeenCalledWith(mode)
+      })
+    })
+  })
+
+  describe('Search and Filter Integration', () => {
+    it('should display search input with correct attributes', () => {
+      render(<List />)
+
+      const input = screen.getByTestId('search-input-field')
+      expect(input).toBeInTheDocument()
+      expect(input).toHaveAttribute('value', '')
+    })
+
+    it('should have tag filter component', () => {
+      render(<List />)
+
+      const tagFilter = screen.getByTestId('tag-filter')
+      expect(tagFilter).toBeInTheDocument()
+    })
+
+    it('should display created by me label', () => {
+      render(<List />)
+
+      expect(screen.getByText('app.showMyCreatedAppsOnly')).toBeInTheDocument()
+    })
+  })
+
+  describe('App List Display', () => {
+    it('should display all app cards from data', () => {
+      render(<List />)
+
+      expect(screen.getByTestId('app-card-app-1')).toBeInTheDocument()
+      expect(screen.getByTestId('app-card-app-2')).toBeInTheDocument()
+    })
+
+    it('should display app names correctly', () => {
+      render(<List />)
+
+      expect(screen.getByText('Test App 1')).toBeInTheDocument()
+      expect(screen.getByText('Test App 2')).toBeInTheDocument()
+    })
+  })
+
+  describe('Footer Visibility', () => {
+    it('should render footer when branding is disabled', () => {
+      render(<List />)
+
+      expect(screen.getByTestId('footer')).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Additional Coverage Tests
+  // --------------------------------------------------------------------------
+  describe('Additional Coverage', () => {
+    it('should render dragging state overlay when dragging', () => {
+      // Test dragging state is handled
+      const { container } = render(<List />)
+
+      // Component should render successfully
+      expect(container).toBeInTheDocument()
+    })
+
+    it('should handle app mode filter in query params', () => {
+      // Test that different modes are handled in query
+      render(<List />)
+
+      const workflowTab = screen.getByTestId(`tab-${AppModeEnum.WORKFLOW}`)
+      fireEvent.click(workflowTab)
+
+      expect(mockSetActiveTab).toHaveBeenCalledWith(AppModeEnum.WORKFLOW)
+    })
+
+    it('should render new app card for editors', () => {
+      render(<List />)
+
+      expect(screen.getByTestId('new-app-card')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/apps/new-app-card.spec.tsx b/web/app/components/apps/new-app-card.spec.tsx
new file mode 100644
index 0000000000..fd75287f76
--- /dev/null
+++ b/web/app/components/apps/new-app-card.spec.tsx
@@ -0,0 +1,294 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+
+// Mock react-i18next - return key as per testing skills
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}))
+
+// Mock next/navigation
+const mockReplace = jest.fn()
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({
+    replace: mockReplace,
+  }),
+  useSearchParams: () => new URLSearchParams(),
+}))
+
+// Mock provider context
+const mockOnPlanInfoChanged = jest.fn()
+jest.mock('@/context/provider-context', () => ({
+  useProviderContext: () => ({
+    onPlanInfoChanged: mockOnPlanInfoChanged,
+  }),
+}))
+
+// Mock next/dynamic to immediately resolve components
+jest.mock('next/dynamic', () => {
+  const React = require('react')
+  return (importFn: () => Promise<any>) => {
+    const fnString = importFn.toString()
+
+    if (fnString.includes('create-app-modal') && !fnString.includes('create-from-dsl-modal')) {
+      return function MockCreateAppModal({ show, onClose, onSuccess, onCreateFromTemplate }: any) {
+        if (!show) return null
+        return React.createElement('div', { 'data-testid': 'create-app-modal' },
+          React.createElement('button', { 'onClick': onClose, 'data-testid': 'close-create-modal' }, 'Close'),
+          React.createElement('button', { 'onClick': onSuccess, 'data-testid': 'success-create-modal' }, 'Success'),
+          React.createElement('button', { 'onClick': onCreateFromTemplate, 'data-testid': 'to-template-modal' }, 'To Template'),
+        )
+      }
+    }
+    if (fnString.includes('create-app-dialog')) {
+      return function MockCreateAppTemplateDialog({ show, onClose, onSuccess, onCreateFromBlank }: any) {
+        if (!show) return null
+        return React.createElement('div', { 'data-testid': 'create-template-dialog' },
+          React.createElement('button', { 'onClick': onClose, 'data-testid': 'close-template-dialog' }, 'Close'),
+          React.createElement('button', { 'onClick': onSuccess, 'data-testid': 'success-template-dialog' }, 'Success'),
+          React.createElement('button', { 'onClick': onCreateFromBlank, 'data-testid': 'to-blank-modal' }, 'To Blank'),
+        )
+      }
+    }
+    if (fnString.includes('create-from-dsl-modal')) {
+      return function MockCreateFromDSLModal({ show, onClose, onSuccess }: any) {
+        if (!show) return null
+        return React.createElement('div', { 'data-testid': 'create-dsl-modal' },
+          React.createElement('button', { 'onClick': onClose, 'data-testid': 'close-dsl-modal' }, 'Close'),
+          React.createElement('button', { 'onClick': onSuccess, 'data-testid': 'success-dsl-modal' }, 'Success'),
+        )
+      }
+    }
+    return () => null
+  }
+})
+
+// Mock CreateFromDSLModalTab enum
+jest.mock('@/app/components/app/create-from-dsl-modal', () => ({
+  CreateFromDSLModalTab: {
+    FROM_URL: 'from-url',
+  },
+}))
+
+// Import after mocks
+import CreateAppCard from './new-app-card'
+
+describe('CreateAppCard', () => {
+  const defaultRef = { current: null } as React.RefObject<HTMLDivElement | null>
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      render(<CreateAppCard ref={defaultRef} />)
+      // Use pattern matching for resilient text assertions
+      expect(screen.getByText('app.createApp')).toBeInTheDocument()
+    })
+
+    it('should render three create buttons', () => {
+      render(<CreateAppCard ref={defaultRef} />)
+
+      expect(screen.getByText('app.newApp.startFromBlank')).toBeInTheDocument()
+      expect(screen.getByText('app.newApp.startFromTemplate')).toBeInTheDocument()
+      expect(screen.getByText('app.importDSL')).toBeInTheDocument()
+    })
+
+    it('should render all buttons as clickable', () => {
+      render(<CreateAppCard ref={defaultRef} />)
+
+      const buttons = screen.getAllByRole('button')
+      expect(buttons).toHaveLength(3)
+      buttons.forEach((button) => {
+        expect(button).not.toBeDisabled()
+      })
+    })
+  })
+
+  describe('Props', () => {
+    it('should apply custom className', () => {
+      const { container } = render(
+        <CreateAppCard ref={defaultRef} className="custom-class" />,
+      )
+      const card = container.firstChild as HTMLElement
+      expect(card).toHaveClass('custom-class')
+    })
+
+    it('should render with selectedAppType prop', () => {
+      render(<CreateAppCard ref={defaultRef} selectedAppType="chat" />)
+      expect(screen.getByText('app.createApp')).toBeInTheDocument()
+    })
+  })
+
+  describe('User Interactions - Create App Modal', () => {
+    it('should open create app modal when clicking Start from Blank', () => {
+      render(<CreateAppCard ref={defaultRef} />)
+
+      fireEvent.click(screen.getByText('app.newApp.startFromBlank'))
+
+      expect(screen.getByTestId('create-app-modal')).toBeInTheDocument()
+    })
+
+    it('should close create app modal when clicking close button', () => {
+      render(<CreateAppCard ref={defaultRef} />)
+
+      fireEvent.click(screen.getByText('app.newApp.startFromBlank'))
+      expect(screen.getByTestId('create-app-modal')).toBeInTheDocument()
+
+      fireEvent.click(screen.getByTestId('close-create-modal'))
+      expect(screen.queryByTestId('create-app-modal')).not.toBeInTheDocument()
+    })
+
+    it('should call onSuccess and onPlanInfoChanged on create app success', () => {
+      const mockOnSuccess = jest.fn()
+      render(<CreateAppCard ref={defaultRef} onSuccess={mockOnSuccess} />)
+
+      fireEvent.click(screen.getByText('app.newApp.startFromBlank'))
+      fireEvent.click(screen.getByTestId('success-create-modal'))
+
+      expect(mockOnPlanInfoChanged).toHaveBeenCalled()
+      expect(mockOnSuccess).toHaveBeenCalled()
+    })
+
+    it('should switch from create modal to template dialog', () => {
+      render(<CreateAppCard ref={defaultRef} />)
+
+      fireEvent.click(screen.getByText('app.newApp.startFromBlank'))
+      expect(screen.getByTestId('create-app-modal')).toBeInTheDocument()
+
+      fireEvent.click(screen.getByTestId('to-template-modal'))
+
+      expect(screen.queryByTestId('create-app-modal')).not.toBeInTheDocument()
+      expect(screen.getByTestId('create-template-dialog')).toBeInTheDocument()
+    })
+  })
+
+  describe('User Interactions - Template Dialog', () => {
+    it('should open template dialog when clicking Start from Template', () => {
+      render(<CreateAppCard ref={defaultRef} />)
+
+      fireEvent.click(screen.getByText('app.newApp.startFromTemplate'))
+
+      expect(screen.getByTestId('create-template-dialog')).toBeInTheDocument()
+    })
+
+    it('should close template dialog when clicking close button', () => {
+      render(<CreateAppCard ref={defaultRef} />)
+
+      fireEvent.click(screen.getByText('app.newApp.startFromTemplate'))
+      expect(screen.getByTestId('create-template-dialog')).toBeInTheDocument()
+
+      fireEvent.click(screen.getByTestId('close-template-dialog'))
+      expect(screen.queryByTestId('create-template-dialog')).not.toBeInTheDocument()
+    })
+
+    it('should call onSuccess and onPlanInfoChanged on template success', () => {
+      const mockOnSuccess = jest.fn()
+      render(<CreateAppCard ref={defaultRef} onSuccess={mockOnSuccess} />)
+
+      fireEvent.click(screen.getByText('app.newApp.startFromTemplate'))
+      fireEvent.click(screen.getByTestId('success-template-dialog'))
+
+      expect(mockOnPlanInfoChanged).toHaveBeenCalled()
+      expect(mockOnSuccess).toHaveBeenCalled()
+    })
+
+    it('should switch from template dialog to create modal', () => {
+      render(<CreateAppCard ref={defaultRef} />)
+
+      fireEvent.click(screen.getByText('app.newApp.startFromTemplate'))
+      expect(screen.getByTestId('create-template-dialog')).toBeInTheDocument()
+
+      fireEvent.click(screen.getByTestId('to-blank-modal'))
+
+      expect(screen.queryByTestId('create-template-dialog')).not.toBeInTheDocument()
+      expect(screen.getByTestId('create-app-modal')).toBeInTheDocument()
+    })
+  })
+
+  describe('User Interactions - DSL Import Modal', () => {
+    it('should open DSL modal when clicking Import DSL', () => {
+      render(<CreateAppCard ref={defaultRef} />)
+
+      fireEvent.click(screen.getByText('app.importDSL'))
+
+      expect(screen.getByTestId('create-dsl-modal')).toBeInTheDocument()
+    })
+
+    it('should close DSL modal when clicking close button', () => {
+      render(<CreateAppCard ref={defaultRef} />)
+
+      fireEvent.click(screen.getByText('app.importDSL'))
+      expect(screen.getByTestId('create-dsl-modal')).toBeInTheDocument()
+
+      fireEvent.click(screen.getByTestId('close-dsl-modal'))
+      expect(screen.queryByTestId('create-dsl-modal')).not.toBeInTheDocument()
+    })
+
+    it('should call onSuccess and onPlanInfoChanged on DSL import success', () => {
+      const mockOnSuccess = jest.fn()
+      render(<CreateAppCard ref={defaultRef} onSuccess={mockOnSuccess} />)
+
+      fireEvent.click(screen.getByText('app.importDSL'))
+      fireEvent.click(screen.getByTestId('success-dsl-modal'))
+
+      expect(mockOnPlanInfoChanged).toHaveBeenCalled()
+      expect(mockOnSuccess).toHaveBeenCalled()
+    })
+  })
+
+  describe('Styling', () => {
+    it('should have correct card container styling', () => {
+      const { container } = render(<CreateAppCard ref={defaultRef} />)
+      const card = container.firstChild as HTMLElement
+
+      expect(card).toHaveClass('h-[160px]', 'rounded-xl')
+    })
+
+    it('should have proper button styling', () => {
+      render(<CreateAppCard ref={defaultRef} />)
+
+      const buttons = screen.getAllByRole('button')
+      buttons.forEach((button) => {
+        expect(button).toHaveClass('cursor-pointer')
+      })
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle multiple modal opens/closes', () => {
+      render(<CreateAppCard ref={defaultRef} />)
+
+      // Open and close create modal
+      fireEvent.click(screen.getByText('app.newApp.startFromBlank'))
+      fireEvent.click(screen.getByTestId('close-create-modal'))
+
+      // Open and close template dialog
+      fireEvent.click(screen.getByText('app.newApp.startFromTemplate'))
+      fireEvent.click(screen.getByTestId('close-template-dialog'))
+
+      // Open and close DSL modal
+      fireEvent.click(screen.getByText('app.importDSL'))
+      fireEvent.click(screen.getByTestId('close-dsl-modal'))
+
+      // No modals should be visible
+      expect(screen.queryByTestId('create-app-modal')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('create-template-dialog')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('create-dsl-modal')).not.toBeInTheDocument()
+    })
+
+    it('should handle onSuccess not being provided', () => {
+      render(<CreateAppCard ref={defaultRef} />)
+
+      fireEvent.click(screen.getByText('app.newApp.startFromBlank'))
+      // This should not throw an error
+      expect(() => {
+        fireEvent.click(screen.getByTestId('success-create-modal'))
+      }).not.toThrow()
+
+      expect(mockOnPlanInfoChanged).toHaveBeenCalled()
+    })
+  })
+})