diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
index ebb8779..bf3aaa0 100644
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@@ -37,11 +37,20 @@ This project uses **strict TypeScript** (`strict: true` in `tsconfig.json`). All
 
 ## Testing
 
-Tests use **Vitest** with `jsdom` environment. Test files live alongside source as `*.test.ts` / `*.test.tsx`.
+Tests use **Vitest** with `jsdom` environment. The test suite is organized in the `tests/` directory mirroring `src/`:
+- `tests/tools/` — tool-specific unit and UI tests (e.g. `tests/tools/passwordTool.test.tsx`, `tests/tools/uuid.test.tsx`)
+- `tests/components/` — UI primitives (`tests/components/ui/`) and layout component tests
+- `tests/hooks/` — custom React hook tests (`useUrlState`, `useClipboard`, etc.)
+- `tests/pages/` — page routing and navigation integration tests
+- `tests/setup.ts` — centralized test environment setup and DOM polyfills
+- `tests/test-utils.tsx` — reusable helpers (`renderWithProviders`, `simulateInput`, `waitFor`)
+
+Source-adjacent test files (`src/**/*.test.ts` / `src/**/*.test.tsx`) are also automatically detected and run by Vitest.
 
 ```bash
 npm test                        # run all tests once
-npm test -- tests/crypto        # run a specific test file or path
+npm test -- tests/tools/        # run tool tests
+npm test -- tests/hooks/        # run hook tests
 npm run test:coverage           # coverage report
 ```
 
