diff --git a/src/Chat/ChatBase.tsx b/src/Chat/ChatBase.tsx
index 295a7fa4..f2c1c36a 100644
--- a/src/Chat/ChatBase.tsx
+++ b/src/Chat/ChatBase.tsx
@@ -39,7 +39,7 @@ import { WebHandler } from "../lib/WebHandler";
 import { ChatCraftCommandRegistry } from "../lib/commands";
 import ChatHeader from "./ChatHeader";
 import { FreeModelProvider } from "../lib/providers/DefaultProvider/FreeModelProvider";
-import PreferencesModal from "../components/PreferencesModal";
+import PreferencesModal from "../components/Preferences/PreferencesModal";
 
 type ChatBaseProps = {
   chat: ChatCraftChat;
diff --git a/src/components/DefaultSystemPromptModal.tsx b/src/components/DefaultSystemPromptModal.tsx
deleted file mode 100644
index 9ff87e57..00000000
--- a/src/components/DefaultSystemPromptModal.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import { RefObject, useState } from "react";
-import {
-  Button,
-  Flex,
-  FormControl,
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
-  ModalFooter,
-  ModalBody,
-  ModalCloseButton,
-  VStack,
-  Text,
-  Textarea,
-} from "@chakra-ui/react";
-import debounce from "lodash-es/debounce";
-
-import { useSettings } from "../hooks/use-settings";
-import { defaultSystemPrompt } from "../lib/system-prompt";
-
-type DefaultSystemPromptModalProps = {
-  isOpen: boolean;
-  onClose: () => void;
-  finalFocusRef?: RefObject<HTMLTextAreaElement>;
-};
-
-function DefaultSystemPromptModal({
-  isOpen,
-  onClose,
-  finalFocusRef,
-}: DefaultSystemPromptModalProps) {
-  const [prompt, setPrompt] = useState(defaultSystemPrompt());
-  const { settings, setSettings } = useSettings();
-
-  // Update the default prompt, but not on every keystroke
-  const handleSave = debounce((value: string) => {
-    setSettings({ ...settings, customSystemPrompt: value });
-  }, 250);
-
-  // When the prompt changes, update state, and trigger a save for later
-  const handleUpdate = (value: string) => {
-    setPrompt(value);
-    handleSave(value);
-  };
-
-  // Reset the default system prompt back to the app's default
-  const handleReset = () => {
-    setSettings({ ...settings, customSystemPrompt: undefined });
-    setPrompt(defaultSystemPrompt());
-  };
-
-  return (
-    <Modal isOpen={isOpen} onClose={onClose} size="lg" finalFocusRef={finalFocusRef}>
-      <ModalOverlay />
-      <ModalContent>
-        <ModalHeader>Default System Prompt</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>
-          <VStack gap={4}>
-            <Text fontSize="sm">
-              The default system prompt is used as the first message in every chat. It provides the
-              LLM important context, behavioral cues, and expectations about responses and desired
-              response formats.
-            </Text>
-
-            <Text as="em" fontSize="sm">
-              NOTE: changes to the default system prompt will take effect in new chats, but
-              won&apos;t affect existing ones.
-            </Text>
-
-            <FormControl>
-              <Textarea
-                autoFocus
-                rows={15}
-                value={prompt}
-                onChange={(e) => handleUpdate(e.target.value)}
-              />
-            </FormControl>
-          </VStack>
-        </ModalBody>
-
-        <ModalFooter>
-          <Flex w="100%" justifyContent="space-between">
-            <Text fontSize="sm">Reset to the default ChatCraft system prompt</Text>
-            <Button size="xs" colorScheme="red" onClick={() => handleReset()}>
-              Reset
-            </Button>
-          </Flex>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  );
-}
-
-export default DefaultSystemPromptModal;
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 7aa9a754..b85b9233 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -25,11 +25,9 @@ import { TbSearch } from "react-icons/tb";
 import { FiRss } from "react-icons/fi";
 import { Form } from "react-router-dom";
 
-import PreferencesModal from "./PreferencesModal";
-import DefaultSystemPromptModal from "./DefaultSystemPromptModal";
+import PreferencesModal from "./Preferences/PreferencesModal";
 import { useUser } from "../hooks/use-user";
 import useMobileBreakpoint from "../hooks/use-mobile-breakpoint";
-import WebHandlersConfigModal from "./WebHandlersConfigModal";
 import { useAlert } from "../hooks/use-alert";
 
 type HeaderProps = {
@@ -46,16 +44,6 @@ function Header({ chatId, inputPromptRef, searchText, onToggleSidebar }: HeaderP
     onOpen: onPrefModalOpen,
     onClose: onPrefModalClose,
   } = useDisclosure();
-  const {
-    isOpen: isWebHandlersModalOpen,
-    onOpen: onWebHandlersModalOpen,
-    onClose: onWebHandlersModalClose,
-  } = useDisclosure();
-  const {
-    isOpen: isSysPromptModalOpen,
-    onOpen: onSysPromptModalOpen,
-    onClose: onSysPromptModalClose,
-  } = useDisclosure();
   const { user, login, logout } = useUser();
   const { error } = useAlert();
 
@@ -179,8 +167,6 @@ function Header({ chatId, inputPromptRef, searchText, onToggleSidebar }: HeaderP
             />
             <MenuList>
               <MenuItem onClick={onPrefModalOpen}>Settings...</MenuItem>
-              <MenuItem onClick={onWebHandlersModalOpen}>Web Handlers</MenuItem>
-              <MenuItem onClick={onSysPromptModalOpen}>Default System Prompt...</MenuItem>
               {user ? (
                 <MenuItem
                   onClick={() => {
@@ -230,16 +216,6 @@ function Header({ chatId, inputPromptRef, searchText, onToggleSidebar }: HeaderP
         onClose={onPrefModalClose}
         finalFocusRef={inputPromptRef}
       />
-      <WebHandlersConfigModal
-        isOpen={isWebHandlersModalOpen}
-        onClose={onWebHandlersModalClose}
-        finalFocusRef={inputPromptRef}
-      />
-      <DefaultSystemPromptModal
-        isOpen={isSysPromptModalOpen}
-        onClose={onSysPromptModalClose}
-        finalFocusRef={inputPromptRef}
-      />
     </Flex>
   );
 }
diff --git a/src/components/Preferences/CustomizationSettings.tsx b/src/components/Preferences/CustomizationSettings.tsx
new file mode 100644
index 00000000..f070f9f0
--- /dev/null
+++ b/src/components/Preferences/CustomizationSettings.tsx
@@ -0,0 +1,137 @@
+import {
+  FormControl,
+  FormLabel,
+  Stack,
+  Slider,
+  SliderTrack,
+  SliderFilledTrack,
+  SliderThumb,
+  FormErrorMessage,
+  FormHelperText,
+  Kbd,
+  RadioGroup,
+  Radio,
+  Checkbox,
+  Box,
+  VStack,
+} from "@chakra-ui/react";
+import { isMac } from "../../lib/utils";
+import { useSettings } from "../../hooks/use-settings";
+
+function CustomizationSettings() {
+  const { settings, setSettings } = useSettings();
+
+  return (
+    <VStack gap={6} my={3}>
+      <FormControl>
+        <FormLabel>
+          When writing a prompt, press <Kbd>Enter</Kbd> to...
+        </FormLabel>
+        <RadioGroup
+          value={settings.enterBehaviour}
+          onChange={(nextValue) =>
+            setSettings({ ...settings, enterBehaviour: nextValue as EnterBehaviour })
+          }
+        >
+          <Stack>
+            <Radio value="send">Send the message</Radio>
+            <Radio value="newline">
+              Start a new line (use {isMac() ? <Kbd>Command ⌘</Kbd> : <Kbd>Ctrl</Kbd>} +
+              <Kbd>Enter</Kbd> to send)
+            </Radio>
+          </Stack>
+        </RadioGroup>
+      </FormControl>
+
+      <FormControl>
+        <Checkbox
+          isChecked={settings.countTokens}
+          onChange={(e) => setSettings({ ...settings, countTokens: e.target.checked })}
+        >
+          Track and Display Token Count and Cost
+        </Checkbox>
+      </FormControl>
+
+      <FormControl as="fieldset">
+        <FormLabel as="legend">Image Compression</FormLabel>
+        <Stack>
+          <Box px="6">
+            <FormControl>
+              <FormLabel>
+                Maximum file size after compression: {settings.maxCompressedFileSizeMB} (MB)
+              </FormLabel>
+              <Slider
+                id="max-compressed-file-size"
+                value={settings.maxCompressedFileSizeMB}
+                onChange={(value) => setSettings({ ...settings, maxCompressedFileSizeMB: value })}
+                min={1}
+                max={20}
+                step={1}
+              >
+                <SliderTrack>
+                  <SliderFilledTrack />
+                </SliderTrack>
+                <SliderThumb />
+              </Slider>
+              <FormErrorMessage>Maximum file size must be between 1 and 20 MB.</FormErrorMessage>
+              <FormHelperText>
+                After compression, each attached image will be under your chosen maximum file size
+                (1-20 MB).
+              </FormHelperText>
+            </FormControl>
+          </Box>
+          <Box px="6">
+            <FormControl>
+              <FormLabel>Maximum image dimension: {settings.maxImageDimension} (px)</FormLabel>
+              <Slider
+                id="max-image-dimension"
+                value={settings.maxImageDimension}
+                onChange={(value) => setSettings({ ...settings, maxImageDimension: value })}
+                min={16}
+                max={2048}
+                step={16}
+              >
+                <SliderTrack>
+                  <SliderFilledTrack />
+                </SliderTrack>
+                <SliderThumb />
+              </Slider>
+              <FormErrorMessage>
+                Maximum Image dimension must be between 16 and 2048
+              </FormErrorMessage>
+              <FormHelperText>
+                Your compressed image&apos;s maximum width or height will be within the dimension
+                you choose (16-2048 pixels).
+              </FormHelperText>
+            </FormControl>
+          </Box>
+          <Box px="6">
+            <FormControl>
+              <FormLabel>Compression factor: {settings.compressionFactor}</FormLabel>
+              <Slider
+                id="compression-factor"
+                value={settings.compressionFactor}
+                onChange={(value) => setSettings({ ...settings, compressionFactor: value })}
+                min={0.1}
+                max={1}
+                step={0.1}
+              >
+                <SliderTrack>
+                  <SliderFilledTrack />
+                </SliderTrack>
+                <SliderThumb />
+              </Slider>
+              <FormErrorMessage>Compression factor must be between 0.1 and 1.0</FormErrorMessage>
+              <FormHelperText>
+                Set the maximum file size based on the original size multiplied by the factor you
+                choose (0.1-1.0).
+              </FormHelperText>
+            </FormControl>
+          </Box>
+        </Stack>
+      </FormControl>
+    </VStack>
+  );
+}
+
+export default CustomizationSettings;
diff --git a/src/components/Preferences/DefaultSystemPrompt.tsx b/src/components/Preferences/DefaultSystemPrompt.tsx
new file mode 100644
index 00000000..a6a07c83
--- /dev/null
+++ b/src/components/Preferences/DefaultSystemPrompt.tsx
@@ -0,0 +1,74 @@
+import { useState } from "react";
+import {
+  Button,
+  Flex,
+  FormControl,
+  VStack,
+  Text,
+  Textarea,
+  Tooltip,
+  Heading,
+} from "@chakra-ui/react";
+import debounce from "lodash-es/debounce";
+
+import { useSettings } from "../../hooks/use-settings";
+import { defaultSystemPrompt } from "../../lib/system-prompt";
+
+function DefaultSystemPrompt() {
+  const [prompt, setPrompt] = useState(defaultSystemPrompt());
+  const { settings, setSettings } = useSettings();
+
+  // Update the default prompt, but not on every keystroke
+  const handleSave = debounce((value: string) => {
+    setSettings({ ...settings, customSystemPrompt: value });
+  }, 250);
+
+  // When the prompt changes, update state, and trigger a save for later
+  const handleUpdate = (value: string) => {
+    setPrompt(value);
+    handleSave(value);
+  };
+
+  // Reset the default system prompt back to the app's default
+  const handleReset = () => {
+    setSettings({ ...settings, customSystemPrompt: undefined });
+    setPrompt(defaultSystemPrompt());
+  };
+
+  return (
+    <VStack gap={4} my={3}>
+      <Text>
+        The default system prompt is used as the first message in every chat. It provides the LLM
+        important context, behavioral cues, and expectations about responses and desired response
+        formats.
+      </Text>
+
+      <Text as="em" fontSize="sm">
+        NOTE: changes to the default system prompt will take effect in new chats, but won&apos;t
+        affect existing ones.
+      </Text>
+
+      <Heading size={"md"} width={"100%"} fontWeight={"normal"}>
+        Default System Prompt
+      </Heading>
+      <FormControl>
+        <Textarea
+          autoFocus
+          variant="filled"
+          rows={16}
+          value={prompt}
+          onChange={(e) => handleUpdate(e.target.value)}
+        />
+      </FormControl>
+      <Flex w="100%" justifyContent="flex-end">
+        <Tooltip hasArrow placement="left" label="Reset to the default ChatCraft system prompt">
+          <Button size="sm" colorScheme="red" onClick={() => handleReset()}>
+            Reset
+          </Button>
+        </Tooltip>
+      </Flex>
+    </VStack>
+  );
+}
+
+export default DefaultSystemPrompt;
diff --git a/src/components/Preferences/ModelsSettings.tsx b/src/components/Preferences/ModelsSettings.tsx
new file mode 100644
index 00000000..6ee67e3c
--- /dev/null
+++ b/src/components/Preferences/ModelsSettings.tsx
@@ -0,0 +1,948 @@
+import {
+  Box,
+  Button,
+  ButtonGroup,
+  Checkbox,
+  Flex,
+  FormControl,
+  FormErrorMessage,
+  FormHelperText,
+  FormLabel,
+  IconButton,
+  Input,
+  InputGroup,
+  Link,
+  Select,
+  Slider,
+  SliderFilledTrack,
+  SliderThumb,
+  SliderTrack,
+  Spinner,
+  Table,
+  Tbody,
+  Td,
+  Text,
+  Th,
+  Thead,
+  Tooltip,
+  Tr,
+  VStack,
+} from "@chakra-ui/react";
+import { ChangeEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import { capitalize } from "lodash-es";
+import { FaCheck } from "react-icons/fa";
+import { MdCancel, MdVolumeUp } from "react-icons/md";
+import { useAlert } from "../../hooks/use-alert";
+import useAudioPlayer from "../../hooks/use-audio-player";
+import { useModels } from "../../hooks/use-models";
+import { useSettings } from "../../hooks/use-settings";
+import { ChatCraftModel } from "../../lib/ChatCraftModel";
+import { ChatCraftProvider, ProviderData } from "../../lib/ChatCraftProvider";
+import { textToSpeech } from "../../lib/ai";
+import db from "../../lib/db";
+import { providerFromUrl, supportedProviders } from "../../lib/providers";
+import { CustomProvider } from "../../lib/providers/CustomProvider";
+import { FreeModelProvider } from "../../lib/providers/DefaultProvider/FreeModelProvider";
+import { OpenAiProvider } from "../../lib/providers/OpenAiProvider";
+import { OpenRouterProvider } from "../../lib/providers/OpenRouterProvider";
+import { TextToSpeechVoices } from "../../lib/settings";
+import { download } from "../../lib/utils";
+import PasswordInput from "../PasswordInput";
+
+interface ModelsSettingsProps {
+  isOpen: boolean;
+}
+
+// https://dexie.org/docs/StorageManager
+async function isStoragePersisted() {
+  if (navigator.storage?.persisted) {
+    return await navigator.storage.persisted();
+  }
+
+  return false;
+}
+
+interface ModelsSettingsProps {
+  isOpen: boolean;
+}
+
+function ModelsSettings(isOpen: ModelsSettingsProps) {
+  const { settings, setSettings } = useSettings();
+  const { models } = useModels();
+
+  // Whether our db is being persisted
+  const [isPersisted, setIsPersisted] = useState(false);
+  const { info, error, success, warning } = useAlert();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [isApiKeyInvalid, setIsApiKeyInvalid] = useState(false);
+  const [selectedProvider, setSelectedProvider] = useState<ChatCraftProvider | null>(null);
+  const [newCustomProvider, setNewCustomProvider] = useState<ChatCraftProvider | null>(null);
+  const [apiKeySaved, setApiKeySaved] = useState(false);
+  const [isValidating, setIsValidating] = useState(false);
+
+  // Stores the list of providers we are displaying in providers table
+  const [tableProviders, setTableProviders] = useState<ProviderData>({});
+
+  // Stores the provider that has its api key field currently actively selected
+  const [focusedProvider, setFocusedProvider] = useState<ChatCraftProvider | null>(
+    settings.currentProvider
+  );
+
+  useEffect(() => {
+    isStoragePersisted()
+      .then((value) => setIsPersisted(value))
+      .catch(console.error);
+  }, []);
+
+  async function handlePersistClick() {
+    if (navigator.storage?.persist) {
+      await navigator.storage.persist();
+      const persisted = await isStoragePersisted();
+      setIsPersisted(persisted);
+    }
+  }
+
+  const handleExportClick = useCallback(
+    async function () {
+      // Don't load this unless it's needed (150K)
+      const { exportDB } = await import("dexie-export-import");
+      const blob = await exportDB(db);
+      download(blob, "chatcraft-db.json", "application/json");
+      info({
+        title: "Downloaded",
+        message: "Message was downloaded as a file",
+      });
+    },
+    [info]
+  );
+
+  const handleFileChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files?.[0];
+      if (file) {
+        const reader = new FileReader();
+        reader.onloadend = () => {
+          const blob = new Blob([new Uint8Array(reader.result as ArrayBuffer)]);
+          // Don't load this unless it's needed (150K)
+          import("dexie-export-import")
+            .then(({ importDB }) => importDB(blob))
+            .then(() => {
+              info({
+                title: "Database Import",
+                message: "Database imported successfully. You may need to refresh.",
+              });
+            })
+            .catch((err) => {
+              console.warn("Error importing db", err);
+              error({
+                title: "Database Import",
+                message: "Unable to import database. See Console for more details.",
+              });
+            });
+        };
+        reader.readAsArrayBuffer(file);
+      }
+    },
+    [error, info]
+  );
+
+  const handleImportClick = useCallback(
+    function () {
+      if (inputRef.current) {
+        inputRef.current.click();
+      }
+    },
+    [inputRef]
+  );
+
+  const handleVoiceSelection = useCallback(
+    (voice: TextToSpeechVoices) => {
+      setSettings({
+        ...settings,
+        textToSpeech: {
+          ...settings.textToSpeech,
+          voice,
+        },
+      });
+    },
+    [setSettings, settings]
+  );
+
+  const { clearAudioQueue, addToAudioQueue } = useAudioPlayer();
+
+  const handlePlayAudioPreview = useCallback(async () => {
+    try {
+      const { voice } = settings.textToSpeech;
+      const previewText = `Hi there, this is ${voice}!`;
+
+      clearAudioQueue();
+      addToAudioQueue(textToSpeech(previewText, voice));
+    } catch (err: any) {
+      console.error(err);
+      error({ title: "Error while generating Audio", message: err.message });
+    }
+  }, [addToAudioQueue, clearAudioQueue, error, settings.textToSpeech]);
+
+  const handleApiKeyChange = async (provider: ChatCraftProvider, apiKey: string) => {
+    const newProvider = providerFromUrl(
+      provider.apiUrl,
+      apiKey,
+      provider.name,
+      provider.defaultModel
+    );
+
+    setFocusedProvider(newProvider);
+
+    const newProviders = { ...settings.providers };
+
+    // Update api key in table
+    tableProviders[newProvider.name] = newProvider;
+
+    // Api key validation
+    try {
+      setIsApiKeyInvalid(false);
+      setIsValidating(true);
+
+      const result = await newProvider.validateApiKey(newProvider.apiKey!);
+
+      setIsApiKeyInvalid(!result);
+      setIsValidating(false);
+
+      // Valid key, update in settings.providers
+      if (result) {
+        // Valid key, update in settings.providers
+        newProviders[newProvider.name] = newProvider;
+      } else {
+        // Invalid key, remove from settings.providers
+        delete newProviders[newProvider.name];
+      }
+    } catch (err: any) {
+      setIsApiKeyInvalid(true);
+      setIsValidating(false);
+
+      // Invalid key, remove from settings.providers
+      delete newProviders[newProvider.name];
+    }
+
+    setSettings({
+      ...settings,
+      ...(newProvider.name === settings.currentProvider.name && { currentProvider: newProvider }),
+      providers: newProviders,
+    });
+
+    if (newProvider.name === selectedProvider?.name) {
+      setSelectedProvider(newProvider);
+    }
+
+    setApiKeySaved(true);
+  };
+
+  const handleSetCurrentProvider = async () => {
+    if (!selectedProvider) {
+      console.error("Error trying to set current provider, missing selected provider");
+      setFocusedProvider(null);
+      return;
+    }
+
+    if (selectedProvider.name === settings.currentProvider.name) {
+      setFocusedProvider(null);
+      warning({
+        title: "No change needed",
+        message: "This is already your current provider",
+      });
+      return;
+    }
+
+    setFocusedProvider(selectedProvider);
+
+    // Api key validation
+    try {
+      setIsApiKeyInvalid(false);
+      setIsValidating(true);
+
+      const result = await selectedProvider.validateApiKey(selectedProvider.apiKey!);
+
+      setIsApiKeyInvalid(!result);
+      setIsValidating(false);
+
+      // Valid key
+      if (result) {
+        // Set as current provider
+        setSettings({ ...settings, currentProvider: selectedProvider });
+        setApiKeySaved(true);
+        setSelectedProvider(null);
+
+        success({
+          title: "Current provider changed",
+          message: `${selectedProvider.name} set as current provider`,
+        });
+
+        setSettings({ ...settings, currentProvider: selectedProvider });
+        setApiKeySaved(true);
+
+        // Sync table
+        tableProviders[selectedProvider.name] = selectedProvider;
+
+        // Uncheck checkbox
+        setSelectedProvider(null);
+      } else {
+        console.warn("Error validating API key");
+        error({
+          title: "Provider not set",
+          message: "Invalid API key",
+        });
+      }
+    } catch (err: any) {
+      setIsValidating(false);
+
+      console.warn("Error validating API key", err);
+      setIsApiKeyInvalid(true);
+
+      error({
+        title: "Provider not set",
+        message: err.message,
+      });
+    }
+  };
+
+  // Handle checkbox change
+  const handleSelectedProviderChange = (provider: ChatCraftProvider) => {
+    if (selectedProvider?.name === provider.name) {
+      // Selecting same one means deselect
+      setSelectedProvider(null);
+    } else {
+      setSelectedProvider(provider);
+    }
+  };
+
+  const handleAddProvider = () => {
+    setIsApiKeyInvalid(false);
+    setNewCustomProvider(new CustomProvider("", "", "", ""));
+  };
+
+  const handleDeleteCustomProvider = () => {
+    setFocusedProvider(null);
+
+    if (!selectedProvider) {
+      console.error("Error trying to delete provider, missing selected provider");
+      return;
+    }
+
+    // Do not allow default provider to be deleted
+    if (selectedProvider.name === settings.currentProvider.name) {
+      warning({
+        title: "Action not allowed",
+        message: "You may not delete the current provider.",
+      });
+      return;
+    }
+
+    // Do not allow ChatCraft initial providers to be deleted
+    if (supportedProviders[selectedProvider.name]) {
+      warning({
+        title: "Action not allowed",
+        message: "You may not delete default ChatCraft providers.",
+      });
+      return;
+    }
+
+    const newProviders = { ...settings.providers };
+    delete newProviders[selectedProvider.name];
+    setSettings({ ...settings, providers: newProviders });
+
+    // Uncheck checkbox
+    setSelectedProvider(null);
+
+    // Sync table
+    setTableProviders({ ...supportedProviders, ...newProviders });
+  };
+
+  const handleSaveNewCustomProvider = async () => {
+    setFocusedProvider(newCustomProvider);
+
+    if (!newCustomProvider) {
+      console.error("Error trying to save new custom provider, missing custom provider");
+      return;
+    }
+
+    const trimmedData = new CustomProvider(
+      newCustomProvider.name?.trim(),
+      newCustomProvider.apiUrl?.trim(),
+      "",
+      newCustomProvider.apiKey?.trim()
+    );
+
+    if (!trimmedData.name || !trimmedData.apiUrl || !trimmedData.apiKey) {
+      setNewCustomProvider(trimmedData);
+      return;
+    }
+
+    // Check if provider name already exists
+    if (tableProviders[trimmedData.name]) {
+      warning({
+        title: "Provider not added",
+        message: "A provider with this name already exists.",
+      });
+      return;
+    }
+
+    // Create new ChatCraftProvider object from CustomProviderProvider parsing provider type from url
+    const newProvider = providerFromUrl(trimmedData.apiUrl, trimmedData.apiKey, trimmedData.name);
+
+    if (newProvider instanceof FreeModelProvider) {
+      warning({
+        title: "Provider not added",
+        message: "Free AI Models provider already exists",
+      });
+      return;
+    }
+
+    // Api key validation
+    try {
+      setIsApiKeyInvalid(false);
+      setIsValidating(true);
+
+      const result = await newProvider.validateApiKey(newProvider.apiKey!);
+
+      setIsApiKeyInvalid(!result);
+      setIsValidating(false);
+
+      if (!result) {
+        return;
+      }
+
+      // Query list of models
+      let models = [];
+      try {
+        models = await newProvider.queryModels(newProvider.apiKey!);
+      } catch (err: any) {
+        console.warn("Error querying models for custom provider:", err);
+        setFocusedProvider(null);
+        error({
+          title: "Provider not added",
+          message: err.message,
+        });
+        return;
+      }
+
+      if (models.length === 0) {
+        console.warn("No models available for custom provider");
+        setFocusedProvider(null);
+        error({
+          title: "Provider not added",
+          message: "Provider is not Open AI compatible.",
+        });
+        return;
+      }
+
+      // Set the first model in list as defaultModel
+      const newProviderWithModel = providerFromUrl(
+        newCustomProvider.apiUrl,
+        newCustomProvider.apiKey,
+        newCustomProvider.name,
+        models[0]
+      );
+
+      const newProviders = { ...settings.providers };
+      newProviders[newProviderWithModel.name] = newProviderWithModel;
+
+      setSettings({
+        ...settings,
+        providers: newProviders,
+      });
+      setApiKeySaved(true);
+
+      // Sync table
+      setTableProviders({ ...supportedProviders, ...newProviders });
+
+      success({
+        title: `New provider added`,
+        message: `${newProviderWithModel.name}`,
+      });
+
+      // Clear the form and hide the new provider row
+      setNewCustomProvider(null);
+      setIsValidating(false);
+    } catch (err: any) {
+      console.warn("Error validating API key", err.message);
+      setFocusedProvider(null);
+      error({
+        title: "Provider not added",
+        message: err.message,
+      });
+      setIsValidating(false);
+      return;
+    }
+  };
+
+  const extractDomain = (url: string | URL): string => {
+    try {
+      // ensure the input is always treated as a string
+      const urlString = url instanceof URL ? url.href : url;
+      const parsedUrl = new URL(urlString);
+      return parsedUrl.hostname;
+    } catch (err: any) {
+      console.error("Error extracting domain from URL:", err);
+      return typeof url === "string" ? url : "Invalid URL";
+    }
+  };
+
+  // Clean up actions when modal closes
+  useEffect(() => {
+    // Sync table
+    setTableProviders({ ...supportedProviders, ...settings.providers });
+
+    if (!isOpen) {
+      setNewCustomProvider(null);
+      setIsApiKeyInvalid(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen]);
+
+  const isTtsSupported = useMemo(() => {
+    return !!models.filter((model) => model.id.includes("tts"))?.length;
+  }, [models]);
+
+  return (
+    <Box my={3}>
+      {!tableProviders ? (
+        <Box>Loading providers...</Box>
+      ) : (
+        <VStack gap={4}>
+          <FormControl>
+            <FormLabel>
+              Providers
+              <ButtonGroup ml={3}>
+                <Button size="xs" onClick={handleAddProvider}>
+                  Add
+                </Button>
+                <Button
+                  size="xs"
+                  colorScheme="red"
+                  onClick={handleDeleteCustomProvider}
+                  isDisabled={!selectedProvider}
+                >
+                  Delete
+                </Button>
+                <Button
+                  size="xs"
+                  colorScheme="blue"
+                  onClick={handleSetCurrentProvider}
+                  isDisabled={!selectedProvider}
+                  variant="outline"
+                >
+                  Set as Current Provider
+                </Button>
+              </ButtonGroup>
+              <FormHelperText fontSize="xs">
+                Advanced option for use with other OpenAI-compatible APIs
+              </FormHelperText>
+            </FormLabel>
+            <Table
+              size="sm"
+              variant="simple"
+              sx={{
+                "th:nth-of-type(2), td:nth-of-type(2), th:nth-of-type(3), td:nth-of-type(3)": {
+                  width: "30%",
+                },
+                "th, td": {
+                  pl: "0.4rem",
+                  pr: "0.4rem",
+                },
+                "th:nth-of-type(1), td:nth-of-type(1)": {
+                  width: "5%",
+                },
+                "th:nth-of-type(4), td:nth-of-type()": {
+                  width: "12%",
+                },
+                "th:last-child, td:last-child": {
+                  width: "11%",
+                },
+              }}
+            >
+              <Thead>
+                <Tr>
+                  <Th></Th>
+                  <Th>Name</Th>
+                  <Th>API URL</Th>
+                  <Th>API Key</Th>
+                  <Th sx={{ textAlign: "center" }}>In Use</Th>
+                </Tr>
+              </Thead>
+              <Tbody>
+                {newCustomProvider && (
+                  <Tr>
+                    <Td>
+                      <IconButton
+                        aria-label="Cancel adding new provider"
+                        icon={<MdCancel />}
+                        size={"xs"}
+                        onClick={() => setNewCustomProvider(null)}
+                        onKeyDown={(e) => {
+                          if (e.key === "Enter" || e.key === " ") {
+                            setNewCustomProvider(null);
+                          }
+                        }}
+                        variant="outline"
+                        tabIndex={0}
+                        color={"grey"}
+                        border={"none"}
+                        p={0}
+                        fontSize={16}
+                        borderRadius={"50%"}
+                        _hover={{
+                          borderColor: "gray.400",
+                          color: "gray.400",
+                        }}
+                        _focus={{
+                          _focus: {
+                            outline: "none",
+                            boxShadow: "0 0 0 3px rgba(66, 153, 225, 0.6)",
+                            borderColor: "blue.300",
+                          },
+                        }}
+                        _active={{
+                          backgroundColor: "none",
+                        }}
+                      />
+                    </Td>
+                    <Td>
+                      <FormControl isInvalid={!newCustomProvider.name}>
+                        <InputGroup size="sm">
+                          <Input
+                            pl="0.4rem"
+                            fontSize="xs"
+                            placeholder="Name"
+                            value={newCustomProvider.name}
+                            onChange={(e) => {
+                              setNewCustomProvider(
+                                new CustomProvider(
+                                  e.target.value,
+                                  newCustomProvider.apiUrl,
+                                  "",
+                                  newCustomProvider.apiKey
+                                )
+                              );
+                            }}
+                          />
+                        </InputGroup>
+                        <FormErrorMessage fontSize="xs">Name is required.</FormErrorMessage>
+                      </FormControl>
+                    </Td>
+                    <Td>
+                      <FormControl isInvalid={!newCustomProvider.apiUrl}>
+                        <InputGroup size="sm">
+                          <Input
+                            pl="0.4rem"
+                            fontSize="xs"
+                            placeholder="API URL"
+                            value={newCustomProvider.apiUrl}
+                            onChange={(e) => {
+                              setNewCustomProvider(
+                                new CustomProvider(
+                                  newCustomProvider.name,
+                                  e.target.value,
+                                  "",
+                                  newCustomProvider.apiKey
+                                )
+                              );
+                            }}
+                          />
+                        </InputGroup>
+                        <FormErrorMessage fontSize="xs">API URL is required.</FormErrorMessage>
+                      </FormControl>
+                    </Td>
+                    <Td>
+                      <FormControl isInvalid={!newCustomProvider.apiKey}>
+                        <PasswordInput
+                          size="sm"
+                          buttonSize="xs"
+                          paddingRight={"2.5rem"}
+                          paddingLeft={"0.5rem"}
+                          fontSize="xs"
+                          value={newCustomProvider.apiKey || ""}
+                          onChange={(e) => {
+                            setNewCustomProvider(
+                              new CustomProvider(
+                                newCustomProvider.name,
+                                newCustomProvider.apiUrl,
+                                "",
+                                e.target.value
+                              )
+                            );
+                          }}
+                        />
+                        <FormErrorMessage fontSize="xs">API Key is required.</FormErrorMessage>
+                      </FormControl>
+                    </Td>
+                    <Td sx={{ textAlign: "center" }}>
+                      <Flex alignItems="center" justifyContent="center">
+                        <Button
+                          size="xs"
+                          colorScheme="blue"
+                          onClick={handleSaveNewCustomProvider}
+                          isLoading={
+                            focusedProvider?.name === newCustomProvider.name && isValidating
+                          }
+                        >
+                          Save
+                        </Button>
+                      </Flex>
+                    </Td>
+                  </Tr>
+                )}
+                {[...Object.values(tableProviders)] // copy of the array
+                  .reverse() // reverse the array so new provider is at top
+                  .map((provider) => {
+                    return (
+                      <Tr key={provider.name}>
+                        <Td>
+                          <Flex width={6} justifyContent={"center"}>
+                            <Checkbox
+                              onChange={() => handleSelectedProviderChange(provider)}
+                              isChecked={selectedProvider?.name === provider.name}
+                            />
+                          </Flex>
+                        </Td>
+                        <Td fontSize="xs">{provider.name}</Td>
+                        <Td fontSize="xs">
+                          <Tooltip
+                            label={provider.apiUrl}
+                            placement="top-start"
+                            sx={{ fontSize: "0.65rem" }}
+                          >
+                            <Text cursor="pointer">{extractDomain(provider.apiUrl)}</Text>
+                          </Tooltip>
+                        </Td>
+                        <Td>
+                          {provider.name === "Free AI Models" ? (
+                            <InputGroup size="sm">
+                              <Input disabled fontSize="xs" value="N/A" />
+                            </InputGroup>
+                          ) : (
+                            <FormControl
+                              isInvalid={
+                                !!(
+                                  !isValidating &&
+                                  focusedProvider?.name === provider.name &&
+                                  isApiKeyInvalid
+                                )
+                              }
+                            >
+                              <PasswordInput
+                                size="sm"
+                                buttonSize="xs"
+                                paddingRight={"2.5rem"}
+                                paddingLeft={"0.5rem"}
+                                fontSize="xs"
+                                value={provider.apiKey || ""}
+                                onChange={(e) => handleApiKeyChange(provider, e.target.value)}
+                                onFocus={() => setFocusedProvider(provider)}
+                                isDisabled={provider instanceof FreeModelProvider}
+                                isInvalid={
+                                  !!(
+                                    !isValidating &&
+                                    focusedProvider?.name === provider.name &&
+                                    isApiKeyInvalid
+                                  )
+                                }
+                              />
+                              {focusedProvider?.name === provider.name && isValidating ? (
+                                <Flex mt={2}>
+                                  <Spinner size="xs" />
+                                  <Text ml={2} fontSize="xs">
+                                    Validating...
+                                  </Text>{" "}
+                                </Flex>
+                              ) : (
+                                <FormErrorMessage fontSize="xs">
+                                  {provider.apiKey
+                                    ? "Unable to verify key."
+                                    : "API Key is required."}
+                                </FormErrorMessage>
+                              )}
+                              {provider instanceof OpenRouterProvider &&
+                                provider.name === focusedProvider?.name &&
+                                !provider.apiKey && (
+                                  <Button
+                                    mt="3"
+                                    size="xs"
+                                    onClick={provider.openRouterPkceRedirect}
+                                  >
+                                    Get OpenRouter key{" "}
+                                  </Button>
+                                )}
+                            </FormControl>
+                          )}
+                        </Td>
+                        <Td sx={{ textAlign: "center" }}>
+                          <Flex alignItems="center" justifyContent="center">
+                            {settings.currentProvider.name === provider.name && (
+                              <FaCheck style={{ color: "green" }} />
+                            )}
+                          </Flex>
+                        </Td>
+                      </Tr>
+                    );
+                  })}
+              </Tbody>
+            </Table>
+            {apiKeySaved && (
+              <FormHelperText fontSize="xs">
+                Your API Key(s) are stored in browser storage
+              </FormHelperText>
+            )}
+          </FormControl>
+          <FormControl>
+            <FormLabel>
+              Offline database is {isPersisted ? "persisted" : "not persisted"}
+              <ButtonGroup ml={2}>
+                <Button
+                  size="xs"
+                  onClick={() => handlePersistClick()}
+                  isDisabled={isPersisted}
+                  variant="outline"
+                >
+                  Persist
+                </Button>
+                <Button size="xs" onClick={() => handleImportClick()}>
+                  Import
+                </Button>
+                <Input
+                  type="file"
+                  ref={inputRef}
+                  onChange={handleFileChange}
+                  style={{ display: "none" }}
+                />
+                <Button size="xs" onClick={() => handleExportClick()}>
+                  Export
+                </Button>
+              </ButtonGroup>
+            </FormLabel>
+            <FormHelperText>
+              Persisted databases use the{" "}
+              <Link
+                href="https://developer.mozilla.org/en-US/docs/Web/API/Storage_API"
+                textDecoration="underline"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Storage API
+              </Link>{" "}
+              and are retained by the browser as long as possible. See{" "}
+              <Link
+                href="https://dexie.org/docs/ExportImport/dexie-export-import"
+                textDecoration="underline"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                docs
+              </Link>{" "}
+              for database export details.
+            </FormHelperText>
+          </FormControl>
+
+          <FormControl>
+            <FormLabel>GPT Model</FormLabel>
+            <Select
+              value={settings.model.id}
+              onChange={(e) =>
+                setSettings({ ...settings, model: new ChatCraftModel(e.target.value) })
+              }
+            >
+              {models
+                .filter(
+                  (model) =>
+                    !(settings.currentProvider instanceof OpenAiProvider) ||
+                    model.id.includes("gpt")
+                )
+                .map((model) => (
+                  <option key={model.id} value={model.id}>
+                    {model.prettyModel}
+                  </option>
+                ))}
+            </Select>
+            <FormHelperText>
+              See{" "}
+              <Link
+                href="https://platform.openai.com/docs/models/gpt-4"
+                textDecoration="underline"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                docs
+              </Link>{" "}
+              and{" "}
+              <Link
+                href="https://openai.com/pricing"
+                textDecoration="underline"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                pricing
+              </Link>
+              . NOTE: not all accounts have access to GPT - 4
+            </FormHelperText>
+          </FormControl>
+
+          <FormControl>
+            <FormLabel>Temperature: {settings.temperature}</FormLabel>
+            <Box px="5">
+              <Slider
+                value={settings.temperature}
+                onChange={(value) => setSettings({ ...settings, temperature: value })}
+                min={0}
+                max={2}
+                step={0.05}
+              >
+                <SliderTrack>
+                  <SliderFilledTrack />
+                </SliderTrack>
+                <SliderThumb />
+              </Slider>
+            </Box>
+            <FormErrorMessage>Temperature must be a number between 0 and 2.</FormErrorMessage>
+            <FormHelperText>
+              The temperature increases the randomness of the response (0.0 - 2.0).
+            </FormHelperText>
+          </FormControl>
+
+          {isTtsSupported && (
+            <FormControl>
+              <FormLabel>Select Voice</FormLabel>
+
+              <Flex gap={3} alignItems={"center"}>
+                <Select
+                  value={settings.textToSpeech.voice}
+                  onChange={(evt) => handleVoiceSelection(evt.target.value as TextToSpeechVoices)}
+                >
+                  {Object.values(TextToSpeechVoices).map((voice) => (
+                    <option key={voice} value={voice}>
+                      {capitalize(voice)}
+                    </option>
+                  ))}
+                </Select>
+                <Tooltip label="Audio Preview">
+                  <IconButton
+                    variant="outline"
+                    type="button"
+                    aria-label={"Audio Preview for " + capitalize(settings.textToSpeech.voice)}
+                    icon={<MdVolumeUp />}
+                    onClick={handlePlayAudioPreview}
+                  />
+                </Tooltip>
+              </Flex>
+
+              <FormHelperText>
+                Used when announcing messages in real-time or with the &lsquo;Speak&rsquo; option
+              </FormHelperText>
+            </FormControl>
+          )}
+        </VStack>
+      )}
+    </Box>
+  );
+}
+
+export default ModelsSettings;
diff --git a/src/components/Preferences/PreferencesModal.tsx b/src/components/Preferences/PreferencesModal.tsx
new file mode 100644
index 00000000..ccc98446
--- /dev/null
+++ b/src/components/Preferences/PreferencesModal.tsx
@@ -0,0 +1,198 @@
+import {
+  Box,
+  Flex,
+  Modal,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  Divider,
+  ListItem,
+  List,
+  useColorMode,
+  useMediaQuery,
+  Accordion,
+  AccordionIcon,
+  AccordionButton,
+  AccordionItem,
+  AccordionPanel,
+  Button,
+  ModalBody,
+} from "@chakra-ui/react";
+import { RefObject, useState } from "react";
+import ModelsSettings from "./ModelsSettings";
+import WebHandlersConfig from "./WebHandlersConfig";
+import DefaultSystemPrompt from "./DefaultSystemPrompt";
+import CustomizationSettings from "./CustomizationSettings";
+import { MdOutlineDashboardCustomize, MdSignalCellularAlt } from "react-icons/md";
+import { IconType } from "react-icons";
+import { TbPrompt } from "react-icons/tb";
+import { FaRobot } from "react-icons/fa";
+
+type PreferencesModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  finalFocusRef?: RefObject<HTMLTextAreaElement>;
+};
+
+interface Setting {
+  name: string;
+  icon: IconType;
+}
+
+function PreferencesModal({ isOpen, onClose, finalFocusRef }: PreferencesModalProps) {
+  const isDarkMode = useColorMode().colorMode === "dark";
+
+  const [selectedSetting, setSelectedSetting] = useState<Setting>({
+    name: "Models",
+    icon: FaRobot,
+  });
+
+  const settings: Setting[] = [
+    { name: "Models", icon: FaRobot },
+    { name: "System Prompt", icon: TbPrompt },
+    { name: "Web Handlers", icon: MdSignalCellularAlt },
+    { name: "Customization", icon: MdOutlineDashboardCustomize },
+  ];
+
+  const handleSettingClick = (setting: Setting) => {
+    setSelectedSetting(setting);
+  };
+
+  const getHoverStyle = (setting: Setting) => {
+    if (selectedSetting.name !== setting.name) {
+      return {
+        bg: isDarkMode ? "gray.600" : "gray.200",
+      };
+    } else {
+      return { bg: isDarkMode ? "blue.200" : "blue.500" };
+    }
+  };
+
+  const getColorStyle = (setting: Setting) => {
+    if (selectedSetting.name === setting.name) {
+      return isDarkMode ? "black" : "white";
+    } else {
+      return "inherit";
+    }
+  };
+
+  const getBackgroundStyle = (setting: Setting) => {
+    if (selectedSetting.name === setting.name) {
+      return isDarkMode ? "blue.200" : "blue.500";
+    } else {
+      return "inherit";
+    }
+  };
+
+  const [isSmallViewport] = useMediaQuery("(max-width: 600px)");
+
+  const MobileSettingsAccordion = () => {
+    return (
+      <Accordion allowToggle>
+        <AccordionItem px="0.25rem" py="0.75rem">
+          <AccordionButton
+            pl="1.25rem"
+            justifyContent={"space-between"}
+            _hover={{ bg: isDarkMode ? "grey.500" : "white" }}
+          >
+            <Flex alignItems="center">
+              <Box mr={4}>
+                <selectedSetting.icon />
+              </Box>
+              {selectedSetting.name}
+            </Flex>
+            <AccordionIcon boxSize="1.5rem" />
+          </AccordionButton>
+          <AccordionPanel pb="0.25rem">
+            <List spacing={1}>
+              {settings.map((setting, index) => (
+                <ListItem key={index} cursor="pointer" p={0.75}>
+                  <AccordionButton
+                    borderRadius="md"
+                    _hover={getHoverStyle(setting)}
+                    color={getColorStyle(setting)}
+                    bg={getBackgroundStyle(setting)}
+                    onClick={() => handleSettingClick(setting)}
+                  >
+                    <Flex alignItems="center">
+                      <Box mr={4}>
+                        <setting.icon />
+                      </Box>
+                      {setting.name}
+                    </Flex>
+                  </AccordionButton>
+                </ListItem>
+              ))}
+            </List>
+          </AccordionPanel>
+        </AccordionItem>
+      </Accordion>
+    );
+  };
+
+  const DesktopSettingsList = () => {
+    return (
+      <Box p={4} pr="0" fontSize="m" minWidth="14rem">
+        <List spacing={1}>
+          {settings.map((setting, index) => (
+            <ListItem key={index} cursor="pointer" p={0.75}>
+              <Button
+                borderRadius="md"
+                fontWeight="400"
+                width="100%"
+                justifyContent="left"
+                _hover={getHoverStyle(setting)}
+                color={getColorStyle(setting)}
+                bg={getBackgroundStyle(setting)}
+                onClick={() => handleSettingClick(setting)}
+                _active={{
+                  bg: isDarkMode ? "grey.500" : "grey.200",
+                }}
+              >
+                <Flex alignItems="center">
+                  <Box mr={4}>
+                    <setting.icon />
+                  </Box>
+                  {setting.name}
+                </Flex>
+              </Button>
+            </ListItem>
+          ))}
+        </List>
+      </Box>
+    );
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      size={isSmallViewport ? "full" : "xl"}
+      finalFocusRef={finalFocusRef}
+      scrollBehavior="inside"
+    >
+      <ModalOverlay />
+      <ModalContent top={isSmallViewport ? "0" : "-2rem"} maxWidth="54rem" maxHeight="90vh">
+        <Flex alignItems="center" justifyContent="space-between" width="100%">
+          <ModalHeader whiteSpace="nowrap">User Settings</ModalHeader>
+          <ModalCloseButton position="relative" top={0} right={0} mx="1rem" />
+        </Flex>
+        {!isSmallViewport && <Divider />}
+        <ModalBody p={0} display="flex" h="95vh">
+          <Flex flexDirection={isSmallViewport ? "column" : "row"}>
+            {isSmallViewport ? <MobileSettingsAccordion /> : <DesktopSettingsList />}
+            <Box overflowY="auto" px={8} py={3}>
+              {selectedSetting.name === "Models" && <ModelsSettings isOpen={isOpen} />}
+              {selectedSetting.name === "System Prompt" && <DefaultSystemPrompt />}
+              {selectedSetting.name === "Web Handlers" && <WebHandlersConfig />}
+              {selectedSetting.name === "Customization" && <CustomizationSettings />}
+            </Box>
+          </Flex>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+}
+
+export default PreferencesModal;
diff --git a/src/components/Preferences/WebHandlersConfig.tsx b/src/components/Preferences/WebHandlersConfig.tsx
new file mode 100644
index 00000000..98df5a87
--- /dev/null
+++ b/src/components/Preferences/WebHandlersConfig.tsx
@@ -0,0 +1,140 @@
+import { Box, Button, Heading, Text, VStack, useColorMode } from "@chakra-ui/react";
+import { useCallback, useEffect, useState } from "react";
+
+import ReactCodeMirror from "@uiw/react-codemirror";
+import { MdSave } from "react-icons/md";
+import YAML from "yaml";
+import { useAlert } from "../../hooks/use-alert";
+import { useWebHandlers } from "../../hooks/use-web-handlers";
+import { WebHandler, WebHandlers } from "../../lib/WebHandler";
+import CodeHeader from "../CodeHeader";
+
+import { yaml } from "@codemirror/lang-yaml";
+import useMobileBreakpoint from "../../hooks/use-mobile-breakpoint";
+
+function WebHandlersConfig() {
+  const { webHandlers, registerHandlers } = useWebHandlers();
+  const { success, error } = useAlert();
+
+  const getWebHandlersYaml = useCallback((webHandlers: WebHandlers) => {
+    const onBoardingInstructions = `#####################################################################
+## You can configure "match patterns" for certain types
+## of URLs, that send an HTTP request to your
+## configured "handler url".
+## Various options can be set to customize the
+## the type of request that is sent.
+##
+## Supported Options
+##
+## - handlerUrl:   The web url of the service,
+##                 you want to send a request to.
+##                 e.g. 'https://taras-scrape2md.web.val.run/'
+##   method:       The HTTP method type of the request
+##                 to be sent.
+##   matchPattern: A regular expression to execute the web handler,
+##                 if your prompt text is a match.
+##                 The match patterns are evaluated in the order
+##                 of your Web Handler definitions.
+#####################################################################`;
+
+    const sampleWebHandlers = `## Example:
+# - handlerUrl: https://taras-scrape2md.web.val.run/
+#   method: GET
+#   matchPattern: ^https:\\/\\/\\S*$\n`;
+
+    return `${onBoardingInstructions}\n\n${YAML.stringify(
+      webHandlers.map((handler) => ({ ...handler, matchPattern: handler.matchPattern.source }))
+    )}\n${sampleWebHandlers}`;
+  }, []);
+
+  const [webHandlerConfig, setWebHandlerConfig] = useState(getWebHandlersYaml(webHandlers));
+
+  useEffect(() => {
+    setWebHandlerConfig(getWebHandlersYaml(webHandlers));
+  }, [getWebHandlersYaml, webHandlers]);
+
+  const handleConfigValueChange = useCallback(
+    (updatedConfig: string) => {
+      setWebHandlerConfig(updatedConfig);
+    },
+    [setWebHandlerConfig]
+  );
+
+  const onSaveConfig = useCallback(() => {
+    try {
+      const updatedWebHandlers: WebHandlers = YAML.parse(webHandlerConfig).map(
+        (handlerConfig: WebHandler) => new WebHandler(handlerConfig)
+      );
+
+      if (updatedWebHandlers.some((handler) => !handler.isValidHandler())) {
+        throw new Error("Invalid Handler Configuration");
+      }
+
+      // Persist handlers to local storage
+      registerHandlers(updatedWebHandlers);
+
+      success({
+        title: "Saved",
+        message: "Successfully updated Web Handlers configuration",
+      });
+    } catch (err: any) {
+      error({
+        title: "Failed to save Handler Config",
+        message: "Please enter valid YAML configuration",
+      });
+    }
+  }, [error, registerHandlers, success, webHandlerConfig]);
+
+  const configDownloadFilename = "WebHandlersConfig.yaml";
+  const { colorMode } = useColorMode();
+  const editorHeight = "350px";
+  const isMobile = useMobileBreakpoint();
+
+  return (
+    <VStack gap={4} my={3}>
+      <Text textAlign={isMobile ? "justify" : "start"}>
+        {/* eslint-disable-next-line react/no-unescaped-entities */}
+        If you want to extend ChatCraft's default URL handling by adding your own external services,
+        you are at the right place 😎
+      </Text>
+
+      <Heading size={"md"} width={"100%"} fontWeight={"normal"}>
+        Register Handlers
+      </Heading>
+
+      <Box
+        w={"100%"}
+        border="1px"
+        borderRadius="5px"
+        borderColor="gray.200"
+        bg="gray.50"
+        _dark={{
+          bg: "gray.800",
+          borderColor: "gray.600",
+        }}
+        pb={1}
+        minHeight={editorHeight} // To avoid resizing when editor loads
+      >
+        <CodeHeader
+          language="yaml"
+          code={webHandlerConfig}
+          codeDownloadFilename={configDownloadFilename}
+          isLoading={false}
+        >
+          <ReactCodeMirror
+            value={webHandlerConfig}
+            extensions={[yaml()]}
+            theme={colorMode}
+            height={editorHeight}
+            onChange={handleConfigValueChange}
+          />
+        </CodeHeader>
+      </Box>
+      <Button size="sm" alignSelf="flex-end" rightIcon={<MdSave />} onClick={onSaveConfig}>
+        Save
+      </Button>
+    </VStack>
+  );
+}
+
+export default WebHandlersConfig;
diff --git a/src/components/PreferencesModal.tsx b/src/components/PreferencesModal.tsx
deleted file mode 100644
index 57e0e657..00000000
--- a/src/components/PreferencesModal.tsx
+++ /dev/null
@@ -1,1085 +0,0 @@
-import {
-  Box,
-  Button,
-  ButtonGroup,
-  Checkbox,
-  Flex,
-  FormControl,
-  FormErrorMessage,
-  FormHelperText,
-  FormLabel,
-  IconButton,
-  Input,
-  InputGroup,
-  Kbd,
-  Link,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  Radio,
-  RadioGroup,
-  Select,
-  Slider,
-  SliderFilledTrack,
-  SliderThumb,
-  SliderTrack,
-  Spinner,
-  Stack,
-  Table,
-  Tbody,
-  Td,
-  Text,
-  Th,
-  Thead,
-  Tooltip,
-  Tr,
-  VStack,
-} from "@chakra-ui/react";
-import { ChangeEvent, RefObject, useCallback, useEffect, useMemo, useRef, useState } from "react";
-
-import { capitalize } from "lodash-es";
-import { FaCheck } from "react-icons/fa";
-import { MdCancel, MdVolumeUp } from "react-icons/md";
-import { useAlert } from "../hooks/use-alert";
-import useAudioPlayer from "../hooks/use-audio-player";
-import { useModels } from "../hooks/use-models";
-import { useSettings } from "../hooks/use-settings";
-import { ChatCraftModel } from "../lib/ChatCraftModel";
-import { ChatCraftProvider, ProviderData } from "../lib/ChatCraftProvider";
-import { textToSpeech } from "../lib/ai";
-import db from "../lib/db";
-import { providerFromUrl, supportedProviders } from "../lib/providers";
-import { CustomProvider } from "../lib/providers/CustomProvider";
-import { FreeModelProvider } from "../lib/providers/DefaultProvider/FreeModelProvider";
-import { OpenAiProvider } from "../lib/providers/OpenAiProvider";
-import { OpenRouterProvider } from "../lib/providers/OpenRouterProvider";
-import { TextToSpeechVoices } from "../lib/settings";
-import { download, isMac } from "../lib/utils";
-import PasswordInput from "./PasswordInput";
-
-// https://dexie.org/docs/StorageManager
-async function isStoragePersisted() {
-  if (navigator.storage?.persisted) {
-    return await navigator.storage.persisted();
-  }
-
-  return false;
-}
-
-type PreferencesModalProps = {
-  isOpen: boolean;
-  onClose: () => void;
-  finalFocusRef?: RefObject<HTMLTextAreaElement>;
-};
-
-function PreferencesModal({ isOpen, onClose, finalFocusRef }: PreferencesModalProps) {
-  const { settings, setSettings } = useSettings();
-  const { models } = useModels();
-
-  // Whether our db is being persisted
-  const [isPersisted, setIsPersisted] = useState(false);
-  const { info, error, success, warning } = useAlert();
-  const inputRef = useRef<HTMLInputElement>(null);
-  const [isApiKeyInvalid, setIsApiKeyInvalid] = useState(false);
-  const [selectedProvider, setSelectedProvider] = useState<ChatCraftProvider | null>(null);
-  const [newCustomProvider, setNewCustomProvider] = useState<ChatCraftProvider | null>(null);
-  const [apiKeySaved, setApiKeySaved] = useState(false);
-  const [isValidating, setIsValidating] = useState(false);
-
-  // Stores the list of providers we are displaying in providers table
-  const [tableProviders, setTableProviders] = useState<ProviderData>({});
-
-  // Stores the provider that has its api key field currently actively selected
-  const [focusedProvider, setFocusedProvider] = useState<ChatCraftProvider | null>(
-    settings.currentProvider
-  );
-
-  useEffect(() => {
-    isStoragePersisted()
-      .then((value) => setIsPersisted(value))
-      .catch(console.error);
-  }, []);
-
-  async function handlePersistClick() {
-    if (navigator.storage?.persist) {
-      await navigator.storage.persist();
-      const persisted = await isStoragePersisted();
-      setIsPersisted(persisted);
-    }
-  }
-
-  const handleExportClick = useCallback(
-    async function () {
-      // Don't load this unless it's needed (150K)
-      const { exportDB } = await import("dexie-export-import");
-      const blob = await exportDB(db);
-      download(blob, "chatcraft-db.json", "application/json");
-      info({
-        title: "Downloaded",
-        message: "Message was downloaded as a file",
-      });
-    },
-    [info]
-  );
-
-  const handleFileChange = useCallback(
-    (event: ChangeEvent<HTMLInputElement>) => {
-      const file = event.target.files?.[0];
-      if (file) {
-        const reader = new FileReader();
-        reader.onloadend = () => {
-          const blob = new Blob([new Uint8Array(reader.result as ArrayBuffer)]);
-          // Don't load this unless it's needed (150K)
-          import("dexie-export-import")
-            .then(({ importDB }) => importDB(blob))
-            .then(() => {
-              info({
-                title: "Database Import",
-                message: "Database imported successfully. You may need to refresh.",
-              });
-            })
-            .catch((err) => {
-              console.warn("Error importing db", err);
-              error({
-                title: "Database Import",
-                message: "Unable to import database. See Console for more details.",
-              });
-            });
-        };
-        reader.readAsArrayBuffer(file);
-      }
-    },
-    [error, info]
-  );
-
-  const handleImportClick = useCallback(
-    function () {
-      if (inputRef.current) {
-        inputRef.current.click();
-      }
-    },
-    [inputRef]
-  );
-
-  const handleVoiceSelection = useCallback(
-    (voice: TextToSpeechVoices) => {
-      setSettings({
-        ...settings,
-        textToSpeech: {
-          ...settings.textToSpeech,
-          voice,
-        },
-      });
-    },
-    [setSettings, settings]
-  );
-
-  const { clearAudioQueue, addToAudioQueue } = useAudioPlayer();
-
-  const handlePlayAudioPreview = useCallback(async () => {
-    try {
-      const { voice } = settings.textToSpeech;
-      const previewText = `Hi there, this is ${voice}!`;
-
-      clearAudioQueue();
-      addToAudioQueue(textToSpeech(previewText, voice));
-    } catch (err: any) {
-      console.error(err);
-      error({ title: "Error while generating Audio", message: err.message });
-    }
-  }, [addToAudioQueue, clearAudioQueue, error, settings.textToSpeech]);
-
-  const handleApiKeyChange = async (provider: ChatCraftProvider, apiKey: string) => {
-    const newProvider = providerFromUrl(
-      provider.apiUrl,
-      apiKey,
-      provider.name,
-      provider.defaultModel
-    );
-
-    setFocusedProvider(newProvider);
-
-    const newProviders = { ...settings.providers };
-
-    // Update api key in table
-    tableProviders[newProvider.name] = newProvider;
-
-    // Api key validation
-    try {
-      setIsApiKeyInvalid(false);
-      setIsValidating(true);
-
-      const result = await newProvider.validateApiKey(newProvider.apiKey!);
-
-      setIsApiKeyInvalid(!result);
-      setIsValidating(false);
-
-      // Valid key, update in settings.providers
-      if (result) {
-        // Valid key, update in settings.providers
-        newProviders[newProvider.name] = newProvider;
-      } else {
-        // Invalid key, remove from settings.providers
-        delete newProviders[newProvider.name];
-      }
-    } catch (err: any) {
-      setIsApiKeyInvalid(true);
-      setIsValidating(false);
-
-      // Invalid key, remove from settings.providers
-      delete newProviders[newProvider.name];
-    }
-
-    setSettings({
-      ...settings,
-      ...(newProvider.name === settings.currentProvider.name && { currentProvider: newProvider }),
-      providers: newProviders,
-    });
-
-    if (newProvider.name === selectedProvider?.name) {
-      setSelectedProvider(newProvider);
-    }
-
-    setApiKeySaved(true);
-  };
-
-  const handleSetCurrentProvider = async () => {
-    if (!selectedProvider) {
-      console.error("Error trying to set current provider, missing selected provider");
-      setFocusedProvider(null);
-      return;
-    }
-
-    if (selectedProvider.name === settings.currentProvider.name) {
-      setFocusedProvider(null);
-      warning({
-        title: "No change needed",
-        message: "This is already your current provider",
-      });
-      return;
-    }
-
-    setFocusedProvider(selectedProvider);
-
-    // Api key validation
-    try {
-      setIsApiKeyInvalid(false);
-      setIsValidating(true);
-
-      const result = await selectedProvider.validateApiKey(selectedProvider.apiKey!);
-
-      setIsApiKeyInvalid(!result);
-      setIsValidating(false);
-
-      // Valid key
-      if (result) {
-        // Set as current provider
-        setSettings({ ...settings, currentProvider: selectedProvider });
-        setApiKeySaved(true);
-        setSelectedProvider(null);
-
-        success({
-          title: "Current provider changed",
-          message: `${selectedProvider.name} set as current provider`,
-        });
-
-        setSettings({ ...settings, currentProvider: selectedProvider });
-        setApiKeySaved(true);
-
-        // Sync table
-        tableProviders[selectedProvider.name] = selectedProvider;
-
-        // Uncheck checkbox
-        setSelectedProvider(null);
-      } else {
-        console.warn("Error validating API key");
-        error({
-          title: "Provider not set",
-          message: "Invalid API key",
-        });
-      }
-    } catch (err: any) {
-      setIsValidating(false);
-
-      console.warn("Error validating API key", err);
-      setIsApiKeyInvalid(true);
-
-      error({
-        title: "Provider not set",
-        message: err.message,
-      });
-    }
-  };
-
-  // Handle checkbox change
-  const handleSelectedProviderChange = (provider: ChatCraftProvider) => {
-    if (selectedProvider?.name === provider.name) {
-      // Selecting same one means deselect
-      setSelectedProvider(null);
-    } else {
-      setSelectedProvider(provider);
-    }
-  };
-
-  const handleAddProvider = () => {
-    setIsApiKeyInvalid(false);
-    setNewCustomProvider(new CustomProvider("", "", "", ""));
-  };
-
-  const handleDeleteCustomProvider = () => {
-    setFocusedProvider(null);
-
-    if (!selectedProvider) {
-      console.error("Error trying to delete provider, missing selected provider");
-      return;
-    }
-
-    // Do not allow default provider to be deleted
-    if (selectedProvider.name === settings.currentProvider.name) {
-      warning({
-        title: "Action not allowed",
-        message: "You may not delete the current provider.",
-      });
-      return;
-    }
-
-    // Do not allow ChatCraft initial providers to be deleted
-    if (supportedProviders[selectedProvider.name]) {
-      warning({
-        title: "Action not allowed",
-        message: "You may not delete default ChatCraft providers.",
-      });
-      return;
-    }
-
-    const newProviders = { ...settings.providers };
-    delete newProviders[selectedProvider.name];
-    setSettings({ ...settings, providers: newProviders });
-
-    // Uncheck checkbox
-    setSelectedProvider(null);
-
-    // Sync table
-    setTableProviders({ ...supportedProviders, ...newProviders });
-  };
-
-  const handleSaveNewCustomProvider = async () => {
-    setFocusedProvider(newCustomProvider);
-
-    if (!newCustomProvider) {
-      console.error("Error trying to save new custom provider, missing custom provider");
-      return;
-    }
-
-    const trimmedData = new CustomProvider(
-      newCustomProvider.name?.trim(),
-      newCustomProvider.apiUrl?.trim(),
-      "",
-      newCustomProvider.apiKey?.trim()
-    );
-
-    if (!trimmedData.name || !trimmedData.apiUrl || !trimmedData.apiKey) {
-      setNewCustomProvider(trimmedData);
-      return;
-    }
-
-    // Check if provider name already exists
-    if (tableProviders[trimmedData.name]) {
-      warning({
-        title: "Provider not added",
-        message: "A provider with this name already exists.",
-      });
-      return;
-    }
-
-    // Create new ChatCraftProvider object from CustomProviderProvider parsing provider type from url
-    const newProvider = providerFromUrl(trimmedData.apiUrl, trimmedData.apiKey, trimmedData.name);
-
-    if (newProvider instanceof FreeModelProvider) {
-      warning({
-        title: "Provider not added",
-        message: "Free AI Models provider already exists",
-      });
-      return;
-    }
-
-    // Api key validation
-    try {
-      setIsApiKeyInvalid(false);
-      setIsValidating(true);
-
-      const result = await newProvider.validateApiKey(newProvider.apiKey!);
-
-      setIsApiKeyInvalid(!result);
-      setIsValidating(false);
-
-      if (!result) {
-        return;
-      }
-
-      // Query list of models
-      let models = [];
-      try {
-        models = await newProvider.queryModels(newProvider.apiKey!);
-      } catch (err: any) {
-        console.warn("Error querying models for custom provider:", err);
-        setFocusedProvider(null);
-        error({
-          title: "Provider not added",
-          message: err.message,
-        });
-        return;
-      }
-
-      if (models.length === 0) {
-        console.warn("No models available for custom provider");
-        setFocusedProvider(null);
-        error({
-          title: "Provider not added",
-          message: "Provider is not Open AI compatible.",
-        });
-        return;
-      }
-
-      // Set the first model in list as defaultModel
-      const newProviderWithModel = providerFromUrl(
-        newCustomProvider.apiUrl,
-        newCustomProvider.apiKey,
-        newCustomProvider.name,
-        models[0]
-      );
-
-      const newProviders = { ...settings.providers };
-      newProviders[newProviderWithModel.name] = newProviderWithModel;
-
-      setSettings({
-        ...settings,
-        providers: newProviders,
-      });
-      setApiKeySaved(true);
-
-      // Sync table
-      setTableProviders({ ...supportedProviders, ...newProviders });
-
-      success({
-        title: `New provider added`,
-        message: `${newProviderWithModel.name}`,
-      });
-
-      // Clear the form and hide the new provider row
-      setNewCustomProvider(null);
-      setIsValidating(false);
-    } catch (err: any) {
-      console.warn("Error validating API key", err.message);
-      setFocusedProvider(null);
-      error({
-        title: "Provider not added",
-        message: err.message,
-      });
-      setIsValidating(false);
-      return;
-    }
-  };
-
-  const extractDomain = (url: string | URL): string => {
-    try {
-      // ensure the input is always treated as a string
-      const urlString = url instanceof URL ? url.href : url;
-      const parsedUrl = new URL(urlString);
-      return parsedUrl.hostname;
-    } catch (err: any) {
-      console.error("Error extracting domain from URL:", err);
-      return typeof url === "string" ? url : "Invalid URL";
-    }
-  };
-
-  // Clean up actions when modal closes
-  useEffect(() => {
-    // Sync table
-    setTableProviders({ ...supportedProviders, ...settings.providers });
-
-    if (!isOpen) {
-      setNewCustomProvider(null);
-      setIsApiKeyInvalid(false);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isOpen]);
-
-  const isTtsSupported = useMemo(() => {
-    return !!models.filter((model) => model.id.includes("tts"))?.length;
-  }, [models]);
-
-  return (
-    <Modal isOpen={isOpen} onClose={onClose} size="xl" finalFocusRef={finalFocusRef}>
-      <ModalOverlay />
-      <ModalContent>
-        <ModalHeader>User Settings</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>
-          {!tableProviders ? (
-            <Box>Loading providers...</Box>
-          ) : (
-            <VStack gap={4}>
-              <FormControl>
-                <FormLabel>
-                  Providers
-                  <ButtonGroup ml={3}>
-                    <Button size="xs" onClick={handleAddProvider}>
-                      Add
-                    </Button>
-                    <Button
-                      size="xs"
-                      colorScheme="red"
-                      onClick={handleDeleteCustomProvider}
-                      isDisabled={!selectedProvider}
-                    >
-                      Delete
-                    </Button>
-                    <Button
-                      size="xs"
-                      colorScheme="blue"
-                      onClick={handleSetCurrentProvider}
-                      isDisabled={!selectedProvider}
-                      variant="outline"
-                    >
-                      Set as Current Provider
-                    </Button>
-                  </ButtonGroup>
-                  <FormHelperText fontSize="xs">
-                    Advanced option for use with other OpenAI-compatible APIs
-                  </FormHelperText>
-                </FormLabel>
-                <Table
-                  size="sm"
-                  variant="simple"
-                  sx={{
-                    "th:nth-of-type(2), td:nth-of-type(2), th:nth-of-type(3), td:nth-of-type(3)": {
-                      width: "30%",
-                    },
-                    "th, td": {
-                      pl: "0.4rem",
-                      pr: "0.4rem",
-                    },
-                    "th:nth-of-type(1), td:nth-of-type(1)": {
-                      width: "5%",
-                    },
-                    "th:nth-of-type(4), td:nth-of-type()": {
-                      width: "12%",
-                    },
-                    "th:last-child, td:last-child": {
-                      width: "11%",
-                    },
-                  }}
-                >
-                  <Thead>
-                    <Tr>
-                      <Th></Th>
-                      <Th>Name</Th>
-                      <Th>API URL</Th>
-                      <Th>API Key</Th>
-                      <Th sx={{ textAlign: "center" }}>In Use</Th>
-                    </Tr>
-                  </Thead>
-                  <Tbody>
-                    {newCustomProvider && (
-                      <Tr>
-                        <Td>
-                          <IconButton
-                            aria-label="Cancel adding new provider"
-                            icon={<MdCancel />}
-                            size={"xs"}
-                            onClick={() => setNewCustomProvider(null)}
-                            onKeyDown={(e) => {
-                              if (e.key === "Enter" || e.key === " ") {
-                                setNewCustomProvider(null);
-                              }
-                            }}
-                            variant="outline"
-                            tabIndex={0}
-                            color={"grey"}
-                            border={"none"}
-                            p={0}
-                            fontSize={16}
-                            borderRadius={"50%"}
-                            _hover={{
-                              borderColor: "gray.400",
-                              color: "gray.400",
-                            }}
-                            _focus={{
-                              _focus: {
-                                outline: "none",
-                                boxShadow: "0 0 0 3px rgba(66, 153, 225, 0.6)",
-                                borderColor: "blue.300",
-                              },
-                            }}
-                            _active={{
-                              backgroundColor: "none",
-                            }}
-                          />
-                        </Td>
-                        <Td>
-                          <FormControl isInvalid={!newCustomProvider.name}>
-                            <InputGroup size="sm">
-                              <Input
-                                pl="0.4rem"
-                                fontSize="xs"
-                                placeholder="Name"
-                                value={newCustomProvider.name}
-                                onChange={(e) => {
-                                  setNewCustomProvider(
-                                    new CustomProvider(
-                                      e.target.value,
-                                      newCustomProvider.apiUrl,
-                                      "",
-                                      newCustomProvider.apiKey
-                                    )
-                                  );
-                                }}
-                              />
-                            </InputGroup>
-                            <FormErrorMessage fontSize="xs">Name is required.</FormErrorMessage>
-                          </FormControl>
-                        </Td>
-                        <Td>
-                          <FormControl isInvalid={!newCustomProvider.apiUrl}>
-                            <InputGroup size="sm">
-                              <Input
-                                pl="0.4rem"
-                                fontSize="xs"
-                                placeholder="API URL"
-                                value={newCustomProvider.apiUrl}
-                                onChange={(e) => {
-                                  setNewCustomProvider(
-                                    new CustomProvider(
-                                      newCustomProvider.name,
-                                      e.target.value,
-                                      "",
-                                      newCustomProvider.apiKey
-                                    )
-                                  );
-                                }}
-                              />
-                            </InputGroup>
-                            <FormErrorMessage fontSize="xs">API URL is required.</FormErrorMessage>
-                          </FormControl>
-                        </Td>
-                        <Td>
-                          <FormControl isInvalid={!newCustomProvider.apiKey}>
-                            <PasswordInput
-                              size="sm"
-                              buttonSize="xs"
-                              paddingRight={"2.5rem"}
-                              paddingLeft={"0.5rem"}
-                              fontSize="xs"
-                              value={newCustomProvider.apiKey || ""}
-                              onChange={(e) => {
-                                setNewCustomProvider(
-                                  new CustomProvider(
-                                    newCustomProvider.name,
-                                    newCustomProvider.apiUrl,
-                                    "",
-                                    e.target.value
-                                  )
-                                );
-                              }}
-                            />
-                            <FormErrorMessage fontSize="xs">API Key is required.</FormErrorMessage>
-                          </FormControl>
-                        </Td>
-                        <Td sx={{ textAlign: "center" }}>
-                          <Flex alignItems="center" justifyContent="center">
-                            <Button
-                              size="xs"
-                              colorScheme="blue"
-                              onClick={handleSaveNewCustomProvider}
-                              isLoading={
-                                focusedProvider?.name === newCustomProvider.name && isValidating
-                              }
-                            >
-                              Save
-                            </Button>
-                          </Flex>
-                        </Td>
-                      </Tr>
-                    )}
-                    {[...Object.values(tableProviders)] // copy of the array
-                      .reverse() // reverse the array so new provider is at top
-                      .map((provider) => {
-                        return (
-                          <Tr key={provider.name}>
-                            <Td>
-                              <Flex width={6} justifyContent={"center"}>
-                                <Checkbox
-                                  onChange={() => handleSelectedProviderChange(provider)}
-                                  isChecked={selectedProvider?.name === provider.name}
-                                />
-                              </Flex>
-                            </Td>
-                            <Td fontSize="xs">{provider.name}</Td>
-                            <Td fontSize="xs">
-                              <Tooltip
-                                label={provider.apiUrl}
-                                placement="top-start"
-                                sx={{ fontSize: "0.65rem" }}
-                              >
-                                <Text cursor="pointer">{extractDomain(provider.apiUrl)}</Text>
-                              </Tooltip>
-                            </Td>
-                            <Td>
-                              {provider.name === "Free AI Models" ? (
-                                <InputGroup size="sm">
-                                  <Input disabled fontSize="xs" value="N/A" />
-                                </InputGroup>
-                              ) : (
-                                <FormControl
-                                  isInvalid={
-                                    !!(
-                                      !isValidating &&
-                                      focusedProvider?.name === provider.name &&
-                                      isApiKeyInvalid
-                                    )
-                                  }
-                                >
-                                  <PasswordInput
-                                    size="sm"
-                                    buttonSize="xs"
-                                    paddingRight={"2.5rem"}
-                                    paddingLeft={"0.5rem"}
-                                    fontSize="xs"
-                                    value={provider.apiKey || ""}
-                                    onChange={(e) => handleApiKeyChange(provider, e.target.value)}
-                                    onFocus={() => setFocusedProvider(provider)}
-                                    isDisabled={provider instanceof FreeModelProvider}
-                                    isInvalid={
-                                      !!(
-                                        !isValidating &&
-                                        focusedProvider?.name === provider.name &&
-                                        isApiKeyInvalid
-                                      )
-                                    }
-                                  />
-                                  {focusedProvider?.name === provider.name && isValidating ? (
-                                    <Flex mt={2}>
-                                      <Spinner size="xs" />
-                                      <Text ml={2} fontSize="xs">
-                                        Validating...
-                                      </Text>{" "}
-                                    </Flex>
-                                  ) : (
-                                    <FormErrorMessage fontSize="xs">
-                                      {provider.apiKey
-                                        ? "Unable to verify key."
-                                        : "API Key is required."}
-                                    </FormErrorMessage>
-                                  )}
-                                  {provider instanceof OpenRouterProvider &&
-                                    provider.name === focusedProvider?.name &&
-                                    !provider.apiKey && (
-                                      <Button
-                                        mt="3"
-                                        size="xs"
-                                        onClick={provider.openRouterPkceRedirect}
-                                      >
-                                        Get OpenRouter key{" "}
-                                      </Button>
-                                    )}
-                                </FormControl>
-                              )}
-                            </Td>
-                            <Td sx={{ textAlign: "center" }}>
-                              <Flex alignItems="center" justifyContent="center">
-                                {settings.currentProvider.name === provider.name && (
-                                  <FaCheck style={{ color: "green" }} />
-                                )}
-                              </Flex>
-                            </Td>
-                          </Tr>
-                        );
-                      })}
-                  </Tbody>
-                </Table>
-                {apiKeySaved && (
-                  <FormHelperText fontSize="xs">
-                    Your API Key(s) are stored in browser storage
-                  </FormHelperText>
-                )}
-              </FormControl>
-              <FormControl>
-                <FormLabel>
-                  Offline database is {isPersisted ? "persisted" : "not persisted"}
-                  <ButtonGroup ml={2}>
-                    <Button
-                      size="xs"
-                      onClick={() => handlePersistClick()}
-                      isDisabled={isPersisted}
-                      variant="outline"
-                    >
-                      Persist
-                    </Button>
-                    <Button size="xs" onClick={() => handleImportClick()}>
-                      Import
-                    </Button>
-                    <Input
-                      type="file"
-                      ref={inputRef}
-                      onChange={handleFileChange}
-                      style={{ display: "none" }}
-                    />
-                    <Button size="xs" onClick={() => handleExportClick()}>
-                      Export
-                    </Button>
-                  </ButtonGroup>
-                </FormLabel>
-                <FormHelperText>
-                  Persisted databases use the{" "}
-                  <Link
-                    href="https://developer.mozilla.org/en-US/docs/Web/API/Storage_API"
-                    textDecoration="underline"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    Storage API
-                  </Link>{" "}
-                  and are retained by the browser as long as possible. See{" "}
-                  <Link
-                    href="https://dexie.org/docs/ExportImport/dexie-export-import"
-                    textDecoration="underline"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    docs
-                  </Link>{" "}
-                  for database export details.
-                </FormHelperText>
-              </FormControl>
-
-              <FormControl>
-                <FormLabel>GPT Model</FormLabel>
-                <Select
-                  value={settings.model.id}
-                  onChange={(e) =>
-                    setSettings({ ...settings, model: new ChatCraftModel(e.target.value) })
-                  }
-                >
-                  {models
-                    .filter(
-                      (model) =>
-                        !(settings.currentProvider instanceof OpenAiProvider) ||
-                        model.id.includes("gpt")
-                    )
-                    .map((model) => (
-                      <option key={model.id} value={model.id}>
-                        {model.prettyModel}
-                      </option>
-                    ))}
-                </Select>
-                <FormHelperText>
-                  See{" "}
-                  <Link
-                    href="https://platform.openai.com/docs/models/gpt-4"
-                    textDecoration="underline"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    docs
-                  </Link>{" "}
-                  and{" "}
-                  <Link
-                    href="https://openai.com/pricing"
-                    textDecoration="underline"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    pricing
-                  </Link>
-                  . NOTE: not all accounts have access to GPT - 4
-                </FormHelperText>
-              </FormControl>
-
-              <FormControl>
-                <FormLabel>Temperature: {settings.temperature}</FormLabel>
-                <Box px="5">
-                  <Slider
-                    value={settings.temperature}
-                    onChange={(value) => setSettings({ ...settings, temperature: value })}
-                    min={0}
-                    max={2}
-                    step={0.05}
-                  >
-                    <SliderTrack>
-                      <SliderFilledTrack />
-                    </SliderTrack>
-                    <SliderThumb />
-                  </Slider>
-                </Box>
-                <FormErrorMessage>Temperature must be a number between 0 and 2.</FormErrorMessage>
-                <FormHelperText>
-                  The temperature increases the randomness of the response (0.0 - 2.0).
-                </FormHelperText>
-              </FormControl>
-
-              {isTtsSupported && (
-                <FormControl>
-                  <FormLabel>Select Voice</FormLabel>
-
-                  <Flex gap={3} alignItems={"center"}>
-                    <Select
-                      value={settings.textToSpeech.voice}
-                      onChange={(evt) =>
-                        handleVoiceSelection(evt.target.value as TextToSpeechVoices)
-                      }
-                    >
-                      {Object.values(TextToSpeechVoices).map((voice) => (
-                        <option key={voice} value={voice}>
-                          {capitalize(voice)}
-                        </option>
-                      ))}
-                    </Select>
-                    <Tooltip label="Audio Preview">
-                      <IconButton
-                        variant="outline"
-                        type="button"
-                        aria-label={"Audio Preview for " + capitalize(settings.textToSpeech.voice)}
-                        icon={<MdVolumeUp />}
-                        onClick={handlePlayAudioPreview}
-                      />
-                    </Tooltip>
-                  </Flex>
-
-                  <FormHelperText>
-                    Used when announcing messages in real-time or with the &lsquo;Speak&rsquo;
-                    option
-                  </FormHelperText>
-                </FormControl>
-              )}
-
-              <FormControl as="fieldset">
-                <FormLabel as="legend">Image Compression</FormLabel>
-                <Stack>
-                  <Box px="5">
-                    <FormControl>
-                      <FormLabel>
-                        Maximum file size after compression: {settings.maxCompressedFileSizeMB} (MB)
-                      </FormLabel>
-                      <Slider
-                        id="max-compressed-file-size"
-                        value={settings.maxCompressedFileSizeMB}
-                        onChange={(value) =>
-                          setSettings({ ...settings, maxCompressedFileSizeMB: value })
-                        }
-                        min={1}
-                        max={20}
-                        step={1}
-                      >
-                        <SliderTrack>
-                          <SliderFilledTrack />
-                        </SliderTrack>
-                        <SliderThumb />
-                      </Slider>
-                      <FormErrorMessage>
-                        Maximum file size must be between 1 and 20 MB.
-                      </FormErrorMessage>
-                      <FormHelperText>
-                        After compression, each attached image will be under your chosen maximum
-                        file size (1-20 MB).
-                      </FormHelperText>
-                    </FormControl>
-                  </Box>
-                  <Box px="5">
-                    <FormControl>
-                      <FormLabel>
-                        Maximum image dimension: {settings.maxImageDimension} (px)
-                      </FormLabel>
-                      <Slider
-                        id="max-image-dimension"
-                        value={settings.maxImageDimension}
-                        onChange={(value) => setSettings({ ...settings, maxImageDimension: value })}
-                        min={16}
-                        max={2048}
-                        step={16}
-                      >
-                        <SliderTrack>
-                          <SliderFilledTrack />
-                        </SliderTrack>
-                        <SliderThumb />
-                      </Slider>
-                      <FormErrorMessage>
-                        Maximum Image dimension must be between 16 and 2048
-                      </FormErrorMessage>
-                      <FormHelperText>
-                        Your compressed image&apos;s maximum width or height will be within the
-                        dimension you choose (16-2048 pixels).
-                      </FormHelperText>
-                    </FormControl>
-                  </Box>
-                  <Box px="5">
-                    <FormControl>
-                      <FormLabel>Compression factor: {settings.compressionFactor}</FormLabel>
-                      <Slider
-                        id="compression-factor"
-                        value={settings.compressionFactor}
-                        onChange={(value) => setSettings({ ...settings, compressionFactor: value })}
-                        min={0.1}
-                        max={1}
-                        step={0.1}
-                      >
-                        <SliderTrack>
-                          <SliderFilledTrack />
-                        </SliderTrack>
-                        <SliderThumb />
-                      </Slider>
-                      <FormErrorMessage>
-                        Compression factor must be between 0.1 and 1.0
-                      </FormErrorMessage>
-                      <FormHelperText>
-                        Set the maximum file size based on the original size multiplied by the
-                        factor you choose (0.1-1.0).
-                      </FormHelperText>
-                    </FormControl>
-                  </Box>
-                </Stack>
-              </FormControl>
-
-              <FormControl>
-                <FormLabel>
-                  When writing a prompt, press <Kbd>Enter</Kbd> to...
-                </FormLabel>
-                <RadioGroup
-                  value={settings.enterBehaviour}
-                  onChange={(nextValue) =>
-                    setSettings({ ...settings, enterBehaviour: nextValue as EnterBehaviour })
-                  }
-                >
-                  <Stack>
-                    <Radio value="send">Send the message</Radio>
-                    <Radio value="newline">
-                      Start a new line (use {isMac() ? <Kbd>Command ⌘</Kbd> : <Kbd>Ctrl</Kbd>} +
-                      <Kbd>Enter</Kbd> to send)
-                    </Radio>
-                  </Stack>
-                </RadioGroup>
-              </FormControl>
-
-              <FormControl>
-                <Checkbox
-                  isChecked={settings.countTokens}
-                  onChange={(e) => setSettings({ ...settings, countTokens: e.target.checked })}
-                >
-                  Track and Display Token Count and Cost
-                </Checkbox>
-              </FormControl>
-            </VStack>
-          )}
-        </ModalBody>
-
-        <ModalFooter></ModalFooter>
-      </ModalContent>
-    </Modal>
-  );
-}
-
-export default PreferencesModal;
diff --git a/src/components/WebHandlersConfigModal.tsx b/src/components/WebHandlersConfigModal.tsx
deleted file mode 100644
index d397d88e..00000000
--- a/src/components/WebHandlersConfigModal.tsx
+++ /dev/null
@@ -1,183 +0,0 @@
-import {
-  Box,
-  Button,
-  Heading,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  Text,
-  VStack,
-  useColorMode,
-} from "@chakra-ui/react";
-import { RefObject, useCallback, useEffect, useState } from "react";
-
-import ReactCodeMirror from "@uiw/react-codemirror";
-import { MdSave } from "react-icons/md";
-import YAML from "yaml";
-import { useAlert } from "../hooks/use-alert";
-import { useWebHandlers } from "../hooks/use-web-handlers";
-import { WebHandler, WebHandlers } from "../lib/WebHandler";
-import CodeHeader from "./CodeHeader";
-
-import { yaml } from "@codemirror/lang-yaml";
-import { MdSignalCellularAlt } from "react-icons/md";
-import useMobileBreakpoint from "../hooks/use-mobile-breakpoint";
-
-type WebHandlersConfigModalProps = {
-  isOpen: boolean;
-  onClose: () => void;
-  finalFocusRef?: RefObject<HTMLTextAreaElement>;
-};
-
-function WebHandlersConfigModal({ isOpen, onClose, finalFocusRef }: WebHandlersConfigModalProps) {
-  const { webHandlers, registerHandlers } = useWebHandlers();
-  const { success, error } = useAlert();
-
-  const getWebHandlersYaml = useCallback((webHandlers: WebHandlers) => {
-    const onBoardingInstructions = `#######################################################################
-## You can configure "match patterns" for certain types
-## of URLs, that send an HTTP request to your
-## configured "handler url".
-## Various options can be set to customize the
-## the type of request that is sent.
-##
-## Supported Options
-##
-## - handlerUrl:   The web url of the service,
-##                 you want to send a request to.
-##                 e.g. 'https://taras-scrape2md.web.val.run/'
-##   method:       The HTTP method type of the request
-##                 to be sent.
-##   matchPattern: A regular expression to execute the web handler,
-##                 if the your prompt text is a match.
-##                 The match patterns are evaluated in the order
-##                 of your Web Handler definitions.
-#######################################################################`;
-
-    const sampleWebHandlers = `## Example:
-# - handlerUrl: https://taras-scrape2md.web.val.run/
-#   method: GET
-#   matchPattern: ^https:\\/\\/\\S*$\n`;
-
-    return `${onBoardingInstructions}\n\n${YAML.stringify(
-      webHandlers.map((handler) => ({ ...handler, matchPattern: handler.matchPattern.source }))
-    )}\n${sampleWebHandlers}`;
-  }, []);
-
-  const [webHandlerConfig, setWebHandlerConfig] = useState(getWebHandlersYaml(webHandlers));
-
-  useEffect(() => {
-    setWebHandlerConfig(getWebHandlersYaml(webHandlers));
-  }, [getWebHandlersYaml, webHandlers]);
-
-  const handleConfigValueChange = useCallback(
-    (updatedConfig: string) => {
-      setWebHandlerConfig(updatedConfig);
-    },
-    [setWebHandlerConfig]
-  );
-
-  const onModalClose = useCallback(() => {
-    // Reset any unsaved changes
-    setWebHandlerConfig(getWebHandlersYaml(webHandlers));
-
-    // Close the modal
-    onClose();
-  }, [getWebHandlersYaml, onClose, webHandlers]);
-
-  const onSaveConfig = useCallback(() => {
-    try {
-      const updatedWebHandlers: WebHandlers = YAML.parse(webHandlerConfig).map(
-        (handlerConfig: WebHandler) => new WebHandler(handlerConfig)
-      );
-
-      if (updatedWebHandlers.some((handler) => !handler.isValidHandler())) {
-        throw new Error("Invalid Handler Configuration");
-      }
-
-      // Persist handlers to local storage
-      registerHandlers(updatedWebHandlers);
-
-      success({
-        title: "Saved",
-        message: "Successfully updated Web Handlers configuration",
-      });
-    } catch (err: any) {
-      error({
-        title: "Failed to save Handler Config",
-        message: "Please enter valid YAML configuration",
-      });
-    }
-  }, [error, registerHandlers, success, webHandlerConfig]);
-
-  const configDownloadFilename = "WebHandlersConfig.yaml";
-  const { colorMode } = useColorMode();
-  const editorHeight = "350px";
-  const isMobile = useMobileBreakpoint();
-
-  return (
-    <Modal isOpen={isOpen} onClose={onModalClose} size="2xl" finalFocusRef={finalFocusRef}>
-      <ModalOverlay />
-      <ModalContent>
-        <ModalHeader display={"flex"} alignItems={"center"} gap={2}>
-          Web Handlers <MdSignalCellularAlt />
-        </ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>
-          <VStack gap={4}>
-            <Text textAlign={isMobile ? "justify" : "start"}>
-              {/* eslint-disable-next-line react/no-unescaped-entities */}
-              If you want to extend ChatCraft's default URL handling by adding your own external
-              services, you are at the right place 😎
-            </Text>
-
-            <Heading size={"md"} width={"100%"} fontWeight={"normal"}>
-              Register Handlers
-            </Heading>
-
-            <Box
-              w={"100%"}
-              border="1px"
-              borderRadius="5px"
-              borderColor="gray.200"
-              bg="gray.50"
-              _dark={{
-                bg: "gray.800",
-                borderColor: "gray.600",
-              }}
-              pb={1}
-              minHeight={editorHeight} // To avoid resizing when editor loads
-            >
-              <CodeHeader
-                language="yaml"
-                code={webHandlerConfig}
-                codeDownloadFilename={configDownloadFilename}
-                isLoading={false}
-              >
-                <ReactCodeMirror
-                  value={webHandlerConfig}
-                  extensions={[yaml()]}
-                  theme={colorMode}
-                  height={editorHeight}
-                  onChange={handleConfigValueChange}
-                />
-              </CodeHeader>
-            </Box>
-          </VStack>
-        </ModalBody>
-
-        <ModalFooter>
-          <Button size="sm" rightIcon={<MdSave />} onClick={onSaveConfig}>
-            Save
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  );
-}
-
-export default WebHandlersConfigModal;