diff --git a/src/atoms/atoms.ts b/src/atoms/atoms.ts
index 47e154ea..3afa59de 100644
--- a/src/atoms/atoms.ts
+++ b/src/atoms/atoms.ts
@@ -2,7 +2,7 @@ import { BestMoves, EngineOptions, GoMode } from "@/bindings";
 import { Card, buildFromTree } from "@/components/files/opening";
 import { LocalOptions } from "@/components/panels/database/DatabasePanel";
 import { DatabaseInfo } from "@/utils/db";
-import { LocalEngine } from "@/utils/engines";
+import { Engine } from "@/utils/engines";
 import {
     LichessGamesOptions,
     MasterGamesOptions,
@@ -45,13 +45,7 @@ const fileStorage: AsyncStringStorage = {
         await removeFile(key, options);
     },
 };
-
-export const remoteEnabledAtom = atomWithStorage("remote-enabled", {
-    lichess: false,
-    chessdb: false,
-});
-
-export const enginesAtom = atomWithStorage<LocalEngine[]>(
+export const enginesAtom = atomWithStorage<Engine[]>(
     "engines/engines.json",
     [],
     createJSONStorage(() => fileStorage)
diff --git a/src/components/boards/BoardGame.tsx b/src/components/boards/BoardGame.tsx
index ce47a236..a61662b7 100644
--- a/src/components/boards/BoardGame.tsx
+++ b/src/components/boards/BoardGame.tsx
@@ -61,7 +61,9 @@ function EnginesSelect({
   engine: LocalEngine | null;
   setEngine: (engine: LocalEngine | null) => void;
 }) {
-  const engines = useAtomValue(enginesAtom);
+  const engines = useAtomValue(enginesAtom).filter(
+    (e): e is LocalEngine => e.type === "local"
+  );
 
   useEffect(() => {
     if (engines.length > 0 && engine === null) {
diff --git a/src/components/common/ProgressButton.css.ts b/src/components/common/ProgressButton.css.ts
index 3f66f085..63d24792 100644
--- a/src/components/common/ProgressButton.css.ts
+++ b/src/components/common/ProgressButton.css.ts
@@ -1,13 +1,6 @@
 import { vars } from "@/styles/theme";
 import { style } from "@vanilla-extract/css";
 
-export const button = style({
-    position: "relative",
-    transition: "background-color 150ms ease",
-    backgroundColor: vars.colors.gray[7],
-    color: vars.colors.gray[5],
-});
-
 export const finished = style({
     backgroundColor: vars.colors.green[7],
     color: vars.colors.gray[2],
@@ -15,10 +8,6 @@ export const finished = style({
 
 export const progress = style({
     position: "absolute",
-    bottom: -1,
-    right: -1,
-    left: -1,
-    top: -1,
     height: "auto",
     backgroundColor: "transparent",
     zIndex: 0,
diff --git a/src/components/common/ProgressButton.tsx b/src/components/common/ProgressButton.tsx
index f184b2a8..11dbed22 100644
--- a/src/components/common/ProgressButton.tsx
+++ b/src/components/common/ProgressButton.tsx
@@ -73,21 +73,30 @@ function ProgressButton({
   const theme = useMantineTheme();
 
   return (
-    <Button
-      fullWidth
-      className={classes.button}
-      onClick={() => {
-        onClick(id);
-      }}
-      disabled={(completed && !redoable) || disabled}
-      color={completed ? "green" : theme.primaryColor}
-      leftSection={leftIcon}
-    >
-      <div className={classes.label}>{label}</div>
-      {progress !== 0 && (
-        <Progress value={progress} className={classes.progress} radius="sm" />
-      )}
-    </Button>
+    <>
+      <Button
+        fullWidth
+        onClick={() => {
+          onClick(id);
+        }}
+        color={completed ? "green" : theme.primaryColor}
+        disabled={(completed && !redoable) || disabled}
+        leftSection={leftIcon}
+      >
+        <div className={classes.label}>{label}</div>
+        {progress !== 0 && (
+          <Progress
+            pos="absolute"
+            w="100%"
+            h="100%"
+            c="blue"
+            value={progress}
+            className={classes.progress}
+            radius="sm"
+          />
+        )}
+      </Button>
+    </>
   );
 }
 
diff --git a/src/components/databases/AddDatabase.tsx b/src/components/databases/AddDatabase.tsx
index 51d33529..1b65c41c 100644
--- a/src/components/databases/AddDatabase.tsx
+++ b/src/components/databases/AddDatabase.tsx
@@ -197,7 +197,7 @@ function DatabaseCard({
       key={database.title}
     >
       <Group wrap="nowrap" gap={0} grow>
-        <Box p="md">
+        <Box p="md" style={{ flex: 1 }}>
           <Text tt="uppercase" c="dimmed" fw={700} size="xs">
             DATABASE
           </Text>
diff --git a/src/components/engines/AddEngine.tsx b/src/components/engines/AddEngine.tsx
index ef05facb..693e8b1b 100644
--- a/src/components/engines/AddEngine.tsx
+++ b/src/components/engines/AddEngine.tsx
@@ -1,6 +1,7 @@
 import {
   Alert,
   Box,
+  Button,
   Center,
   Group,
   Image,
@@ -17,7 +18,7 @@ import { IconAlertCircle, IconDatabase, IconTrophy } from "@tabler/icons-react";
 import { platform } from "@tauri-apps/api/os";
 import { appDataDir, join, resolve } from "@tauri-apps/api/path";
 import { useCallback, useState } from "react";
-import { LocalEngine, useDefaultEngines } from "@/utils/engines";
+import { LocalEngine, RemoteEngine, useDefaultEngines } from "@/utils/engines";
 import { formatBytes } from "@/utils/format";
 import { invoke } from "@/utils/invoke";
 import ProgressButton from "../common/ProgressButton";
@@ -34,7 +35,11 @@ function AddEngine({
   opened: boolean;
   setOpened: (opened: boolean) => void;
 }) {
-  const [engines, setEngines] = useAtom(enginesAtom);
+  const [allEngines, setEngines] = useAtom(enginesAtom);
+  const engines = allEngines.filter(
+    (e): e is LocalEngine => e.type === "local"
+  );
+
   const { data: os } = useSWR("os", async () => {
     const p = await platform();
     const os = match(p)
@@ -51,6 +56,7 @@ function AddEngine({
 
   const form = useForm<LocalEngine>({
     initialValues: {
+      type: "local",
       version: "",
       name: "",
       path: "",
@@ -74,6 +80,7 @@ function AddEngine({
       <Tabs defaultValue="web">
         <Tabs.List>
           <Tabs.Tab value="web">Web</Tabs.Tab>
+          <Tabs.Tab value="cloud">Cloud Eval</Tabs.Tab>
           <Tabs.Tab value="local">Local</Tabs.Tab>
         </Tabs.List>
         <Tabs.Panel value="web" pt="xs">
@@ -105,6 +112,24 @@ function AddEngine({
             </Stack>
           </ScrollArea.Autosize>
         </Tabs.Panel>
+        <Tabs.Panel value="cloud" pt="xs">
+          <Stack>
+            <CloudCard
+              engine={{
+                name: "ChessDB",
+                type: "chessdb",
+                url: "https://chessdb.cn",
+              }}
+            />
+            <CloudCard
+              engine={{
+                name: "Lichess Cloud",
+                type: "lichess",
+                url: "https://lichess.org",
+              }}
+            />
+          </Stack>
+        </Tabs.Panel>
         <Tabs.Panel value="local" pt="xs">
           <EngineForm
             submitLabel="Add"
@@ -120,6 +145,38 @@ function AddEngine({
   );
 }
 
+function CloudCard({ engine }: { engine: RemoteEngine }) {
+  const [engines, setEngines] = useAtom(enginesAtom);
+  return (
+    <Paper withBorder radius="md" p={0} key={engine.name}>
+      <Group wrap="nowrap" gap={0} grow>
+        <Box p="md" style={{ flex: 1 }}>
+          <Text tt="uppercase" c="dimmed" fw={700} size="xs">
+            ENGINE
+          </Text>
+          <Text fw="bold">{engine.name}</Text>
+          <Text size="xs" c="dimmed" mb="xs">
+            {engine.url}
+          </Text>
+          <Button
+            disabled={engines.find((e) => e.type === engine.type) !== undefined}
+            fullWidth
+            onClick={() => {
+              console.log(engine);
+              setEngines(async (prev) => [
+                ...(await prev),
+                { ...engine, type: engine.type, loaded: true },
+              ]);
+            }}
+          >
+            Add
+          </Button>
+        </Box>
+      </Group>
+    </Paper>
+  );
+}
+
 function EngineCard({
   engine,
   engineId,
@@ -154,6 +211,7 @@ function EngineCard({
         ...(await prev),
         {
           ...engine,
+          type: "local",
           path: enginePath,
         },
       ]);
@@ -169,7 +227,7 @@ function EngineCard({
             <Image src={engine.image} alt={engine.name} fit="contain" />
           </Box>
         )}
-        <Box p="md">
+        <Box p="md" style={{ flex: 1 }}>
           <Text tt="uppercase" c="dimmed" fw={700} size="xs">
             ENGINE
           </Text>
diff --git a/src/components/engines/EnginesPage.tsx b/src/components/engines/EnginesPage.tsx
index 92872fee..69f8ad39 100644
--- a/src/components/engines/EnginesPage.tsx
+++ b/src/components/engines/EnginesPage.tsx
@@ -10,9 +10,15 @@ import {
   Text,
   Title,
 } from "@mantine/core";
-import { IconEdit, IconPlus, IconRobot, IconX } from "@tabler/icons-react";
+import {
+  IconCloud,
+  IconEdit,
+  IconPlus,
+  IconRobot,
+  IconX,
+} from "@tabler/icons-react";
 import { useEffect, useState } from "react";
-import { LocalEngine } from "@/utils/engines";
+import { Engine } from "@/utils/engines";
 import OpenFolderButton from "../common/OpenFolderButton";
 import AddEngine from "./AddEngine";
 import { useToggle } from "@mantine/hooks";
@@ -34,18 +40,21 @@ export default function EnginesPage() {
         <Title>Your Engines</Title>
         <OpenFolderButton base="AppDir" folder="engines" />
       </Group>
-      <ScrollArea>
+      <ScrollArea px="xl">
         <Table style={{ minWidth: 800 }} verticalSpacing="sm">
           <Table.Thead>
             <Table.Tr>
               <Table.Th>Engine</Table.Th>
               <Table.Th>Elo</Table.Th>
-              <Table.Th>Actions</Table.Th>
+              <Table.Th w="8rem" ta="right">
+                Actions
+              </Table.Th>
             </Table.Tr>
           </Table.Thead>
           <Table.Tbody>
-            {engines &&
-              engines.map((item) => <EngineRow key={item.path} item={item} />)}
+            {engines.map((item) => (
+              <EngineRow key={item.name} item={item} />
+            ))}
             <Table.Tr>
               <Table.Td>
                 <Button
@@ -64,7 +73,7 @@ export default function EnginesPage() {
   );
 }
 
-function EngineRow({ item }: { item: LocalEngine }) {
+function EngineRow({ item }: { item: Engine }) {
   const [, setEngines] = useAtom(enginesAtom);
   const [deleteModal, toggleDeleteModal] = useToggle();
   const [editModal, toggleEditModal] = useToggle();
@@ -86,9 +95,10 @@ function EngineRow({ item }: { item: LocalEngine }) {
 
   useEffect(() => {
     (async () => {
+      if (item.type !== "local") return;
       setFileExists(await exists(item.path));
     })();
-  }, [item.path]);
+  }, [item]);
 
   return (
     <>
@@ -103,11 +113,13 @@ function EngineRow({ item }: { item: LocalEngine }) {
           )
         }
       />
-      <EditEngine
-        opened={editModal}
-        setOpened={toggleEditModal}
-        initialEngine={item}
-      />
+      {item.type === "local" && (
+        <EditEngine
+          opened={editModal}
+          setOpened={toggleEditModal}
+          initialEngine={item}
+        />
+      )}
 
       <Table.Tr>
         <Table.Td>
@@ -116,8 +128,10 @@ function EngineRow({ item }: { item: LocalEngine }) {
               <Center>
                 {imageSrc ? (
                   <Image fit="contain" src={imageSrc} />
-                ) : (
+                ) : item.type === "local" ? (
                   <IconRobot size="3.75rem" />
+                ) : (
+                  <IconCloud size="3.75rem" />
                 )}
               </Center>
             </Box>
@@ -126,12 +140,15 @@ function EngineRow({ item }: { item: LocalEngine }) {
             </Text>
           </Group>
         </Table.Td>
-        <Table.Td>{item.elo || "Unknown"}</Table.Td>
+        {/* @ts-expect-error only local has elo */}
+        <Table.Td>{item?.elo || "?"}</Table.Td>
         <Table.Td>
-          <Group>
-            <ActionIcon>
-              <IconEdit size="1.25rem" onClick={() => toggleEditModal()} />
-            </ActionIcon>
+          <Group justify="right">
+            {item.type === "local" && (
+              <ActionIcon>
+                <IconEdit size="1.25rem" onClick={() => toggleEditModal()} />
+              </ActionIcon>
+            )}
             <ActionIcon>
               <IconX size="1.25rem" onClick={() => toggleDeleteModal()} />
             </ActionIcon>
diff --git a/src/components/panels/analysis/AnalysisPanel.tsx b/src/components/panels/analysis/AnalysisPanel.tsx
index 51a29c83..a4a52c3d 100644
--- a/src/components/panels/analysis/AnalysisPanel.tsx
+++ b/src/components/panels/analysis/AnalysisPanel.tsx
@@ -29,14 +29,10 @@ import {
   currentAnalysisTabAtom,
   enableAllAtom,
   enginesAtom,
-  remoteEnabledAtom,
 } from "@/atoms/atoms";
 import { useAtom, useAtomValue } from "jotai";
 import LogsPanel from "./LogsPanel";
 import EvalChart from "@/components/common/EvalChart";
-import { chessdb } from "@/utils/chessdb";
-import { lichessCloudEval } from "@/utils/lichess";
-import { localEngine } from "@/utils/engines";
 
 function AnalysisPanel({
   toggleReportingMode,
@@ -55,7 +51,6 @@ function AnalysisPanel({
     () => engines.filter((e) => e.loaded),
     [engines]
   );
-  const remoteEnabled = useAtomValue(remoteEnabledAtom);
 
   const [, enable] = useAtom(enableAllAtom);
   const allEnabledLoader = useAtomValue(allEnabledAtom);
@@ -115,7 +110,7 @@ function AnalysisPanel({
                   variant="separated"
                   multiple
                   chevronSize={0}
-                  defaultValue={loadedEngines.map((e) => e.path)}
+                  defaultValue={loadedEngines.map((e) => e.name)}
                   styles={{
                     label: {
                       paddingTop: 0,
@@ -128,37 +123,16 @@ function AnalysisPanel({
                 >
                   {loadedEngines.map((engine, i) => {
                     return (
-                      <Accordion.Item key={engine.path} value={engine.path}>
+                      <Accordion.Item key={engine.name} value={engine.name}>
                         <BestMoves
                           id={i}
-                          engine={localEngine(engine)}
+                          engine={engine}
                           fen={currentNode.fen}
                           halfMoves={currentNode.halfMoves}
                         />
                       </Accordion.Item>
                     );
                   })}
-                  {remoteEnabled.chessdb && (
-                    <Accordion.Item value={"ChessDB"}>
-                      <BestMoves
-                        id={loadedEngines.length}
-                        engine={chessdb}
-                        fen={currentNode.fen}
-                        halfMoves={currentNode.halfMoves}
-                      />
-                    </Accordion.Item>
-                  )}
-
-                  {remoteEnabled.lichess && (
-                    <Accordion.Item value={"LichessCloud"}>
-                      <BestMoves
-                        id={loadedEngines.length + 1}
-                        engine={lichessCloudEval}
-                        fen={currentNode.fen}
-                        halfMoves={currentNode.halfMoves}
-                      />
-                    </Accordion.Item>
-                  )}
                 </Accordion>
                 <EngineSelection />
               </Stack>
diff --git a/src/components/panels/analysis/BestMoves.tsx b/src/components/panels/analysis/BestMoves.tsx
index 67201c23..ec4646ec 100644
--- a/src/components/panels/analysis/BestMoves.tsx
+++ b/src/components/panels/analysis/BestMoves.tsx
@@ -4,7 +4,7 @@ import {
   engineMovesFamily,
   tabEngineSettingsFamily,
 } from "@/atoms/atoms";
-import { events } from "@/bindings";
+import { EngineOptions, GoMode, events } from "@/bindings";
 import { TreeDispatchContext } from "@/components/common/TreeStateContext";
 import { swapMove } from "@/utils/chessops";
 import { useThrottledEffect } from "@/utils/misc";
@@ -42,9 +42,13 @@ import {
 } from "react";
 import AnalysisRow from "./AnalysisRow";
 import EngineSettingsForm from "./EngineSettingsForm";
-import { Engine } from "@/utils/engines";
+import { Engine, LocalEngine, stopEngine } from "@/utils/engines";
 import { chessopsError, positionFromFen } from "@/utils/chessops";
 import * as classes from "./BestMoves.css";
+import { match } from "ts-pattern";
+import { getBestMoves as localGetBestMoves } from "@/utils/engines";
+import { getBestMoves as chessdbGetBestMoves } from "@/utils/chessdb";
+import { getBestMoves as lichessGetBestMoves } from "@/utils/lichess";
 
 export const arrowColors = ["blue", "green", "red", "yellow"];
 
@@ -130,42 +134,54 @@ export default function BestMovesComponent({
     };
   }, [activeTab, dispatch, id, setArrows, settings.enabled, isGameOver, fen]);
 
+  const getBestMoves = match(engine.type)
+    .with(
+      "local",
+      () => (fen: string, goMode: GoMode, options: EngineOptions) =>
+        localGetBestMoves(engine as LocalEngine, fen, goMode, options)
+    )
+    .with("chessdb", () => chessdbGetBestMoves)
+    .with("lichess", () => lichessGetBestMoves)
+    .exhaustive();
+
   useThrottledEffect(
     () => {
       if (settings.enabled) {
         if (isGameOver) {
-          engine.stop(activeTab!);
+          if (engine.type === "local") {
+            stopEngine(engine, activeTab!);
+          }
         } else {
-          engine
-            .getBestMoves(activeTab!, settings.go, {
-              fen: threat ? swapMove(fen) : fen,
-              multipv: settings.options.multipv,
-              hash: settings.options.hash,
-              threads: settings.options.threads,
-              extraOptions: settings.options.extraOptions,
-            })
-            .then((moves) => {
-              if (moves) {
-                const [progress, bestMoves] = moves;
-                setEngineVariation((prev) => {
-                  const newMap = new Map(prev);
-                  newMap.set(fen, bestMoves);
-                  return newMap;
-                });
-                setProgress(progress);
-                setArrows((prev) => {
-                  const newMap = new Map(prev);
-                  newMap.set(
-                    id,
-                    bestMoves.map((ev) => ev.uciMoves[0])
-                  );
-                  return newMap;
-                });
-              }
-            });
+          getBestMoves(activeTab!, settings.go, {
+            fen: threat ? swapMove(fen) : fen,
+            multipv: settings.options.multipv,
+            hash: settings.options.hash,
+            threads: settings.options.threads,
+            extraOptions: settings.options.extraOptions,
+          }).then((moves) => {
+            if (moves) {
+              const [progress, bestMoves] = moves;
+              setEngineVariation((prev) => {
+                const newMap = new Map(prev);
+                newMap.set(fen, bestMoves);
+                return newMap;
+              });
+              setProgress(progress);
+              setArrows((prev) => {
+                const newMap = new Map(prev);
+                newMap.set(
+                  id,
+                  bestMoves.map((ev) => ev.uciMoves[0])
+                );
+                return newMap;
+              });
+            }
+          });
         }
       } else {
-        engine.stop(activeTab!);
+        if (engine.type === "local") {
+          stopEngine(engine, activeTab!);
+        }
       }
     },
     50,
@@ -282,7 +298,7 @@ export default function BestMovesComponent({
             settings={settings}
             setSettings={setSettings}
             color={id < 4 ? arrowColors[id] : theme.primaryColor}
-            remote={engine.remote}
+            remote={engine.type !== "local"}
           />
         </Collapse>
 
diff --git a/src/components/panels/analysis/EngineSelection.tsx b/src/components/panels/analysis/EngineSelection.tsx
index 7d5ad87e..cee55f33 100644
--- a/src/components/panels/analysis/EngineSelection.tsx
+++ b/src/components/panels/analysis/EngineSelection.tsx
@@ -6,19 +6,19 @@ import {
   Group,
   Stack,
   Text,
-  Collapse,
   Paper,
+  Collapse,
 } from "@mantine/core";
 import { useToggle } from "@mantine/hooks";
 import { IconCloud, IconRobot, IconSettings } from "@tabler/icons-react";
 import { Link } from "react-router-dom";
-import { memo, useEffect, useState } from "react";
-import { Engine, localEngine } from "@/utils/engines";
+import { memo } from "react";
+import { Engine, stopEngine } from "@/utils/engines";
 import { convertFileSrc } from "@tauri-apps/api/tauri";
 import { useAtom, useAtomValue } from "jotai";
-import { activeTabAtom, enginesAtom, remoteEnabledAtom } from "@/atoms/atoms";
-import { lichessCloudEval } from "@/utils/lichess";
-import { chessdb } from "@/utils/chessdb";
+import { activeTabAtom, enginesAtom } from "@/atoms/atoms";
+import { DragDropContext, Draggable, Droppable } from "@hello-pangea/dnd";
+import useSWRImmutable from "swr/immutable";
 
 function EngineBox({
   engine,
@@ -27,28 +27,26 @@ function EngineBox({
   engine: Engine;
   toggleEnabled: () => void;
 }) {
-  const [imageSrc, setImageSrc] = useState<string | undefined>(undefined);
   const activeTab = useAtomValue(activeTabAtom);
 
-  useEffect(() => {
-    (async () => {
-      if (engine.image && engine.image.startsWith("http")) {
-        setImageSrc(engine.image);
-      } else if (engine.image) {
-        setImageSrc(await convertFileSrc(engine.image));
-      }
-    })();
-  }, [engine.image]);
+  const { data: imageSrc } = useSWRImmutable(engine.image, async (image) => {
+    if (image && image.startsWith("http")) {
+      return image;
+    } else if (image) {
+      return await convertFileSrc(image);
+    }
+  });
 
   return (
     <Paper
       withBorder
       p="sm"
       w="16rem"
+      mb="xs"
       h="4rem"
       onClick={() => {
-        if (engine.loaded) {
-          engine.stop(activeTab!);
+        if (engine.loaded && engine.type === "local") {
+          stopEngine(engine, activeTab!);
         }
         toggleEnabled();
       }}
@@ -58,7 +56,7 @@ function EngineBox({
         <Checkbox checked={engine.loaded} />
         {imageSrc ? (
           <Image src={imageSrc} alt={engine.name} h="2.5rem" />
-        ) : engine.remote ? (
+        ) : engine.type !== "local" ? (
           <IconCloud size="2rem" />
         ) : (
           <IconRobot size="2rem" />
@@ -73,8 +71,6 @@ function EngineSelection() {
   const [showSettings, toggleShowSettings] = useToggle();
   const [engines, setEngines] = useAtom(enginesAtom);
 
-  const [remoteEnabled, setRemoteEnabled] = useAtom(remoteEnabledAtom);
-
   return (
     <>
       <Button
@@ -95,46 +91,58 @@ function EngineSelection() {
             </Text>
           </Center>
         )}
-        <Stack>
-          <Stack justify="center">
-            {engines.map((engine) => (
-              <EngineBox
-                key={engine.name}
-                engine={localEngine(engine)}
-                toggleEnabled={() => {
-                  setEngines(async (prev) =>
-                    (await prev).map((e) =>
-                      e.name === engine.name ? { ...e, loaded: !e.loaded } : e
-                    )
-                  );
-                }}
-              />
-            ))}
-            <EngineBox
-              engine={{
-                ...lichessCloudEval,
-                loaded: remoteEnabled.lichess,
-              }}
-              toggleEnabled={() =>
-                setRemoteEnabled((prev) => ({
-                  ...prev,
-                  lichess: !prev.lichess,
-                }))
-              }
-            />
 
-            <EngineBox
-              key="chessdb"
-              engine={{ ...chessdb, loaded: remoteEnabled.chessdb }}
-              toggleEnabled={() =>
-                setRemoteEnabled((prev) => ({
-                  ...prev,
-                  chessdb: !prev.chessdb,
-                }))
-              }
-            />
-          </Stack>
-        </Stack>
+        <DragDropContext
+          onDragEnd={({ destination, source }) =>
+            destination?.index !== undefined &&
+            setEngines(async (prev) => {
+              const result = Array.from(await prev);
+              const [removed] = result.splice(source.index, 1);
+              result.splice(destination.index, 0, removed);
+              return result;
+            })
+          }
+        >
+          <Droppable droppableId="droppable" direction="vertical">
+            {(provided) => (
+              <div ref={provided.innerRef} {...provided.droppableProps}>
+                <Stack gap={0} align="center">
+                  {engines.map((engine, i) => (
+                    <Draggable
+                      key={engine.name}
+                      draggableId={engine.name}
+                      index={i}
+                    >
+                      {(provided) => (
+                        <div
+                          ref={provided.innerRef}
+                          {...provided.draggableProps}
+                          {...provided.dragHandleProps}
+                        >
+                          <EngineBox
+                            key={engine.name}
+                            engine={engine}
+                            toggleEnabled={() => {
+                              setEngines(async (prev) =>
+                                (await prev).map((e) =>
+                                  e.name === engine.name
+                                    ? { ...e, loaded: !e.loaded }
+                                    : e
+                                )
+                              );
+                            }}
+                          />
+                        </div>
+                      )}
+                    </Draggable>
+                  ))}
+                </Stack>
+
+                {provided.placeholder}
+              </div>
+            )}
+          </Droppable>
+        </DragDropContext>
       </Collapse>
     </>
   );
diff --git a/src/components/panels/analysis/LogsPanel.tsx b/src/components/panels/analysis/LogsPanel.tsx
index 56d13f2e..415fd805 100644
--- a/src/components/panels/analysis/LogsPanel.tsx
+++ b/src/components/panels/analysis/LogsPanel.tsx
@@ -20,8 +20,11 @@ import { writeTextFile } from "@tauri-apps/api/fs";
 
 export default function LogsPanel() {
   const engines = useAtomValue(enginesAtom);
+  const localEngines = engines
+    .filter((e): e is LocalEngine => e.type === "local")
+    .filter((e) => e.loaded);
   const [engine, setEngine] = useState<LocalEngine | undefined>(
-    engines.filter((e) => e.loaded)[0]
+    localEngines[0]
   );
 
   const viewport = useRef<HTMLDivElement>(null);
@@ -89,7 +92,9 @@ export default function LogsPanel() {
         />
         <Select
           value={engine?.name ?? "No engines loaded"}
-          onChange={(name) => setEngine(engines.find((e) => e.name === name)!)}
+          onChange={(name) =>
+            setEngine(localEngines.find((e) => e.name === name))
+          }
           data={engines.map((e) => ({ value: e.name, label: e.name }))}
         />
       </Group>
diff --git a/src/components/panels/analysis/ReportModal.tsx b/src/components/panels/analysis/ReportModal.tsx
index 1a4e6486..734ece7d 100644
--- a/src/components/panels/analysis/ReportModal.tsx
+++ b/src/components/panels/analysis/ReportModal.tsx
@@ -14,6 +14,7 @@ import { TreeDispatchContext } from "@/components/common/TreeStateContext";
 import { useAtomValue } from "jotai";
 import { enginesAtom, referenceDbAtom } from "@/atoms/atoms";
 import { GoMode, commands } from "@/bindings";
+import { LocalEngine } from "@/utils/engines";
 
 function ReportModal({
   initialFen,
@@ -30,11 +31,14 @@ function ReportModal({
 }) {
   const referenceDb = useAtomValue(referenceDbAtom);
   const engines = useAtomValue(enginesAtom);
+  const localEngines = engines.filter(
+    (e): e is LocalEngine => e.type === "local"
+  );
   const dispatch = useContext(TreeDispatchContext);
 
   const form = useForm({
     initialValues: {
-      engine: engines[0]?.path ?? "",
+      engine: localEngines[0]?.path ?? "",
       novelty: true,
       reversed: true,
       goMode: { t: "Time", c: 500 } as Exclude<GoMode, { t: "Infinite" }>,
@@ -84,7 +88,7 @@ function ReportModal({
             label="Engine"
             placeholder="Pick one"
             data={
-              engines.map((engine) => {
+              localEngines.map((engine) => {
                 return {
                   value: engine.path,
                   label: engine.name,
diff --git a/src/components/puzzles/AddPuzzle.tsx b/src/components/puzzles/AddPuzzle.tsx
index f6bd2742..efa5b3bb 100644
--- a/src/components/puzzles/AddPuzzle.tsx
+++ b/src/components/puzzles/AddPuzzle.tsx
@@ -108,7 +108,7 @@ function PuzzleDbCard({
       key={puzzleDb.title}
     >
       <Group wrap="nowrap" gap={0} grow>
-        <Box p="md">
+        <Box p="md" style={{ flex: 1 }}>
           <Text tt="uppercase" c="dimmed" fw={700} size="xs">
             DATABASE
           </Text>
diff --git a/src/utils/chessdb.ts b/src/utils/chessdb.ts
index d57ce5a7..c5baa200 100644
--- a/src/utils/chessdb.ts
+++ b/src/utils/chessdb.ts
@@ -1,5 +1,4 @@
-import { EngineOptions, GoMode } from "@/bindings";
-import { Engine } from "@/utils/engines";
+import { BestMoves, EngineOptions, GoMode } from "@/bindings";
 import { fetch } from "@tauri-apps/api/http";
 
 const endpoint = "https://www.chessdb.cn/cdb.php";
@@ -18,31 +17,25 @@ type ChessDBData = {
     winrate?: string;
 };
 
-export const chessdb: Engine = {
-    name: "ChessDB",
-    remote: true,
-    loaded: false,
-    stop: () => Promise.resolve(),
-    getBestMoves: async (
-        _tab: string,
-        _goMode: GoMode,
-        options: EngineOptions
-    ) => {
-        const moves = await queryPosition(options.fen);
-        return [
-            100,
-            moves.slice(0, options.multipv).map((m, i) => ({
-                score: { type: "cp", value: m.score },
-                nodes: 0,
-                depth: 0,
-                multipv: i + 1,
-                nps: 0,
-                sanMoves: [m.san],
-                uciMoves: [m.uci],
-            })),
-        ];
-    },
-};
+export async function getBestMoves(
+    _tab: string,
+    _goMode: GoMode,
+    options: EngineOptions
+): Promise<[number, BestMoves[]] | null> {
+    const moves = await queryPosition(options.fen);
+    return [
+        100,
+        moves.slice(0, options.multipv).map((m, i) => ({
+            score: { type: "cp", value: m.score },
+            nodes: 0,
+            depth: 0,
+            multipv: i + 1,
+            nps: 0,
+            sanMoves: [m.san],
+            uciMoves: [m.uci],
+        })),
+    ];
+}
 
 const cache = new Map<string, ChessDBData[]>();
 
diff --git a/src/utils/engines.ts b/src/utils/engines.ts
index a983f52a..ea838956 100644
--- a/src/utils/engines.ts
+++ b/src/utils/engines.ts
@@ -4,21 +4,10 @@ import { fetch } from "@tauri-apps/api/http";
 import { EngineSettings } from "@/atoms/atoms";
 import { BestMoves, EngineOptions, GoMode, commands } from "@/bindings";
 
-export interface Engine {
-    name: string;
-    remote: boolean;
-    loaded: boolean;
-    image?: string;
-    settings?: EngineSettings;
-    stop(tab: string): Promise<void>;
-    getBestMoves(
-        tab: string,
-        goMode: GoMode,
-        options: EngineOptions
-    ): Promise<[number, BestMoves[]] | null>;
-}
+export type Engine = LocalEngine | RemoteEngine;
 
 export type LocalEngine = {
+    type: "local";
     name: string;
     version: string;
     path: string;
@@ -30,23 +19,30 @@ export type LocalEngine = {
     settings?: EngineSettings;
 };
 
-export function localEngine(engine: LocalEngine): Engine {
-    return {
-        remote: false,
-        loaded: engine.loaded ?? false,
-        name: engine.name,
-        settings: engine.settings,
-        image: engine.image,
-        stop: (tab) =>
-            commands.stopEngine(engine.path, tab).then((r) => {
-                unwrap(r);
-            }),
-        getBestMoves: (tab, goMode, options) => {
-            return commands
-                .getBestMoves(engine.name, engine.path, tab, goMode, options)
-                .then((r) => unwrap(r));
-        },
-    };
+export type RemoteEngine = {
+    type: "chessdb" | "lichess";
+    name: string;
+    url: string;
+    image?: string;
+    settings?: EngineSettings;
+    loaded?: boolean;
+};
+
+export function stopEngine(engine: LocalEngine, tab: string): Promise<void> {
+    return commands.stopEngine(engine.path, tab).then((r) => {
+        unwrap(r);
+    });
+}
+
+export function getBestMoves(
+    engine: LocalEngine,
+    tab: string,
+    goMode: GoMode,
+    options: EngineOptions
+): Promise<[number, BestMoves[]] | null> {
+    return commands
+        .getBestMoves(engine.name, engine.path, tab, goMode, options)
+        .then((r) => unwrap(r));
 }
 
 type OS = "windows" | "linux" | "macos";
diff --git a/src/utils/lichess.tsx b/src/utils/lichess.tsx
index 07de1fcc..733530d3 100644
--- a/src/utils/lichess.tsx
+++ b/src/utils/lichess.tsx
@@ -14,8 +14,7 @@ import {
   getLichessGamesQueryParams,
   getMasterGamesQueryParams,
 } from "./lichess/lichessexplorer";
-import { Engine } from "@/utils/engines";
-import { EngineOptions, GoMode } from "@/bindings";
+import { BestMoves, EngineOptions, GoMode } from "@/bindings";
 import { Chess, parseUci } from "chessops";
 import { parseFen } from "chessops/fen";
 import { makeSan } from "chessops/san";
@@ -188,44 +187,38 @@ export async function getLichessAccount({
   return response.data;
 }
 
-export const lichessCloudEval: Engine = {
-  name: "Lichess Cloud",
-  remote: true,
-  loaded: false,
-  stop: () => Promise.resolve(),
-  getBestMoves: async (
-    _tab: string,
-    _goMode: GoMode,
-    options: EngineOptions
-  ) => {
-    const data = await getCloudEvaluation(options.fen, options.multipv);
-    return [
-      100,
-      data.pvs.map((m, i) => {
-        const uciMoves = m.moves.split(" ");
-        const setup = parseFen(options.fen).unwrap();
-        const pos = Chess.fromSetup(setup).unwrap();
+export async function getBestMoves(
+  _tab: string,
+  _goMode: GoMode,
+  options: EngineOptions
+): Promise<[number, BestMoves[]] | null> {
+  const data = await getCloudEvaluation(options.fen, options.multipv);
+  return [
+    100,
+    data.pvs.map((m, i) => {
+      const uciMoves = m.moves.split(" ");
+      const setup = parseFen(options.fen).unwrap();
+      const pos = Chess.fromSetup(setup).unwrap();
 
-        const sanMoves = uciMoves.map((m) => {
-          const move = parseUci(m)!;
-          const san = makeSan(pos, move);
-          pos.play(move);
-          return san;
-        });
+      const sanMoves = uciMoves.map((m) => {
+        const move = parseUci(m)!;
+        const san = makeSan(pos, move);
+        pos.play(move);
+        return san;
+      });
 
-        return {
-          score: { type: "cp", value: m.cp },
-          nodes: data.knodes * 1000,
-          depth: data.depth,
-          multipv: i + 1,
-          nps: 0,
-          sanMoves,
-          uciMoves,
-        };
-      }),
-    ];
-  },
-};
+      return {
+        score: { type: "cp", value: m.cp },
+        nodes: data.knodes * 1000,
+        depth: data.depth,
+        multipv: i + 1,
+        nps: 0,
+        sanMoves,
+        uciMoves,
+      };
+    }),
+  ];
+}
 
 const cache = new Map<string, LichessCloudData>();