diff --git a/frontend/tests/components/agents/AgentTypeForm.test.tsx b/frontend/tests/components/agents/AgentTypeForm.test.tsx
index 3f8f34b..cab7240 100644
--- a/frontend/tests/components/agents/AgentTypeForm.test.tsx
+++ b/frontend/tests/components/agents/AgentTypeForm.test.tsx
@@ -575,4 +575,213 @@ describe('AgentTypeForm', () => {
       expect(screen.getByText('Edit Agent Type')).toBeInTheDocument();
     });
   });
+
+  describe('Category & Display Fields', () => {
+    it('renders category and display section', () => {
+      render(<AgentTypeForm {...defaultProps} />);
+      expect(screen.getByText('Category & Display')).toBeInTheDocument();
+    });
+
+    it('shows category select', () => {
+      render(<AgentTypeForm {...defaultProps} />);
+      expect(screen.getByLabelText(/category/i)).toBeInTheDocument();
+    });
+
+    it('shows sort order input', () => {
+      render(<AgentTypeForm {...defaultProps} />);
+      expect(screen.getByLabelText(/sort order/i)).toBeInTheDocument();
+    });
+
+    it('shows icon input', () => {
+      render(<AgentTypeForm {...defaultProps} />);
+      expect(screen.getByLabelText(/icon/i)).toBeInTheDocument();
+    });
+
+    it('shows color input', () => {
+      render(<AgentTypeForm {...defaultProps} />);
+      expect(screen.getByLabelText(/color/i)).toBeInTheDocument();
+    });
+
+    it('pre-fills category fields in edit mode', () => {
+      render(<AgentTypeForm {...defaultProps} agentType={mockAgentType} />);
+
+      const iconInput = screen.getByLabelText(/icon/i) as HTMLInputElement;
+      expect(iconInput.value).toBe('git-branch');
+
+      const sortOrderInput = screen.getByLabelText(/sort order/i) as HTMLInputElement;
+      expect(sortOrderInput.value).toBe('40');
+    });
+  });
+
+  describe('Typical Tasks Management', () => {
+    it('shows typical tasks section', () => {
+      render(<AgentTypeForm {...defaultProps} />);
+      expect(screen.getByText('Typical Tasks')).toBeInTheDocument();
+    });
+
+    it('adds typical task when add button is clicked', async () => {
+      const user = userEvent.setup();
+      render(<AgentTypeForm {...defaultProps} />);
+
+      const taskInput = screen.getByPlaceholderText(/e.g., design system architecture/i);
+      await user.type(taskInput, 'Write documentation');
+      // Click the second "Add" button (for typical tasks)
+      const addButtons = screen.getAllByRole('button', { name: /^add$/i });
+      await user.click(addButtons[1]);
+
+      expect(screen.getByText('Write documentation')).toBeInTheDocument();
+    });
+
+    it('adds typical task on enter key', async () => {
+      const user = userEvent.setup();
+      render(<AgentTypeForm {...defaultProps} />);
+
+      const taskInput = screen.getByPlaceholderText(/e.g., design system architecture/i);
+      await user.type(taskInput, 'Write documentation{Enter}');
+
+      expect(screen.getByText('Write documentation')).toBeInTheDocument();
+    });
+
+    it('removes typical task when X button is clicked', async () => {
+      const user = userEvent.setup();
+      render(<AgentTypeForm {...defaultProps} agentType={mockAgentType} />);
+
+      // Should have existing typical task
+      expect(screen.getByText('Design system architecture')).toBeInTheDocument();
+
+      // Click remove button
+      const removeButton = screen.getByRole('button', {
+        name: /remove design system architecture/i,
+      });
+      await user.click(removeButton);
+
+      expect(screen.queryByText('Design system architecture')).not.toBeInTheDocument();
+    });
+
+    it('does not add duplicate typical tasks', async () => {
+      const user = userEvent.setup();
+      render(<AgentTypeForm {...defaultProps} agentType={mockAgentType} />);
+
+      // Agent type already has 'Design system architecture'
+      const taskInput = screen.getByPlaceholderText(/e.g., design system architecture/i);
+      await user.type(taskInput, 'Design system architecture');
+      const addButtons = screen.getAllByRole('button', { name: /^add$/i });
+      await user.click(addButtons[1]);
+
+      // Should still only have one badge
+      const badges = screen.getAllByText('Design system architecture');
+      expect(badges).toHaveLength(1);
+    });
+
+    it('does not add empty typical task', async () => {
+      const user = userEvent.setup();
+      render(<AgentTypeForm {...defaultProps} />);
+
+      // Click the second "Add" button (for typical tasks) without typing
+      const addButtons = screen.getAllByRole('button', { name: /^add$/i });
+      await user.click(addButtons[1]);
+
+      // No badges should be added (check that there's no remove button for typical tasks)
+      expect(
+        screen.queryByRole('button', { name: /remove write documentation/i })
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Collaboration Hints Management', () => {
+    it('shows collaboration hints section', () => {
+      render(<AgentTypeForm {...defaultProps} />);
+      expect(screen.getByText('Collaboration Hints')).toBeInTheDocument();
+    });
+
+    it('adds collaboration hint when add button is clicked', async () => {
+      const user = userEvent.setup();
+      render(<AgentTypeForm {...defaultProps} />);
+
+      const hintInput = screen.getByPlaceholderText(/e.g., backend-engineer/i);
+      await user.type(hintInput, 'devops-engineer');
+      // Click the third "Add" button (for collaboration hints)
+      const addButtons = screen.getAllByRole('button', { name: /^add$/i });
+      await user.click(addButtons[2]);
+
+      expect(screen.getByText('devops-engineer')).toBeInTheDocument();
+    });
+
+    it('adds collaboration hint on enter key', async () => {
+      const user = userEvent.setup();
+      render(<AgentTypeForm {...defaultProps} />);
+
+      const hintInput = screen.getByPlaceholderText(/e.g., backend-engineer/i);
+      await user.type(hintInput, 'devops-engineer{Enter}');
+
+      expect(screen.getByText('devops-engineer')).toBeInTheDocument();
+    });
+
+    it('removes collaboration hint when X button is clicked', async () => {
+      const user = userEvent.setup();
+      render(<AgentTypeForm {...defaultProps} agentType={mockAgentType} />);
+
+      // Should have existing collaboration hint
+      expect(screen.getByText('backend-engineer')).toBeInTheDocument();
+
+      // Click remove button
+      const removeButton = screen.getByRole('button', { name: /remove backend-engineer/i });
+      await user.click(removeButton);
+
+      expect(screen.queryByText('backend-engineer')).not.toBeInTheDocument();
+    });
+
+    it('converts collaboration hints to lowercase', async () => {
+      const user = userEvent.setup();
+      render(<AgentTypeForm {...defaultProps} />);
+
+      const hintInput = screen.getByPlaceholderText(/e.g., backend-engineer/i);
+      await user.type(hintInput, 'DevOps-Engineer');
+      const addButtons = screen.getAllByRole('button', { name: /^add$/i });
+      await user.click(addButtons[2]);
+
+      expect(screen.getByText('devops-engineer')).toBeInTheDocument();
+    });
+
+    it('does not add duplicate collaboration hints', async () => {
+      const user = userEvent.setup();
+      render(<AgentTypeForm {...defaultProps} agentType={mockAgentType} />);
+
+      // Agent type already has 'backend-engineer'
+      const hintInput = screen.getByPlaceholderText(/e.g., backend-engineer/i);
+      await user.type(hintInput, 'backend-engineer');
+      const addButtons = screen.getAllByRole('button', { name: /^add$/i });
+      await user.click(addButtons[2]);
+
+      // Should still only have one badge
+      const badges = screen.getAllByText('backend-engineer');
+      expect(badges).toHaveLength(1);
+    });
+
+    it('does not add empty collaboration hint', async () => {
+      const user = userEvent.setup();
+      render(<AgentTypeForm {...defaultProps} />);
+
+      // Click the third "Add" button (for collaboration hints) without typing
+      const addButtons = screen.getAllByRole('button', { name: /^add$/i });
+      await user.click(addButtons[2]);
+
+      // No badges should be added
+      expect(
+        screen.queryByRole('button', { name: /remove devops-engineer/i })
+      ).not.toBeInTheDocument();
+    });
+
+    it('clears input after adding collaboration hint', async () => {
+      const user = userEvent.setup();
+      render(<AgentTypeForm {...defaultProps} />);
+
+      const hintInput = screen.getByPlaceholderText(/e.g., backend-engineer/i) as HTMLInputElement;
+      await user.type(hintInput, 'devops-engineer');
+      const addButtons = screen.getAllByRole('button', { name: /^add$/i });
+      await user.click(addButtons[2]);
+
+      expect(hintInput.value).toBe('');
+    });
+  });
 });