diff --git a/src/components/boards/BoardGame.tsx b/src/components/boards/BoardGame.tsx
index a327c643..60388ad7 100644
--- a/src/components/boards/BoardGame.tsx
+++ b/src/components/boards/BoardGame.tsx
@@ -542,12 +542,12 @@ function BoardGame() {
         const whiteName =
           players.white.type === "human"
             ? players.white.name
-            : players.white.engine?.name ?? "?";
+            : (players.white.engine?.name ?? "?");
 
         const blackName =
           players.black.type === "human"
             ? players.black.name
-            : players.black.engine?.name ?? "?";
+            : (players.black.engine?.name ?? "?");
 
         return tab.value === activeTab
           ? {
@@ -593,10 +593,10 @@ function BoardGame() {
           canTakeBack={onePlayerIsEngine}
           movable={movable}
           whiteTime={
-            gameState === "playing" ? whiteTime ?? undefined : undefined
+            gameState === "playing" ? (whiteTime ?? undefined) : undefined
           }
           blackTime={
-            gameState === "playing" ? blackTime ?? undefined : undefined
+            gameState === "playing" ? (blackTime ?? undefined) : undefined
           }
           whiteTc={players.white.timeControl}
           blackTc={players.black.timeControl}
diff --git a/src/components/common/AccountCards.tsx b/src/components/common/AccountCards.tsx
index 20e9ac5d..731a69ed 100644
--- a/src/components/common/AccountCards.tsx
+++ b/src/components/common/AccountCards.tsx
@@ -154,8 +154,9 @@ function PlayerSession({
       </Group>
       <Divider />
       <Accordion multiple chevronSize={0}>
-        {sessions.map((session) => (
+        {sessions.map((session, i) => (
           <LichessOrChessCom
+            key={i}
             session={session}
             databases={databases}
             setDatabases={setDatabases}
diff --git a/src/components/common/GameNotation.tsx b/src/components/common/GameNotation.tsx
index 5432158b..abba2173 100644
--- a/src/components/common/GameNotation.tsx
+++ b/src/components/common/GameNotation.tsx
@@ -29,6 +29,7 @@ import {
 import { INITIAL_FEN } from "chessops/fen";
 import { useAtom, useAtomValue } from "jotai";
 import { memo, useContext, useEffect, useRef, useState } from "react";
+import React from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { useStore } from "zustand";
 import CompleteMoveCell from "./CompleteMoveCell";
@@ -200,7 +201,7 @@ const RenderVariationTree = memo(
     const variations = tree.children;
     const moveNodes = showVariations
       ? variations.slice(1).map((variation) => (
-          <>
+          <React.Fragment key={variation.fen}>
             <CompleteMoveCell
               targetRef={targetRef}
               annotations={variation.annotations}
@@ -230,7 +231,7 @@ const RenderVariationTree = memo(
               start={start}
               path={[...path, variations.indexOf(variation)]}
             />
-          </>
+          </React.Fragment>
         ))
       : [];
 
diff --git a/src/components/panels/analysis/AnalysisPanel.tsx b/src/components/panels/analysis/AnalysisPanel.tsx
index 5db94bf3..6b4abe5f 100644
--- a/src/components/panels/analysis/AnalysisPanel.tsx
+++ b/src/components/panels/analysis/AnalysisPanel.tsx
@@ -110,163 +110,156 @@ function AnalysisPanel() {
             flexDirection: "column",
           }}
         >
-          <>
-            <ScrollArea
-              offsetScrollbars
-              onScrollPositionChange={() =>
-                document.dispatchEvent(new Event("analysis-panel-scroll"))
-              }
-            >
-              {pos &&
-                (getPiecesCount(pos) <= 7 ||
-                  (getPiecesCount(pos) === 8 && hasCaptures(pos))) && (
-                  <>
-                    <TablebaseInfo fen={currentNodeFen} turn={pos.turn} />
-                    <Space h="sm" />
-                  </>
-                )}
-              {loadedEngines.length > 1 && (
-                <Paper withBorder p="xs" flex={1}>
-                  <Group w="100%">
-                    <Stack w="6rem" gap="xs">
-                      <Text ta="center" fw="bold">
-                        {t("Board.Analysis.Summary")}
-                      </Text>
-                      <Button
-                        rightSection={
-                          allEnabled ? (
-                            <IconPlayerPause size="1.2rem" />
-                          ) : (
-                            <IconChevronsRight size="1.2rem" />
-                          )
-                        }
-                        variant={allEnabled ? "filled" : "default"}
-                        onClick={() => enable(!allEnabled)}
-                      >
-                        {allEnabled ? t("Common.Stop") : t("Common.Run")}
-                      </Button>
-                    </Stack>
-                    <Group grow flex={1}>
-                      {loadedEngines.map((engine, i) => (
-                        <EngineSummary
-                          key={engine.name}
-                          engine={engine}
-                          fen={rootFen}
-                          moves={moves}
-                          i={i}
-                        />
-                      ))}
-                    </Group>
-                  </Group>
-                </Paper>
+          <ScrollArea
+            offsetScrollbars
+            onScrollPositionChange={() =>
+              document.dispatchEvent(new Event("analysis-panel-scroll"))
+            }
+          >
+            {pos &&
+              (getPiecesCount(pos) <= 7 ||
+                (getPiecesCount(pos) === 8 && hasCaptures(pos))) && (
+                <>
+                  <TablebaseInfo fen={currentNodeFen} turn={pos.turn} />
+                  <Space h="sm" />
+                </>
               )}
-              <Stack mt="sm">
-                <Accordion
-                  variant="separated"
-                  multiple
-                  chevronSize={0}
-                  defaultValue={loadedEngines.map((e) => e.name)}
-                  value={expanded}
-                  onChange={(v) => setExpanded(v)}
-                  styles={{
-                    label: {
-                      paddingTop: 0,
-                      paddingBottom: 0,
-                    },
-                    content: {
-                      padding: "0.3rem",
-                    },
-                  }}
-                >
-                  <DragDropContext
-                    onDragEnd={({ destination, source }) =>
-                      destination?.index !== undefined &&
-                      setEngines(async (prev) => {
-                        const result = Array.from(await prev);
-                        const prevLoaded = result.filter((e) => e.loaded);
-                        const [removed] = prevLoaded.splice(source.index, 1);
-                        prevLoaded.splice(destination.index, 0, removed);
+            {loadedEngines.length > 1 && (
+              <Paper withBorder p="xs" flex={1}>
+                <Group w="100%">
+                  <Stack w="6rem" gap="xs">
+                    <Text ta="center" fw="bold">
+                      {t("Board.Analysis.Summary")}
+                    </Text>
+                    <Button
+                      rightSection={
+                        allEnabled ? (
+                          <IconPlayerPause size="1.2rem" />
+                        ) : (
+                          <IconChevronsRight size="1.2rem" />
+                        )
+                      }
+                      variant={allEnabled ? "filled" : "default"}
+                      onClick={() => enable(!allEnabled)}
+                    >
+                      {allEnabled ? t("Common.Stop") : t("Common.Run")}
+                    </Button>
+                  </Stack>
+                  <Group grow flex={1}>
+                    {loadedEngines.map((engine, i) => (
+                      <EngineSummary
+                        key={engine.name}
+                        engine={engine}
+                        fen={rootFen}
+                        moves={moves}
+                        i={i}
+                      />
+                    ))}
+                  </Group>
+                </Group>
+              </Paper>
+            )}
+            <Stack mt="sm">
+              <Accordion
+                variant="separated"
+                multiple
+                chevronSize={0}
+                defaultValue={loadedEngines.map((e) => e.name)}
+                value={expanded}
+                onChange={(v) => setExpanded(v)}
+                styles={{
+                  label: {
+                    paddingTop: 0,
+                    paddingBottom: 0,
+                  },
+                  content: {
+                    padding: "0.3rem",
+                  },
+                }}
+              >
+                <DragDropContext
+                  onDragEnd={({ destination, source }) =>
+                    destination?.index !== undefined &&
+                    setEngines(async (prev) => {
+                      const result = Array.from(await prev);
+                      const prevLoaded = result.filter((e) => e.loaded);
+                      const [removed] = prevLoaded.splice(source.index, 1);
+                      prevLoaded.splice(destination.index, 0, removed);
 
-                        result.forEach((e, i) => {
-                          if (e.loaded) {
-                            result[i] = prevLoaded.shift()!;
-                          }
-                        });
-                        return result;
-                      })
-                    }
-                  >
-                    <Droppable droppableId="droppable" direction="vertical">
-                      {(provided) => (
-                        <div
-                          ref={provided.innerRef}
-                          {...provided.droppableProps}
-                        >
-                          <Stack w="100%">
-                            {loadedEngines.map((engine, i) => (
-                              <Draggable
-                                key={engine.name + i.toString()}
-                                draggableId={engine.name}
-                                index={i}
-                              >
-                                {(provided) => (
-                                  <div
-                                    ref={provided.innerRef}
-                                    {...provided.draggableProps}
-                                  >
-                                    <Accordion.Item value={engine.name}>
-                                      <BestMoves
-                                        id={i}
-                                        engine={engine}
-                                        fen={rootFen}
-                                        moves={moves}
-                                        halfMoves={currentNodeHalfMoves}
-                                        dragHandleProps={
-                                          provided.dragHandleProps
-                                        }
-                                        orientation={
-                                          headers.orientation || "white"
-                                        }
-                                      />
-                                    </Accordion.Item>
-                                  </div>
-                                )}
-                              </Draggable>
-                            ))}
-                          </Stack>
+                      result.forEach((e, i) => {
+                        if (e.loaded) {
+                          result[i] = prevLoaded.shift()!;
+                        }
+                      });
+                      return result;
+                    })
+                  }
+                >
+                  <Droppable droppableId="droppable" direction="vertical">
+                    {(provided) => (
+                      <div ref={provided.innerRef} {...provided.droppableProps}>
+                        <Stack w="100%">
+                          {loadedEngines.map((engine, i) => (
+                            <Draggable
+                              key={engine.name + i.toString()}
+                              draggableId={engine.name}
+                              index={i}
+                            >
+                              {(provided) => (
+                                <div
+                                  ref={provided.innerRef}
+                                  {...provided.draggableProps}
+                                >
+                                  <Accordion.Item value={engine.name}>
+                                    <BestMoves
+                                      id={i}
+                                      engine={engine}
+                                      fen={rootFen}
+                                      moves={moves}
+                                      halfMoves={currentNodeHalfMoves}
+                                      dragHandleProps={provided.dragHandleProps}
+                                      orientation={
+                                        headers.orientation || "white"
+                                      }
+                                    />
+                                  </Accordion.Item>
+                                </div>
+                              )}
+                            </Draggable>
+                          ))}
+                        </Stack>
 
-                          {provided.placeholder}
-                        </div>
-                      )}
-                    </Droppable>
-                  </DragDropContext>
-                </Accordion>
-                <Group gap="xs">
-                  <Button
-                    flex={1}
-                    variant="default"
-                    onClick={() => {
-                      navigate({ to: "/engines" });
-                    }}
-                    leftSection={<IconSettings size="0.875rem" />}
-                  >
-                    Manage Engines
-                  </Button>
-                  <Popover width={250} position="top-end" shadow="md">
-                    <Popover.Target>
-                      <ActionIcon variant="default" size="lg">
-                        <IconSelector />
-                      </ActionIcon>
-                    </Popover.Target>
+                        {provided.placeholder}
+                      </div>
+                    )}
+                  </Droppable>
+                </DragDropContext>
+              </Accordion>
+              <Group gap="xs">
+                <Button
+                  flex={1}
+                  variant="default"
+                  onClick={() => {
+                    navigate({ to: "/engines" });
+                  }}
+                  leftSection={<IconSettings size="0.875rem" />}
+                >
+                  Manage Engines
+                </Button>
+                <Popover width={250} position="top-end" shadow="md">
+                  <Popover.Target>
+                    <ActionIcon variant="default" size="lg">
+                      <IconSelector />
+                    </ActionIcon>
+                  </Popover.Target>
 
-                    <Popover.Dropdown>
-                      <EngineSelection />
-                    </Popover.Dropdown>
-                  </Popover>
-                </Group>
-              </Stack>
-            </ScrollArea>
-          </>
+                  <Popover.Dropdown>
+                    <EngineSelection />
+                  </Popover.Dropdown>
+                </Popover>
+              </Group>
+            </Stack>
+          </ScrollArea>
         </Tabs.Panel>
         <Tabs.Panel
           value="report"
diff --git a/src/styles/chessgroundBaseOverride.css b/src/styles/chessgroundBaseOverride.css
index f9b7b1da..9e0529b7 100644
--- a/src/styles/chessgroundBaseOverride.css
+++ b/src/styles/chessgroundBaseOverride.css
@@ -137,7 +137,7 @@ piece.fading {
   top: -4%;
   flex-flow: column-reverse;
   height: 100%;
-  width: 1rem
+  width: 1rem;
 }
 
 .cg-wrap coords.ranks.black {
diff --git a/src/styles/chessgroundColorsOverride.css b/src/styles/chessgroundColorsOverride.css
index 8e5b329e..2699e93d 100644
--- a/src/styles/chessgroundColorsOverride.css
+++ b/src/styles/chessgroundColorsOverride.css
@@ -1,15 +1,24 @@
 cg-board {
-  background-image: var(--board-image, url('/board/gray.svg'));
+  background-image: var(--board-image, url("/board/gray.svg"));
   border-radius: var(--mantine-radius-default);
   overflow: hidden;
 }
 
 /** Interactive board square colors */
 cg-board square.premove-dest {
-  background: radial-gradient(rgba(20, 30, 85, 0.5) 22%, #203085 0, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0) 0);
+  background: radial-gradient(
+    rgba(20, 30, 85, 0.5) 22%,
+    #203085 0,
+    rgba(0, 0, 0, 0.3) 0,
+    rgba(0, 0, 0, 0) 0
+  );
 }
 cg-board square.oc.premove-dest {
-  background: radial-gradient(transparent 0%, transparent 80%, rgba(20, 30, 85, 0.2) 80%);
+  background: radial-gradient(
+    transparent 0%,
+    transparent 80%,
+    rgba(20, 30, 85, 0.2) 80%
+  );
 }
 cg-board square.premove-dest:hover {
   background: rgba(20, 30, 85, 0.2);