diff --git a/frontend/src/app/pages/Commands/hooks/useCommands.tsx b/frontend/src/app/pages/Commands/hooks/useCommands.tsx
index f9e1365d..07e932ac 100644
--- a/frontend/src/app/pages/Commands/hooks/useCommands.tsx
+++ b/frontend/src/app/pages/Commands/hooks/useCommands.tsx
@@ -5,7 +5,7 @@ import BuildOutlinedIcon from '@mui/icons-material/BuildOutlined';
 import ViewQuiltOutlinedIcon from '@mui/icons-material/ViewQuiltOutlined';
 import { useAppSelector, useAppDispatch } from '@/shared/hooks';
 import { LIST_BUILTIN_TOOLS, LIST_TOOLS } from '@/shared/backend-bridge/apps/tools';
-import { getToolGroupIcon } from '@/app/components/CommandPicker';
+import { getToolGroupIcon } from '@/app/pages/_shared/getToolGroupIcon';
 import { LIST_APPS } from '@/shared/backend-bridge/apps/app_builder';
 import { LIST_SKILLS } from '@/shared/backend-bridge/apps/skills';
 import { LIST_MODES } from '@/shared/state/modesSlice';
diff --git a/frontend/src/app/pages/Modes/ModeFormDialog.tsx b/frontend/src/app/pages/Modes/ModeFormDialog/ModeFormDialog.tsx
similarity index 97%
rename from frontend/src/app/pages/Modes/ModeFormDialog.tsx
rename to frontend/src/app/pages/Modes/ModeFormDialog/ModeFormDialog.tsx
index bd1b850a..ec2d02fa 100644
--- a/frontend/src/app/pages/Modes/ModeFormDialog.tsx
+++ b/frontend/src/app/pages/Modes/ModeFormDialog/ModeFormDialog.tsx
@@ -15,9 +15,9 @@ import Tooltip from '@mui/material/Tooltip';
 import FolderOpenIcon from '@mui/icons-material/FolderOpen';
 import RestoreIcon from '@mui/icons-material/Restore';
 import { Mode } from '@/shared/state/modesSlice';
