diff --git a/src/components/OrganizationAutocomplete.jsx b/src/components/OrganizationAutocomplete.jsx
new file mode 100644
index 0000000..605e1f1
--- /dev/null
+++ b/src/components/OrganizationAutocomplete.jsx
@@ -0,0 +1,240 @@
+import React, { useState, useEffect, useRef } from 'react';
+import useDebounce from '../hooks/useDebounce';
+import useClickOutside from '../hooks/useClickOutside';
+import { searchOrganizations } from '../services/github';
+import { useApp } from '../context/AppContext';
+import { Spinner } from './UI';
+
+// We use a small in-memory LRU cache specifically for autocomplete to prevent 
+// duplicating API requests during rapid typing and to avoid unnecessarily polluting
+// the global IndexedDB cache with partially-typed, short-lived queries.
+const cache = new Map();
+const MAX_SUGGESTIONS = 8;
+const MIN_QUERY_LENGTH = 2;
+
+export default function OrganizationAutocomplete({
+  value,
+  onChange,
+  onKeyDown,
+  onBlur,
+  onSelectOrg,
+  placeholder,
+  style
+}) {
+  const { pat } = useApp();
+  const [suggestions, setSuggestions] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+  const [error, setError] = useState(false);
+  
+  const containerRef = useRef(null);
+  const abortControllerRef = useRef(null);
+  
+  const debouncedValue = useDebounce(value, 400);
+
+  useClickOutside(containerRef, () => {
+    setIsOpen(false);
+    setHighlightedIndex(-1);
+  });
+
+  // Handle query change directly to hide dropdown and show correct states
+  useEffect(() => {
+    if (value.trim().length < MIN_QUERY_LENGTH) {
+      setIsOpen(false);
+      setSuggestions([]);
+    }
+  }, [value]);
+
+  useEffect(() => {
+    const trimmed = debouncedValue.trim();
+    if (trimmed.length < MIN_QUERY_LENGTH) {
+      setSuggestions([]);
+      setIsOpen(false);
+      setLoading(false);
+      return;
+    }
+
+    const fetchOrgs = async () => {
+      setLoading(true);
+      setError(false);
+
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+      
+      const controller = new AbortController();
+      abortControllerRef.current = controller;
+
+      const cacheKey = trimmed.toLowerCase();
+      if (cache.has(cacheKey)) {
+        setSuggestions(cache.get(cacheKey));
+        setIsOpen(true);
+        setLoading(false);
+        setHighlightedIndex(-1);
+        return;
+      }
+
+      try {
+        const results = await searchOrganizations(trimmed, pat, controller.signal);
+        
+        const deduplicated = results.filter((item, index, self) => 
+          index === self.findIndex((t) => t.login.toLowerCase() === item.login.toLowerCase())
+        ).slice(0, MAX_SUGGESTIONS);
+        
+        if (cache.size > 100) {
+           const firstKey = cache.keys().next().value;
+           cache.delete(firstKey);
+        }
+        cache.set(cacheKey, deduplicated);
+        
+        setSuggestions(deduplicated);
+        setIsOpen(true);
+        setHighlightedIndex(-1);
+      } catch (err) {
+        if (err.name !== 'AbortError') {
+          setError(true);
+          setSuggestions([]);
+          setIsOpen(true);
+        }
+      } finally {
+        if (abortControllerRef.current === controller) {
+          setLoading(false);
+        }
+      }
+    };
+
+    fetchOrgs();
+    
+    return () => {
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+    };
+  }, [debouncedValue, pat]);
+
+  const handleKeyDown = (e) => {
+    if (!isOpen) {
+      if (onKeyDown) onKeyDown(e);
+      return;
+    }
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setHighlightedIndex(prev => (prev < suggestions.length - 1 ? prev + 1 : 0));
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setHighlightedIndex(prev => (prev > 0 ? prev - 1 : suggestions.length - 1));
+    } else if (e.key === 'Enter') {
+      if (highlightedIndex >= 0 && highlightedIndex < suggestions.length) {
+        e.preventDefault();
+        handleSelect(suggestions[highlightedIndex]);
+      } else {
+        setIsOpen(false);
+        if (onKeyDown) onKeyDown(e);
+      }
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      setIsOpen(false);
+      setHighlightedIndex(-1);
+    } else {
+      if (onKeyDown) onKeyDown(e);
+    }
+  };
+
+  const handleSelect = (org) => {
+    onSelectOrg(org.login);
+    setIsOpen(false);
+    setHighlightedIndex(-1);
+  };
+  
+  const handleBlur = (e) => {
+    if (onBlur) onBlur(e);
+  };
+
+  return (
+    <div ref={containerRef} style={{ position: 'relative', flex: 1, minWidth: 160 }}>
+      <input
+        value={value}
+        onChange={onChange}
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+        placeholder={placeholder}
+        style={{ ...style, width: '100%', boxSizing: 'border-box' }}
+        role="combobox"
+        aria-expanded={isOpen}
+        aria-controls="organization-suggestions"
+        aria-autocomplete="list"
+        aria-activedescendant={highlightedIndex >= 0 ? `suggestion-${highlightedIndex}` : undefined}
+      />
+      
+      {isOpen && value.trim().length >= MIN_QUERY_LENGTH && (
+        <ul
+          id="organization-suggestions"
+          role="listbox"
+          style={{
+            position: 'absolute',
+            top: '100%',
+            left: 0,
+            right: 0,
+            marginTop: 4,
+            background: 'var(--surface)',
+            border: '1px solid var(--border)',
+            borderRadius: 'var(--radius)',
+            padding: '4px 0',
+            listStyle: 'none',
+            maxHeight: 250,
+            overflowY: 'auto',
+            zIndex: 10,
+            boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
+          }}
+        >
+          {loading ? (
+            <li style={{ padding: '8px 12px', display: 'flex', alignItems: 'center', gap: 8, color: 'var(--text2)', fontSize: 13 }}>
+              <Spinner size={16} /> Searching...
+            </li>
+          ) : error ? (
+            <li style={{ padding: '8px 12px', color: 'var(--red)', fontSize: 13 }}>
+              Failed to load suggestions
+            </li>
+          ) : suggestions.length === 0 ? (
+            <li style={{ padding: '8px 12px', color: 'var(--text2)', fontSize: 13 }}>
+              No organizations found
+            </li>
+          ) : (
+            suggestions.map((org, index) => (
+              <li
+                key={org.id || org.login}
+                id={`suggestion-${index}`}
+                role="option"
+                aria-selected={index === highlightedIndex}
+                onMouseDown={(e) => {
+                  e.preventDefault(); // Prevent blur
+                  handleSelect(org);
+                }}
+                onMouseEnter={() => setHighlightedIndex(index)}
+                style={{
+                  padding: '6px 12px',
+                  cursor: 'pointer',
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 10,
+                  background: index === highlightedIndex ? 'var(--surface2)' : 'transparent',
+                  color: 'var(--text)',
+                  fontSize: 14,
+                }}
+              >
+                <img
+                  src={org.avatar_url}
+                  alt=""
+                  style={{ width: 20, height: 20, borderRadius: 4 }}
+                />
+                <span style={{ fontWeight: 500 }}>{org.login}</span>
+              </li>
+            ))
+          )}
+        </ul>
+      )}
+    </div>
+  );
+}
diff --git a/src/hooks/useClickOutside.js b/src/hooks/useClickOutside.js
new file mode 100644
index 0000000..ab525ed
--- /dev/null
+++ b/src/hooks/useClickOutside.js
@@ -0,0 +1,20 @@
+import { useEffect } from 'react';
+
+export default function useClickOutside(ref, handler) {
+  useEffect(() => {
+    const listener = (event) => {
+      if (!ref.current || ref.current.contains(event.target)) {
+        return;
+      }
+      handler(event);
+    };
+
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
+
+    return () => {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  }, [ref, handler]);
+}
diff --git a/src/hooks/useDebounce.js b/src/hooks/useDebounce.js
new file mode 100644
index 0000000..3401963
--- /dev/null
+++ b/src/hooks/useDebounce.js
@@ -0,0 +1,17 @@
+import { useState, useEffect } from 'react';
+
+export default function useDebounce(value, delay) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index cffcbd3..152503f 100644
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom'
 import { FiSearch, FiX } from 'react-icons/fi'
 import { useApp } from '../context/AppContext'
 import { C, Spinner } from '../components/UI'
+import OrganizationAutocomplete from '../components/OrganizationAutocomplete'
 
 const QUICK = ['AOSSIE-Org', 'DjedAlliance', 'StabilityNexus']
 
@@ -74,13 +75,14 @@ export default function HomePage() {
               <FiX size={12} style={{ cursor: 'pointer', opacity: .7 }} onClick={() => removeChip(c)} />
             </span>
           ))}
