diff --git a/frontend/src/api/import.ts b/frontend/src/api/import.ts
index 98c6a7da..3c9a5460 100644
--- a/frontend/src/api/import.ts
+++ b/frontend/src/api/import.ts
@@ -44,7 +44,7 @@ export const getImportStatus = async (): Promise<{ has_pending: boolean; session
   try {
     const { data } = await client.get<{ has_pending: boolean; session?: ImportSession }>('/import/status');
     return data;
-  } catch (error) {
+  } catch {
     // Fallback if status endpoint doesn't exist, though the hook used it.
     return { has_pending: false };
   }
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index deed7060..67af7d6d 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -3,7 +3,7 @@ import { Link, useLocation } from 'react-router-dom'
 import { useQuery } from '@tanstack/react-query'
 import { ThemeToggle } from './ThemeToggle'
 import { Button } from './ui/Button'
-import { useAuth } from '../context/AuthContext'
+import { useAuth } from '../hooks/useAuth'
 import { checkHealth } from '../api/health'
 import NotificationCenter from './NotificationCenter'
 import SystemStatus from './SystemStatus'
diff --git a/frontend/src/components/NotificationCenter.tsx b/frontend/src/components/NotificationCenter.tsx
index 7998bef6..195f5592 100644
--- a/frontend/src/components/NotificationCenter.tsx
+++ b/frontend/src/components/NotificationCenter.tsx
@@ -43,6 +43,7 @@ const NotificationCenter: React.FC = () => {
       <button
         onClick={() => setIsOpen(!isOpen)}
         className="relative p-2 text-gray-400 hover:text-white focus:outline-none"
+        aria-label="Notifications"
       >
         <Bell className="w-6 h-6" />
         {unreadCount > 0 && (
@@ -55,6 +56,7 @@ const NotificationCenter: React.FC = () => {
       {isOpen && (
         <>
           <div
+            data-testid="notification-backdrop"
             className="fixed inset-0 z-10"
             onClick={() => setIsOpen(false)}
           ></div>
diff --git a/frontend/src/components/RemoteServerForm.tsx b/frontend/src/components/RemoteServerForm.tsx
index 6432b491..821ab198 100644
--- a/frontend/src/components/RemoteServerForm.tsx
+++ b/frontend/src/components/RemoteServerForm.tsx
@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react'
-import type { RemoteServer } from '../api/remoteServers'
-import { remoteServersAPI } from '../services/api'
+import { type RemoteServer, testRemoteServerConnection } from '../api/remoteServers'
 
 interface Props {
   server?: RemoteServer
@@ -50,9 +49,9 @@ export default function RemoteServerForm({ server, onSubmit, onCancel }: Props)
     setLoading(true)
     setError(null)
     try {
-      const result = await remoteServersAPI.test(server.uuid)
+      const result = await testRemoteServerConnection(server.uuid)
       alert(`Connection successful: ${result.address}`)
-    } catch (err) {
+    } catch {
       setError('Connection failed')
     } finally {
       setLoading(false)
diff --git a/frontend/src/components/RequireAuth.tsx b/frontend/src/components/RequireAuth.tsx
index 91ce5df3..d97605c1 100644
--- a/frontend/src/components/RequireAuth.tsx
+++ b/frontend/src/components/RequireAuth.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Navigate, useLocation } from 'react-router-dom';
-import { useAuth } from '../context/AuthContext';
+import { useAuth } from '../hooks/useAuth';
 
 const RequireAuth: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const { isAuthenticated, isLoading } = useAuth();
diff --git a/frontend/src/components/ThemeToggle.tsx b/frontend/src/components/ThemeToggle.tsx
index cf8c599b..211192fb 100644
--- a/frontend/src/components/ThemeToggle.tsx
+++ b/frontend/src/components/ThemeToggle.tsx
@@ -1,4 +1,4 @@
-import { useTheme } from '../context/ThemeContext'
+import { useTheme } from '../hooks/useTheme'
 import { Button } from './ui/Button'
 
 export function ThemeToggle() {
diff --git a/frontend/src/components/Toast.tsx b/frontend/src/components/Toast.tsx
index 12106877..f70d597d 100644
--- a/frontend/src/components/Toast.tsx
+++ b/frontend/src/components/Toast.tsx
@@ -1,34 +1,5 @@
 import { useEffect, useState } from 'react'
-
-type ToastType = 'success' | 'error' | 'info' | 'warning'
-
-interface Toast {
-  id: number
-  message: string
-  type: ToastType
-}
-
-let toastId = 0
-const toastCallbacks = new Set<(toast: Toast) => void>()
-
-export const toast = {
-  success: (message: string) => {
-    const id = ++toastId
-    toastCallbacks.forEach(callback => callback({ id, message, type: 'success' }))
-  },
-  error: (message: string) => {
-    const id = ++toastId
-    toastCallbacks.forEach(callback => callback({ id, message, type: 'error' }))
-  },
-  info: (message: string) => {
-    const id = ++toastId
-    toastCallbacks.forEach(callback => callback({ id, message, type: 'info' }))
-  },
-  warning: (message: string) => {
-    const id = ++toastId
-    toastCallbacks.forEach(callback => callback({ id, message, type: 'warning' }))
-  },
-}
+import { toastCallbacks, Toast } from '../utils/toast'
 
 export function ToastContainer() {
   const [toasts, setToasts] = useState<Toast[]>([])
diff --git a/frontend/src/components/__tests__/Layout.test.tsx b/frontend/src/components/__tests__/Layout.test.tsx
index bbe44ef5..b4b2d6ad 100644
--- a/frontend/src/components/__tests__/Layout.test.tsx
+++ b/frontend/src/components/__tests__/Layout.test.tsx
@@ -7,7 +7,7 @@ import Layout from '../Layout'
 import { ThemeProvider } from '../../context/ThemeContext'
 
 // Mock AuthContext
-vi.mock('../../context/AuthContext', () => ({
+vi.mock('../../hooks/useAuth', () => ({
   useAuth: () => ({
     logout: vi.fn(),
   }),
diff --git a/frontend/src/components/__tests__/NotificationCenter.test.tsx b/frontend/src/components/__tests__/NotificationCenter.test.tsx
new file mode 100644
index 00000000..59088dec
--- /dev/null
+++ b/frontend/src/components/__tests__/NotificationCenter.test.tsx
@@ -0,0 +1,165 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import NotificationCenter from '../NotificationCenter'
+import * as api from '../../api/system'
+
+// Mock the API
+vi.mock('../../api/system', () => ({
+  getNotifications: vi.fn(),
+  markNotificationRead: vi.fn(),
+  markAllNotificationsRead: vi.fn(),
+}))
+
+const createWrapper = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  })
+  return ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  )
+}
+
+const mockNotifications: api.Notification[] = [
+  {
+    id: '1',
+    type: 'info',
+    title: 'Info Notification',
+    message: 'This is an info message',
+    read: false,
+    created_at: '2025-01-01T10:00:00Z',
+  },
+  {
+    id: '2',
+    type: 'success',
+    title: 'Success Notification',
+    message: 'This is a success message',
+    read: false,
+    created_at: '2025-01-01T11:00:00Z',
+  },
+  {
+    id: '3',
+    type: 'warning',
+    title: 'Warning Notification',
+    message: 'This is a warning message',
+    read: false,
+    created_at: '2025-01-01T12:00:00Z',
+  },
+  {
+    id: '4',
+    type: 'error',
+    title: 'Error Notification',
+    message: 'This is an error message',
+    read: false,
+    created_at: '2025-01-01T13:00:00Z',
+  },
+]
+
+describe('NotificationCenter', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  afterEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('renders bell icon and unread count', async () => {
+    vi.mocked(api.getNotifications).mockResolvedValue(mockNotifications)
+    render(<NotificationCenter />, { wrapper: createWrapper() })
+
+    expect(screen.getByRole('button', { name: /notifications/i })).toBeInTheDocument()
+
+    await waitFor(() => {
+      expect(screen.getByText('4')).toBeInTheDocument()
+    })
+  })
+
+  it('opens notification panel on click', async () => {
+    vi.mocked(api.getNotifications).mockResolvedValue(mockNotifications)
+    render(<NotificationCenter />, { wrapper: createWrapper() })
+
+    const bellButton = screen.getByRole('button', { name: /notifications/i })
+    fireEvent.click(bellButton)
+
+    await waitFor(() => {
+      expect(screen.getByText('Notifications')).toBeInTheDocument()
+      expect(screen.getByText('Info Notification')).toBeInTheDocument()
+      expect(screen.getByText('Success Notification')).toBeInTheDocument()
+      expect(screen.getByText('Warning Notification')).toBeInTheDocument()
+      expect(screen.getByText('Error Notification')).toBeInTheDocument()
+    })
+  })
+
+  it('displays empty state when no notifications', async () => {
+    vi.mocked(api.getNotifications).mockResolvedValue([])
+    render(<NotificationCenter />, { wrapper: createWrapper() })
+
+    const bellButton = screen.getByRole('button', { name: /notifications/i })
+    fireEvent.click(bellButton)
+
+    await waitFor(() => {
+      expect(screen.getByText('No new notifications')).toBeInTheDocument()
+    })
+  })
+
+  it('marks single notification as read', async () => {
+    vi.mocked(api.getNotifications).mockResolvedValue(mockNotifications)
+    vi.mocked(api.markNotificationRead).mockResolvedValue()
+
+    render(<NotificationCenter />, { wrapper: createWrapper() })
+
+    fireEvent.click(screen.getByRole('button', { name: /notifications/i }))
+
+    await waitFor(() => {
+      expect(screen.getByText('Info Notification')).toBeInTheDocument()
+    })
+
+    const closeButtons = screen.getAllByRole('button', { name: /close/i })
+    fireEvent.click(closeButtons[0])
+
+    await waitFor(() => {
+      expect(api.markNotificationRead).toHaveBeenCalledWith('1', expect.anything())
+    })
+  })
+
+  it('marks all notifications as read', async () => {
+    vi.mocked(api.getNotifications).mockResolvedValue(mockNotifications)
+    vi.mocked(api.markAllNotificationsRead).mockResolvedValue()
+
+    render(<NotificationCenter />, { wrapper: createWrapper() })
+
+    fireEvent.click(screen.getByRole('button', { name: /notifications/i }))
+
+    await waitFor(() => {
+      expect(screen.getByText('Mark all read')).toBeInTheDocument()
+    })
+
+    fireEvent.click(screen.getByText('Mark all read'))
+
+    await waitFor(() => {
+      expect(api.markAllNotificationsRead).toHaveBeenCalled()
+    })
+  })
+
+  it('closes panel when clicking outside', async () => {
+    vi.mocked(api.getNotifications).mockResolvedValue(mockNotifications)
+    render(<NotificationCenter />, { wrapper: createWrapper() })
+
+    fireEvent.click(screen.getByRole('button', { name: /notifications/i }))
+
+    await waitFor(() => {
+      expect(screen.getByText('Notifications')).toBeInTheDocument()
+    })
+
+    fireEvent.click(screen.getByTestId('notification-backdrop'))
+
+    await waitFor(() => {
+      expect(screen.queryByText('Notifications')).not.toBeInTheDocument()
+    })
+  })
+})
diff --git a/frontend/src/context/AuthContext.tsx b/frontend/src/context/AuthContext.tsx
index e30ad4e4..9359ad9e 100644
--- a/frontend/src/context/AuthContext.tsx
+++ b/frontend/src/context/AuthContext.tsx
@@ -1,20 +1,6 @@
-import React, { createContext, useContext, useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import client from '../api/client';
-
-interface User {
-  user_id: number;
-  role: string;
-}
-
-interface AuthContextType {
-  user: User | null;
-  login: () => Promise<void>;
-  logout: () => void;
-  isAuthenticated: boolean;
-  isLoading: boolean;
-}
-
-const AuthContext = createContext<AuthContextType | undefined>(undefined);
+import { AuthContext, User } from './AuthContextValue';
 
 export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [user, setUser] = useState<User | null>(null);
@@ -25,7 +11,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
       try {
         const response = await client.get('/auth/me');
         setUser(response.data);
-      } catch (error) {
+      } catch {
         setUser(null);
       } finally {
         setIsLoading(false);
@@ -96,11 +82,3 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
     </AuthContext.Provider>
   );
 };
-
-export const useAuth = () => {
-  const context = useContext(AuthContext);
-  if (context === undefined) {
-    throw new Error('useAuth must be used within an AuthProvider');
-  }
-  return context;
-};
diff --git a/frontend/src/context/AuthContextValue.ts b/frontend/src/context/AuthContextValue.ts
new file mode 100644
index 00000000..92c11bf2
--- /dev/null
+++ b/frontend/src/context/AuthContextValue.ts
@@ -0,0 +1,16 @@
+import { createContext } from 'react';
+
+export interface User {
+  user_id: number;
+  role: string;
+}
+
+export interface AuthContextType {
+  user: User | null;
+  login: () => Promise<void>;
+  logout: () => void;
+  isAuthenticated: boolean;
+  isLoading: boolean;
+}
+
+export const AuthContext = createContext<AuthContextType | undefined>(undefined);
diff --git a/frontend/src/context/ThemeContext.tsx b/frontend/src/context/ThemeContext.tsx
index d271c2a0..98f0a3db 100644
--- a/frontend/src/context/ThemeContext.tsx
+++ b/frontend/src/context/ThemeContext.tsx
@@ -1,13 +1,5 @@
-import { createContext, useContext, useEffect, useState, ReactNode } from 'react'
-
-type Theme = 'dark' | 'light'
-
-interface ThemeContextType {
-  theme: Theme
-  toggleTheme: () => void
-}
-
-const ThemeContext = createContext<ThemeContextType | undefined>(undefined)
+import { useEffect, useState, ReactNode } from 'react'
+import { ThemeContext, Theme } from './ThemeContextValue'
 
 export function ThemeProvider({ children }: { children: ReactNode }) {
   const [theme, setTheme] = useState<Theme>(() => {
@@ -32,11 +24,3 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
     </ThemeContext.Provider>
   )
 }
-
-export function useTheme() {
-  const context = useContext(ThemeContext)
-  if (context === undefined) {
-    throw new Error('useTheme must be used within a ThemeProvider')
-  }
-  return context
-}
diff --git a/frontend/src/context/ThemeContextValue.ts b/frontend/src/context/ThemeContextValue.ts
new file mode 100644
index 00000000..e10df50c
--- /dev/null
+++ b/frontend/src/context/ThemeContextValue.ts
@@ -0,0 +1,10 @@
+import { createContext } from 'react'
+
+export type Theme = 'dark' | 'light'
+
+export interface ThemeContextType {
+  theme: Theme
+  toggleTheme: () => void
+}
+
+export const ThemeContext = createContext<ThemeContextType | undefined>(undefined)
diff --git a/frontend/src/hooks/useAuth.ts b/frontend/src/hooks/useAuth.ts
new file mode 100644
index 00000000..598921c5
--- /dev/null
+++ b/frontend/src/hooks/useAuth.ts
@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { AuthContext } from '../context/AuthContextValue';
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+};
diff --git a/frontend/src/hooks/useTheme.ts b/frontend/src/hooks/useTheme.ts
new file mode 100644
index 00000000..b049a7e1
--- /dev/null
+++ b/frontend/src/hooks/useTheme.ts
@@ -0,0 +1,10 @@
+import { useContext } from 'react'
+import { ThemeContext } from '../context/ThemeContextValue'
+
+export function useTheme() {
+  const context = useContext(ThemeContext)
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider')
+  }
+  return context
+}
diff --git a/frontend/src/pages/Backups.tsx b/frontend/src/pages/Backups.tsx
index fd4f609a..88e14158 100644
--- a/frontend/src/pages/Backups.tsx
+++ b/frontend/src/pages/Backups.tsx
@@ -3,8 +3,8 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { Card } from '../components/ui/Card'
 import { Button } from '../components/ui/Button'
 import { Input } from '../components/ui/Input'
-import { toast } from '../components/Toast'
-import { getBackups, createBackup, restoreBackup, deleteBackup } from '../api/backups'
+import { toast } from '../utils/toast'
+import { getBackups, createBackup, restoreBackup, deleteBackup, BackupFile } from '../api/backups'
 import { getSettings, updateSetting } from '../api/settings'
 import { Loader2, Download, RotateCcw, Plus, Archive, Trash2, Save } from 'lucide-react'
 
@@ -45,7 +45,7 @@ export default function Backups() {
       queryClient.invalidateQueries({ queryKey: ['backups'] })
       toast.success('Backup created successfully')
     },
-    onError: (error: any) => {
+    onError: (error: Error) => {
       toast.error(`Failed to create backup: ${error.message}`)
     },
   })
@@ -55,7 +55,7 @@ export default function Backups() {
     onSuccess: () => {
       toast.success('Backup restored successfully. Please restart the container.')
     },
-    onError: (error: any) => {
+    onError: (error: Error) => {
       toast.error(`Failed to restore backup: ${error.message}`)
     },
   })
@@ -66,7 +66,7 @@ export default function Backups() {
       queryClient.invalidateQueries({ queryKey: ['backups'] })
       toast.success('Backup deleted successfully')
     },
-    onError: (error: any) => {
+    onError: (error: Error) => {
       toast.error(`Failed to delete backup: ${error.message}`)
     },
   })
@@ -80,18 +80,19 @@ export default function Backups() {
       queryClient.invalidateQueries({ queryKey: ['settings'] })
       toast.success('Backup settings saved')
     },
-    onError: (error: any) => {
+    onError: (error: Error) => {
       toast.error(`Failed to save settings: ${error.message}`)
     },
   })
 
-  const handleDownload = (_filename: string) => {
+  const handleDownload = (filename: string) => {
     // Direct download link
     // Assuming we have a download endpoint that serves the file
     // For now, we can use window.open or create a link element
     // But we need an auth token.
     // A better way is to use the API client to get a blob and download it.
     // Or just show a toast as before if not implemented fully.
+    console.log('Download requested for:', filename)
     toast.info('Download logic needs backend implementation for authenticated file serving')
   }
 
@@ -165,7 +166,7 @@ export default function Backups() {
                   </td>
                 </tr>
               ) : (
-                backups?.map((backup: any) => (
+                backups?.map((backup: BackupFile) => (
                   <tr key={backup.filename} className="hover:bg-gray-50 dark:hover:bg-gray-800/50">
                     <td className="px-6 py-4 font-medium text-gray-900 dark:text-white">
                       {backup.filename}
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
index a1ef5e08..3e82e72a 100644
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -4,9 +4,9 @@ import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { Card } from '../components/ui/Card'
 import { Input } from '../components/ui/Input'
 import { Button } from '../components/ui/Button'
-import { toast } from '../components/Toast'
+import { toast } from '../utils/toast'
 import client from '../api/client'
-import { useAuth } from '../context/AuthContext'
+import { useAuth } from '../hooks/useAuth'
 import { getSetupStatus } from '../api/setup'
 
 export default function Login() {
diff --git a/frontend/src/pages/Security.tsx b/frontend/src/pages/Security.tsx
index 3905af44..87aae42d 100644
--- a/frontend/src/pages/Security.tsx
+++ b/frontend/src/pages/Security.tsx
@@ -3,7 +3,7 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { Card } from '../components/ui/Card'
 import { Input } from '../components/ui/Input'
 import { Button } from '../components/ui/Button'
-import { toast } from '../components/Toast'
+import { toast } from '../utils/toast'
 import client from '../api/client'
 import { getProfile, regenerateApiKey } from '../api/user'
 import { Copy, RefreshCw, Shield } from 'lucide-react'
diff --git a/frontend/src/pages/Setup.tsx b/frontend/src/pages/Setup.tsx
index d5a0c3b0..f1cf767d 100644
--- a/frontend/src/pages/Setup.tsx
+++ b/frontend/src/pages/Setup.tsx
@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { getSetupStatus, performSetup, SetupRequest } from '../api/setup';
 import client from '../api/client';
-import { useAuth } from '../context/AuthContext';
+import { useAuth } from '../hooks/useAuth';
 import { Input } from '../components/ui/Input';
 import { Button } from '../components/ui/Button';
 
diff --git a/frontend/src/pages/SystemSettings.tsx b/frontend/src/pages/SystemSettings.tsx
index d25d0ecf..7b267fce 100644
--- a/frontend/src/pages/SystemSettings.tsx
+++ b/frontend/src/pages/SystemSettings.tsx
@@ -3,7 +3,7 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { Card } from '../components/ui/Card'
 import { Button } from '../components/ui/Button'
 import { Input } from '../components/ui/Input'
-import { toast } from '../components/Toast'
+import { toast } from '../utils/toast'
 import { getSettings, updateSetting } from '../api/settings'
 import client from '../api/client'
 import { Loader2, Server, RefreshCw, Save, Activity } from 'lucide-react'
diff --git a/frontend/src/pages/__tests__/Setup.test.tsx b/frontend/src/pages/__tests__/Setup.test.tsx
index b8ecfff9..97030217 100644
--- a/frontend/src/pages/__tests__/Setup.test.tsx
+++ b/frontend/src/pages/__tests__/Setup.test.tsx
@@ -6,7 +6,7 @@ import Setup from '../Setup';
 import * as setupApi from '../../api/setup';
 
 // Mock AuthContext so useAuth works in tests
-vi.mock('../../context/AuthContext', () => ({
+vi.mock('../../hooks/useAuth', () => ({
   useAuth: () => ({
     login: vi.fn(),
     logout: vi.fn(),
diff --git a/frontend/src/services/api.ts b/frontend/src/services/api.ts
deleted file mode 100644
index 3304be02..00000000
--- a/frontend/src/services/api.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-const API_BASE = '/api/v1'
-
-interface RequestOptions {
-  method?: string
-  headers?: Record<string, string>
-  body?: any
-}
-
-async function request<T>(endpoint: string, options: RequestOptions = {}): Promise<T> {
-  const url = `${API_BASE}${endpoint}`
-  const config: RequestInit = {
-    method: options.method || 'GET',
-    headers: {
-      'Content-Type': 'application/json',
-      ...options.headers,
-    },
-  }
-
-  if (options.body) {
-    config.body = JSON.stringify(options.body)
-  }
-
-  const response = await fetch(url, config)
-
-  if (!response.ok) {
-    const error = await response.json().catch(() => ({ error: response.statusText }))
-    throw new Error(error.error || `HTTP ${response.status}`)
-  }
-
-  return response.json()
-}
-
-// Proxy Hosts API
-export const proxyHostsAPI = {
-  list: () => request<any[]>('/proxy-hosts'),
-  get: (uuid: string) => request<any>(`/proxy-hosts/${uuid}`),
-  create: (data: any) => request<any>('/proxy-hosts', { method: 'POST', body: data }),
-  update: (uuid: string, data: any) => request<any>(`/proxy-hosts/${uuid}`, { method: 'PUT', body: data }),
-  delete: (uuid: string) => request<void>(`/proxy-hosts/${uuid}`, { method: 'DELETE' }),
-}
-
-// Remote Servers API
-export const remoteServersAPI = {
-  list: (enabledOnly?: boolean) => {
-    const query = enabledOnly ? '?enabled=true' : ''
-    return request<any[]>(`/remote-servers${query}`)
-  },
-  get: (uuid: string) => request<any>(`/remote-servers/${uuid}`),
-  create: (data: any) => request<any>('/remote-servers', { method: 'POST', body: data }),
-  update: (uuid: string, data: any) => request<any>(`/remote-servers/${uuid}`, { method: 'PUT', body: data }),
-  delete: (uuid: string) => request<void>(`/remote-servers/${uuid}`, { method: 'DELETE' }),
-  test: (uuid: string) => request<any>(`/remote-servers/${uuid}/test`, { method: 'POST' }),
-}
-
-// Import API
-export const importAPI = {
-  status: () => request<{ has_pending: boolean; session?: any }>('/import/status'),
-  preview: () => request<{ hosts: any[]; conflicts: string[]; errors: string[] }>('/import/preview'),
-  upload: (content: string, filename?: string) => request<any>('/import/upload', {
-    method: 'POST',
-    body: { content, filename }
-  }),
-  commit: (sessionUUID: string, resolutions: Record<string, string>) => request<any>('/import/commit', {
-    method: 'POST',
-    body: { session_uuid: sessionUUID, resolutions }
-  }),
-  cancel: (sessionUUID: string) => request<void>(`/import/cancel?session_uuid=${sessionUUID}`, { method: 'DELETE' }),
-}
-
-// Health API
-export const healthAPI = {
-  check: () => request<{ status: string }>('/health'),
-}
diff --git a/frontend/src/utils/toast.ts b/frontend/src/utils/toast.ts
new file mode 100644
index 00000000..c8a1f53a
--- /dev/null
+++ b/frontend/src/utils/toast.ts
@@ -0,0 +1,29 @@
+type ToastType = 'success' | 'error' | 'info' | 'warning'
+
+export interface Toast {
+  id: number
+  message: string
+  type: ToastType
+}
+
+let toastId = 0
+export const toastCallbacks = new Set<(toast: Toast) => void>()
+
+export const toast = {
+  success: (message: string) => {
+    const id = ++toastId
+    toastCallbacks.forEach(callback => callback({ id, message, type: 'success' }))
+  },
+  error: (message: string) => {
+    const id = ++toastId
+    toastCallbacks.forEach(callback => callback({ id, message, type: 'error' }))
+  },
+  info: (message: string) => {
+    const id = ++toastId
+    toastCallbacks.forEach(callback => callback({ id, message, type: 'info' }))
+  },
+  warning: (message: string) => {
+    const id = ++toastId
+    toastCallbacks.forEach(callback => callback({ id, message, type: 'warning' }))
+  },
+}