diff --git a/tests/App.test.tsx b/tests/App.test.tsx
new file mode 100644
index 0000000..51d3fdb
--- /dev/null
+++ b/tests/App.test.tsx
@@ -0,0 +1,180 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { MemoryRouter } from 'react-router-dom';
+import App from '../src/App';
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+// jsdom doesn't implement matchMedia — stub it for useTheme
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: (query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => false,
+  }),
+});
+
+describe('App Shell & Routing Integration', () => {
+  let container: HTMLDivElement;
+  let root: ReturnType<typeof createRoot>;
+
+  beforeEach(() => {
+    localStorage.clear();
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => {
+      root.unmount();
+    });
+    container.remove();
+    localStorage.clear();
+  });
+
+  function renderApp(route = '/') {
+    act(() => {
+      root.render(
+        <MemoryRouter initialEntries={[route]}>
+          <App />
+        </MemoryRouter>
+      );
+    });
+  }
+
+  it('renders navbar with Toolglass brand name and GitHub link', async () => {
+    renderApp();
+
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 100));
+    });
+
+    expect(container.textContent).toContain('Toolglass');
+    expect(container.textContent).toContain('GitHub');
+
+    const githubLink = container.querySelector('a[href*="github.com"]') as HTMLAnchorElement;
+    expect(githubLink).not.toBeNull();
+    expect(githubLink.href).toContain('ajithakdev/toolglass');
+  });
+
+  it('renders "Search tools" button with Ctrl K shortcut in nav', async () => {
+    renderApp();
+
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 100));
+    });
+
+    const searchBtn = container.querySelector('#open-command-palette');
+    expect(searchBtn).not.toBeNull();
+    expect(searchBtn?.textContent).toContain('Search tools');
+    expect(searchBtn?.textContent).toContain('Ctrl K');
+  });
+
+  it('renders footer with privacy notice and Local Usage Stats toggle', async () => {
+    renderApp();
+
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 100));
+    });
+
+    expect(container.textContent).toContain('No data leaves your browser');
+    expect(container.textContent).toContain('Local Usage Stats');
+
+    const checkbox = container.querySelector('input[type="checkbox"]') as HTMLInputElement;
+    expect(checkbox).not.toBeNull();
+    expect(checkbox.checked).toBe(true); // enabled by default
+  });
+
+  it('renders Landing page at root route /', async () => {
+    renderApp('/');
+
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 100));
+    });
+
+    // Landing page shows the tagline
+    expect(container.textContent).toContain('Frosted developer utilities');
+    expect(container.textContent).toContain('All Utilities');
+  });
+
+  it('renders 404 page for unknown route /some/random/page', async () => {
+    renderApp('/some/random/page');
+
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 100));
+    });
+
+    expect(container.textContent).toContain('404');
+  });
+
+  it('renders tool page for valid tool slug /tools/password', async () => {
+    renderApp('/tools/password');
+
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 200));
+    });
+
+    expect(container.textContent).toContain('Password Generator');
+  });
+
+  it('renders tool-not-found for invalid slug /tools/doesntexist', async () => {
+    renderApp('/tools/doesntexist');
+
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 100));
+    });
+
+    expect(container.textContent).toContain('404');
+    expect(container.textContent).toContain('doesntexist');
+  });
+
+  it('opens command palette when Ctrl+K is pressed', async () => {
+    renderApp();
+
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 100));
+    });
+
+    // Press Ctrl+K
+    await act(async () => {
+      window.dispatchEvent(
+        new KeyboardEvent('keydown', { key: 'k', ctrlKey: true, bubbles: true })
+      );
+      await new Promise((r) => setTimeout(r, 100));
+    });
+
+    // Command palette should be open — look for the dialog role
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog).not.toBeNull();
+    const input = dialog?.querySelector('input');
+    expect(input?.placeholder).toBe('Search tools…');
+    expect(dialog?.textContent).toContain('Password Generator');
+  });
+
+  it('opens command palette via search button click', async () => {
+    renderApp();
+
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 100));
+    });
+
+    const searchBtn = container.querySelector('#open-command-palette') as HTMLButtonElement;
+    expect(searchBtn).not.toBeNull();
+
+    await act(async () => {
+      searchBtn.click();
+      await new Promise((r) => setTimeout(r, 100));
+    });
+
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog).not.toBeNull();
+  });
+});
diff --git a/tests/components/CommandPalette.test.tsx b/tests/components/CommandPalette.test.tsx
new file mode 100644
index 0000000..2192b43
--- /dev/null
+++ b/tests/components/CommandPalette.test.tsx
@@ -0,0 +1,114 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { MemoryRouter } from 'react-router-dom';
+import { CommandPalette } from '../../src/components/CommandPalette';
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe('CommandPalette', () => {
+  let container: HTMLDivElement;
+  let root: ReturnType<typeof createRoot>;
+
+  beforeEach(() => {
+    window.HTMLElement.prototype.scrollIntoView = vi.fn();
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+    localStorage.clear();
+  });
+
+  afterEach(() => {
+    act(() => { root.unmount(); });
+    container.remove();
+  });
+
+  async function renderComponent(open: boolean, onClose = vi.fn()) {
+    await act(async () => {
+      root.render(
+        <MemoryRouter>
+          <CommandPalette open={open} onClose={onClose} />
+        </MemoryRouter>
+      );
+    });
+    // Wait for animations
+    await act(async () => { await new Promise(r => setTimeout(r, 150)); });
+  }
+
+  const setInputValue = async (input: HTMLInputElement, value: string) => {
+    await act(async () => {
+      const nativeSetter = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype, 'value'
+      )?.set;
+      nativeSetter?.call(input, value);
+      input.dispatchEvent(new Event('input', { bubbles: true }));
+    });
+  };
+
+  it('renders nothing when open=false', async () => {
+    await renderComponent(false);
+    expect(container.querySelector('.palette-input')).toBeNull();
+  });
+
+  it('shows search input with placeholder when open', async () => {
+    await renderComponent(true);
+    const input = container.querySelector('.palette-input') as HTMLInputElement;
+    expect(input).not.toBeNull();
+    expect(input.placeholder).toBe('Search tools…');
+  });
+
+  it('shows all tools initially', async () => {
+    await renderComponent(true);
+    const items = container.querySelectorAll('[role="option"]');
+    expect(items.length).toBe(17);
+  });
+
+  it('filters tools as user types', async () => {
+    await renderComponent(true);
+    const input = container.querySelector('.palette-input') as HTMLInputElement;
+    await setInputValue(input, 'uuid');
+    
+    const items = container.querySelectorAll('[role="option"]');
+    expect(items.length).toBe(1);
+    expect(items[0].textContent).toContain('UUID');
+  });
+
+  it('shows "No tools match" when query matches nothing', async () => {
+    await renderComponent(true);
+    const input = container.querySelector('.palette-input') as HTMLInputElement;
+    await setInputValue(input, 'thiswillnevermatchanything');
+    
+    const items = container.querySelectorAll('[role="option"]');
+    expect(items.length).toBe(0);
+    expect(container.textContent).toContain('No tools match');
+  });
+
+  it('handles keyboard navigation and calls onClose on Enter', async () => {
+    const onClose = vi.fn();
+    await renderComponent(true, onClose);
+    
+    await act(async () => {
+      const downEvent = new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true });
+      container.querySelector('[role="dialog"]')?.dispatchEvent(downEvent);
+    });
+    
+    await act(async () => {
+      const enterEvent = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true });
+      container.querySelector('[role="dialog"]')?.dispatchEvent(enterEvent);
+    });
+
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('calls onClose when Escape is pressed', async () => {
+    const onClose = vi.fn();
+    await renderComponent(true, onClose);
+    
+    await act(async () => {
+      const escapeEvent = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true });
+      container.querySelector('[role="dialog"]')?.dispatchEvent(escapeEvent);
+    });
+
+    expect(onClose).toHaveBeenCalled();
+  });
+});
diff --git a/src/components/ErrorBoundary.test.tsx b/tests/components/ErrorBoundary.test.tsx
similarity index 98%
rename from src/components/ErrorBoundary.test.tsx
rename to tests/components/ErrorBoundary.test.tsx
index 8572163..77ede42 100644
--- a/src/components/ErrorBoundary.test.tsx
+++ b/tests/components/ErrorBoundary.test.tsx
@@ -2,7 +2,7 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { act, useState } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import { MemoryRouter } from 'react-router-dom';
-import { ErrorBoundary } from './ErrorBoundary';
+import { ErrorBoundary } from '../../src/components/ErrorBoundary';
 
 // Configure act environment for React 19
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/tests/components/ToolLayout.test.tsx b/tests/components/ToolLayout.test.tsx
new file mode 100644
index 0000000..b24698f
--- /dev/null
+++ b/tests/components/ToolLayout.test.tsx
@@ -0,0 +1,61 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { ToolLayout } from '../../src/components/ToolLayout';
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe('ToolLayout', () => {
+  let container: HTMLDivElement;
+  let root: ReturnType<typeof createRoot>;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+    localStorage.clear();
+  });
+
+  afterEach(() => {
+    act(() => { root.unmount(); });
+    container.remove();
+  });
+
+  async function renderComponent(slug: string, usageCount: number = 0) {
+    if (usageCount > 0) {
+      localStorage.setItem('toolglass_stats', JSON.stringify({ [slug]: usageCount }));
+    }
+
+    await act(async () => {
+      root.render(
+        <MemoryRouter initialEntries={[`/tools/${slug}`]}>
+          <Routes>
+            <Route path="/tools/:slug" element={<ToolLayout><div>Test Child Content</div></ToolLayout>} />
+          </Routes>
+        </MemoryRouter>
+      );
+    });
+    // Wait for animations
+    await act(async () => { await new Promise(r => setTimeout(r, 150)); });
+  }
+
+  it('renders tool info correctly', async () => {
+    await renderComponent('uuid');
+    
+    expect(container.textContent).toContain('Back');
+    expect(container.textContent).toContain('UUID'); // Title
+    expect(container.textContent).toContain('Test Child Content');
+  });
+
+  it('shows usage count from stats', async () => {
+    await renderComponent('uuid', 5);
+    
+    expect(container.textContent).toContain("You've used this tool 5 times");
+  });
+
+  it('returns null if tool not found', async () => {
+    await renderComponent('unknown-tool-slug');
+    expect(container.textContent).toBe('');
+  });
+});
diff --git a/tests/components/ui/CopyButton.test.tsx b/tests/components/ui/CopyButton.test.tsx
new file mode 100644
index 0000000..ddca82b
--- /dev/null
+++ b/tests/components/ui/CopyButton.test.tsx
@@ -0,0 +1,104 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { CopyButton } from '../../../src/components/ui/CopyButton';
+import { ToastProvider } from '../../../src/components/ui/Toast';
+
+describe('CopyButton', () => {
+  let container: HTMLDivElement;
+  let root: ReturnType<typeof createRoot>;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => {
+      root.unmount();
+    });
+    container.remove();
+    vi.restoreAllMocks();
+  });
+
+  function renderButton(value: string, label = 'Copy', disabled = false) {
+    act(() => {
+      root.render(
+        <MemoryRouter initialEntries={['/tools/uuid']}>
+          <ToastProvider>
+            <Routes>
+              <Route
+                path="/tools/:slug"
+                element={<CopyButton value={value} label={label} disabled={disabled} />}
+              />
+            </Routes>
+          </ToastProvider>
+        </MemoryRouter>
+      );
+    });
+  }
+
+  it('renders default label and copies text to clipboard on click', async () => {
+    const writeMock = vi.fn().mockResolvedValue(undefined);
+    Object.assign(navigator, {
+      clipboard: {
+        writeText: writeMock,
+      },
+    });
+
+    renderButton('test-value-123', 'Copy All');
+    expect(container.textContent).toContain('Copy All');
+
+    const button = container.querySelector('button') as HTMLButtonElement;
+    expect(button).not.toBeNull();
+    expect(button.disabled).toBe(false);
+
+    await act(async () => {
+      button.click();
+      await new Promise((r) => setTimeout(r, 50));
+    });
+
+    expect(writeMock).toHaveBeenCalledWith('test-value-123');
+    expect(container.textContent).toContain('Copied');
+  });
+
+  it('handles empty value by disabling or not triggering copy', async () => {
+    const writeMock = vi.fn().mockResolvedValue(undefined);
+    Object.assign(navigator, {
+      clipboard: {
+        writeText: writeMock,
+      },
+    });
+
+    renderButton('');
+    const button = container.querySelector('button') as HTMLButtonElement;
+    expect(button.disabled).toBe(true);
+
+    await act(async () => {
+      button.click();
+    });
+
+    expect(writeMock).not.toHaveBeenCalled();
+  });
+
+  it('handles copy failure gracefully', async () => {
+    const writeMock = vi.fn().mockRejectedValue(new Error('Permission denied'));
+    Object.assign(navigator, {
+      clipboard: {
+        writeText: writeMock,
+      },
+    });
+
+    renderButton('failure-value');
+    const button = container.querySelector('button') as HTMLButtonElement;
+
+    await act(async () => {
+      button.click();
+      await new Promise((r) => setTimeout(r, 50));
+    });
+
+    expect(writeMock).toHaveBeenCalled();
+  });
+});
diff --git a/tests/components/ui/Field.test.tsx b/tests/components/ui/Field.test.tsx
new file mode 100644
index 0000000..48cd13b
--- /dev/null
+++ b/tests/components/ui/Field.test.tsx
@@ -0,0 +1,200 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import {
+  Field,
+  TextInput,
+  TextArea,
+  Select,
+  Dropdown,
+  Toggle,
+  Slider,
+} from '../../../src/components/ui/Field';
+
+describe('Field Components', () => {
+  let container: HTMLDivElement;
+  let root: ReturnType<typeof createRoot>;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => {
+      root.unmount();
+    });
+    container.remove();
+    vi.restoreAllMocks();
+  });
+
+  it('renders Field with label and optional hint', () => {
+    act(() => {
+      root.render(
+        <Field label="Username" hint="Required field">
+          <input data-testid="inp" />
+        </Field>
+      );
+    });
+
+    expect(container.textContent).toContain('Username');
+    expect(container.textContent).toContain('Required field');
+    expect(container.querySelector('[data-testid="inp"]')).not.toBeNull();
+  });
+
+  it('renders TextInput and handles user typing', () => {
+    const onChange = vi.fn();
+    act(() => {
+      root.render(<TextInput placeholder="Type here" onChange={onChange} />);
+    });
+
+    const input = container.querySelector('input')!;
+    expect(input.placeholder).toBe('Type here');
+
+    act(() => {
+      const nativeSetter = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        'value'
+      )?.set;
+      nativeSetter?.call(input, 'hello');
+      input.dispatchEvent(new Event('input', { bubbles: true }));
+      input.dispatchEvent(new Event('change', { bubbles: true }));
+    });
+
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it('renders TextArea with monospaced style', () => {
+    act(() => {
+      root.render(<TextArea defaultValue="code content" />);
+    });
+
+    const ta = container.querySelector('textarea')!;
+    expect(ta.value).toBe('code content');
+  });
+
+  it('renders Select with options and chevron', () => {
+    const onChange = vi.fn();
+    act(() => {
+      root.render(
+        <Select defaultValue="b" onChange={onChange}>
+          <option value="a">Alpha</option>
+          <option value="b">Beta</option>
+        </Select>
+      );
+    });
+
+    const select = container.querySelector('select')!;
+    expect(select.value).toBe('b');
+    expect(container.textContent).toContain('▼');
+
+    act(() => {
+      select.value = 'a';
+      select.dispatchEvent(new Event('change', { bubbles: true }));
+    });
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it('renders Dropdown, opens menu, and selects option', async () => {
+    const onChange = vi.fn();
+    const options = [
+      { label: 'Option 1', value: 'opt1' },
+      { label: 'Option 2', value: 'opt2' },
+    ];
+
+    act(() => {
+      root.render(<Dropdown value="opt1" options={options} onChange={onChange} />);
+    });
+
+    expect(container.textContent).toContain('Option 1');
+
+    // Click trigger to open
+    const trigger = container.querySelector('button')!;
+    await act(async () => {
+      trigger.click();
+      await new Promise((r) => setTimeout(r, 50));
+    });
+
+    expect(container.textContent).toContain('Option 2');
+
+    // Click option 2
+    const optButtons = Array.from(container.querySelectorAll('button'));
+    const opt2Btn = optButtons.find((b) => b.textContent?.includes('Option 2'))!;
+    await act(async () => {
+      opt2Btn.click();
+      await new Promise((r) => setTimeout(r, 50));
+    });
+
+    expect(onChange).toHaveBeenCalledWith('opt2');
+  });
+
+  it('closes Dropdown when clicking trigger again', async () => {
+    const options = [
+      { label: 'A', value: 'a' },
+      { label: 'B', value: 'b' },
+    ];
+
+    act(() => {
+      root.render(<Dropdown value="a" options={options} onChange={() => {}} />);
+    });
+
+    const trigger = container.querySelector('button')!;
+    await act(async () => {
+      trigger.click();
+      await new Promise((r) => setTimeout(r, 100));
+    });
+
+    expect(container.textContent).toContain('B');
+
+    // Click trigger again to close
+    await act(async () => {
+      trigger.click();
+      await new Promise((r) => setTimeout(r, 250));
+    });
+
+    // Menu should be closed
+    expect(container.querySelectorAll('button')).toHaveLength(1);
+  });
+
+  it('renders Toggle and triggers onChange', () => {
+    const onChange = vi.fn();
+    act(() => {
+      root.render(<Toggle checked={false} onChange={onChange} label="Enable Feature" />);
+    });
+
+    const button = container.querySelector('button[role="switch"]') as HTMLButtonElement;
+    expect(button).not.toBeNull();
+    expect(button.getAttribute('aria-checked')).toBe('false');
+    expect(container.textContent).toContain('Enable Feature');
+
+    act(() => {
+      button.click();
+    });
+
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+
+  it('renders Slider and handles value adjustments', () => {
+    const onChange = vi.fn();
+    act(() => {
+      root.render(<Slider value={20} min={4} max={64} onChange={onChange} />);
+    });
+
+    const input = container.querySelector('input[type="range"]') as HTMLInputElement;
+    expect(input).not.toBeNull();
+    expect(input.value).toBe('20');
+
+    act(() => {
+      const nativeSetter = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        'value'
+      )?.set;
+      nativeSetter?.call(input, '32');
+      input.dispatchEvent(new Event('input', { bubbles: true }));
+      input.dispatchEvent(new Event('change', { bubbles: true }));
+    });
+
+    expect(onChange).toHaveBeenCalledWith(32);
+  });
+});
diff --git a/tests/components/ui/ThemeToggle.test.tsx b/tests/components/ui/ThemeToggle.test.tsx
new file mode 100644
index 0000000..8884010
--- /dev/null
+++ b/tests/components/ui/ThemeToggle.test.tsx
@@ -0,0 +1,85 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { ThemeToggle } from '../../../src/components/ui/ThemeToggle';
+
+describe('ThemeToggle', () => {
+  let container: HTMLDivElement;
+  let root: ReturnType<typeof createRoot>;
+
+  beforeEach(() => {
+    localStorage.clear();
+    document.documentElement.removeAttribute('data-theme');
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => {
+      root.unmount();
+    });
+    container.remove();
+    vi.restoreAllMocks();
+  });
+
+  function renderToggle() {
+    act(() => {
+      root.render(<ThemeToggle />);
+    });
+  }
+
+  it('renders moon icon in light mode and toggles to sun in dark mode', async () => {
+    renderToggle();
+
+    const button = container.querySelector('#theme-toggle') as HTMLButtonElement;
+    expect(button).not.toBeNull();
+    // Default is light (moon icon)
+    expect(button.textContent).toContain('🌙');
+
+    await act(async () => {
+      button.click();
+      await new Promise((r) => setTimeout(r, 50));
+    });
+
+    expect(button.textContent).toContain('☀️');
+    expect(document.documentElement.getAttribute('data-theme')).toBe('dark');
+  });
+
+  it('rotates slightly on hover events', () => {
+    renderToggle();
+    const button = container.querySelector('#theme-toggle') as HTMLButtonElement;
+
+    act(() => {
+      button.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    });
+    expect(button.style.transform).toBe('rotate(20deg)');
+
+    act(() => {
+      button.dispatchEvent(new MouseEvent('mouseout', { bubbles: true }));
+    });
+    expect(button.style.transform).toBe('rotate(0deg)');
+  });
+
+  it('supports document.startViewTransition if available', async () => {
+    const startViewTransitionMock = vi.fn().mockImplementation((cb: () => void) => {
+      cb();
+      return {
+        ready: Promise.resolve(),
+      };
+    });
+    (document as unknown as { startViewTransition: unknown }).startViewTransition =
+      startViewTransitionMock;
+
+    renderToggle();
+    const button = container.querySelector('#theme-toggle') as HTMLButtonElement;
+
+    await act(async () => {
+      button.click();
+      await new Promise((r) => setTimeout(r, 50));
+    });
+
+    expect(startViewTransitionMock).toHaveBeenCalled();
+    delete (document as unknown as { startViewTransition?: unknown }).startViewTransition;
+  });
+});
diff --git a/tests/components/ui/Toast.test.tsx b/tests/components/ui/Toast.test.tsx
new file mode 100644
index 0000000..03bbee0
--- /dev/null
+++ b/tests/components/ui/Toast.test.tsx
@@ -0,0 +1,119 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { ToastProvider, useToast } from '../../../src/components/ui/Toast';
+
+function ToastTrigger() {
+  const toast = useToast();
+  return (
+    <div>
+      <button onClick={() => toast.push('Success message', 'success')}>Trigger Success</button>
+      <button onClick={() => toast.push('Error message', 'error')}>Trigger Error</button>
+      <button onClick={() => toast.push('Info message', 'info')}>Trigger Info</button>
+      <button onClick={() => toast.push('Updated message', 'info', 999)}>Update Toast</button>
+    </div>
+  );
+}
+
+describe('Toast and ToastProvider', () => {
+  let container: HTMLDivElement;
+  let root: ReturnType<typeof createRoot>;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => {
+      root.unmount();
+    });
+    container.remove();
+  });
+
+  function renderToaster() {
+    act(() => {
+      root.render(
+        <ToastProvider>
+          <ToastTrigger />
+        </ToastProvider>
+      );
+    });
+  }
+
+  it('renders success, error, and info toasts', () => {
+    renderToaster();
+
+    const buttons = Array.from(container.querySelectorAll('button'));
+    const successBtn = buttons.find((b) => b.textContent === 'Trigger Success')!;
+    const errorBtn = buttons.find((b) => b.textContent === 'Trigger Error')!;
+    const infoBtn = buttons.find((b) => b.textContent === 'Trigger Info')!;
+
+    act(() => {
+      successBtn.click();
+      errorBtn.click();
+      infoBtn.click();
+    });
+
+    expect(container.textContent).toContain('Success message');
+    expect(container.textContent).toContain('Error message');
+    expect(container.textContent).toContain('Info message');
+  });
+
+  it('updates an existing toast with same id', () => {
+    renderToaster();
+
+    const updateBtn = Array.from(container.querySelectorAll('button')).find(
+      (b) => b.textContent === 'Update Toast'
+    )!;
+
+    act(() => {
+      updateBtn.click();
+    });
+    expect(container.textContent).toContain('Updated message');
+  });
+
+  it('auto-dismisses toasts when dismissal timeout triggers', async () => {
+    let capturedCallback: (() => void) | null = null;
+    vi.spyOn(window, 'setTimeout').mockImplementation(((cb: () => void, ms?: number) => {
+      if (ms === 2800) {
+        capturedCallback = cb;
+        return 123 as unknown as number;
+      }
+      return 1;
+    }) as unknown as typeof window.setTimeout);
+
+    renderToaster();
+
+    const successBtn = Array.from(container.querySelectorAll('button')).find(
+      (b) => b.textContent === 'Trigger Success'
+    )!;
+
+    act(() => {
+      successBtn.click();
+    });
+    expect(container.textContent).toContain('Success message');
+
+    expect(capturedCallback).not.toBeNull();
+    await act(async () => {
+      capturedCallback!();
+      await Promise.resolve();
+    });
+
+    expect(container.textContent).not.toContain('Success message');
+  });
+
+  it('throws error when useToast is used outside of ToastProvider', () => {
+    function BrokenComponent() {
+      useToast();
+      return null;
+    }
+
+    expect(() => {
+      act(() => {
+        root.render(<BrokenComponent />);
+      });
+    }).toThrow('useToast must be used within ToastProvider');
+  });
+});
diff --git a/tests/hooks/useClipboard.test.tsx b/tests/hooks/useClipboard.test.tsx
new file mode 100644
index 0000000..adae4e3
--- /dev/null
+++ b/tests/hooks/useClipboard.test.tsx
@@ -0,0 +1,131 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { useClipboard } from '../../src/hooks/useClipboard';
+import { ToastProvider } from '../../src/components/ui/Toast';
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+function TestHarness({ resetMs }: { resetMs?: number }) {
+  const { copy, copied } = useClipboard(resetMs);
+  return (
+    <div>
+      <button data-testid="copy-btn" onClick={() => copy('test text')}>Copy</button>
+      <span data-testid="copied">{copied ? 'yes' : 'no'}</span>
+    </div>
+  );
+}
+
+describe('useClipboard', () => {
+  let container: HTMLDivElement;
+  let root: ReturnType<typeof createRoot>;
+  let originalClipboard: Clipboard;
+  let originalExecCommand: typeof document.execCommand;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+
+    originalClipboard = { ...navigator.clipboard };
+    originalExecCommand = document.execCommand;
+  });
+
+  afterEach(() => {
+    act(() => { root.unmount(); });
+    container.remove();
+    Object.assign(navigator, { clipboard: originalClipboard });
+    document.execCommand = originalExecCommand;
+    vi.restoreAllMocks();
+  });
+
+  function renderTool(resetMs?: number) {
+    act(() => {
+      root.render(
+        <MemoryRouter initialEntries={['/path']}>
+          <ToastProvider>
+            <Routes>
+              <Route path="/path" element={<TestHarness resetMs={resetMs} />} />
+            </Routes>
+          </ToastProvider>
+        </MemoryRouter>
+      );
+    });
+  }
+
+  it('copy() writes to clipboard and copied becomes true then resets after resetMs', async () => {
+    const writeTextMock = vi.fn().mockResolvedValue(undefined);
+    Object.assign(navigator, {
+      clipboard: {
+        writeText: writeTextMock,
+      },
+    });
+
+    renderTool(50);
+    expect(container.querySelector('[data-testid="copied"]')?.textContent).toBe('no');
+
+    await act(async () => {
+      container.querySelector<HTMLButtonElement>('[data-testid="copy-btn"]')?.click();
+    });
+
+    expect(writeTextMock).toHaveBeenCalledWith('test text');
+    expect(container.querySelector('[data-testid="copied"]')?.textContent).toBe('yes');
+
+    await act(async () => {
+      await new Promise(r => setTimeout(r, 100));
+    });
+
+    expect(container.querySelector('[data-testid="copied"]')?.textContent).toBe('no');
+  });
+
+  it('falls back to document.execCommand when navigator.clipboard is unavailable', async () => {
+    Object.defineProperty(navigator, 'clipboard', { value: undefined, configurable: true });
+    document.execCommand = vi.fn().mockReturnValue(true);
+
+    renderTool();
+
+    await act(async () => {
+      container.querySelector<HTMLButtonElement>('[data-testid="copy-btn"]')?.click();
+    });
+
+    expect(document.execCommand).toHaveBeenCalledWith('copy');
+    expect(container.querySelector('[data-testid="copied"]')?.textContent).toBe('yes');
+  });
+
+  it('returns false on copy failure', async () => {
+    const writeTextMock = vi.fn().mockRejectedValue(new Error('fail'));
+    Object.assign(navigator, {
+      clipboard: {
+        writeText: writeTextMock,
+      },
+    });
+
+    // We can't directly check the return value of copy() in the DOM harness unless we expose it.
+    // Let's modify the harness temporarily or just trust that it catches it.
+    // Wait, the prompt says "Test: Returns false on copy failure". Let's create a specific harness for this.
+    let result: boolean | undefined;
+    function FailHarness() {
+      const { copy } = useClipboard();
+      return (
+        <button
+          onClick={async () => {
+            result = await copy('test');
+          }}
+        >
+          Copy
+        </button>
+      );
+    }
+    
+    act(() => {
+      root.render(<FailHarness />);
+    });
+    
+    await act(async () => {
+      container.querySelector<HTMLButtonElement>('button')?.click();
+    });
+
+    expect(result).toBe(false);
+  });
+});
diff --git a/tests/hooks/useRecentTools.test.tsx b/tests/hooks/useRecentTools.test.tsx
new file mode 100644
index 0000000..911e11e
--- /dev/null
+++ b/tests/hooks/useRecentTools.test.tsx
@@ -0,0 +1,94 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { useRecentTools } from '../../src/hooks/useRecentTools';
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+function TestHarness() {
+  const { recents, addRecent } = useRecentTools();
+  return (
+    <div>
+      <div data-testid="recents">{recents.join(',')}</div>
+      <button onClick={() => addRecent('tool1')} data-testid="add-tool1">Add Tool 1</button>
+      <button onClick={() => addRecent('tool2')} data-testid="add-tool2">Add Tool 2</button>
+      <button onClick={() => addRecent('tool3')} data-testid="add-tool3">Add Tool 3</button>
+      <button onClick={() => addRecent('tool4')} data-testid="add-tool4">Add Tool 4</button>
+    </div>
+  );
+}
+
+describe('useRecentTools', () => {
+  let container: HTMLDivElement;
+  let root: ReturnType<typeof createRoot>;
+
+  beforeEach(() => {
+    localStorage.clear();
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => { root.unmount(); });
+    container.remove();
+  });
+
+  function renderTool() {
+    act(() => {
+      root.render(<TestHarness />);
+    });
+  }
+
+  it('starts with empty recents', () => {
+    renderTool();
+    expect(container.querySelector('[data-testid="recents"]')?.textContent).toBe('');
+  });
+
+  it('adds slug and stores in localStorage under toolglass_recent_tools', () => {
+    renderTool();
+    act(() => {
+      container.querySelector<HTMLButtonElement>('[data-testid="add-tool1"]')?.click();
+    });
+    expect(container.querySelector('[data-testid="recents"]')?.textContent).toBe('tool1');
+    expect(localStorage.getItem('toolglass_recent_tools')).toBe(JSON.stringify(['tool1']));
+  });
+
+  it('caps at 3 most recent (MAX_RECENTS = 3)', () => {
+    renderTool();
+    act(() => {
+      container.querySelector<HTMLButtonElement>('[data-testid="add-tool1"]')?.click();
+    });
+    act(() => {
+      container.querySelector<HTMLButtonElement>('[data-testid="add-tool2"]')?.click();
+    });
+    act(() => {
+      container.querySelector<HTMLButtonElement>('[data-testid="add-tool3"]')?.click();
+    });
+    act(() => {
+      container.querySelector<HTMLButtonElement>('[data-testid="add-tool4"]')?.click();
+    });
+    // Order should be tool4, tool3, tool2
+    expect(container.querySelector('[data-testid="recents"]')?.textContent).toBe('tool4,tool3,tool2');
+  });
+
+  it('deduplicates — adding same slug moves it to front', () => {
+    renderTool();
+    act(() => {
+      container.querySelector<HTMLButtonElement>('[data-testid="add-tool1"]')?.click();
+    });
+    act(() => {
+      container.querySelector<HTMLButtonElement>('[data-testid="add-tool2"]')?.click();
+    });
+    act(() => {
+      container.querySelector<HTMLButtonElement>('[data-testid="add-tool1"]')?.click();
+    });
+    expect(container.querySelector('[data-testid="recents"]')?.textContent).toBe('tool1,tool2');
+  });
+
+  it('loads from existing localStorage on mount', () => {
+    localStorage.setItem('toolglass_recent_tools', JSON.stringify(['tool2', 'tool1']));
+    renderTool();
+    expect(container.querySelector('[data-testid="recents"]')?.textContent).toBe('tool2,tool1');
+  });
+});
diff --git a/tests/hooks/useTheme.test.tsx b/tests/hooks/useTheme.test.tsx
new file mode 100644
index 0000000..a744621
--- /dev/null
+++ b/tests/hooks/useTheme.test.tsx
@@ -0,0 +1,102 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { useTheme } from '../../src/hooks/useTheme';
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+function TestHarness() {
+  const { theme, toggle } = useTheme();
+  return (
+    <div>
+      <div data-testid="theme">{theme}</div>
+      <button onClick={toggle} data-testid="toggle-btn">Toggle</button>
+    </div>
+  );
+}
+
+describe('useTheme', () => {
+  let container: HTMLDivElement;
+  let root: ReturnType<typeof createRoot>;
+  let matchMediaMock: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    localStorage.clear();
+    document.documentElement.removeAttribute('data-theme');
+    
+    matchMediaMock = vi.fn().mockImplementation(query => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    }));
+    window.matchMedia = matchMediaMock as unknown as typeof window.matchMedia;
+
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => { root.unmount(); });
+    container.remove();
+    vi.restoreAllMocks();
+  });
+
+  function renderTool() {
+    act(() => {
+      root.render(<TestHarness />);
+    });
+  }
+
+  it('defaults from localStorage toolglass-theme if set', () => {
+    localStorage.setItem('toolglass-theme', 'dark');
+    renderTool();
+    expect(container.querySelector('[data-testid="theme"]')?.textContent).toBe('dark');
+  });
+
+  it('falls back to OS preference via matchMedia', () => {
+    matchMediaMock.mockImplementation((_query: string) => ({
+      matches: true, // OS preference dark
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    }));
+    renderTool();
+    expect(container.querySelector('[data-testid="theme"]')?.textContent).toBe('dark');
+  });
+
+  it('toggle() switches between light/dark', () => {
+    renderTool();
+    expect(container.querySelector('[data-testid="theme"]')?.textContent).toBe('light');
+    
+    act(() => {
+      container.querySelector<HTMLButtonElement>('[data-testid="toggle-btn"]')?.click();
+    });
+    
+    expect(container.querySelector('[data-testid="theme"]')?.textContent).toBe('dark');
+  });
+
+  it('sets data-theme attribute on document.documentElement', () => {
+    renderTool();
+    expect(document.documentElement.getAttribute('data-theme')).toBe('light');
+    
+    act(() => {
+      container.querySelector<HTMLButtonElement>('[data-testid="toggle-btn"]')?.click();
+    });
+    
+    expect(document.documentElement.getAttribute('data-theme')).toBe('dark');
+  });
+
+  it('stores theme in localStorage', () => {
+    renderTool();
+    expect(localStorage.getItem('toolglass-theme')).toBe('light');
+    
+    act(() => {
+      container.querySelector<HTMLButtonElement>('[data-testid="toggle-btn"]')?.click();
+    });
+    
+    expect(localStorage.getItem('toolglass-theme')).toBe('dark');
+  });
+});
diff --git a/tests/hooks/useToolStats.test.tsx b/tests/hooks/useToolStats.test.tsx
new file mode 100644
index 0000000..9c209d9
--- /dev/null
+++ b/tests/hooks/useToolStats.test.tsx
@@ -0,0 +1,76 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { useToolStats } from '../../src/hooks/useToolStats';
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+function TestHarness({ slug }: { slug?: string }) {
+  const { count, allStats, increment, enabled, toggleTelemetry } = useToolStats(slug);
+  return (
+    <div>
+      <div data-testid="count">{count}</div>
+      <div data-testid="all-stats">{JSON.stringify(allStats)}</div>
+      <div data-testid="enabled">{enabled ? 'yes' : 'no'}</div>
+      <button onClick={increment} data-testid="inc-btn">Inc</button>
+      <button onClick={toggleTelemetry} data-testid="toggle-btn">Toggle</button>
+    </div>
+  );
+}
+
+describe('useToolStats', () => {
+  let container: HTMLDivElement;
+  let root: ReturnType<typeof createRoot>;
+
+  beforeEach(() => {
+    localStorage.clear();
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => { root.unmount(); });
+    container.remove();
+  });
+
+  function renderTool(slug?: string) {
+    act(() => {
+      root.render(<TestHarness slug={slug} />);
+    });
+  }
+
+  it('starts with count 0', () => {
+    renderTool('my-tool');
+    expect(container.querySelector('[data-testid="count"]')?.textContent).toBe('0');
+  });
+
+  it('increment() increases count and persists to localStorage toolglass_stats', () => {
+    renderTool('my-tool');
+    act(() => {
+      container.querySelector<HTMLButtonElement>('[data-testid="inc-btn"]')?.click();
+    });
+    
+    expect(container.querySelector('[data-testid="count"]')?.textContent).toBe('1');
+    expect(localStorage.getItem('toolglass_stats')).toBe(JSON.stringify({ 'my-tool': 1 }));
+  });
+
+  it('toggleTelemetry() toggles toolglass_telemetry_enabled in localStorage', () => {
+    renderTool('my-tool');
+    expect(container.querySelector('[data-testid="enabled"]')?.textContent).toBe('yes');
+    
+    act(() => {
+      container.querySelector<HTMLButtonElement>('[data-testid="toggle-btn"]')?.click();
+    });
+    
+    expect(container.querySelector('[data-testid="enabled"]')?.textContent).toBe('no');
+    expect(localStorage.getItem('toolglass_telemetry_enabled')).toBe('false');
+  });
+
+  it('loads existing stats from localStorage', () => {
+    localStorage.setItem('toolglass_stats', JSON.stringify({ 'my-tool': 5 }));
+    renderTool('my-tool');
+    expect(container.querySelector('[data-testid="count"]')?.textContent).toBe('5');
+    expect(container.querySelector('[data-testid="all-stats"]')?.textContent).toBe(JSON.stringify({ 'my-tool': 5 }));
+  });
+});
diff --git a/tests/hooks/useUrlState.test.tsx b/tests/hooks/useUrlState.test.tsx
new file mode 100644
index 0000000..9231b9d
--- /dev/null
+++ b/tests/hooks/useUrlState.test.tsx
@@ -0,0 +1,79 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { useUrlState } from '../../src/hooks/useUrlState';
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+function TestHarness() {
+  const [value, setValue] = useUrlState<number>(
+    'len',
+    10,
+    (raw) => parseInt(raw, 10),
+    (val) => val.toString()
+  );
+
+  return (
+    <div>
+      <div data-testid="val">{value}</div>
+      <button onClick={() => setValue(20)} data-testid="set-btn">Set</button>
+    </div>
+  );
+}
+
+describe('useUrlState', () => {
+  let container: HTMLDivElement;
+  let root: ReturnType<typeof createRoot>;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => { root.unmount(); });
+    container.remove();
+  });
+
+  function renderTool(initialUrl = '/') {
+    act(() => {
+      root.render(
+        <MemoryRouter initialEntries={[initialUrl]}>
+          <Routes>
+            <Route path="*" element={<TestHarness />} />
+          </Routes>
+        </MemoryRouter>
+      );
+    });
+  }
+
+  it('returns defaultVal when key not in URL', () => {
+    renderTool('/');
+    expect(container.querySelector('[data-testid="val"]')?.textContent).toBe('10');
+  });
+
+  it('parses value from URL search params', () => {
+    renderTool('/?len=42');
+    expect(container.querySelector('[data-testid="val"]')?.textContent).toBe('42');
+  });
+
+  it('updates value when setValue is called (and sets in URL params)', async () => {
+    renderTool('/');
+    expect(container.querySelector('[data-testid="val"]')?.textContent).toBe('10');
+    
+    act(() => {
+      container.querySelector<HTMLButtonElement>('[data-testid="set-btn"]')?.click();
+    });
+
+    // Debounce wait (200ms) for hook to update URL? 
+    // Actually the value updates the url after 200ms, let's wait a bit and trigger URL rerender
+    await act(async () => {
+      await new Promise(r => setTimeout(r, 250));
+    });
+
+    // We can't directly check the MemoryRouter URL in DOM simply, but we can verify the DOM re-rendered with new val (though value update isn't immediate in the harness if it relies on URL, wait, setValue calls setSearchParams which triggers render. Wait, it doesn't update the local state, it only updates the URL which then drives the hook state).
+    expect(container.querySelector('[data-testid="val"]')?.textContent).toBe('20');
+  });
+});
diff --git a/tests/pages/Landing.test.tsx b/tests/pages/Landing.test.tsx
new file mode 100644
index 0000000..0ec2e39
--- /dev/null
+++ b/tests/pages/Landing.test.tsx
@@ -0,0 +1,77 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { MemoryRouter } from 'react-router-dom';
+import { Landing } from '../../src/pages/Landing';
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe('Landing', () => {
+  let container: HTMLDivElement;
+  let root: ReturnType<typeof createRoot>;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+    localStorage.clear();
+  });
+
+  afterEach(() => {
+    act(() => { root.unmount(); });
+    container.remove();
+  });
+
+  async function renderComponent() {
+    await act(async () => {
+      root.render(
+        <MemoryRouter>
+          <Landing />
+        </MemoryRouter>
+      );
+    });
+    await act(async () => { await new Promise(r => setTimeout(r, 150)); });
+  }
+
+  it('renders heading and tagline', async () => {
+    await renderComponent();
+    expect(container.textContent).toContain('Toolglass');
+    expect(container.textContent).toContain('Frosted developer utilities');
+  });
+
+  it('shows category buttons and all tools by default', async () => {
+    await renderComponent();
+    expect(container.textContent).toContain('All Utilities');
+    expect(container.textContent).toContain('Generators');
+    expect(container.textContent).toContain('Utilities');
+
+    // All tools should be present, verify some from different categories
+    expect(container.textContent).toContain('UUID');
+    expect(container.textContent).toContain('Base64');
+  });
+
+  it('filters tools when category is clicked', async () => {
+    await renderComponent();
+    const buttons = Array.from(container.querySelectorAll('button'));
+    const generatorsBtn = buttons.find(b => b.textContent?.includes('Generators'));
+    
+    expect(generatorsBtn).not.toBeUndefined();
+    
+    await act(async () => {
+      generatorsBtn?.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    });
+    await act(async () => { await new Promise(r => setTimeout(r, 150)); });
+
+    expect(container.textContent).toContain('UUID');
+    // Base64 is in Encoders & Decoders, shouldn't be here
+    expect(container.textContent).not.toContain('Base64');
+  });
+
+  it('shows Recent section when localStorage has recent tools', async () => {
+    localStorage.setItem('toolglass_recent_tools', JSON.stringify(['uuid', 'base64']));
+    await renderComponent();
+
+    const recentHeader = Array.from(container.querySelectorAll('div')).find(div => div.textContent === 'Recent');
+    expect(recentHeader).not.toBeUndefined();
+  });
+});
diff --git a/src/pages/NotFound.test.tsx b/tests/pages/NotFound.test.tsx
similarity index 98%
rename from src/pages/NotFound.test.tsx
rename to tests/pages/NotFound.test.tsx
index 01cb5aa..8176e04 100644
--- a/src/pages/NotFound.test.tsx
+++ b/tests/pages/NotFound.test.tsx
@@ -2,7 +2,7 @@ import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { act } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import { MemoryRouter } from 'react-router-dom';
-import { NotFound } from './NotFound';
+import { NotFound } from '../../src/pages/NotFound';
 
 // Configure act environment for React 19
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/tests/pages/ToolPage.test.tsx b/tests/pages/ToolPage.test.tsx
new file mode 100644
index 0000000..85343e1
--- /dev/null
+++ b/tests/pages/ToolPage.test.tsx
@@ -0,0 +1,57 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { ToolPage } from '../../src/pages/ToolPage';
+import { ToastProvider } from '../../src/components/ui/Toast';
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe('ToolPage', () => {
+  let container: HTMLDivElement;
+  let root: ReturnType<typeof createRoot>;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+    localStorage.clear();
+  });
+
+  afterEach(() => {
+    act(() => { root.unmount(); });
+    container.remove();
+  });
+
+  async function renderComponent(slug: string) {
+    await act(async () => {
+      root.render(
+        <MemoryRouter initialEntries={[`/tools/${slug}`]}>
+          <ToastProvider>
+            <Routes>
+              <Route path="/tools/:slug" element={<ToolPage />} />
+            </Routes>
+          </ToastProvider>
+        </MemoryRouter>
+      );
+    });
+    // Let Suspense settle
+    await act(async () => { await new Promise(r => setTimeout(r, 200)); });
+  }
+
+  it('renders tool component for valid slug and adds to recent', async () => {
+    await renderComponent('uuid');
+    
+    // Since component loading might take a tiny bit due to lazy loading (if any), but in our setup it's synchronous in tests if not lazy, let's just check it doesn't say Tool not found
+    expect(container.textContent).not.toContain('Tool not found');
+    
+    const recent = JSON.parse(localStorage.getItem('toolglass_recent_tools') || '[]');
+    expect(recent).toContain('uuid');
+  });
+
+  it('renders NotFound for invalid slug', async () => {
+    await renderComponent('invalid-tool-slug-123');
+    
+    expect(container.textContent).toContain('Tool Not Found');
+  });
+});
diff --git a/tests/setup.ts b/tests/setup.ts
new file mode 100644
index 0000000..83b9380
--- /dev/null
+++ b/tests/setup.ts
@@ -0,0 +1,40 @@
+// Vitest central setup for jsdom environment
+
+import { MotionGlobalConfig } from 'framer-motion';
+
+// 1. Enable React act() environment and instant animations
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+MotionGlobalConfig.skipAnimations = true;
+
+// 2. Mock window.matchMedia for theme and responsive tests
+if (typeof window !== 'undefined' && !window.matchMedia) {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: (query: string) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: () => {},
+      removeListener: () => {},
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      dispatchEvent: () => false,
+    }),
+  });
+}
+
+// 3. Mock scrollIntoView, scrollTo, and animate for jsdom
+if (typeof window !== 'undefined') {
+  window.scrollTo = window.scrollTo || (() => {});
+  Element.prototype.scrollIntoView = Element.prototype.scrollIntoView || (() => {});
+  Element.prototype.animate =
+    Element.prototype.animate ||
+    (() =>
+      ({
+        onfinish: null,
+        cancel: () => {},
+        play: () => {},
+        pause: () => {},
+        finish: () => {},
+      }) as unknown as Animation);
+}
diff --git a/tests/test-utils.tsx b/tests/test-utils.tsx
new file mode 100644
index 0000000..02ae2d0
--- /dev/null
+++ b/tests/test-utils.tsx
@@ -0,0 +1,105 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { ToastProvider } from '../src/components/ui/Toast';
+import type { ReactNode } from 'react';
+
+export interface RenderResult {
+  container: HTMLDivElement;
+  root: Root;
+  unmount: () => void;
+}
+
+export interface RenderOptions {
+  route?: string;
+  routePath?: string;
+}
+
+/**
+ * Creates and renders a React tree wrapped in MemoryRouter and ToastProvider.
+ */
+export function renderWithProviders(
+  ui: ReactNode,
+  { route = '/', routePath = route }: RenderOptions = {}
+): RenderResult {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = createRoot(container);
+
+  act(() => {
+    root.render(
+      <MemoryRouter initialEntries={[route]}>
+        <ToastProvider>
+          <Routes>
+            <Route path={routePath} element={ui} />
+          </Routes>
+        </ToastProvider>
+      </MemoryRouter>
+    );
+  });
+
+  return {
+    container,
+    root,
+    unmount: () => {
+      act(() => {
+        root.unmount();
+      });
+      container.remove();
+    },
+  };
+}
+
+/**
+ * Simulates typing into an input or textarea using React's native setter.
+ */
+export async function simulateInput(
+  element: HTMLInputElement | HTMLTextAreaElement,
+  value: string
+): Promise<void> {
+  await act(async () => {
+    const proto =
+      element instanceof HTMLInputElement
+        ? window.HTMLInputElement.prototype
+        : window.HTMLTextAreaElement.prototype;
+    const nativeSetter = Object.getOwnPropertyDescriptor(proto, 'value')?.set;
+    nativeSetter?.call(element, value);
+    element.dispatchEvent(new Event('input', { bubbles: true }));
+    element.dispatchEvent(new Event('change', { bubbles: true }));
+  });
+}
+
+/**
+ * Awaitable timer wrapped in act() for animations and effects.
+ */
+export async function waitAct(ms = 50): Promise<void> {
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, ms));
+  });
+}
+
+/**
+ * Condition-based wait that polls an assertion until it passes or times out.
+ * Eliminates fixed long sleeps and timing sensitivity in tests.
+ */
+export async function waitFor(
+  assertion: () => void | Promise<void>,
+  { timeout = 1000, interval = 10 } = {}
+): Promise<void> {
+  const start = Date.now();
+  let lastError: unknown;
+  while (Date.now() - start < timeout) {
+    try {
+      await act(async () => {
+        await assertion();
+      });
+      return;
+    } catch (err) {
+      lastError = err;
+      await act(async () => {
+        await new Promise((r) => setTimeout(r, interval));
+      });
+    }
+  }
+  throw lastError;
+}
diff --git a/src/tools/base64/base64.test.ts b/tests/tools/base64.test.ts
similarity index 92%
rename from src/tools/base64/base64.test.ts
rename to tests/tools/base64.test.ts
index 5e0d70a..66e4e55 100644
--- a/src/tools/base64/base64.test.ts
+++ b/tests/tools/base64.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { decode, encode } from './base64';
+import { decode, encode } from '../../src/tools/base64/base64';
 
 describe('base64 encode/decode', () => {
   it('round-trips ASCII', () => {
diff --git a/tests/tools/color.test.tsx b/tests/tools/color.test.tsx
new file mode 100644
index 0000000..1c93ceb
--- /dev/null
+++ b/tests/tools/color.test.tsx
@@ -0,0 +1,114 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import ColorTool from '../../src/tools/color/ColorTool';
+import { ToastProvider } from '../../src/components/ui/Toast';
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe('ColorTool Component & Color Conversions', () => {
+  let container: HTMLDivElement;
+  let root: ReturnType<typeof createRoot>;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => {
+      root.unmount();
+    });
+    container.remove();
+    vi.restoreAllMocks();
+  });
+
+  function renderTool() {
+    act(() => {
+      root.render(
+        <MemoryRouter initialEntries={['/tools/color']}>
+          <ToastProvider>
+            <Routes>
+              <Route path="/tools/:slug" element={<ColorTool />} />
+            </Routes>
+          </ToastProvider>
+        </MemoryRouter>
+      );
+    });
+  }
+
+  function setColorInput(color: string) {
+    const textInput = container.querySelector('input.input') as HTMLInputElement;
+    expect(textInput).not.toBeNull();
+    act(() => {
+      const nativeSetter = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        'value'
+      )?.set;
+      nativeSetter?.call(textInput, color);
+      textInput.dispatchEvent(new Event('input', { bubbles: true }));
+      textInput.dispatchEvent(new Event('change', { bubbles: true }));
+    });
+  }
+
+  it('renders default color #8b5cf6 with HEX, RGB, and HSL conversions', () => {
+    renderTool();
+
+    expect(container.textContent).toContain('HEX');
+    expect(container.textContent).toContain('RGB');
+    expect(container.textContent).toContain('HSL');
+    expect(container.textContent).toContain('#8B5CF6');
+    expect(container.textContent).toContain('rgb(139, 92, 246)');
+  });
+
+  it('updates conversion values when preset color is clicked', () => {
+    renderTool();
+
+    const redPreset = container.querySelector('div[title="#FF0000"]') as HTMLElement;
+    expect(redPreset).not.toBeNull();
+
+    act(() => {
+      redPreset.click();
+    });
+
+    expect(container.textContent).toContain('#FF0000');
+    expect(container.textContent).toContain('rgb(255, 0, 0)');
+    expect(container.textContent).toContain('hsl(0, 100%, 50%)');
+  });
+
+  it('displays error message when color format is invalid', () => {
+    renderTool();
+
+    setColorInput('not-a-real-color-12345');
+
+    expect(container.textContent).toContain('Invalid color format.');
+    expect(container.textContent).not.toContain('HEX');
+  });
+
+  it('copies color to clipboard when copy row is clicked', async () => {
+    const writeTextMock = vi.fn().mockResolvedValue(undefined);
+    Object.assign(navigator, {
+      clipboard: {
+        writeText: writeTextMock,
+      },
+    });
+
+    renderTool();
+
+    const hexLabel = Array.from(container.querySelectorAll('div')).find(
+      (el) => el.textContent?.trim() === 'HEX'
+    );
+    expect(hexLabel).toBeDefined();
+    const hexRow = hexLabel?.parentElement as HTMLDivElement;
+    expect(hexRow).not.toBeNull();
+
+    await act(async () => {
+      hexRow.click();
+    });
+
+    expect(writeTextMock).toHaveBeenCalledWith('#8B5CF6');
+    expect(hexRow.textContent).toContain('Copied!');
+  });
+});
diff --git a/src/tools/curl-to-fetch/curlSecurity.test.ts b/tests/tools/curlSecurity.test.ts
similarity index 99%
rename from src/tools/curl-to-fetch/curlSecurity.test.ts
rename to tests/tools/curlSecurity.test.ts
index 735970c..aa0e767 100644
--- a/src/tools/curl-to-fetch/curlSecurity.test.ts
+++ b/tests/tools/curlSecurity.test.ts
@@ -11,7 +11,7 @@ import {
   scrubStorageAuth,
   SavedRequest,
   HistoryItem
-} from './curlSecurity';
+} from '../../src/tools/curl-to-fetch/curlSecurity';
 
 describe('curlSecurity utilities', () => {
   beforeEach(() => {
diff --git a/tests/tools/hash.test.tsx b/tests/tools/hash.test.tsx
new file mode 100644
index 0000000..7d33691
--- /dev/null
+++ b/tests/tools/hash.test.tsx
@@ -0,0 +1,134 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import HashTool from '../../src/tools/hash/HashTool';
+import { ToastProvider } from '../../src/components/ui/Toast';
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe('HashTool Component & Cryptographic Hashing', () => {
+  let container: HTMLDivElement;
+  let root: ReturnType<typeof createRoot>;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => {
+      root.unmount();
+    });
+    container.remove();
+  });
+
+  function renderTool() {
+    act(() => {
+      root.render(
+        <MemoryRouter initialEntries={['/tools/hash']}>
+          <ToastProvider>
+            <Routes>
+              <Route path="/tools/:slug" element={<HashTool />} />
+            </Routes>
+          </ToastProvider>
+        </MemoryRouter>
+      );
+    });
+  }
+
+  it('computes correct default SHA-256 for "hello world"', async () => {
+    renderTool();
+
+    // Allow promise in useEffect to resolve
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 50));
+    });
+
+    const output = container.querySelector('output');
+    expect(output).not.toBeNull();
+    // SHA-256 of "hello world"
+    expect(output?.textContent?.trim()).toBe(
+      'b94d27b9934d3e08a52e52d7da7dabfac484efe37a5380ee9088f7ace2efcde9'
+    );
+  });
+
+  it('switches algorithms and calculates SHA-1, SHA-384, SHA-512', async () => {
+    renderTool();
+
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 50));
+    });
+
+    const buttons = Array.from(container.querySelectorAll('button'));
+
+    // Switch to SHA-1
+    const sha1Btn = buttons.find((b) => b.textContent?.trim() === 'SHA-1');
+    expect(sha1Btn).toBeDefined();
+
+    await act(async () => {
+      sha1Btn?.click();
+      await new Promise((resolve) => setTimeout(resolve, 50));
+    });
+
+    const output = container.querySelector('output');
+    // SHA-1 of "hello world"
+    expect(output?.textContent?.trim()).toBe('2aae6c35c94fcfb415dbe95f408b9ce91ee846ed');
+
+    // Switch to SHA-384
+    const sha384Btn = buttons.find((b) => b.textContent?.trim() === 'SHA-384');
+    expect(sha384Btn).toBeDefined();
+
+    await act(async () => {
+      sha384Btn?.click();
+      await new Promise((resolve) => setTimeout(resolve, 50));
+    });
+    expect(output?.textContent?.trim()).toHaveLength(96);
+
+    // Switch to SHA-512
+    const sha512Btn = buttons.find((b) => b.textContent?.trim() === 'SHA-512');
+    expect(sha512Btn).toBeDefined();
+
+    await act(async () => {
+      sha512Btn?.click();
+      await new Promise((resolve) => setTimeout(resolve, 50));
+    });
+
+    // SHA-512 of "hello world" (128 hex characters)
+    const sha512Hash = output?.textContent?.trim();
+    expect(sha512Hash).toHaveLength(128);
+    expect(sha512Hash).toBe(
+      '309ecc489c12d6eb4cc40f50c902f2b4d0ed77ee511a7c7a9bcd3ca86d4cd86f989dd35bc5ff499670da34255b45b0cfd830e81f605dcf7dc5542e93ae9cd76f'
+    );
+  });
+
+  it('updates hash when input is cleared or modified', async () => {
+    renderTool();
+
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 50));
+    });
+
+    const textarea = container.querySelector('textarea');
+    expect(textarea).not.toBeNull();
+
+    // Change input to empty string
+    await act(async () => {
+      const nativeSetter = Object.getOwnPropertyDescriptor(
+        window.HTMLTextAreaElement.prototype,
+        'value'
+      )?.set;
+      nativeSetter?.call(textarea, '');
+      textarea?.dispatchEvent(new Event('input', { bubbles: true }));
+      textarea?.dispatchEvent(new Event('change', { bubbles: true }));
+      await new Promise((resolve) => setTimeout(resolve, 50));
+    });
+
+    const output = container.querySelector('output');
+    // SHA-256 of empty string
+    expect(output?.textContent?.trim()).toBe(
+      'e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855'
+    );
+  });
+});
diff --git a/tests/tools/json-to-ts.test.tsx b/tests/tools/json-to-ts.test.tsx
new file mode 100644
index 0000000..01f8da4
--- /dev/null
+++ b/tests/tools/json-to-ts.test.tsx
@@ -0,0 +1,99 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import JsonToTsTool from '../../src/tools/json-to-ts/JsonToTsTool';
+import { ToastProvider } from '../../src/components/ui/Toast';
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe('JsonToTsTool Component & Type Generation', () => {
+  let container: HTMLDivElement;
+  let root: ReturnType<typeof createRoot>;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => {
+      root.unmount();
+    });
+    container.remove();
+  });
+
+  function renderTool() {
+    act(() => {
+      root.render(
+        <MemoryRouter initialEntries={['/tools/json-to-ts']}>
+          <ToastProvider>
+            <Routes>
+              <Route path="/tools/:slug" element={<JsonToTsTool />} />
+            </Routes>
+          </ToastProvider>
+        </MemoryRouter>
+      );
+    });
+  }
+
+  function setJsonInput(val: string) {
+    const textarea = container.querySelector('textarea');
+    expect(textarea).not.toBeNull();
+    act(() => {
+      const nativeSetter = Object.getOwnPropertyDescriptor(
+        window.HTMLTextAreaElement.prototype,
+        'value'
+      )?.set;
+      nativeSetter?.call(textarea, val);
+      textarea?.dispatchEvent(new Event('input', { bubbles: true }));
+      textarea?.dispatchEvent(new Event('change', { bubbles: true }));
+    });
+  }
+
+  it('generates TypeScript interfaces for default JSON', () => {
+    renderTool();
+
+    const output = container.querySelector('output');
+    expect(output).not.toBeNull();
+    const content = output?.textContent || '';
+
+    expect(content).toContain('export interface User {');
+    expect(content).toContain('id: number;');
+    expect(content).toContain('name: string;');
+    expect(content).toContain('active: boolean;');
+    expect(content).toContain('export interface Root {');
+    expect(content).toContain('user: User;');
+    expect(content).toContain('roles: string[];');
+  });
+
+  it('switches to "export type" when interface toggle is switched off', () => {
+    renderTool();
+
+    const toggle = Array.from(container.querySelectorAll('button')).find((b) =>
+      b.textContent?.includes('Use interface')
+    );
+    expect(toggle).toBeDefined();
+
+    act(() => {
+      toggle?.click();
+    });
+
+    const output = container.querySelector('output');
+    const content = output?.textContent || '';
+
+    expect(content).toContain('export type User = {');
+    expect(content).toContain('export type Root = {');
+    expect(content).not.toContain('export interface');
+  });
+
+  it('handles invalid JSON with an error message and hides output', () => {
+    renderTool();
+
+    setJsonInput('{"broken": json');
+
+    expect(container.textContent).toContain('Invalid JSON:');
+    expect(container.querySelector('output')).toBeNull();
+  });
+});
diff --git a/tests/tools/json.test.tsx b/tests/tools/json.test.tsx
new file mode 100644
index 0000000..d5cbfa4
--- /dev/null
+++ b/tests/tools/json.test.tsx
@@ -0,0 +1,119 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import JsonTool from '../../src/tools/json/JsonTool';
+import { ToastProvider } from '../../src/components/ui/Toast';
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe('JsonTool Component & JSON Formatting', () => {
+  let container: HTMLDivElement;
+  let root: ReturnType<typeof createRoot>;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => {
+      root.unmount();
+    });
+    container.remove();
+  });
+
+  function renderTool() {
+    act(() => {
+      root.render(
+        <MemoryRouter initialEntries={['/tools/json']}>
+          <ToastProvider>
+            <Routes>
+              <Route path="/tools/:slug" element={<JsonTool />} />
+            </Routes>
+          </ToastProvider>
+        </MemoryRouter>
+      );
+    });
+  }
+
+  it('beautifies valid JSON with 2-space indentation', () => {
+    renderTool();
+
+    const buttons = Array.from(container.querySelectorAll('button'));
+    const beautifyBtn = buttons.find((b) => b.textContent?.includes('Beautify'));
+    expect(beautifyBtn).toBeDefined();
+
+    act(() => {
+      beautifyBtn?.click();
+    });
+
+    const output = container.querySelector('output');
+    expect(output).not.toBeNull();
+    const expected = JSON.stringify({ hello: 'world', arr: [1, 2, 3] }, null, 2);
+    expect(output?.textContent?.trim()).toBe(expected);
+  });
+
+  it('minifies valid JSON without extra whitespace', () => {
+    renderTool();
+
+    const buttons = Array.from(container.querySelectorAll('button'));
+    const minifyBtn = buttons.find((b) => b.textContent?.includes('Minify'));
+    expect(minifyBtn).toBeDefined();
+
+    act(() => {
+      minifyBtn?.click();
+    });
+
+    const output = container.querySelector('output');
+    expect(output?.textContent?.trim()).toBe('{"hello":"world","arr":[1,2,3]}');
+  });
+
+  it('handles invalid JSON by showing error hint and clearing output', () => {
+    renderTool();
+
+    const textarea = container.querySelector('textarea');
+    expect(textarea).not.toBeNull();
+
+    // Type invalid JSON
+    act(() => {
+      const nativeSetter = Object.getOwnPropertyDescriptor(
+        window.HTMLTextAreaElement.prototype,
+        'value'
+      )?.set;
+      nativeSetter?.call(textarea, '{ broken: json, ');
+      textarea?.dispatchEvent(new Event('input', { bubbles: true }));
+      textarea?.dispatchEvent(new Event('change', { bubbles: true }));
+    });
+
+    const buttons = Array.from(container.querySelectorAll('button'));
+    const beautifyBtn = buttons.find((b) => b.textContent?.includes('Beautify'));
+
+    act(() => {
+      beautifyBtn?.click();
+    });
+
+    // Check error display in hint
+    expect(container.textContent).toContain('⚠');
+    const output = container.querySelector('output');
+    expect(output?.textContent?.trim()).toBe('Formatted JSON will appear here');
+  });
+
+  it('clears all state when Clear is clicked', () => {
+    renderTool();
+
+    const buttons = Array.from(container.querySelectorAll('button'));
+    const clearBtn = buttons.find((b) => b.textContent?.includes('Clear'));
+    expect(clearBtn).toBeDefined();
+
+    act(() => {
+      clearBtn?.click();
+    });
+
+    const textarea = container.querySelector('textarea');
+    expect(textarea?.value).toBe('');
+    const output = container.querySelector('output');
+    expect(output?.textContent?.trim()).toBe('Formatted JSON will appear here');
+  });
+});
diff --git a/tests/tools/jwt-decode.test.tsx b/tests/tools/jwt-decode.test.tsx
new file mode 100644
index 0000000..e33c75f
--- /dev/null
+++ b/tests/tools/jwt-decode.test.tsx
@@ -0,0 +1,101 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import JwtDecodeTool from '../../src/tools/jwt-decode/JwtDecodeTool';
+import { ToastProvider } from '../../src/components/ui/Toast';
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe('JwtDecodeTool Component & Validation', () => {
+  let container: HTMLDivElement;
+  let root: ReturnType<typeof createRoot>;
+
+  const VALID_FUTURE_JWT =
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyLCJleHAiOjk5OTk5OTk5OTl9.signature';
+
+  const EXPIRED_JWT =
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyLCJleHAiOjE1MTYyMzkwMjN9.signature';
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => {
+      root.unmount();
+    });
+    container.remove();
+  });
+
+  function renderTool() {
+    act(() => {
+      root.render(
+        <MemoryRouter initialEntries={['/tools/jwt-decode']}>
+          <ToastProvider>
+            <Routes>
+              <Route path="/tools/:slug" element={<JwtDecodeTool />} />
+            </Routes>
+          </ToastProvider>
+        </MemoryRouter>
+      );
+    });
+  }
+
+  function setInput(val: string) {
+    const textarea = container.querySelector('textarea');
+    expect(textarea).not.toBeNull();
+    act(() => {
+      const nativeSetter = Object.getOwnPropertyDescriptor(
+        window.HTMLTextAreaElement.prototype,
+        'value'
+      )?.set;
+      nativeSetter?.call(textarea, val);
+      textarea?.dispatchEvent(new Event('input', { bubbles: true }));
+      textarea?.dispatchEvent(new Event('change', { bubbles: true }));
+    });
+  }
+
+  it('renders empty without decoding initially', () => {
+    renderTool();
+    expect(container.querySelectorAll('output')).toHaveLength(0);
+  });
+
+  it('decodes a valid JWT with future expiration and displays VALID badge', () => {
+    renderTool();
+    setInput(VALID_FUTURE_JWT);
+
+    const outputs = Array.from(container.querySelectorAll('output'));
+    expect(outputs).toHaveLength(2);
+
+    // Header output
+    expect(outputs[0].textContent).toContain('HS256');
+    // Payload output
+    expect(outputs[1].textContent).toContain('John Doe');
+
+    // Check expiration badge
+    expect(container.textContent).toContain('VALID');
+    expect(container.textContent).not.toContain('EXPIRED');
+  });
+
+  it('decodes an expired JWT and displays EXPIRED badge', () => {
+    renderTool();
+    setInput(EXPIRED_JWT);
+
+    const outputs = Array.from(container.querySelectorAll('output'));
+    expect(outputs).toHaveLength(2);
+    expect(outputs[1].textContent).toContain('John Doe');
+
+    expect(container.textContent).toContain('EXPIRED');
+  });
+
+  it('displays error message on malformed JWT string', () => {
+    renderTool();
+    setInput('not.a-valid-jwt');
+
+    expect(container.textContent).toContain('Invalid JWT format (must have 3 parts separated by dots)');
+    expect(container.querySelectorAll('output')).toHaveLength(0);
+  });
+});
diff --git a/src/tools/jwt/jwt.test.ts b/tests/tools/jwt.test.ts
similarity index 97%
rename from src/tools/jwt/jwt.test.ts
rename to tests/tools/jwt.test.ts
index a91b320..220cea1 100644
--- a/src/tools/jwt/jwt.test.ts
+++ b/tests/tools/jwt.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { signHS256 } from './jwt';
+import { signHS256 } from '../../src/tools/jwt/jwt';
 
 describe('JWT signHS256', () => {
   it('produces a token with exactly 3 dot-separated parts', async () => {
diff --git a/tests/tools/markdown.test.tsx b/tests/tools/markdown.test.tsx
new file mode 100644
index 0000000..23a0adb
--- /dev/null
+++ b/tests/tools/markdown.test.tsx
@@ -0,0 +1,124 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import MarkdownTool from '../../src/tools/markdown/MarkdownTool';
+import { ToastProvider } from '../../src/components/ui/Toast';
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe('MarkdownTool Component & Preview / Sanitization', () => {
+  let container: HTMLDivElement;
+  let root: ReturnType<typeof createRoot>;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+
+    URL.createObjectURL = vi.fn().mockReturnValue('blob:fake-html');
+    URL.revokeObjectURL = vi.fn();
+  });
+
+  afterEach(() => {
+    act(() => {
+      root.unmount();
+    });
+    container.remove();
+    vi.restoreAllMocks();
+  });
+
+  function renderTool() {
+    act(() => {
+      root.render(
+        <MemoryRouter initialEntries={['/tools/markdown']}>
+          <ToastProvider>
+            <Routes>
+              <Route path="/tools/:slug" element={<MarkdownTool />} />
+            </Routes>
+          </ToastProvider>
+        </MemoryRouter>
+      );
+    });
+  }
+
+  function setMarkdown(val: string) {
+    const textarea = container.querySelector('textarea');
+    expect(textarea).not.toBeNull();
+    act(() => {
+      const nativeSetter = Object.getOwnPropertyDescriptor(
+        window.HTMLTextAreaElement.prototype,
+        'value'
+      )?.set;
+      nativeSetter?.call(textarea, val);
+      textarea?.dispatchEvent(new Event('input', { bubbles: true }));
+      textarea?.dispatchEvent(new Event('change', { bubbles: true }));
+    });
+  }
+
+  it('renders default markdown preview with heading, strong text, and code', () => {
+    renderTool();
+
+    const preview = container.querySelector('.glass[style*="min-height: 500px"]');
+    expect(preview).not.toBeNull();
+    expect(preview?.querySelector('h1')?.textContent).toBe('Hello World');
+    expect(preview?.querySelector('strong')?.textContent).toBe('Markdown');
+    expect(preview?.querySelector('code')?.textContent).toContain('console.log');
+  });
+
+  it('sanitizes malicious script tags and inline handlers via DOMPurify', () => {
+    renderTool();
+
+    setMarkdown(
+      '# Safe Header\n\n<script>alert("xss")</script><img src="x" onerror="alert(1)" />'
+    );
+
+    const preview = container.querySelector('.glass[style*="min-height: 500px"]');
+    expect(preview?.querySelector('h1')?.textContent).toBe('Safe Header');
+    expect(preview?.querySelector('script')).toBeNull();
+    // Image tag might exist without onerror attribute
+    const img = preview?.querySelector('img');
+    if (img) {
+      expect(img.getAttribute('onerror')).toBeNull();
+    }
+  });
+
+  it('triggers HTML download file creation when Download is clicked', () => {
+    renderTool();
+
+    const buttons = Array.from(container.querySelectorAll('button'));
+    const downloadBtn = buttons.find((b) => b.textContent?.trim() === 'Download');
+    expect(downloadBtn).toBeDefined();
+
+    act(() => {
+      downloadBtn?.click();
+    });
+
+    expect(URL.createObjectURL).toHaveBeenCalled();
+  });
+
+  it('handles PDF/Print button by opening print window', () => {
+    const printMock = vi.fn();
+    const openMock = vi.fn().mockReturnValue({
+      document: {
+        write: vi.fn(),
+        close: vi.fn(),
+      },
+      focus: vi.fn(),
+      print: printMock,
+    });
+    window.open = openMock;
+
+    renderTool();
+
+    const buttons = Array.from(container.querySelectorAll('button'));
+    const printBtn = buttons.find((b) => b.textContent?.includes('PDF / Print'));
+    expect(printBtn).toBeDefined();
+
+    act(() => {
+      printBtn?.click();
+    });
+
+    expect(openMock).toHaveBeenCalled();
+  });
+});
diff --git a/tests/tools/nanoid.test.tsx b/tests/tools/nanoid.test.tsx
new file mode 100644
index 0000000..3537185
--- /dev/null
+++ b/tests/tools/nanoid.test.tsx
@@ -0,0 +1,128 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { MemoryRouter, Routes, Route } from 'react-router-dom';
+import { ToastProvider } from '../../src/components/ui/Toast';
+import NanoIdTool from '../../src/tools/nanoid/NanoIdTool';
+
+// Configure act environment for React 19
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe('NanoIdTool Component & Generation Logic', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => {
+      root.unmount();
+    });
+    container.remove();
+  });
+
+  const renderTool = () => {
+    act(() => {
+      root.render(
+        <MemoryRouter initialEntries={['/tools/nanoid']}>
+          <ToastProvider>
+            <Routes>
+              <Route path="/tools/:slug" element={<NanoIdTool />} />
+            </Routes>
+          </ToastProvider>
+        </MemoryRouter>
+      );
+    });
+  };
+
+  it('renders with default 5 NanoIDs of length 21 using URL-safe characters', () => {
+    renderTool();
+
+    const output = container.querySelector('output');
+    expect(output).not.toBeNull();
+    const ids = (output?.textContent || '').trim().split('\n').filter(Boolean);
+    expect(ids).toHaveLength(5);
+
+    for (const id of ids) {
+      expect(id).toHaveLength(21);
+      // Default alphabet is URL-safe: letters, digits, _, -
+      expect(id).toMatch(/^[a-zA-Z0-9_-]+$/);
+    }
+  });
+
+  it('restricts characters strictly to custom alphabet', () => {
+    renderTool();
+
+    const inputs = Array.from(container.querySelectorAll('input'));
+    const alphabetInput = inputs.find(
+      (el) => el.value.includes('useandom')
+    ) as HTMLInputElement;
+    expect(alphabetInput).toBeTruthy();
+
+    // Set custom hex alphabet
+    act(() => {
+      // Simulate input event
+      const nativeSetter = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        'value'
+      )?.set;
+      nativeSetter?.call(alphabetInput, '0123456789ABCDEF');
+      alphabetInput.dispatchEvent(new Event('input', { bubbles: true }));
+      alphabetInput.dispatchEvent(new Event('change', { bubbles: true }));
+    });
+
+    const output = container.querySelector('output');
+    const ids = (output?.textContent || '').trim().split('\n').filter(Boolean);
+    expect(ids).toHaveLength(5);
+
+    for (const id of ids) {
+      expect(id).toMatch(/^[0-9A-F]+$/);
+    }
+  });
+
+  it('generates unique IDs across regenerate clicks', () => {
+    renderTool();
+
+    const set = new Set<string>();
+    const regenBtn = Array.from(container.querySelectorAll('button')).find(b =>
+      b.textContent?.includes('Regenerate')
+    );
+    expect(regenBtn).toBeDefined();
+
+    for (let i = 0; i < 5; i++) {
+      act(() => {
+        regenBtn?.click();
+      });
+      const output = container.querySelector('output');
+      const lines = (output?.textContent || '').trim().split('\n').filter(Boolean);
+      for (const line of lines) {
+        set.add(line);
+      }
+    }
+
+    expect(set.size).toBe(25);
+  });
+
+  it('resets settings to default when Reset is clicked', () => {
+    renderTool();
+
+    const resetBtn = Array.from(container.querySelectorAll('button')).find(b =>
+      b.textContent?.includes('Reset')
+    );
+    expect(resetBtn).toBeDefined();
+
+    act(() => {
+      resetBtn?.click();
+    });
+
+    const output = container.querySelector('output');
+    const ids = (output?.textContent || '').trim().split('\n').filter(Boolean);
+    expect(ids).toHaveLength(5);
+    expect(ids[0]).toHaveLength(21);
+  });
+});
diff --git a/src/tools/objectid/objectid.test.ts b/tests/tools/objectid.test.ts
similarity index 94%
rename from src/tools/objectid/objectid.test.ts
rename to tests/tools/objectid.test.ts
index d46a0c5..e6328d9 100644
--- a/src/tools/objectid/objectid.test.ts
+++ b/tests/tools/objectid.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { objectId } from './objectid';
+import { objectId } from '../../src/tools/objectid/objectid';
 
 describe('objectId', () => {
   it('produces a 24-character hex string', () => {
diff --git a/src/tools/password/password.test.ts b/tests/tools/password.test.ts
similarity index 95%
rename from src/tools/password/password.test.ts
rename to tests/tools/password.test.ts
index b92b6ef..e88f5dc 100644
--- a/src/tools/password/password.test.ts
+++ b/tests/tools/password.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { CHARSETS, generatePassword, type PwdOptions } from './password';
+import { CHARSETS, generatePassword, type PwdOptions } from '../../src/tools/password/password';
 
 const fullOpts: PwdOptions = {
   length: 20,
diff --git a/tests/tools/passwordTool.test.tsx b/tests/tools/passwordTool.test.tsx
new file mode 100644
index 0000000..3ad6095
--- /dev/null
+++ b/tests/tools/passwordTool.test.tsx
@@ -0,0 +1,145 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import PasswordTool from '../../src/tools/password/PasswordTool';
+import { ToastProvider } from '../../src/components/ui/Toast';
+
+describe('PasswordTool Component', () => {
+  let container: HTMLDivElement;
+  let root: ReturnType<typeof createRoot>;
+
+  beforeEach(() => {
+    localStorage.clear();
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => {
+      root.unmount();
+    });
+    container.remove();
+    vi.restoreAllMocks();
+  });
+
+  function renderTool(route = '/tools/password') {
+    act(() => {
+      root.render(
+        <MemoryRouter initialEntries={[route]}>
+          <ToastProvider>
+            <Routes>
+              <Route path="/tools/:slug" element={<PasswordTool />} />
+            </Routes>
+          </ToastProvider>
+        </MemoryRouter>
+      );
+    });
+  }
+
+  it('renders password output, strength meter, and character class toggles', async () => {
+    renderTool();
+
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 50));
+    });
+
+    expect(container.textContent).toContain('Password Generator');
+    expect(container.textContent).toContain('Strength');
+    expect(container.textContent).toContain('Uppercase');
+    expect(container.textContent).toContain('Lowercase');
+    expect(container.textContent).toContain('Numbers');
+    expect(container.textContent).toContain('Symbols');
+    expect(container.textContent).toContain('Regenerate');
+    expect(container.textContent).toContain('Reset');
+  });
+
+  it('regenerates a new password on clicking Regenerate', async () => {
+    renderTool();
+
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 50));
+    });
+
+    const output = container.querySelector('output');
+    const firstPwd = output?.textContent || '';
+    expect(firstPwd.length).toBe(20);
+
+    const regenBtn = Array.from(container.querySelectorAll('button')).find((b) =>
+      b.textContent?.includes('Regenerate')
+    )!;
+
+    await act(async () => {
+      regenBtn.click();
+      await new Promise((r) => setTimeout(r, 50));
+    });
+
+    const secondPwd = output?.textContent || '';
+    expect(secondPwd.length).toBe(20);
+  });
+
+  it('toggles character classes and updates password pool', async () => {
+    renderTool();
+
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 50));
+    });
+
+    const toggles = Array.from(container.querySelectorAll('button[role="switch"]'));
+    const uppercaseToggle = toggles.find((t) => t.textContent?.includes('Uppercase'))!;
+
+    await act(async () => {
+      uppercaseToggle.click();
+      await new Promise((r) => setTimeout(r, 300));
+    });
+
+    expect(uppercaseToggle.getAttribute('aria-checked')).toBe('false');
+  });
+
+  it('resets settings to default on clicking Reset', async () => {
+    renderTool();
+
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 50));
+    });
+
+    const resetBtn = Array.from(container.querySelectorAll('button')).find((b) =>
+      b.textContent?.includes('Reset')
+    )!;
+
+    await act(async () => {
+      resetBtn.click();
+      await new Promise((r) => setTimeout(r, 50));
+    });
+
+    expect(container.textContent).toContain('20 chars');
+  });
+
+  it('copies share link when Share button is clicked', async () => {
+    const writeMock = vi.fn().mockResolvedValue(undefined);
+    Object.assign(navigator, {
+      clipboard: {
+        writeText: writeMock,
+      },
+    });
+
+    renderTool();
+
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 50));
+    });
+
+    const shareBtn = Array.from(container.querySelectorAll('button')).find((b) =>
+      b.textContent?.includes('Share')
+    )!;
+
+    await act(async () => {
+      shareBtn.click();
+      await new Promise((r) => setTimeout(r, 50));
+    });
+
+    expect(writeMock).toHaveBeenCalled();
+    expect(container.textContent).toContain('Copied!');
+  });
+});
diff --git a/tests/tools/qr.test.tsx b/tests/tools/qr.test.tsx
new file mode 100644
index 0000000..e6eb5bf
--- /dev/null
+++ b/tests/tools/qr.test.tsx
@@ -0,0 +1,135 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import QRCode from 'qrcode';
+import QrTool from '../../src/tools/qr/QrTool';
+import { ToastProvider } from '../../src/components/ui/Toast';
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe('QrTool Component & QR Code Generation', () => {
+  let container: HTMLDivElement;
+  let root: ReturnType<typeof createRoot>;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+
+    // Mock HTMLCanvasElement toDataURL
+    HTMLCanvasElement.prototype.toDataURL = vi.fn().mockReturnValue('data:image/png;base64,fake');
+    // Mock URL.createObjectURL and revokeObjectURL
+    URL.createObjectURL = vi.fn().mockReturnValue('blob:fake-url');
+    URL.revokeObjectURL = vi.fn();
+  });
+
+  afterEach(() => {
+    act(() => {
+      root.unmount();
+    });
+    container.remove();
+    vi.restoreAllMocks();
+  });
+
+  function renderTool() {
+    act(() => {
+      root.render(
+        <MemoryRouter initialEntries={['/tools/qr']}>
+          <ToastProvider>
+            <Routes>
+              <Route path="/tools/:slug" element={<QrTool />} />
+            </Routes>
+          </ToastProvider>
+        </MemoryRouter>
+      );
+    });
+  }
+
+  it('renders canvas and invokes QRCode.toCanvas with default options', async () => {
+    const toCanvasSpy = vi.spyOn(QRCode, 'toCanvas').mockResolvedValue({} as never);
+
+    renderTool();
+
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 50));
+    });
+
+    const canvas = container.querySelector('canvas');
+    expect(canvas).not.toBeNull();
+    expect(toCanvasSpy).toHaveBeenCalledWith(
+      canvas,
+      'https://github.com/ajithakdev/toolglass',
+      expect.objectContaining({ errorCorrectionLevel: 'M', width: 256 })
+    );
+  });
+
+  it('updates error correction level and re-generates canvas', async () => {
+    const toCanvasSpy = vi.spyOn(QRCode, 'toCanvas').mockResolvedValue({} as never);
+
+    renderTool();
+
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 50));
+    });
+
+    // In Field Dropdown, find the select or click trigger
+    const select = container.querySelector('select');
+    if (select) {
+      act(() => {
+        select.value = 'H';
+        select.dispatchEvent(new Event('change', { bubbles: true }));
+      });
+    } else {
+      // If Dropdown is a custom div/button trigger, let's find options
+      const trigger = container.querySelector('[role="combobox"], button');
+      expect(trigger).toBeDefined();
+    }
+
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 50));
+    });
+
+    expect(toCanvasSpy).toHaveBeenCalled();
+  });
+
+  it('triggers PNG download on clicking Download PNG button', () => {
+    vi.spyOn(QRCode, 'toCanvas').mockResolvedValue({} as never);
+    const appendChildSpy = vi.spyOn(document.body, 'appendChild');
+
+    renderTool();
+
+    const buttons = Array.from(container.querySelectorAll('button'));
+    const pngBtn = buttons.find((b) => b.textContent?.includes('Download PNG'));
+    expect(pngBtn).toBeDefined();
+
+    act(() => {
+      pngBtn?.click();
+    });
+
+    expect(appendChildSpy).toHaveBeenCalled();
+  });
+
+  it('generates SVG and triggers SVG download on clicking Download SVG button', async () => {
+    vi.spyOn(QRCode, 'toCanvas').mockResolvedValue({} as never);
+    const toStringSpy = vi.spyOn(QRCode, 'toString').mockImplementation(async () => '<svg>qrcode</svg>');
+    const appendChildSpy = vi.spyOn(document.body, 'appendChild');
+
+    renderTool();
+
+    const buttons = Array.from(container.querySelectorAll('button'));
+    const svgBtn = buttons.find((b) => b.textContent?.includes('Download SVG'));
+    expect(svgBtn).toBeDefined();
+
+    await act(async () => {
+      svgBtn?.click();
+      await new Promise((resolve) => setTimeout(resolve, 50));
+    });
+
+    expect(toStringSpy).toHaveBeenCalledWith(
+      'https://github.com/ajithakdev/toolglass',
+      expect.objectContaining({ type: 'svg' })
+    );
+    expect(appendChildSpy).toHaveBeenCalled();
+  });
+});
diff --git a/tests/tools/regex.test.tsx b/tests/tools/regex.test.tsx
new file mode 100644
index 0000000..1fbac9f
--- /dev/null
+++ b/tests/tools/regex.test.tsx
@@ -0,0 +1,107 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import RegexTool from '../../src/tools/regex/RegexTool';
+import { ToastProvider } from '../../src/components/ui/Toast';
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe('RegexTool Component & Pattern Matching', () => {
+  let container: HTMLDivElement;
+  let root: ReturnType<typeof createRoot>;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => {
+      root.unmount();
+    });
+    container.remove();
+  });
+
+  function renderTool() {
+    act(() => {
+      root.render(
+        <MemoryRouter initialEntries={['/tools/regex']}>
+          <ToastProvider>
+            <Routes>
+              <Route path="/tools/:slug" element={<RegexTool />} />
+            </Routes>
+          </ToastProvider>
+        </MemoryRouter>
+      );
+    });
+  }
+
+  function setPattern(val: string) {
+    const inputs = Array.from(container.querySelectorAll('input'));
+    const patternInput = inputs.find((i) => i.placeholder === '\\w+');
+    expect(patternInput).toBeDefined();
+
+    act(() => {
+      const nativeSetter = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        'value'
+      )?.set;
+      nativeSetter?.call(patternInput, val);
+      patternInput?.dispatchEvent(new Event('input', { bubbles: true }));
+      patternInput?.dispatchEvent(new Event('change', { bubbles: true }));
+    });
+  }
+
+  it('renders default regex and matches 2 dates with named capture groups', () => {
+    renderTool();
+
+    expect(container.textContent).toContain('Highlighted Matches (2)');
+
+    const marks = container.querySelectorAll('mark');
+    expect(marks).toHaveLength(2);
+    expect(marks[0].textContent).toBe('2024-03-12');
+    expect(marks[1].textContent).toBe('2024-03-13');
+
+    // Verify capture groups table
+    const table = container.querySelector('table');
+    expect(table).not.toBeNull();
+    expect(table?.textContent).toContain('year');
+    expect(table?.textContent).toContain('2024');
+    expect(table?.textContent).toContain('month');
+    expect(table?.textContent).toContain('03');
+  });
+
+  it('updates match count when toggling global flag off', () => {
+    renderTool();
+
+    // Toggle global flag 'g'
+    const globalToggle = Array.from(container.querySelectorAll('button')).find((b) =>
+      b.textContent?.includes('Global (g)')
+    );
+    expect(globalToggle).toBeDefined();
+
+    act(() => {
+      globalToggle?.click();
+    });
+
+    expect(container.textContent).toContain('Highlighted Matches (1)');
+    const marks = container.querySelectorAll('mark');
+    expect(marks).toHaveLength(1);
+    expect(marks[0].textContent).toBe('2024-03-12');
+  });
+
+  it('handles invalid regex syntax gracefully with error display', () => {
+    renderTool();
+
+    // Unclosed parenthesis
+    setPattern('(invalid[regex');
+
+    expect(container.textContent).toContain('Highlighted Matches (0)');
+    // Check error message presence
+    const errorDiv = container.querySelector('div[style*="var(--status-error)"]');
+    expect(errorDiv).not.toBeNull();
+    expect(errorDiv?.textContent?.length).toBeGreaterThan(0);
+  });
+});
diff --git a/tests/tools/registry.test.ts b/tests/tools/registry.test.ts
new file mode 100644
index 0000000..c22e48f
--- /dev/null
+++ b/tests/tools/registry.test.ts
@@ -0,0 +1,46 @@
+import { describe, it, expect } from 'vitest';
+import { tools, toolBySlug } from '../../src/tools/registry';
+
+describe('Tool Registry', () => {
+  it('registers exactly 17 developer tools', () => {
+    expect(tools).toHaveLength(17);
+  });
+
+  it('contains unique slugs for every registered tool', () => {
+    const slugs = tools.map((t) => t.slug);
+    const uniqueSlugs = new Set(slugs);
+    expect(uniqueSlugs.size).toBe(tools.length);
+  });
+
+  it('ensures every tool has complete metadata and a lazy Component', () => {
+    for (const tool of tools) {
+      expect(tool.slug).toBeTruthy();
+      expect(typeof tool.slug).toBe('string');
+      expect(tool.title).toBeTruthy();
+      expect(tool.short).toBeTruthy();
+      expect(tool.description).toBeTruthy();
+      expect(tool.icon).toBeDefined();
+      expect(tool.tint).toMatch(/^linear-gradient/);
+      expect(tool.Component).toBeDefined();
+    }
+  });
+
+  it('resolves tool metadata correctly using toolBySlug', () => {
+    const pwdTool = toolBySlug('password');
+    expect(pwdTool).toBeDefined();
+    expect(pwdTool?.title).toBe('Password Generator');
+
+    const timestampTool = toolBySlug('timestamp');
+    expect(timestampTool).toBeDefined();
+    expect(timestampTool?.title).toBe('Timestamp');
+
+    const apiTesterTool = toolBySlug('api-tester');
+    expect(apiTesterTool).toBeDefined();
+    expect(apiTesterTool?.title).toBe('API Tester');
+  });
+
+  it('returns undefined for non-existent slugs', () => {
+    expect(toolBySlug('nonexistent-tool')).toBeUndefined();
+    expect(toolBySlug('')).toBeUndefined();
+  });
+});
diff --git a/tests/tools/timestamp.test.tsx b/tests/tools/timestamp.test.tsx
new file mode 100644
index 0000000..c120db0
--- /dev/null
+++ b/tests/tools/timestamp.test.tsx
@@ -0,0 +1,106 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import TimestampTool from '../../src/tools/timestamp/TimestampTool';
+import { ToastProvider } from '../../src/components/ui/Toast';
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe('TimestampTool Component & Suite Features', () => {
+  let container: HTMLDivElement;
+  let root: ReturnType<typeof createRoot>;
+
+  beforeEach(() => {
+    localStorage.clear();
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => {
+      root.unmount();
+    });
+    container.remove();
+    localStorage.clear();
+  });
+
+  function renderTool(initialEntry = '/tools/timestamp') {
+    act(() => {
+      root.render(
+        <MemoryRouter initialEntries={[initialEntry]}>
+          <ToastProvider>
+            <Routes>
+              <Route path="/tools/:slug" element={<TimestampTool />} />
+            </Routes>
+          </ToastProvider>
+        </MemoryRouter>
+      );
+    });
+  }
+
+  it('converts epoch timestamp 1700000000 to correct ISO format in Convert tab', async () => {
+    renderTool('/tools/timestamp?mode=convert&q=1700000000');
+
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 50));
+    });
+
+    expect(container.textContent).toContain('2023-11-14T22:13:20.000Z');
+    expect(container.textContent).toContain('1700000000');
+  });
+
+  it('renders Batch tab and parses embedded timestamps into structured rows', async () => {
+    renderTool('/tools/timestamp?mode=batch&batch=1700000000%201700000060');
+
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 50));
+    });
+
+    // The Batch tab is active (button text 'Batch' is visible)
+    expect(container.textContent).toContain('Batch');
+    expect(container.textContent).toContain('2023-11-14T22:13:20.000Z');
+    expect(container.textContent).toContain('2023-11-14T22:14:20.000Z');
+  });
+
+  it('renders Diff tab and calculates duration range between two dates', async () => {
+    renderTool('/tools/timestamp?mode=diff&diffMode=range&d1=2026-01-01&d2=2027-01-01');
+
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 50));
+    });
+
+    expect(container.textContent).toContain('Duration Between Two Dates');
+    // 365 days between 2026-01-01 and 2027-01-01
+    expect(container.textContent).toContain('365');
+    expect(container.textContent).toContain('days');
+  });
+
+  it('renders Cron tab and previews schedule and next 5 run times', async () => {
+    renderTool('/tools/timestamp?mode=cron&cron=*%2F5%20*%20*%20*%20*');
+
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 50));
+    });
+
+    expect(container.textContent).toContain('Cron Expression');
+    expect(container.textContent).toContain('every 5 minutes');
+    expect(container.textContent).toContain('Next 5 Scheduled Runs');
+  });
+
+  it('switches tabs smoothly when clicking mode buttons', async () => {
+    renderTool('/tools/timestamp?mode=convert');
+
+    const buttons = Array.from(container.querySelectorAll('button'));
+    const cronBtn = buttons.find((b) => b.textContent?.trim() === 'Cron');
+    expect(cronBtn).toBeDefined();
+
+    await act(async () => {
+      cronBtn?.click();
+      await new Promise((resolve) => setTimeout(resolve, 250));
+    });
+
+    expect(container.textContent).toContain('Cron Expression');
+  });
+});
diff --git a/tests/tools/url.test.tsx b/tests/tools/url.test.tsx
new file mode 100644
index 0000000..38470d5
--- /dev/null
+++ b/tests/tools/url.test.tsx
@@ -0,0 +1,116 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import UrlTool from '../../src/tools/url/UrlTool';
+import { ToastProvider } from '../../src/components/ui/Toast';
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe('UrlTool Component & URI Encoding/Decoding', () => {
+  let container: HTMLDivElement;
+  let root: ReturnType<typeof createRoot>;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => {
+      root.unmount();
+    });
+    container.remove();
+  });
+
+  function renderTool() {
+    act(() => {
+      root.render(
+        <MemoryRouter initialEntries={['/tools/url']}>
+          <ToastProvider>
+            <Routes>
+              <Route path="/tools/:slug" element={<UrlTool />} />
+            </Routes>
+          </ToastProvider>
+        </MemoryRouter>
+      );
+    });
+  }
+
+  async function setInput(val: string) {
+    const textarea = container.querySelector('textarea');
+    expect(textarea).not.toBeNull();
+    await act(async () => {
+      const nativeSetter = Object.getOwnPropertyDescriptor(
+        window.HTMLTextAreaElement.prototype,
+        'value'
+      )?.set;
+      nativeSetter?.call(textarea, val);
+      textarea?.dispatchEvent(new Event('input', { bubbles: true }));
+      textarea?.dispatchEvent(new Event('change', { bubbles: true }));
+      await new Promise((resolve) => setTimeout(resolve, 250));
+    });
+  }
+
+  it('encodes default text "Hello, world!" to "Hello%2C%20world!"', () => {
+    renderTool();
+
+    const output = container.querySelector('output');
+    expect(output?.textContent?.trim()).toBe('Hello%2C%20world!');
+  });
+
+  it('decodes encoded URI sequence when switched to decode mode', async () => {
+    renderTool();
+
+    // Switch to Decode
+    const buttons = Array.from(container.querySelectorAll('button'));
+    const decodeBtn = buttons.find((b) => b.textContent?.trim() === 'Decode');
+    expect(decodeBtn).toBeDefined();
+
+    await act(async () => {
+      decodeBtn?.click();
+      await new Promise((resolve) => setTimeout(resolve, 250));
+    });
+
+    await setInput('https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dhello%20world%26tag%3D%E2%9C%A8');
+
+    const output = container.querySelector('output');
+    expect(output?.textContent?.trim()).toBe('https://example.com/search?q=hello world&tag=✨');
+  });
+
+  it('catches and displays error on malformed URI sequence in decode mode', async () => {
+    renderTool();
+
+    const buttons = Array.from(container.querySelectorAll('button'));
+    const decodeBtn = buttons.find((b) => b.textContent?.trim() === 'Decode');
+    await act(async () => {
+      decodeBtn?.click();
+      await new Promise((resolve) => setTimeout(resolve, 250));
+    });
+
+    // Incomplete percent sequence
+    await setInput('%E0%A4%A');
+
+    const output = container.querySelector('output');
+    expect(output?.textContent?.trim()).toContain('Error:');
+  });
+
+  it('clears input and displays placeholder when Clear is clicked', async () => {
+    renderTool();
+
+    const buttons = Array.from(container.querySelectorAll('button'));
+    const clearBtn = buttons.find((b) => b.textContent?.trim() === 'Clear');
+    expect(clearBtn).toBeDefined();
+
+    await act(async () => {
+      clearBtn?.click();
+      await new Promise((resolve) => setTimeout(resolve, 250));
+    });
+
+    const textarea = container.querySelector('textarea');
+    expect(textarea?.value).toBe('');
+    const output = container.querySelector('output');
+    expect(output?.textContent?.trim()).toBe('Result will appear here');
+  });
+});
diff --git a/tests/tools/uuid.test.tsx b/tests/tools/uuid.test.tsx
new file mode 100644
index 0000000..f35d462
--- /dev/null
+++ b/tests/tools/uuid.test.tsx
@@ -0,0 +1,103 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { MemoryRouter, Routes, Route } from 'react-router-dom';
+import { ToastProvider } from '../../src/components/ui/Toast';
+import UuidTool from '../../src/tools/uuid/UuidTool';
+
+// Configure act environment for React 19
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
+
+const UUID_V4_REGEX = /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+
+describe('UuidTool Component & Generation Logic', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => {
+      root.unmount();
+    });
+    container.remove();
+  });
+
+  const renderTool = () => {
+    act(() => {
+      root.render(
+        <MemoryRouter initialEntries={['/tools/uuid']}>
+          <ToastProvider>
+            <Routes>
+              <Route path="/tools/:slug" element={<UuidTool />} />
+            </Routes>
+          </ToastProvider>
+        </MemoryRouter>
+      );
+    });
+  };
+
+  it('renders with default 5 UUIDs conforming strictly to RFC 4122 v4', () => {
+    renderTool();
+
+    const output = container.querySelector('output');
+    expect(output).not.toBeNull();
+    const text = output?.textContent || '';
+    const uuids = text.trim().split('\n').filter(Boolean);
+    expect(uuids).toHaveLength(5);
+
+    for (const id of uuids) {
+      expect(id).toMatch(UUID_V4_REGEX);
+      // Version 4 check: character at index 14 must be '4'
+      expect(id[14]).toBe('4');
+      // Variant check: character at index 19 must be 8, 9, a, or b
+      expect(['8', '9', 'a', 'b']).toContain(id[19].toLowerCase());
+    }
+  });
+
+  it('generates unique UUIDs without collisions on regenerate', () => {
+    renderTool();
+
+    const set = new Set<string>();
+    const regenBtn = Array.from(container.querySelectorAll('button')).find(b =>
+      b.textContent?.includes('Regenerate')
+    );
+    expect(regenBtn).toBeDefined();
+
+    for (let i = 0; i < 5; i++) {
+      act(() => {
+        regenBtn?.click();
+      });
+      const output = container.querySelector('output');
+      const lines = (output?.textContent || '').trim().split('\n').filter(Boolean);
+      for (const line of lines) {
+        set.add(line);
+      }
+    }
+
+    // 5 generations of 5 UUIDs = 25 unique UUIDs
+    expect(set.size).toBe(25);
+  });
+
+  it('resets count back to 5 when Reset is clicked', () => {
+    renderTool();
+
+    const resetBtn = Array.from(container.querySelectorAll('button')).find(b =>
+      b.textContent?.includes('Reset')
+    );
+    expect(resetBtn).toBeDefined();
+
+    act(() => {
+      resetBtn?.click();
+    });
+
+    const output = container.querySelector('output');
+    const uuids = (output?.textContent || '').trim().split('\n').filter(Boolean);
+    expect(uuids).toHaveLength(5);
+  });
+});
diff --git a/vite.config.ts b/vite.config.ts
index d0bc32b..f136c81 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -40,6 +40,12 @@ export default defineConfig({
   test: {
     environment: 'jsdom',
     globals: true,
-    include: ['src/**/*.test.ts', 'src/**/*.test.tsx'],
+    include: [
+      'tests/**/*.test.ts',
+      'tests/**/*.test.tsx',
+      'src/**/*.test.ts',
+      'src/**/*.test.tsx',
+    ],
+    setupFiles: ['./tests/setup.ts'],
   },
 });