-          <input
+          <OrganizationAutocomplete
             value={input}
             onChange={e => setInput(e.target.value)}
             onKeyDown={handleKey}
             onBlur={() => input.trim() && addChip(input)}
+            onSelectOrg={addChip}
             placeholder={chips.length ? 'Add another org...' : 'AOSSIE-Org, StabilityNexus, DjedAlliance...'}
-            style={{ flex: 1, minWidth: 160, background: 'none', color: 'var(--text)', fontSize: 14, padding: '4px 8px', border: 'none', outline: 'none' }}
+            style={{ background: 'none', color: 'var(--text)', fontSize: 14, padding: '4px 8px', border: 'none', outline: 'none' }}
           />
           <button onClick={() => go()} style={{ ...C.btn('primary'), padding: '8px 22px', flexShrink: 0 }}>
             EXPLORE
diff --git a/src/services/github.js b/src/services/github.js
index a4180fa..c46b239 100644
--- a/src/services/github.js
+++ b/src/services/github.js
@@ -143,3 +143,36 @@ export async function fetchRateLimit(pat) {
     return data.rate
   } catch { return null }
 }
+
+export async function searchOrganizations(query, pat, signal) {
+  try {
+    const headers = { Accept: 'application/vnd.github.v3+json' }
+    if (pat) headers.Authorization = `token ${pat}`
+    
+    const url = `https://api.github.com/search/users?q=${encodeURIComponent(query)}+type:org&per_page=8`
+    const res = await fetch(url, { headers, signal })
+
+    window.dispatchEvent(
+      new CustomEvent('rate-limit-update', {
+        detail: {
+          limit: Number(res.headers.get('x-ratelimit-limit')),
+          remaining: Number(res.headers.get('x-ratelimit-remaining')),
+          used: Number(res.headers.get('x-ratelimit-used')),
+          reset: Number(res.headers.get('x-ratelimit-reset'))
+        }
+      })
+    )
+
+    if (res.status === 403) throw new Error('RATE_LIMIT')
+    if (!res.ok) throw new Error(`HTTP_${res.status}`)
+
+    const data = await res.json()
+    return data.items || []
+  } catch (err) {
+    if (err.name === 'AbortError') {
+      throw err;
+    }
+    console.error('Organization search failed:', err);
+    throw err;
+  }
+}
diff --git a/src/test/OrganizationAutocomplete.test.jsx b/src/test/OrganizationAutocomplete.test.jsx
new file mode 100644
index 0000000..b006775
--- /dev/null
+++ b/src/test/OrganizationAutocomplete.test.jsx
@@ -0,0 +1,295 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import OrganizationAutocomplete from '../components/OrganizationAutocomplete';
+import * as githubService from '../services/github';
+import * as appContext from '../context/AppContext';
+
+// Mock dependencies
+vi.mock('../services/github', () => ({
+  searchOrganizations: vi.fn(),
+}));
+
+vi.mock('../context/AppContext', () => ({
+  useApp: vi.fn(),
+}));
+
+describe('OrganizationAutocomplete', () => {
+  const mockOnSelectOrg = vi.fn();
+  const mockOnChange = vi.fn();
+  const mockOnKeyDown = vi.fn();
+  const mockOnBlur = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    appContext.useApp.mockReturnValue({ pat: 'fake-token' });
+    githubService.searchOrganizations.mockResolvedValue([
+      { id: 1, login: 'reactjs', avatar_url: 'img1.png' },
+      { id: 2, login: 'react', avatar_url: 'img2.png' },
+      { id: 3, login: 'react', avatar_url: 'img2.png' } // duplicate
+    ]);
+  });
+
+  const renderComponent = (props = {}) => {
+    return render(
+      <OrganizationAutocomplete
+        value={props.value ?? ''}
+        onChange={props.onChange ?? mockOnChange}
+        onKeyDown={props.onKeyDown ?? mockOnKeyDown}
+        onBlur={props.onBlur ?? mockOnBlur}
+        onSelectOrg={props.onSelectOrg ?? mockOnSelectOrg}
+        placeholder="Search orgs..."
+      />
+    );
+  };
+
+  it('renders input correctly', () => {
+    renderComponent();
+    expect(screen.getByPlaceholderText('Search orgs...')).toBeInTheDocument();
+  });
+
+  it('does not call API immediately (debounce)', async () => {
+    const { rerender } = renderComponent({ value: '' });
+    expect(githubService.searchOrganizations).not.toHaveBeenCalled();
+    
+    // Simulate typing
+    rerender(<OrganizationAutocomplete value="debounce" onChange={mockOnChange} />);
+    
+    expect(githubService.searchOrganizations).not.toHaveBeenCalled();
+    
+    await waitFor(() => {
+      expect(githubService.searchOrganizations).toHaveBeenCalledTimes(1);
+    });
+    
+    expect(githubService.searchOrganizations).toHaveBeenCalledWith('debounce', 'fake-token', expect.any(AbortSignal));
+  });
+
+  it('does not trigger for less than 2 characters', async () => {
+    const { rerender } = renderComponent({ value: '' });
+    
+    rerender(<OrganizationAutocomplete value="r" onChange={mockOnChange} />);
+    
+    // Wait for the debounce time to pass to ensure it is not called
+    await new Promise(r => setTimeout(r, 600));
+    
+    expect(githubService.searchOrganizations).not.toHaveBeenCalled();
+  });
+
+  it('shows loading state then results (deduplicated)', async () => {
+    const { rerender } = renderComponent({ value: '' });
+    
+    rerender(<OrganizationAutocomplete value="react" onChange={mockOnChange} />);
+    
+    await waitFor(() => {
+      expect(screen.getByText('reactjs')).toBeInTheDocument();
+    });
+    
+    expect(screen.getAllByText('react').length).toBe(1);
+  });
+
+  it('supports keyboard navigation', async () => {
+    const { rerender } = renderComponent({ value: '' });
+    
+    rerender(
+      <OrganizationAutocomplete
+        value="keyboard"
+        onChange={mockOnChange}
+        onKeyDown={mockOnKeyDown}
+        onSelectOrg={mockOnSelectOrg}
+      />
+    );
+    
+    await waitFor(() => {
+      expect(screen.getByText('reactjs')).toBeInTheDocument();
+    });
+
+    const input = screen.getByRole('combobox');
+    
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+    expect(screen.getByRole('listbox').children[0]).toHaveAttribute('aria-selected', 'true');
+    
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+    expect(screen.getByRole('listbox').children[1]).toHaveAttribute('aria-selected', 'true');
+    
+    fireEvent.keyDown(input, { key: 'ArrowUp' });
+    expect(screen.getByRole('listbox').children[0]).toHaveAttribute('aria-selected', 'true');
+    
+    fireEvent.keyDown(input, { key: 'Enter' });
+    expect(mockOnSelectOrg).toHaveBeenCalledWith('reactjs');
+  });
+
+  it('calls onSelectOrg when a suggestion is clicked', async () => {
+    const { rerender } = renderComponent({ value: '' });
+    
+    rerender(
+      <OrganizationAutocomplete
+        value="select"
+        onChange={mockOnChange}
+        onSelectOrg={mockOnSelectOrg}
+      />
+    );
+    
+    await waitFor(() => {
+      expect(screen.getByText('reactjs')).toBeInTheDocument();
+    });
+
+    const option = screen.getByText('reactjs');
+    fireEvent.mouseDown(option);
+    
+    expect(mockOnSelectOrg).toHaveBeenCalledWith('reactjs');
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  });
+
+  it('handles stale requests correctly via AbortController', async () => {
+    let resolveSecond;
+    
+    githubService.searchOrganizations
+      .mockImplementationOnce((query, pat, signal) => {
+        return new Promise((resolve, reject) => {
+          signal.addEventListener('abort', () => {
+            const err = new Error('Aborted');
+            err.name = 'AbortError';
+            reject(err);
+          });
+        });
+      })
+      .mockImplementationOnce((query, pat, signal) => {
+        return new Promise(resolve => {
+          resolveSecond = resolve;
+        });
+      });
+
+    const { rerender } = renderComponent({ value: '' });
+    
+    rerender(<OrganizationAutocomplete value="stale1" onChange={mockOnChange} />);
+    
+    // Wait for first debounce
+    await waitFor(() => {
+      expect(githubService.searchOrganizations).toHaveBeenCalledTimes(1);
+    });
+    
+    rerender(<OrganizationAutocomplete value="stale2" onChange={mockOnChange} />);
+    
+    // Wait for second debounce
+    await waitFor(() => {
+      expect(githubService.searchOrganizations).toHaveBeenCalledTimes(2);
+    });
+    
+    // Resolve second request
+    resolveSecond([{ id: 4, login: 'react-native', avatar_url: 'img4.png' }]);
+    
+    await waitFor(() => {
+      expect(screen.getByText('react-native')).toBeInTheDocument();
+    });
+  });
+
+  it('handles empty state', async () => {
+    githubService.searchOrganizations.mockResolvedValueOnce([]);
+    
+    const { rerender } = renderComponent({ value: '' });
+    
+    rerender(<OrganizationAutocomplete value="empty" onChange={mockOnChange} />);
+    
+    await waitFor(() => {
+      expect(screen.getByText('No organizations found')).toBeInTheDocument();
+    });
+  });
+
+  it('closes dropdown on Escape', async () => {
+    const { rerender } = renderComponent({ value: '' });
+    
+    rerender(<OrganizationAutocomplete value="escape" onChange={mockOnChange} />);
+    
+    await waitFor(() => {
+      expect(screen.getByText('reactjs')).toBeInTheDocument();
+    });
+
+    const input = screen.getByRole('combobox');
+    fireEvent.keyDown(input, { key: 'Escape' });
+    
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  });
+
+  it('closes dropdown on outside click', async () => {
+    const { rerender } = renderComponent({ value: '' });
+    
+    rerender(<OrganizationAutocomplete value="outside" onChange={mockOnChange} />);
+    
+    await waitFor(() => {
+      expect(screen.getByText('reactjs')).toBeInTheDocument();
+    });
+
+    fireEvent.mouseDown(document.body);
+    
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  });
+
+  it('does not call API if query is cached', async () => {
+    const { rerender } = renderComponent({ value: '' });
+    
+    rerender(<OrganizationAutocomplete value="cache_test" onChange={mockOnChange} />);
+    
+    await waitFor(() => {
+      expect(githubService.searchOrganizations).toHaveBeenCalledTimes(1);
+    });
+    
+    // Clear input
+    rerender(<OrganizationAutocomplete value="" onChange={mockOnChange} />);
+    await new Promise(r => setTimeout(r, 600));
+    
+    // Search same query again
+    rerender(<OrganizationAutocomplete value="cache_test" onChange={mockOnChange} />);
+    
+    await waitFor(() => {
+      // It should still be 1, because the second time it hit the cache
+      expect(githubService.searchOrganizations).toHaveBeenCalledTimes(1);
+      expect(screen.getByText('reactjs')).toBeInTheDocument();
+    });
+  });
+
+  it('limits results to maximum 8 suggestions', async () => {
+    const manyResults = Array.from({ length: 15 }, (_, i) => ({
+      id: i, login: `org${i}`, avatar_url: `img${i}.png`
+    }));
+    githubService.searchOrganizations.mockResolvedValueOnce(manyResults);
+    
+    const { rerender } = renderComponent({ value: '' });
+    rerender(<OrganizationAutocomplete value="limit_test" onChange={mockOnChange} />);
+    
+    await waitFor(() => {
+      expect(screen.getByText('org0')).toBeInTheDocument();
+    });
+    
+    const options = screen.getAllByRole('option');
+    expect(options.length).toBe(8);
+  });
+
+  it('clears suggestions when input is cleared', async () => {
+    const { rerender } = renderComponent({ value: '' });
+    
+    rerender(<OrganizationAutocomplete value="clear_test" onChange={mockOnChange} />);
+    
+    await waitFor(() => {
+      expect(screen.getByText('reactjs')).toBeInTheDocument();
+    });
+    
+    rerender(<OrganizationAutocomplete value="" onChange={mockOnChange} />);
+    
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+    
+    // Verify it doesn't trigger API again
+    await new Promise(r => setTimeout(r, 600));
+    expect(githubService.searchOrganizations).toHaveBeenCalledTimes(1);
+  });
+
+  it('handles API errors gracefully', async () => {
+    githubService.searchOrganizations.mockRejectedValueOnce(new Error('API Rate Limit'));
+    
+    const { rerender } = renderComponent({ value: '' });
+    rerender(<OrganizationAutocomplete value="error_test" onChange={mockOnChange} />);
+    
+    await waitFor(() => {
+      expect(screen.getByText('Failed to load suggestions')).toBeInTheDocument();
+    });
+  });
+});