diff --git a/.vscode/settings.json b/.vscode/settings.json
index 27420da..6ffce5e 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -21,6 +21,7 @@
     "ccstatusline",
     "Powerline",
     "statusline",
+    "sublabel",
     "Worktree",
     "worktrees"
   ]
diff --git a/src/tui/App.tsx b/src/tui/App.tsx
index 19609f2..7bcd2ba 100644
--- a/src/tui/App.tsx
+++ b/src/tui/App.tsx
@@ -228,19 +228,12 @@ export const App: React.FC = () => {
             <Box marginTop={1}>
                 {screen === 'main' && (
                     <MainMenu
-                        onSelect={(value) => {
+                        onSelect={(value, index) => {
                             // Only persist menu selection if not exiting
                             if (value !== 'save' && value !== 'exit') {
-                                const menuMap: Record<string, number> = {
-                                    lines: 0,
-                                    colors: 1,
-                                    powerline: 2,
-                                    terminalConfig: 3,
-                                    globalOverrides: 4,
-                                    install: 5
-                                };
-                                setMenuSelections({ ...menuSelections, main: menuMap[value] ?? 0 });
+                                setMenuSelections({ ...menuSelections, main: index });
                             }
+
                             void handleMainMenuSelect(value);
                         }}
                         isClaudeInstalled={isClaudeInstalled}
diff --git a/src/tui/components/InstallMenu.tsx b/src/tui/components/InstallMenu.tsx
index 3a7cbf9..3bf875b 100644
--- a/src/tui/components/InstallMenu.tsx
+++ b/src/tui/components/InstallMenu.tsx
@@ -1,9 +1,10 @@
 import {
     Box,
-    Text,
-    useInput
+    Text
 } from 'ink';
-import React, { useState } from 'react';
+import React from 'react';
+
+import { List } from './List';
 
 export interface InstallMenuProps {
     bunxAvailable: boolean;
@@ -20,36 +21,34 @@ export const InstallMenu: React.FC<InstallMenuProps> = ({
     onSelectBunx,
     onCancel
 }) => {
-    const [selectedIndex, setSelectedIndex] = useState(0);
-    const maxIndex = 2; // npx, bunx (if available), and back
-
-    useInput((input, key) => {
-        if (key.escape) {
-            onCancel();
-        } else if (key.upArrow) {
-            if (selectedIndex === 2) {
-                setSelectedIndex(bunxAvailable ? 1 : 0); // Skip bunx if not available
-            } else {
-                setSelectedIndex(Math.max(0, selectedIndex - 1));
-            }
-        } else if (key.downArrow) {
-            if (selectedIndex === 0) {
-                setSelectedIndex(bunxAvailable ? 1 : 2); // Skip bunx if not available
-            } else if (selectedIndex === 1 && bunxAvailable) {
-                setSelectedIndex(2);
-            } else {
-                setSelectedIndex(Math.min(maxIndex, selectedIndex + 1));
-            }
-        } else if (key.return) {
-            if (selectedIndex === 0) {
-                onSelectNpx();
-            } else if (selectedIndex === 1 && bunxAvailable) {
+    function onSelect(value: string) {
+        switch (value) {
+        case 'npx':
+            onSelectNpx();
+            break;
+        case 'bunx':
+            if (bunxAvailable) {
                 onSelectBunx();
-            } else if (selectedIndex === 2) {
-                onCancel();
             }
+            break;
+        case 'back':
+            onCancel();
+            break;
+        }
+    }
+
+    const listItems = [
+        {
+            label: 'npx - Node Package Execute',
+            value: 'npx'
+        },
+        {
+            label: 'bunx - Bun Package Execute',
+            sublabel: bunxAvailable ? undefined : '(not installed)',
+            value: 'bunx',
+            disabled: !bunxAvailable
         }
-    });
+    ];
 
     return (
         <Box flexDirection='column'>
@@ -69,29 +68,20 @@ export const InstallMenu: React.FC<InstallMenuProps> = ({
                 <Text dimColor>Select package manager to use:</Text>
             </Box>
 
-            <Box marginTop={1} flexDirection='column'>
-                <Box>
-                    <Text color={selectedIndex === 0 ? 'blue' : undefined}>
-                        {selectedIndex === 0 ? '▶  ' : '   '}
-                        npx - Node Package Execute
-                    </Text>
-                </Box>
-
-                <Box>
-                    <Text color={selectedIndex === 1 && bunxAvailable ? 'blue' : undefined} dimColor={!bunxAvailable}>
-                        {selectedIndex === 1 && bunxAvailable ? '▶  ' : '   '}
-                        bunx - Bun Package Execute
-                        {!bunxAvailable && ' (not installed)'}
-                    </Text>
-                </Box>
+            <List
+                color='blue'
+                marginTop={1}
+                items={listItems}
+                onSelect={(line) => {
+                    if (line === 'back') {
+                        onCancel();
+                        return;
+                    }
 
-                <Box marginTop={1}>
-                    <Text color={selectedIndex === 2 ? 'blue' : undefined}>
-                        {selectedIndex === 2 ? '▶  ' : '   '}
-                        ← Back
-                    </Text>
-                </Box>
-            </Box>
+                    onSelect(line);
+                }}
+                showBackButton={true}
+            />
 
             <Box marginTop={2}>
                 <Text dimColor>
diff --git a/src/tui/components/LineSelector.tsx b/src/tui/components/LineSelector.tsx
index da0e0e9..8277847 100644
--- a/src/tui/components/LineSelector.tsx
+++ b/src/tui/components/LineSelector.tsx
@@ -14,6 +14,7 @@ import type { Settings } from '../../types/Settings';
 import type { WidgetItem } from '../../types/Widget';
 
 import { ConfirmDialog } from './ConfirmDialog';
+import { List } from './List';
 
 interface LineSelectorProps {
     lines: WidgetItem[][];
@@ -59,7 +60,7 @@ const LineSelector: React.FC<LineSelectorProps> = ({
     };
 
     const deleteLine = (lineIndex: number) => {
-        // Don't allow deleting the last remaining line
+    // Don't allow deleting the last remaining line
         if (localLines.length <= 1) {
             return;
         }
@@ -105,16 +106,6 @@ const LineSelector: React.FC<LineSelectorProps> = ({
 
         if (key.escape) {
             onBack();
-        } else if (key.upArrow) {
-            setSelectedIndex(Math.max(0, selectedIndex - 1));
-        } else if (key.downArrow) {
-            setSelectedIndex(Math.min(localLines.length, selectedIndex + 1));
-        } else if (key.return) {
-            if (selectedIndex === localLines.length) {
-                onBack();
-            } else {
-                onSelect(selectedIndex);
-            }
         }
     });
 
@@ -164,7 +155,6 @@ const LineSelector: React.FC<LineSelectorProps> = ({
                         <Text>
                             <Text>
                                 ☰ Line
-                                {' '}
                                 {selectedIndex + 1}
                             </Text>
                             {' '}
@@ -195,57 +185,38 @@ const LineSelector: React.FC<LineSelectorProps> = ({
         );
     }
 
+    const lineItems = localLines.map((line, index) => ({
+        label: `☰ Line ${index + 1}`,
+        sublabel: `(${line.length > 0 ? pluralize('widget', line.length, true) : 'empty'})`,
+        value: index
+    }));
+
     return (
         <>
             <Box flexDirection='column'>
                 <Text bold>{title ?? 'Select Line to Edit'}</Text>
+                <Text dimColor>Choose which status line to configure</Text>
                 <Text dimColor>
-                    Choose which status line to configure
-                </Text>
-                <Text dimColor>
-                    {allowEditing ? (
-                        localLines.length > 1
+                    {allowEditing
+                        ? localLines.length > 1
                             ? '(a) to append new line, (d) to delete line, ESC to go back'
                             : '(a) to append new line, ESC to go back'
-                    ) : 'ESC to go back'}
+                        : 'ESC to go back'}
                 </Text>
 
-                <Box marginTop={1} flexDirection='column'>
-                    {localLines.map((line, index) => {
-                        const isSelected = selectedIndex === index;
-                        const suffix = line.length
-                            ? pluralize('widget', line.length, true)
-                            : 'empty';
-
-                        return (
-                            <Box key={index}>
-                                <Text color={isSelected ? 'green' : undefined}>
-                                    <Text>{isSelected ? '▶  ' : '   '}</Text>
-                                    <Text>
-                                        <Text>
-                                            ☰ Line
-                                            {' '}
-                                            {index + 1}
-                                        </Text>
-                                        {' '}
-                                        <Text dimColor={!isSelected}>
-                                            (
-                                            {suffix}
-                                            )
-                                        </Text>
-                                    </Text>
-                                </Text>
-                            </Box>
-                        );
-                    })}
-
-                    <Box marginTop={1}>
-                        <Text color={selectedIndex === localLines.length ? 'green' : undefined}>
-                            {selectedIndex === localLines.length ? '▶  ' : '   '}
-                            ← Back
-                        </Text>
-                    </Box>
-                </Box>
+                <List
+                    marginTop={1}
+                    items={lineItems}
+                    onSelect={(line) => {
+                        if (line === 'back') {
+                            onBack();
+                            return;
+                        }
+                        onSelect(line);
+                    }}
+                    initialSelection={initialSelection}
+                    showBackButton={true}
+                />
             </Box>
         </>
     );
diff --git a/src/tui/components/List.tsx b/src/tui/components/List.tsx
new file mode 100644
index 0000000..c6aa63e
--- /dev/null
+++ b/src/tui/components/List.tsx
@@ -0,0 +1,143 @@
+import type { ForegroundColorName } from 'chalk';
+import {
+    Box,
+    Text,
+    useInput,
+    type BoxProps
+} from 'ink';
+import {
+    useMemo,
+    useState,
+    type PropsWithChildren
+} from 'react';
+
+interface ListItemType<V = string | number> {
+    label: string;
+    sublabel?: string;
+    disabled?: boolean;
+    description?: string;
+    value: V;
+    props?: BoxProps;
+}
+
+interface ListProps<V = string | number> extends BoxProps {
+    items: (ListItemType<V> | '-')[];
+    onSelect: (value: V | 'back', index: number) => void;
+    initialSelection?: number;
+    showBackButton?: boolean;
+    color?: ForegroundColorName;
+}
+
+export function List<V = string | number>({
+    items,
+    onSelect,
+    initialSelection = 0,
+    showBackButton,
+    color,
+    ...boxProps
+}: ListProps<V>) {
+    const [selectedIndex, setSelectedIndex] = useState(initialSelection);
+
+    const _items = useMemo(() => {
+        if (showBackButton) {
+            return [...items, '-' as const, { label: '← Back', value: 'back' as V }];
+        }
+        return items;
+    }, [items, showBackButton]);
+
+    const selectableItems = _items.filter(item => item !== '-' && !item.disabled) as ListItemType<V>[];
+    const selectedItem = selectableItems[selectedIndex];
+    const actualIndex = _items.findIndex(item => item === selectedItem);
+
+    useInput((_, key) => {
+        if (key.upArrow) {
+            const prev = selectedIndex - 1;
+            const prevIndex = prev < 0 ? selectableItems.length - 1 : prev; // wrap around
+
+            setSelectedIndex(prevIndex);
+            return;
+        }
+
+        if (key.downArrow) {
+            const next = selectedIndex + 1;
+            const nextIndex = next > selectableItems.length - 1 ? 0 : next; // wrap around
+
+            setSelectedIndex(nextIndex);
+            return;
+        }
+
+        if (key.return && selectedItem) {
+            onSelect(selectedItem.value, selectedIndex);
+            return;
+        }
+    });
+
+    return (
+        <Box flexDirection='column' {...boxProps}>
+            {_items.map((item, index) => {
+                if (item === '-') {
+                    return <ListSeparator key={index} />;
+                }
+
+                const isSelected = index === actualIndex;
+
+                return (
+                    <ListItem
+                        key={index}
+                        isSelected={isSelected}
+                        color={color}
+                        disabled={item.disabled}
+                        {...item.props}
+                    >
+                        <Text>
+                            <Text>
+                                {item.label}
+                            </Text>
+                            {item.sublabel && (
+                                <Text dimColor={!isSelected}>
+                                    {' '}
+                                    {item.sublabel}
+                                </Text>
+                            )}
+                        </Text>
+                    </ListItem>
+                );
+            })}
+
+            {selectedItem?.description && (
+                <Box marginTop={1} paddingLeft={2}>
+                    <Text dimColor wrap='wrap'>
+                        {selectedItem.description}
+                    </Text>
+                </Box>
+            )}
+        </Box>
+    );
+}
+
+interface ListItemProps extends PropsWithChildren, BoxProps {
+    isSelected: boolean;
+    color?: ForegroundColorName;
+    disabled?: boolean;
+}
+
+export function ListItem({
+    children,
+    isSelected,
+    color = 'green',
+    disabled,
+    ...boxProps
+}: ListItemProps) {
+    return (
+        <Box {...boxProps}>
+            <Text color={isSelected ? color : undefined} dimColor={disabled}>
+                <Text>{isSelected ? '▶  ' : '   '}</Text>
+                <Text>{children}</Text>
+            </Text>
+        </Box>
+    );
+}
+
+export function ListSeparator() {
+    return <Text> </Text>;
+}
\ No newline at end of file
diff --git a/src/tui/components/MainMenu.tsx b/src/tui/components/MainMenu.tsx
index 5fe8cf0..9e231ef 100644
--- a/src/tui/components/MainMenu.tsx
+++ b/src/tui/components/MainMenu.tsx
@@ -1,15 +1,16 @@
 import {
     Box,
-    Text,
-    useInput
+    Text
 } from 'ink';
-import React, { useState } from 'react';
+import React from 'react';
 
 import type { Settings } from '../../types/Settings';
 import { type PowerlineFontStatus } from '../../utils/powerline';
 
+import { List } from './List';
+
 export interface MainMenuProps {
-    onSelect: (value: string) => void;
+    onSelect: (value: string, index: number) => void;
     isClaudeInstalled: boolean;
     hasChanges: boolean;
     initialSelection?: number;
@@ -18,103 +19,112 @@ export interface MainMenuProps {
     previewIsTruncated?: boolean;
 }
 
-export const MainMenu: React.FC<MainMenuProps> = ({ onSelect, isClaudeInstalled, hasChanges, initialSelection = 0, powerlineFontStatus, settings, previewIsTruncated }) => {
-    const [selectedIndex, setSelectedIndex] = useState(initialSelection);
-
+export const MainMenu: React.FC<MainMenuProps> = ({
+    onSelect,
+    isClaudeInstalled,
+    hasChanges,
+    initialSelection = 0,
+    powerlineFontStatus,
+    settings,
+    previewIsTruncated
+}) => {
     // Build menu structure with visual gaps
     const menuItems = [
-        { label: '📝 Edit Lines', value: 'lines', selectable: true },
-        { label: '🎨 Edit Colors', value: 'colors', selectable: true },
-        { label: '⚡ Powerline Setup', value: 'powerline', selectable: true },
-        { label: '', value: '_gap1', selectable: false },  // Visual gap
-        { label: '💻 Terminal Options', value: 'terminalConfig', selectable: true },
-        { label: '🌐 Global Overrides', value: 'globalOverrides', selectable: true },
-        { label: '', value: '_gap2', selectable: false },  // Visual gap
-        { label: isClaudeInstalled ? '🔌 Uninstall from Claude Code' : '📦 Install to Claude Code', value: 'install', selectable: true }
+        {
+            label: '📝 Edit Lines',
+            value: 'lines',
+            selectable: true,
+            description:
+        'Configure up to 3 status lines with various widgets like model info, git status, and token usage'
+        },
+        {
+            label: '🎨 Edit Colors',
+            value: 'colors',
+            selectable: true,
+            description:
+        'Customize colors for each widget including foreground, background, and bold styling'
+        },
+        {
+            label: '⚡ Powerline Setup',
+            value: 'powerline',
+            selectable: true,
+            description:
+        'Install Powerline fonts for enhanced visual separators and symbols in your status line'
+        },
+        '-' as const,
+        {
+            label: '💻 Terminal Options',
+            value: 'terminalConfig',
+            selectable: true,
+            description: 'Configure terminal-specific settings for optimal display'
+        },
+        {
+            label: '🌐 Global Overrides',
+            value: 'globalOverrides',
+            selectable: true,
+            description:
+        'Set global padding, separators, and color overrides that apply to all widgets'
+        },
+        '-' as const,
+        {
+            label: isClaudeInstalled
+                ? '🔌 Uninstall from Claude Code'
+                : '📦 Install to Claude Code',
+            value: 'install',
+            selectable: true,
+            description: isClaudeInstalled
+                ? 'Remove ccstatusline from your Claude Code settings'
+                : 'Add ccstatusline to your Claude Code settings for automatic status line rendering'
+        }
     ];
 
     if (hasChanges) {
         menuItems.push(
-            { label: '💾 Save & Exit', value: 'save', selectable: true },
-            { label: '❌ Exit without saving', value: 'exit', selectable: true }
+            {
+                label: '💾 Save & Exit',
+                value: 'save',
+                selectable: true,
+                description: 'Save all changes and exit the configuration tool'
+            },
+            {
+                label: '❌ Exit without saving',
+                value: 'exit',
+                selectable: true,
+                description: 'Exit without saving your changes'
+            }
         );
     } else {
-        menuItems.push({ label: '🚪 Exit', value: 'exit', selectable: true });
+        menuItems.push({
+            label: '🚪 Exit',
+            value: 'exit',
+            selectable: true,
+            description: 'Exit the configuration tool'
+        });
     }
 
-    // Get only selectable items for navigation
-    const selectableItems = menuItems.filter(item => item.selectable);
-
-    useInput((input, key) => {
-        if (key.upArrow) {
-            setSelectedIndex(Math.max(0, selectedIndex - 1));
-        } else if (key.downArrow) {
-            setSelectedIndex(Math.min(selectableItems.length - 1, selectedIndex + 1));
-        } else if (key.return) {
-            const item = selectableItems[selectedIndex];
-            if (item) {
-                onSelect(item.value);
-            }
-        }
-    });
-
-    // Get description for selected item
-    const getDescription = (value: string): string => {
-        const descriptions: Record<string, string> = {
-            lines: 'Configure up to 3 status lines with various widgets like model info, git status, and token usage',
-            colors: 'Customize colors for each widget including foreground, background, and bold styling',
-            powerline: 'Install Powerline fonts for enhanced visual separators and symbols in your status line',
-            globalOverrides: 'Set global padding, separators, and color overrides that apply to all widgets',
-            install: isClaudeInstalled
-                ? 'Remove ccstatusline from your Claude Code settings'
-                : 'Add ccstatusline to your Claude Code settings for automatic status line rendering',
-            terminalConfig: 'Configure terminal-specific settings for optimal display',
-            save: 'Save all changes and exit the configuration tool',
-            exit: hasChanges
-                ? 'Exit without saving your changes'
-                : 'Exit the configuration tool'
-        };
-        return descriptions[value] ?? '';
-    };
-
-    const selectedItem = selectableItems[selectedIndex];
-    const description = selectedItem ? getDescription(selectedItem.value) : '';
-
     // Check if we should show the truncation warning
-    const showTruncationWarning = previewIsTruncated && settings?.flexMode === 'full-minus-40';
+    const showTruncationWarning
+    = previewIsTruncated && settings?.flexMode === 'full-minus-40';
 
     return (
         <Box flexDirection='column'>
             {showTruncationWarning && (
                 <Box marginBottom={1}>
-                    <Text color='yellow'>⚠ Some lines are truncated, see Terminal Options → Terminal Width for info</Text>
+                    <Text color='yellow'>
+                        ⚠ Some lines are truncated, see Terminal Options → Terminal Width
+                        for info
+                    </Text>
                 </Box>
             )}
+
             <Text bold>Main Menu</Text>
-            <Box marginTop={1} flexDirection='column'>
-                {menuItems.map((item, idx) => {
-                    if (!item.selectable && item.value.startsWith('_gap')) {
-                        return <Text key={item.value}> </Text>;
-                    }
-                    const selectableIdx = selectableItems.indexOf(item);
-                    const isSelected = selectableIdx === selectedIndex;
 
-                    return (
-                        <Text
-                            key={item.value}
-                            color={isSelected ? 'green' : undefined}
-                        >
-                            {isSelected ? '▶  ' : '   '}
-                            {item.label}
-                        </Text>
-                    );
-                })}
-            </Box>
-            {description && (
-                <Box marginTop={1} paddingLeft={2}>
-                    <Text dimColor wrap='wrap'>{description}</Text>
-                </Box>
-            )}
+            <List
+                items={menuItems}
+                marginTop={1}
+                onSelect={onSelect}
+                initialSelection={initialSelection}
+            />
         </Box>
     );
 };
\ No newline at end of file