-import RichPromptEditor from '@/app/components/RichPromptEditor';
-import { ModeForm, ICON_MAP, ICON_OPTIONS, COLOR_OPTIONS } from './modesConstants';
-import ToolsSelector from './ToolsSelector';
+import RichPromptEditor from './components/RichPromptEditor/RichPromptEditor';
+import { ModeForm, ICON_MAP, ICON_OPTIONS, COLOR_OPTIONS } from '@/app/pages/Modes/modesConstants';
+import ToolsSelector from './components/ToolsSelector';
 
 interface ModeFormDialogProps {
   open: boolean;
diff --git a/frontend/src/app/components/CommandPicker.tsx b/frontend/src/app/pages/Modes/ModeFormDialog/components/RichPromptEditor/CommandPicker/CommandPicker.tsx
similarity index 97%
rename from frontend/src/app/components/CommandPicker.tsx
rename to frontend/src/app/pages/Modes/ModeFormDialog/components/RichPromptEditor/CommandPicker/CommandPicker.tsx
index c6b15cb5..1b66a560 100644
--- a/frontend/src/app/components/CommandPicker.tsx
+++ b/frontend/src/app/pages/Modes/ModeFormDialog/components/RichPromptEditor/CommandPicker/CommandPicker.tsx
@@ -3,11 +3,8 @@ import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import Paper from '@mui/material/Paper';
 import { useClaudeTokens } from '@/shared/styles/ThemeContext';
-import { CommandPickerItem, CommandPickerProps, highlightMatch } from './commandPickerTypes';
-import { useCommandPickerItems } from './useCommandPickerItems';
-
-export { getToolGroupIcon } from './CommandPickerIcons';
-export type { CommandPickerItem } from './commandPickerTypes';
+import { CommandPickerItem, CommandPickerProps, highlightMatch } from './components/commandPickerTypes';
+import { useCommandPickerItems } from './components/useCommandPickerItems';
 
 const CommandPicker: React.FC<CommandPickerProps> = ({ trigger, filter, onSelect, onClose, visible }) => {
   const c = useClaudeTokens();
diff --git a/frontend/src/app/components/commandPickerTypes.tsx b/frontend/src/app/pages/Modes/ModeFormDialog/components/RichPromptEditor/CommandPicker/components/commandPickerTypes.tsx
similarity index 100%
rename from frontend/src/app/components/commandPickerTypes.tsx
rename to frontend/src/app/pages/Modes/ModeFormDialog/components/RichPromptEditor/CommandPicker/components/commandPickerTypes.tsx
diff --git a/frontend/src/app/components/useCommandPickerItems.tsx b/frontend/src/app/pages/Modes/ModeFormDialog/components/RichPromptEditor/CommandPicker/components/useCommandPickerItems.tsx
similarity index 99%
rename from frontend/src/app/components/useCommandPickerItems.tsx
rename to frontend/src/app/pages/Modes/ModeFormDialog/components/RichPromptEditor/CommandPicker/components/useCommandPickerItems.tsx
index 48735f0a..6c8767d6 100644
--- a/frontend/src/app/components/useCommandPickerItems.tsx
+++ b/frontend/src/app/pages/Modes/ModeFormDialog/components/RichPromptEditor/CommandPicker/components/useCommandPickerItems.tsx
@@ -9,7 +9,7 @@ import { useAppSelector, useAppDispatch } from '@/shared/hooks';
 import { LIST_BUILTIN_TOOLS, LIST_TOOLS } from '@/shared/backend-bridge/apps/tools';
 import { LIST_APPS } from '@/shared/backend-bridge/apps/app_builder';
 import { CommandPickerItem, MODE_ICON_MAP } from './commandPickerTypes';
-import { getToolGroupIcon } from './CommandPickerIcons';
+import { getToolGroupIcon } from '@/app/pages/_shared/getToolGroupIcon';
 
 export function useCommandPickerItems(trigger: '/' | '@', filter: string) {
   const dispatch = useAppDispatch();
diff --git a/frontend/src/app/components/RichPromptEditor.tsx b/frontend/src/app/pages/Modes/ModeFormDialog/components/RichPromptEditor/RichPromptEditor.tsx
similarity index 98%
rename from frontend/src/app/components/RichPromptEditor.tsx
rename to frontend/src/app/pages/Modes/ModeFormDialog/components/RichPromptEditor/RichPromptEditor.tsx
index 12d3f478..bd95ea1b 100644
--- a/frontend/src/app/components/RichPromptEditor.tsx
+++ b/frontend/src/app/pages/Modes/ModeFormDialog/components/RichPromptEditor/RichPromptEditor.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { createPortal } from 'react-dom';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
-import CommandPicker from '@/app/components/CommandPicker';
+import CommandPicker from './CommandPicker/CommandPicker';
 import { RichPromptEditorProps, LINE_HEIGHT, FONT_SIZE } from './richPromptEditorTypes';
 import { useRichPromptEditor } from './useRichPromptEditor';
 
diff --git a/frontend/src/app/components/richPromptEditorTypes.ts b/frontend/src/app/pages/Modes/ModeFormDialog/components/RichPromptEditor/richPromptEditorTypes.ts
similarity index 100%
rename from frontend/src/app/components/richPromptEditorTypes.ts
rename to frontend/src/app/pages/Modes/ModeFormDialog/components/RichPromptEditor/richPromptEditorTypes.ts
diff --git a/frontend/src/app/components/useRichPromptEditor.ts b/frontend/src/app/pages/Modes/ModeFormDialog/components/RichPromptEditor/useRichPromptEditor.ts
similarity index 100%
rename from frontend/src/app/components/useRichPromptEditor.ts
rename to frontend/src/app/pages/Modes/ModeFormDialog/components/RichPromptEditor/useRichPromptEditor.ts
diff --git a/frontend/src/app/pages/Modes/ToolsSelector.tsx b/frontend/src/app/pages/Modes/ModeFormDialog/components/ToolsSelector.tsx
similarity index 97%
rename from frontend/src/app/pages/Modes/ToolsSelector.tsx
rename to frontend/src/app/pages/Modes/ModeFormDialog/components/ToolsSelector.tsx
index d4a55326..de9a4232 100644
--- a/frontend/src/app/pages/Modes/ToolsSelector.tsx
+++ b/frontend/src/app/pages/Modes/ModeFormDialog/components/ToolsSelector.tsx
@@ -10,7 +10,7 @@ import ListItemText from '@mui/material/ListItemText';
 import OutlinedInput from '@mui/material/OutlinedInput';
 import ListSubheader from '@mui/material/ListSubheader';
 import ExtensionIcon from '@mui/icons-material/Extension';
-import { ModeForm, ALL_BUILTIN_TOOL_NAMES } from './modesConstants';
+import { ModeForm, ALL_BUILTIN_TOOL_NAMES } from '@/app/pages/Modes/modesConstants';
 
 interface ToolsSelectorProps {
   form: ModeForm;
diff --git a/frontend/src/app/pages/Modes/Modes.tsx b/frontend/src/app/pages/Modes/Modes.tsx
index 2202d3d8..c75ca23b 100644
--- a/frontend/src/app/pages/Modes/Modes.tsx
+++ b/frontend/src/app/pages/Modes/Modes.tsx
@@ -8,7 +8,7 @@ import TuneIcon from '@mui/icons-material/Tune';
 import { useClaudeTokens } from '@/shared/styles/ThemeContext';
 import { useModes } from './hooks/useModes';
 import ModeCard from './ModeCard';
-import ModeFormDialog from './ModeFormDialog';
+import ModeFormDialog from './ModeFormDialog/ModeFormDialog';
 
 const Modes: React.FC = () => {
   const c = useClaudeTokens();
diff --git a/frontend/src/app/components/CommandPickerIcons.tsx b/frontend/src/app/pages/_shared/getToolGroupIcon.tsx
similarity index 100%
rename from frontend/src/app/components/CommandPickerIcons.tsx
rename to frontend/src/app/pages/_shared/getToolGroupIcon.tsx