diff --git a/src/components/Collection/Anilist/AnilistLinkSelectPanel.tsx b/src/components/Collection/Anilist/AnilistLinkSelectPanel.tsx
new file mode 100644
index 000000000..61a6142ae
--- /dev/null
+++ b/src/components/Collection/Anilist/AnilistLinkSelectPanel.tsx
@@ -0,0 +1,197 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useParams, useSearchParams } from 'react-router';
+import { mdiLoading, mdiMagnify, mdiOpenInNew, mdiRefresh } from '@mdi/js';
+import { Icon } from '@mdi/react';
+import cx from 'classnames';
+import { toNumber } from 'lodash';
+import { useDebounceValue } from 'usehooks-ts';
+
+import Button from '@/components/Input/Button';
+import Input from '@/components/Input/Input';
+import { getAnilistUnavailableMessage, getAnilistUnavailableState } from '@/core/react-query/anilist/helpers';
+import { useAnilistRefreshMutation } from '@/core/react-query/anilist/mutations';
+import { useAnilistAutoSearchQuery, useAnilistSearchQuery } from '@/core/react-query/anilist/queries';
+import { useSettingsQuery } from '@/core/react-query/settings/queries';
+import toast from '@/core/toast';
+import { getAnilistAnimeLink } from '@/core/util';
+
+import type { AnilistSearchResultType } from '@/core/types/api/anilist';
+
+type SearchResultRowProps = {
+  result: AnilistSearchResultType;
+  selectLink: (anilistId: number) => void;
+};
+
+const SearchResultRow = ({ result, selectLink }: SearchResultRowProps) => {
+  const handleClick = () => {
+    selectLink(result.ID);
+  };
+
+  return (
+    <div className="flex items-center gap-x-4">
+      <a
+        className="flex w-24 cursor-pointer items-center justify-between font-semibold text-panel-text-primary"
+        href={getAnilistAnimeLink(result.ID)}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {result.ID}
+        <Icon path={mdiOpenInNew} size={0.9} />
+      </a>
+      <div
+        className="line-clamp-1 flex cursor-pointer items-center gap-x-4 hover:text-panel-text-primary"
+        onClick={handleClick}
+      >
+        <span>|</span>
+        {result.Title}
+      </div>
+    </div>
+  );
+};
+
+const AnilistLinkSelectPanel = () => {
+  const { seriesId } = useParams();
+
+  const [, setSearchParams] = useSearchParams();
+
+  const [selectedId, setSelectedId] = useState(0);
+  const [searchText, setSearchText] = useState('');
+  const [debouncedSearch] = useDebounceValue(searchText, 200);
+
+  const { includeRestricted } = useSettingsQuery().data.WebUI_Settings.collection.anilist;
+
+  const autoSearchQuery = useAnilistAutoSearchQuery(toNumber(seriesId), debouncedSearch === '' && !!seriesId);
+  const autoSearchResults = useMemo(
+    () => autoSearchQuery.data?.map(result => result.Anime) ?? [],
+    [autoSearchQuery.data],
+  );
+
+  const searchQuery = useAnilistSearchQuery(debouncedSearch, {
+    includeRestricted,
+    pageSize: 25,
+  });
+  const { isPending: refreshPending, mutate: refreshData } = useAnilistRefreshMutation();
+
+  const activeQuery = debouncedSearch === '' ? autoSearchQuery : searchQuery;
+  const unavailableState = useMemo(() => getAnilistUnavailableState(activeQuery.error), [activeQuery.error]);
+
+  const noResults = useMemo(() => {
+    if (unavailableState) return false;
+    if (debouncedSearch === '') return autoSearchResults.length === 0;
+    return searchQuery.data?.length === 0;
+  }, [autoSearchResults, debouncedSearch, searchQuery.data, unavailableState]);
+
+  const handleRetry = () => {
+    activeQuery.refetch().catch(console.error);
+  };
+
+  const isPending = useMemo(
+    () => autoSearchQuery.isLoading || searchQuery.isLoading || refreshPending,
+    [autoSearchQuery.isLoading, refreshPending, searchQuery.isLoading],
+  );
+
+  const selectLink = (anilistId: number) => {
+    setSelectedId(anilistId);
+  };
+
+  useEffect(() => {
+    if (selectedId === 0) return;
+
+    refreshData(
+      {
+        anilistId: selectedId,
+        Immediate: true,
+        QuickRefresh: true,
+      },
+      {
+        onSuccess: () => setSearchParams({ id: selectedId.toString() }),
+        onError: (error) => {
+          const state = getAnilistUnavailableState(error);
+          toast.error(state ? getAnilistUnavailableMessage(state) : 'Failed to refresh data!');
+          setSelectedId(0);
+        },
+      },
+    );
+  }, [refreshData, selectedId, setSearchParams]);
+
+  return (
+    <div className="row-span-2 flex flex-col gap-y-2">
+      <div className="flex items-center justify-between rounded-lg border border-panel-border bg-panel-background-alt p-4 font-semibold">
+        <div className="flex items-center">
+          AniList |&nbsp;
+          <div>
+            Not linked
+          </div>
+        </div>
+      </div>
+
+      <Input
+        id="link-search"
+        type="text"
+        value={searchText}
+        onChange={event => setSearchText(event.target.value)}
+        placeholder="Enter Title or AniList ID..."
+        inputClassName="!p-4"
+        startIcon={mdiMagnify}
+        autoFocus
+      />
+
+      <div className="relative h-96 rounded-lg border border-panel-border bg-panel-input p-4">
+        {isPending && (
+          <div className="absolute inset-0 flex items-center justify-center text-panel-text-primary">
+            <Icon path={mdiLoading} size={4} spin />
+          </div>
+        )}
+
+        {!isPending && (
+          <div
+            className={cx(
+              'flex h-full flex-col gap-y-2 overflow-y-auto',
+              refreshPending && 'pointer-events-none opacity-65',
+            )}
+          >
+            {debouncedSearch === '' && autoSearchResults.map(result => (
+              <SearchResultRow
+                key={result.ID}
+                result={result}
+                selectLink={selectLink}
+              />
+            ))}
+
+            {debouncedSearch && searchQuery.data?.map(result => (
+              <SearchResultRow
+                key={result.ID}
+                result={result}
+                selectLink={selectLink}
+              />
+            ))}
+
+            {noResults && (
+              <div className="flex grow items-center justify-center">
+                No results found!
+              </div>
+            )}
+
+            {unavailableState && (
+              <div className="flex grow flex-col items-center justify-center gap-y-4 text-center">
+                {getAnilistUnavailableMessage(unavailableState)}
+                <Button
+                  buttonType="secondary"
+                  buttonSize="normal"
+                  className="flex items-center gap-x-2"
+                  onClick={handleRetry}
+                  loading={activeQuery.isFetching}
+                >
+                  <Icon path={mdiRefresh} size={1} />
+                  Retry
+                </Button>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default AnilistLinkSelectPanel;
diff --git a/src/components/Collection/Anilist/EpisodeRow.tsx b/src/components/Collection/Anilist/EpisodeRow.tsx
new file mode 100644
index 000000000..e06835922
--- /dev/null
+++ b/src/components/Collection/Anilist/EpisodeRow.tsx
@@ -0,0 +1,170 @@
+import { useMemo } from 'react';
+import { useSearchParams } from 'react-router';
+import { mdiLoading } from '@mdi/js';
+import { Icon } from '@mdi/react';
+import cx from 'classnames';
+import { find, map, toNumber } from 'lodash';
+
+import EpisodeSelect from '@/components/Collection/Anilist/EpisodeSelect';
+import AniDBEpisode from '@/components/Collection/Tmdb/AniDBEpisode';
+import MatchRating from '@/components/Collection/Tmdb/MatchRating';
+
+import type { AnilistEpisodeType, AnilistEpisodeXrefType } from '@/core/types/api/anilist';
+import type { EpisodeType } from '@/core/types/api/episode';
+import type { Updater } from 'use-immer';
+
+type Props = {
+  anilistEpisodes?: AnilistEpisodeType[];
+  anilistEpisodesPending: boolean;
+  episode: EpisodeType;
+  existingXrefs?: number[];
+  isOdd: boolean;
+  offset: number;
+  setLinkOverrides: Updater<Record<number, number[]>>;
+  xrefs?: Record<string, AnilistEpisodeXrefType[]>;
+};
+
+const EpisodeRow = (props: Props) => {
+  const {
+    anilistEpisodes,
+    anilistEpisodesPending,
+    episode,
+    existingXrefs,
+    isOdd,
+    offset,
+    setLinkOverrides,
+    xrefs,
+  } = props;
+
+  const [searchParams] = useSearchParams();
+  const anilistId = toNumber(searchParams.get('id'));
+
+  const xref = useMemo(
+    () => {
+      if (!xrefs?.[episode.IDs.AniDB]) return undefined;
+      return xrefs[episode.IDs.AniDB][offset];
+    },
+    [episode.IDs.AniDB, offset, xrefs],
+  );
+
+  const anilistEpisode = useMemo(() => {
+    if (!xref || xref.AnilistEpisodeID === 0) return undefined;
+    return find(anilistEpisodes, { ID: xref.AnilistEpisodeID });
+  }, [anilistEpisodes, xref]);
+
+  const isDisabled = useMemo(() => {
+    if (!xref || xref.AnilistEpisodeID === 0) return false;
+    return xref.AnilistAnimeID !== anilistId;
+  }, [anilistId, xref]);
+
+  const isPending = useMemo(
+    () => {
+      // Xrefs are not loaded yet
+      if (!xrefs) return true;
+      // Xrefs are loaded but episode doesn't have an xref
+      if (!xref) return false;
+      // Episodes for another anime are never loaded, so don't wait for them
+      if (isDisabled) return false;
+
+      return !anilistEpisode && anilistEpisodesPending;
+    },
+    [anilistEpisode, anilistEpisodesPending, isDisabled, xref, xrefs],
+  );
+
+  const editExtraEpisodeLink = () => {
+    const episodeId = episode.IDs.AniDB;
+    setLinkOverrides((draftState) => {
+      if (!draftState[episodeId]) {
+        draftState[episodeId] = map(xrefs?.[episodeId], item => item.AnilistEpisodeID);
+      }
+
+      // If offset is 0, we are adding a link
+      if (offset === 0) {
+        draftState[episodeId].push(0);
+        return;
+      }
+
+      draftState[episodeId].splice(offset, 1);
+
+      // When existing xrefs are present and are more than 1,
+      // we need to keep the first link to "overwrite" others
+      if (existingXrefs && existingXrefs.length > 1) {
+        return;
+      }
+
+      // When only one is preset, we can remove the override if existingXref was present
+      if (draftState[episodeId].length === 1 && existingXrefs) {
+        delete draftState[episodeId];
+      }
+    });
+  };
+
+  const overrideLink = (newAnilistId?: number) => {
+    const episodeId = episode.IDs.AniDB;
+    setLinkOverrides((draftState) => {
+      if (!draftState[episodeId]) {
+        draftState[episodeId] = map(xrefs?.[episodeId], item => item.AnilistEpisodeID);
+      }
+
+      if (newAnilistId === undefined) {
+        draftState[episodeId].splice(offset, 1);
+        return;
+      }
+
+      if (newAnilistId === 0 && !existingXrefs && offset === 0) {
+        delete draftState[episodeId];
+        return;
+      }
+
+      draftState[episodeId][offset] = newAnilistId;
+    });
+  };
+
+  const matchRating = useMemo(() => {
+    if (isPending) return undefined;
+    return xref?.Rating;
+  }, [isPending, xref]);
+
+  return (
+    <>
+      <AniDBEpisode
+        episode={episode}
+        isOdd={isOdd}
+        extra={offset > 0}
+        onIconClick={(offset > 0 || (anilistEpisode ?? xref?.AnilistEpisodeID)) ? editExtraEpisodeLink : undefined}
+      />
+
+      <MatchRating
+        rating={matchRating}
+        isOdd={isOdd}
+        isDisabled={isDisabled}
+      />
+
+      {!isPending && (
+        <EpisodeSelect
+          anilistEpisode={anilistEpisode}
+          anilistEpisodes={anilistEpisodes}
+          fallbackEpisodeNumber={xref?.AnilistEpisodeID ? xref.EpisodeNumber : undefined}
+          isDisabled={isDisabled}
+          isOdd={isOdd}
+          override={xref?.AnilistEpisodeID}
+          overrideLink={overrideLink}
+        />
+      )}
+
+      {isPending
+        && (
+          <div
+            className={cx(
+              'flex grow basis-0 gap-x-6 rounded-lg border border-panel-border p-4',
+              isOdd ? 'bg-panel-background-alt' : 'bg-panel-background',
+            )}
+          >
+            <Icon path={mdiLoading} spin size={1} className="m-auto text-panel-text-primary" />
+          </div>
+        )}
+    </>
+  );
+};
+
+export default EpisodeRow;
diff --git a/src/components/Collection/Anilist/EpisodeSelect.tsx b/src/components/Collection/Anilist/EpisodeSelect.tsx
new file mode 100644
index 000000000..dd6d83c44
--- /dev/null
+++ b/src/components/Collection/Anilist/EpisodeSelect.tsx
@@ -0,0 +1,213 @@
+import { useMemo, useState } from 'react';
+import { Listbox, ListboxButton, ListboxOption, ListboxOptions, Transition } from '@headlessui/react';
+import { mdiChevronDown, mdiLoading, mdiMagnify } from '@mdi/js';
+import { Icon } from '@mdi/react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import cx from 'classnames';
+import { find } from 'lodash';
+import { useDebounceValue } from 'usehooks-ts';
+
+import Input from '@/components/Input/Input';
+import { dayjs, padNumber } from '@/core/util';
+
+import type { AnilistEpisodeType } from '@/core/types/api/anilist';
+
+type Props = {
+  anilistEpisode?: AnilistEpisodeType;
+  anilistEpisodes?: AnilistEpisodeType[];
+  fallbackEpisodeNumber?: number;
+  isDisabled: boolean;
+  isOdd: boolean;
+  override?: number;
+  overrideLink: (newAnilistId?: number) => void;
+};
+
+const getAiredAt = (episode?: AnilistEpisodeType) => {
+  if (!episode) return '';
+  if (!episode.AiredAt) return 'Airdate Unknown';
+  return dayjs(episode.AiredAt).format('YYYY-MM-DD');
+};
+
+const EpisodeSelect = (props: Props) => {
+  const {
+    anilistEpisode: initialAnilistEpisode,
+    anilistEpisodes,
+    fallbackEpisodeNumber,
+    isDisabled,
+    isOdd,
+    override,
+    overrideLink,
+  } = props;
+
+  const [searchText, setSearchText] = useState('');
+  const [debouncedSearch] = useDebounceValue(searchText, 200);
+
+  const episodes = useMemo(() => {
+    const search = debouncedSearch.trim().toLowerCase();
+    if (!anilistEpisodes) return [];
+    if (!search) return anilistEpisodes;
+    return anilistEpisodes.filter(episode =>
+      episode.EpisodeNumber.toString().includes(search)
+      || `episode ${episode.EpisodeNumber}`.includes(search)
+    );
+  }, [anilistEpisodes, debouncedSearch]);
+
+  const anilistEpisode = useMemo(() => {
+    if (override && override !== initialAnilistEpisode?.ID) {
+      return find(anilistEpisodes, { ID: override }) ?? initialAnilistEpisode;
+    }
+    return initialAnilistEpisode;
+  }, [anilistEpisodes, initialAnilistEpisode, override]);
+
+  const handleSelect = (newSelectedEpisode?: AnilistEpisodeType) => {
+    overrideLink(newSelectedEpisode?.ID ?? 0);
+  };
+
+  const [scrollElement, setScrollElement] = useState<HTMLDivElement | null>(null);
+  const rowVirtualizer = useVirtualizer({
+    count: episodes.length + 1,
+    getScrollElement: () => scrollElement,
+    estimateSize: () => 26,
+    overscan: 5,
+    gap: 8,
+  });
+  const virtualItems = rowVirtualizer.getVirtualItems();
+
+  const episodeNumber = anilistEpisode?.EpisodeNumber ?? fallbackEpisodeNumber;
+  const episodeTitle = episodeNumber ? `Episode ${episodeNumber}` : undefined;
+
+  return (
+    <Listbox
+      value={anilistEpisode ?? {}}
+      by="ID"
+      onChange={handleSelect}
+      disabled={isDisabled}
+      as="div"
+      className="flex grow basis-0"
+    >
+      <ListboxButton
+        className={cx(
+          'flex grow items-center gap-x-6 rounded-lg border border-panel-border p-4',
+          'data-open:border-panel-text-primary',
+          isOdd ? 'bg-panel-background-alt' : 'bg-panel-background',
+          isDisabled && 'opacity-65',
+        )}
+        data-tooltip-id="tooltip"
+        data-tooltip-content={isDisabled ? 'Episode is linked to another anime.' : ''}
+      >
+        {({ open }) => (
+          <>
+            <div className="w-8 shrink-0">
+              {episodeNumber ? padNumber(episodeNumber) : 'XX'}
+            </div>
+
+            <div
+              className="flex grow flex-col text-left"
+              data-tooltip-id={!isDisabled ? 'tooltip' : ''}
+              data-tooltip-content={episodeTitle ?? ''}
+            >
+              <div className="line-clamp-1 text-xs font-semibold opacity-65">
+                {episodeTitle ? getAiredAt(anilistEpisode) : ''}
+              </div>
+              <div className="line-clamp-1">
+                {episodeTitle ?? 'Entry Not Linked'}
+              </div>
+            </div>
+
+            <Icon path={mdiChevronDown} size={1} className="shrink-0 transition-transform" rotate={open ? 180 : 0} />
+          </>
+        )}
+      </ListboxButton>
+      <Transition
+        enter="transition-opacity"
+        enterFrom="opacity-0"
+        enterTo="opacity-100"
+        leave="transition-opacity"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+      >
+        <ListboxOptions
+          anchor={{
+            to: 'bottom',
+            padding: '1rem',
+            gap: '0.5rem',
+          }}
+          className="z-110 w-(--button-width) rounded-lg bg-panel-background focus:outline-hidden"
+        >
+          <Input
+            autoFocus
+            id="episode-search"
+            type="text"
+            value={searchText}
+            onChange={event => setSearchText(event.target.value)}
+            onKeyDown={event => event.stopPropagation()}
+            placeholder="Enter Episode Number..."
+            inputClassName="!p-4"
+            startIcon={mdiMagnify}
+          />
+
+          <div className="mt-2 rounded-lg bg-panel-input p-4">
+            <div
+              className="h-80 w-full flex-col overflow-y-auto"
+              ref={setScrollElement}
+            >
+              {!anilistEpisodes && (
+                <div className="flex size-full items-center justify-center text-panel-text-primary">
+                  <Icon path={mdiLoading} spin size={3} />
+                </div>
+              )}
+
+              {anilistEpisodes && (
+                <div
+                  className="relative w-full"
+                  style={{ height: rowVirtualizer.getTotalSize() }}
+                >
+                  {virtualItems.map((virtualItem) => {
+                    const { index, key, start } = virtualItem;
+
+                    const episode = index === 0 ? undefined : episodes[index - 1];
+
+                    return (
+                      <ListboxOption
+                        key={episode?.ID ?? `entry-not-linked-${key}`}
+                        value={episode}
+                        className={cx(
+                          'absolute top-0 left-0 flex w-full basis-0 cursor-pointer gap-x-2 transition-colors',
+                          'group hover:text-panel-text-primary data-selected:text-panel-text-primary',
+                        )}
+                        style={{
+                          transform: `translateY(${start ?? 0}px)`,
+                        }}
+                        ref={rowVirtualizer.measureElement}
+                        data-index={index}
+                      >
+                        <div className="w-24 text-panel-text-important group-data-selected:text-panel-text-primary">
+                          {episode ? `E${padNumber(episode.EpisodeNumber)}` : 'XX'}
+                        </div>
+                        |
+
+                        <div
+                          className="ml-4 line-clamp-1 grow basis-0"
+                          data-tooltip-id="tooltip"
+                          data-tooltip-content={episode ? `Episode ${episode.EpisodeNumber}` : ''}
+                        >
+                          {episode ? `Episode ${episode.EpisodeNumber}` : 'Do Not Link Entry'}
+                        </div>
+
+                        <div className="pr-4">
+                          {episode?.AiredAt ? getAiredAt(episode) : ''}
+                        </div>
+                      </ListboxOption>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          </div>
+        </ListboxOptions>
+      </Transition>
+    </Listbox>
+  );
+};
+
+export default EpisodeSelect;
diff --git a/src/components/Collection/Series/EditSeriesTabs/UpdateActionsTab.tsx b/src/components/Collection/Series/EditSeriesTabs/UpdateActionsTab.tsx
index 83038a6ca..23e439e93 100644
--- a/src/components/Collection/Series/EditSeriesTabs/UpdateActionsTab.tsx
+++ b/src/components/Collection/Series/EditSeriesTabs/UpdateActionsTab.tsx
@@ -1,8 +1,11 @@
 import Action from '@/components/Collection/Series/EditSeriesTabs/Action';
 import {
+  useAutoSearchAnilistMatchMutation,
   useAutoSearchTmdbMatchMutation,
   useRefreshSeriesAniDBInfoMutation,
+  useRefreshSeriesAnilistInfoMutation,
   useRefreshSeriesTMDBInfoMutation,
+  useUpdateSeriesAnilistImagesMutation,
   useUpdateSeriesTMDBImagesMutation,
 } from '@/core/react-query/series/mutations';
 
@@ -15,6 +18,9 @@ const UpdateActionsTab = ({ seriesId }: Props) => {
   const { mutate: autoMatchTmdb } = useAutoSearchTmdbMatchMutation(seriesId);
   const { mutate: refreshTmdb } = useRefreshSeriesTMDBInfoMutation(seriesId);
   const { mutate: updateTmdbImagesMutation } = useUpdateSeriesTMDBImagesMutation(seriesId);
+  const { mutate: autoMatchAnilist } = useAutoSearchAnilistMatchMutation(seriesId);
+  const { mutate: refreshAnilist } = useRefreshSeriesAnilistInfoMutation(seriesId);
+  const { mutate: updateAnilistImagesMutation } = useUpdateSeriesAnilistImagesMutation(seriesId);
 
   const triggerAnidbRefresh = (force: boolean, cacheOnly: boolean) => {
     refreshAnidb({ force, cacheOnly });
@@ -24,6 +30,10 @@ const UpdateActionsTab = ({ seriesId }: Props) => {
     updateTmdbImagesMutation({ force: true });
   };
 
+  const updateAnilistImagesForce = () => {
+    updateAnilistImagesMutation({ force: true });
+  };
+
   return (
     <div className="flex h-88 grow flex-col gap-y-4 overflow-y-auto">
       <Action
@@ -56,6 +66,21 @@ const UpdateActionsTab = ({ seriesId }: Props) => {
         description="Forces a complete redownload of images from TMDB."
         onClick={updateTmdbImagesForce}
       />
+      <Action
+        name="Auto-Search AniList Match"
+        description="Automatically searches for an AniList match."
+        onClick={autoMatchAnilist}
+      />
+      <Action
+        name="Update AniList Info"
+        description="Gets the latest series information from AniList."
+        onClick={refreshAnilist}
+      />
+      <Action
+        name="Update AniList Images - Force"
+        description="Forces a complete redownload of images from AniList."
+        onClick={updateAnilistImagesForce}
+      />
     </div>
   );
 };
diff --git a/src/components/Collection/Series/ImageUploadModal.tsx b/src/components/Collection/Series/ImageUploadModal.tsx
index fd50618a2..67b754055 100644
--- a/src/components/Collection/Series/ImageUploadModal.tsx
+++ b/src/components/Collection/Series/ImageUploadModal.tsx
@@ -19,6 +19,7 @@ import type { ImageTabType } from '@/core/types/api/image';
 const tabLabelMap: Record<ImageTabType, { label: string, serverType: ImageEntityValues }> = {
   Posters: { label: 'Poster', serverType: 'Primary' },
   Backdrops: { label: 'Backdrop', serverType: 'Backdrop' },
+  Banners: { label: 'Banner', serverType: 'Banner' },
   Logos: { label: 'Logo', serverType: 'Logo' },
 };
 
diff --git a/src/components/Collection/SeriesMetadata.tsx b/src/components/Collection/SeriesMetadata.tsx
index 3827c46bd..f29556ce3 100644
--- a/src/components/Collection/SeriesMetadata.tsx
+++ b/src/components/Collection/SeriesMetadata.tsx
@@ -3,6 +3,8 @@ import { mdiCloseCircleOutline, mdiOpenInNew, mdiPencilCircleOutline, mdiPlusCir
 import { Icon } from '@mdi/react';
 
 import Button from '@/components/Input/Button';
+import { getAnilistAnimeLink } from '@/core/anilistUtils';
+import { useDeleteAnilistLinkMutation } from '@/core/react-query/anilist/mutations';
 import { invalidateQueries } from '@/core/react-query/queryClient';
 import { useDeleteTmdbLinkMutation } from '@/core/react-query/tmdb/mutations';
 import { getAnidbAnimeLink } from '@/core/util';
@@ -11,19 +13,22 @@ import useNavigateVoid from '@/hooks/useNavigateVoid';
 type Props = {
   id?: number;
   seriesId: number;
-  site: 'AniDB' | 'TMDB';
+  site: 'AniDB' | 'AniList' | 'TMDB';
   type?: 'Movie' | 'Show';
 };
 
 const SeriesMetadata = ({ id, seriesId, site, type }: Props) => {
   const navigate = useNavigateVoid();
   const { mutate: deleteTmdbLink } = useDeleteTmdbLinkMutation(seriesId, type ?? 'Movie');
+  const { mutate: deleteAnilistLink } = useDeleteAnilistLinkMutation(seriesId);
 
   const siteLink = useMemo(() => {
     if (!id) return '#';
     switch (site) {
       case 'AniDB':
         return getAnidbAnimeLink(id);
+      case 'AniList':
+        return getAnilistAnimeLink(id);
       case 'TMDB':
         return `https://www.themoviedb.org/${type === 'Show' ? 'tv' : 'movie'}/${id}`;
       default:
@@ -31,16 +36,25 @@ const SeriesMetadata = ({ id, seriesId, site, type }: Props) => {
     }
   }, [id, site, type]);
 
-  const canAddLink = useMemo(() => site === 'TMDB', [site]);
-  const canEditLink = useMemo(() => site === 'TMDB', [site]);
-  const canRemoveLink = useMemo(() => site === 'TMDB', [site]);
+  const canAddLink = useMemo(() => site === 'TMDB' || site === 'AniList', [site]);
+  const canEditLink = useMemo(() => site === 'TMDB' || site === 'AniList', [site]);
+  const canRemoveLink = useMemo(() => site === 'TMDB' || site === 'AniList', [site]);
 
   const addLink = () => {
+    if (site === 'AniList') {
+      navigate('../anilist-linking');
+      return;
+    }
     navigate('../tmdb-linking');
   };
 
   const editLink = () => {
-    if (!id || !type) return;
+    if (!id) return;
+    if (site === 'AniList') {
+      navigate(`../anilist-linking?id=${id}`);
+      return;
+    }
+    if (!type) return;
     navigate(`../tmdb-linking?type=${type}&id=${id}`);
   };
 
@@ -52,6 +66,11 @@ const SeriesMetadata = ({ id, seriesId, site, type }: Props) => {
           onSuccess: () => invalidateQueries(['series', seriesId]),
         });
         break;
+      case 'AniList':
+        deleteAnilistLink({ ID: id }, {
+          onSuccess: () => invalidateQueries(['series', seriesId]),
+        });
+        break;
       default:
         break;
     }
@@ -77,7 +96,8 @@ const SeriesMetadata = ({ id, seriesId, site, type }: Props) => {
             : (
               <>
                 {site === 'TMDB' && 'Add TMDB Link'}
-                {site !== 'TMDB' && 'Series Not Linked'}
+                {site === 'AniList' && 'Add AniList Link'}
+                {site === 'AniDB' && 'Series Not Linked'}
               </>
             )}
         </div>
diff --git a/src/components/Collection/Tmdb/MatchRating.tsx b/src/components/Collection/Tmdb/MatchRating.tsx
index 218e6c8e1..f3aa7b2c1 100644
--- a/src/components/Collection/Tmdb/MatchRating.tsx
+++ b/src/components/Collection/Tmdb/MatchRating.tsx
@@ -16,6 +16,10 @@ const getAbbreviation = (rating?: MatchRatingValues) => {
       return ['~T', 'Approx. Title'];
     case 'DateKindaMatches':
       return ['~D', 'Approx. Date'];
+    case 'DateAndNumberMatches':
+      return ['DN', 'Date & Number'];
+    case 'DateOffsetMatches':
+      return ['~DO', 'Date Offset'];
     case 'UserVerified':
       return ['UO', 'User Override'];
     case 'FirstAvailable':
@@ -37,9 +41,10 @@ const MatchRating = ({ isDisabled, isOdd, rating }: Props) => (
       'flex w-16 items-center justify-center rounded-md border border-panel-border text-button-primary-text',
       {
         'bg-panel-text-important': rating === 'DateAndTitleMatches'
-          || rating === 'TitleMatches',
+          || rating === 'TitleMatches' || rating === 'DateAndNumberMatches',
         'bg-panel-text-warning': rating === 'DateMatches' || rating === 'TitleKindaMatches'
-          || rating === 'DateAndTitleKindaMatches' || rating === 'DateKindaMatches',
+          || rating === 'DateAndTitleKindaMatches' || rating === 'DateKindaMatches'
+          || rating === 'DateOffsetMatches',
         'bg-panel-text-primary': rating === 'UserVerified',
         'bg-panel-text-danger': rating === 'FirstAvailable',
         'bg-panel-background': (!rating || rating === 'None') && !isOdd,
diff --git a/src/components/Collection/Tmdb/TopPanel.tsx b/src/components/Collection/Tmdb/TopPanel.tsx
index 051dcf0ad..345f044e0 100644
--- a/src/components/Collection/Tmdb/TopPanel.tsx
+++ b/src/components/Collection/Tmdb/TopPanel.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { mdiLinkPlus } from '@mdi/js';
+import { mdiLinkPlus, mdiRestore } from '@mdi/js';
 import { Icon } from '@mdi/react';
 import cx from 'classnames';
 import { countBy, filter, flatMap } from 'lodash';
@@ -10,19 +10,24 @@ import ItemCount from '@/components/Utilities/ItemCount';
 import useNavigateVoid from '@/hooks/useNavigateVoid';
 
 import type { MatchRatingValues } from '@/core/types/api/episode';
-import type { TmdbEpisodeXrefType } from '@/core/types/api/tmdb';
+
+type RatedXrefType = {
+  Rating: MatchRatingValues;
+};
 
 type Props = {
   createInProgress: boolean;
   disableCreateLink: boolean;
   handleCreateLink: () => void;
+  handleResetLinks?: () => void;
   seriesId: number;
-  xrefs?: Record<string, TmdbEpisodeXrefType[]>;
+  xrefs?: Record<string, RatedXrefType[]>;
   xrefsCount?: number;
 };
 
 const TopPanel = (props: Props) => {
-  const { createInProgress, disableCreateLink, handleCreateLink, seriesId, xrefs, xrefsCount } = props;
+  const { createInProgress, disableCreateLink, handleCreateLink, handleResetLinks, seriesId, xrefs, xrefsCount } =
+    props;
   const navigate = useNavigateVoid();
 
   const flatXrefs = useMemo(
@@ -58,14 +63,16 @@ const TopPanel = (props: Props) => {
           <span>|</span>
           <div className="flex items-center gap-x-2">
             <div className="rounded-md bg-panel-text-important px-2 text-button-primary-text">
-              {(matchRatingCounts.DateAndTitleMatches ?? 0) + (matchRatingCounts.TitleMatches ?? 0)}
+              {(matchRatingCounts.DateAndTitleMatches ?? 0) + (matchRatingCounts.TitleMatches ?? 0)
+                + (matchRatingCounts.DateAndNumberMatches ?? 0)}
             </div>
             Perfect
           </div>
           <div className="flex items-center gap-x-2">
             <div className="rounded-md bg-panel-text-warning px-2 text-button-primary-text">
               {(matchRatingCounts.DateAndTitleKindaMatches ?? 0) + (matchRatingCounts.DateMatches ?? 0)
-                + (matchRatingCounts.TitleKindaMatches ?? 0) + (matchRatingCounts.DateKindaMatches ?? 0)}
+                + (matchRatingCounts.TitleKindaMatches ?? 0) + (matchRatingCounts.DateKindaMatches ?? 0)
+                + (matchRatingCounts.DateOffsetMatches ?? 0)}
             </div>
             Approximate
           </div>
@@ -82,6 +89,19 @@ const TopPanel = (props: Props) => {
             Override
           </div>
         </div>
+        {handleResetLinks && (
+          <Button
+            buttonType="secondary"
+            buttonSize="normal"
+            className="flex flex-row flex-wrap items-center gap-x-2 py-3"
+            onClick={handleResetLinks}
+            disabled={createInProgress}
+            tooltip="Remove all existing episode links and re-run the automatic matching"
+          >
+            <Icon path={mdiRestore} size={1} />
+            Reset Links
+          </Button>
+        )}
         <Button
           buttonType="secondary"
           buttonSize="normal"
diff --git a/src/components/Layout/TopNav.tsx b/src/components/Layout/TopNav.tsx
index 09c384763..df1a67d23 100644
--- a/src/components/Layout/TopNav.tsx
+++ b/src/components/Layout/TopNav.tsx
@@ -3,6 +3,7 @@ import type { MouseEvent } from 'react';
 import AnimateHeight from 'react-animate-height';
 import { Link, NavLink, useLocation } from 'react-router';
 import {
+  mdiCalendarMonthOutline,
   mdiCogOutline,
   mdiDownloadCircleOutline,
   mdiFileDocumentAlertOutline,
@@ -336,6 +337,12 @@ const TopNav = () => {
               path="utilities/missing-episodes"
               text="Missing Episodes"
             />
+            <LinkMenuItem
+              icon={mdiCalendarMonthOutline}
+              onClick={closeModalsAndSubmenus}
+              path="utilities/calendar"
+              text="Calendar"
+            />
           </div>
         </AnimateHeight>
       </div>
diff --git a/src/components/Settings/MetadataSitesSettings/AnilistDownloadSettings.tsx b/src/components/Settings/MetadataSitesSettings/AnilistDownloadSettings.tsx
new file mode 100644
index 000000000..15276f4ba
--- /dev/null
+++ b/src/components/Settings/MetadataSitesSettings/AnilistDownloadSettings.tsx
@@ -0,0 +1,94 @@
+import type { ChangeEventHandler } from 'react';
+
+import Checkbox from '@/components/Input/Checkbox';
+import InputSmall from '@/components/Input/InputSmall';
+
+import type { SettingsContextType } from '@/core/types/context';
+
+type Props = Omit<SettingsContextType, 'setNewSettings'>;
+
+const AnilistDownloadSettings = (props: Props) => {
+  const { newSettings, updateSetting } = props;
+
+  const {
+    AutoDownloadBanners,
+    AutoDownloadCharacters,
+    AutoDownloadPosters,
+    AutoDownloadStaff,
+    AutoDownloadStudios,
+    AutoPurgeUnlinkedAfterDays,
+    AutoSearchCandidateCount,
+  } = newSettings.Anilist;
+
+  const handleInputChange: ChangeEventHandler<HTMLInputElement> = (event) => {
+    const propId = event.target.id.replace('Anilist_', '');
+    const value = event.target.type === 'checkbox' ? event.target.checked : event.target.value;
+    updateSetting('Anilist', propId, value);
+  };
+
+  return (
+    <>
+      <Checkbox
+        justify
+        label="Download Staff"
+        id="Anilist_AutoDownloadStaff"
+        isChecked={AutoDownloadStaff}
+        onChange={handleInputChange}
+      />
+      <Checkbox
+        justify
+        label="Download Characters"
+        id="Anilist_AutoDownloadCharacters"
+        isChecked={AutoDownloadCharacters}
+        onChange={handleInputChange}
+      />
+      <Checkbox
+        justify
+        label="Download Studios"
+        id="Anilist_AutoDownloadStudios"
+        isChecked={AutoDownloadStudios}
+        onChange={handleInputChange}
+      />
+      <Checkbox
+        justify
+        label="Download Posters"
+        id="Anilist_AutoDownloadPosters"
+        isChecked={AutoDownloadPosters}
+        onChange={handleInputChange}
+      />
+      <Checkbox
+        justify
+        label="Download Banners"
+        id="Anilist_AutoDownloadBanners"
+        isChecked={AutoDownloadBanners}
+        onChange={handleInputChange}
+      />
+      <div className="flex items-center justify-between">
+        Auto-Search Candidate Count
+        <InputSmall
+          id="Anilist_AutoSearchCandidateCount"
+          value={AutoSearchCandidateCount}
+          type="number"
+          min={1}
+          max={20}
+          onChange={handleInputChange}
+          className="w-12 px-3 py-1"
+        />
+      </div>
+      <div className="flex items-center justify-between">
+        Purge Unlinked Anime After (Days)
+        <InputSmall
+          id="Anilist_AutoPurgeUnlinkedAfterDays"
+          value={AutoPurgeUnlinkedAfterDays}
+          type="number"
+          min={0}
+          max={365}
+          onChange={handleInputChange}
+          className="w-16 px-3 py-1"
+        />
+      </div>
+    </>
+  );
+};
+
+export default AnilistDownloadSettings;
diff --git a/src/components/Settings/MetadataSitesSettings/AnilistSettings.tsx b/src/components/Settings/MetadataSitesSettings/AnilistSettings.tsx
new file mode 100644
index 000000000..d0b1403b7
--- /dev/null
+++ b/src/components/Settings/MetadataSitesSettings/AnilistSettings.tsx
@@ -0,0 +1,68 @@
+import type { ChangeEvent, ChangeEventHandler } from 'react';
+import { produce } from 'immer';
+
+import Checkbox from '@/components/Input/Checkbox';
+
+import type { SettingsContextType } from '@/core/types/context';
+
+type Props = SettingsContextType;
+
+const AnilistSettings = (props: Props) => {
+  const { newSettings, setNewSettings, updateSetting } = props;
+
+  const {
+    AutoLink,
+    AutoLinkRestricted,
+    ConsiderExistingOtherLinks,
+  } = newSettings.Anilist;
+
+  const { includeRestricted } = newSettings.WebUI_Settings.collection.anilist;
+
+  const handleInputChange: ChangeEventHandler<HTMLInputElement> = (event) => {
+    const propId = event.target.id.replace('Anilist_', '');
+    const value = event.target.type === 'checkbox' ? event.target.checked : event.target.value;
+    updateSetting('Anilist', propId, value);
+  };
+
+  const handleIncludeRestrictedChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.checked;
+    setNewSettings(produce(newSettings, (draftState) => {
+      draftState.WebUI_Settings.collection.anilist.includeRestricted = value;
+    }));
+  };
+
+  return (
+    <>
+      <Checkbox
+        justify
+        label="Auto Link"
+        id="Anilist_AutoLink"
+        isChecked={AutoLink}
+        onChange={handleInputChange}
+      />
+      <Checkbox
+        justify
+        label="Auto Link Restricted"
+        id="Anilist_AutoLinkRestricted"
+        isChecked={AutoLinkRestricted}
+        onChange={handleInputChange}
+      />
+      <Checkbox
+        justify
+        label="Consider Existing Links From Other Sources"
+        id="Anilist_ConsiderExistingOtherLinks"
+        isChecked={ConsiderExistingOtherLinks}
+        onChange={handleInputChange}
+      />
+      <Checkbox
+        justify
+        label="Include Restricted in Search"
+        id="include-restricted-anilist"
+        isChecked={includeRestricted}
+        onChange={handleIncludeRestrictedChange}
+      />
+    </>
+  );
+};
+
+export default AnilistSettings;
diff --git a/src/core/anilistUtils.ts b/src/core/anilistUtils.ts
new file mode 100644
index 000000000..ef6fa100a
--- /dev/null
+++ b/src/core/anilistUtils.ts
@@ -0,0 +1,3 @@
+const ANILIST_BASE_URL = 'https://anilist.co';
+
+export const getAnilistAnimeLink = (anilistId: number | string) => `${ANILIST_BASE_URL}/anime/${anilistId}`;
diff --git a/src/core/react-query/anilist/helpers.ts b/src/core/react-query/anilist/helpers.ts
new file mode 100644
index 000000000..9e2254e67
--- /dev/null
+++ b/src/core/react-query/anilist/helpers.ts
@@ -0,0 +1,52 @@
+import { isAxiosError } from 'axios';
+import { toNumber } from 'lodash';
+
+import queryClient from '@/core/react-query/queryClient';
+
+export type AnilistUnavailableStateType = {
+  /**
+   * `503` when the AniList rate limiter is paused, `502` when the upstream
+   * request failed mid-flight.
+   */
+  status: 502 | 503;
+
+  /**
+   * Seconds until the request can be retried, from the `Retry-After`
+   * header, if present.
+   */
+  retryAfter: number | null;
+};
+
+/**
+ * Detects the "AniList is temporarily unavailable" responses returned by
+ * endpoints that talk to AniList directly.
+ */
+export const getAnilistUnavailableState = (error: unknown): AnilistUnavailableStateType | undefined => {
+  if (!isAxiosError(error)) return undefined;
+  const status = error.response?.status;
+  if (status !== 502 && status !== 503) return undefined;
+
+  const retryAfterHeader = (error.response?.headers as Record<string, unknown> | undefined)?.['retry-after'];
+  const retryAfter = toNumber(retryAfterHeader);
+
+  return {
+    status,
+    retryAfter: Number.isFinite(retryAfter) && retryAfter > 0 ? Math.ceil(retryAfter) : null,
+  };
+};
+
+export const getAnilistUnavailableMessage = (state: AnilistUnavailableStateType) => {
+  if (state.retryAfter) return `AniList is temporarily unavailable, try again in ${state.retryAfter} seconds.`;
+  return 'AniList is temporarily unavailable, try again later.';
+};
+
+/**
+ * Retry policy for queries that talk to AniList directly. The server already
+ * tells us when to retry through `Retry-After`, so we don't retry those
+ * responses ourselves; everything else falls through to the default policy.
+ */
+export const retryUnlessAnilistUnavailable = (failureCount: number, error: Error) => {
+  if (getAnilistUnavailableState(error)) return false;
+  const defaultRetry = queryClient.getDefaultOptions().queries?.retry;
+  return typeof defaultRetry === 'function' ? defaultRetry(failureCount, error) : false;
+};
diff --git a/src/core/react-query/anilist/mutations.ts b/src/core/react-query/anilist/mutations.ts
new file mode 100644
index 000000000..12725245f
--- /dev/null
+++ b/src/core/react-query/anilist/mutations.ts
@@ -0,0 +1,89 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { axios } from '@/core/axios';
+import { invalidateQueries } from '@/core/react-query/queryClient';
+
+import type {
+  AnilistAddAutoXrefsRequestType,
+  AnilistAddLinkRequestType,
+  AnilistDeleteLinkRequestType,
+  AnilistEditEpisodeXrefsRequestType,
+  AnilistExportRequestType,
+  AnilistImportRequestType,
+  AnilistRefreshRequestType,
+  AnilistSeriesRefreshRequestType,
+} from '@/core/react-query/anilist/types';
+
+export const useAnilistRefreshMutation = () =>
+  useMutation({
+    mutationFn: ({ anilistId, ...data }: AnilistRefreshRequestType) =>
+      axios.post(`Anilist/Anime/${anilistId}/Action/Refresh`, data),
+  });
+
+export const useAnilistSeriesRefreshMutation = (seriesId: number) =>
+  useMutation({
+    mutationFn: (data: AnilistSeriesRefreshRequestType = {}) =>
+      axios.post(`Series/${seriesId}/Anilist/Anime/Action/Refresh`, data),
+  });
+
+export const useAnilistScheduleAutoSearchMutation = (seriesId: number) =>
+  useMutation({
+    mutationFn: (force?: boolean) =>
+      axios.post(`Series/${seriesId}/Anilist/Action/AutoSearch`, null, { params: { force: force ?? false } }),
+  });
+
+export const useAnilistAddLinkMutation = (seriesId: number) =>
+  useMutation({
+    mutationFn: (data: AnilistAddLinkRequestType) => axios.post(`Series/${seriesId}/Anilist/Anime`, data),
+  });
+
+export const useDeleteAnilistLinkMutation = (seriesId: number) =>
+  useMutation({
+    mutationFn: (data: AnilistDeleteLinkRequestType = {}) => axios.delete(`Series/${seriesId}/Anilist/Anime`, { data }),
+  });
+
+export const useAnilistEditEpisodeXrefsMutation = (seriesId: number) =>
+  useMutation({
+    mutationFn: (data: AnilistEditEpisodeXrefsRequestType) =>
+      axios.post(`Series/${seriesId}/Anilist/Anime/CrossReferences/Episode`, data),
+  });
+
+export const useAnilistResetEpisodeXrefsMutation = (seriesId: number) =>
+  useMutation({
+    mutationFn: () => axios.delete(`Series/${seriesId}/Anilist/Anime/CrossReferences/Episode`),
+    onSuccess: () => {
+      invalidateQueries(['series', seriesId, 'anilist', 'cross-references']);
+    },
+  });
+
+export const useAnilistAddAutoXrefsMutation = (seriesId: number) =>
+  useMutation({
+    mutationFn: (data: AnilistAddAutoXrefsRequestType = {}) =>
+      axios.post(`Series/${seriesId}/Anilist/Anime/CrossReferences/Episode/Auto`, data),
+  });
+
+export const useDeleteAnilistAnimeMutation = () =>
+  useMutation({
+    mutationFn: (anilistId: number) => axios.delete(`Anilist/Anime/${anilistId}`),
+    onSuccess: () => {
+      invalidateQueries(['series', 'anilist', 'anime']);
+    },
+  });
+
+export const useAnilistExportMutation = () =>
+  useMutation({
+    mutationFn: (data: AnilistExportRequestType = {}) =>
+      axios.post<string, string>('Anilist/Export', data, { responseType: 'text' }),
+  });
+
+export const useAnilistImportMutation = () =>
+  useMutation({
+    mutationFn: ({ addMissingAnime, file, removeExisting }: AnilistImportRequestType) => {
+      const formData = new FormData();
+      formData.append('file', file);
+      return axios.post('Anilist/Import', formData, { params: { removeExisting, addMissingAnime } });
+    },
+    onSuccess: () => {
+      invalidateQueries(['series']);
+    },
+  });
diff --git a/src/core/react-query/anilist/queries.ts b/src/core/react-query/anilist/queries.ts
new file mode 100644
index 000000000..4f0a62e03
--- /dev/null
+++ b/src/core/react-query/anilist/queries.ts
@@ -0,0 +1,238 @@
+import { useInfiniteQuery, useQueries, useQuery } from '@tanstack/react-query';
+import { toNumber } from 'lodash';
+
+import { axios } from '@/core/axios';
+import { getAnilistUnavailableState, retryUnlessAnilistUnavailable } from '@/core/react-query/anilist/helpers';
+import { transformListResultSimplified } from '@/core/react-query/helpers';
+
+import type {
+  AnilistAnimeEpisodesRequestType,
+  AnilistAnimeListRequestType,
+  AnilistAnimeRequestType,
+  AnilistAutoXrefsPreviewRequestType,
+  AnilistEpisodeIncludeValues,
+  AnilistSearchRequestType,
+} from '@/core/react-query/anilist/types';
+import type { ListResultType } from '@/core/types/api';
+import type {
+  AnilistAnimeType,
+  AnilistAnimeXrefType,
+  AnilistAutoSearchResultType,
+  AnilistEpisodeType,
+  AnilistEpisodeXrefType,
+  AnilistSearchResultType,
+} from '@/core/types/api/anilist';
+import type { AniDBSeriesType, SeriesCast, SeriesType } from '@/core/types/api/series';
+
+export const useAnilistAutoSearchQuery = (seriesId: number, enabled = true) =>
+  useQuery<AnilistAutoSearchResultType[]>({
+    queryKey: ['series', seriesId, 'anilist', 'auto-search'],
+    queryFn: () => axios.get(`Series/${seriesId}/Anilist/Action/AutoSearch`),
+    retry: retryUnlessAnilistUnavailable,
+    enabled,
+  });
+
+export const useSeriesAnilistAnimeQuery = (seriesId: number, params: AnilistAnimeRequestType = {}, enabled = true) =>
+  useQuery<AnilistAnimeType[]>({
+    queryKey: ['series', seriesId, 'anilist', 'anime', params],
+    queryFn: () => axios.get(`Series/${seriesId}/Anilist/Anime`, { params }),
+    enabled,
+  });
+
+export const useAnilistAnimeXrefsQuery = (seriesId: number, enabled = true) =>
+  useQuery<AnilistAnimeXrefType[]>({
+    queryKey: ['series', seriesId, 'anilist', 'cross-references', 'anime'],
+    queryFn: () => axios.get(`Series/${seriesId}/Anilist/Anime/CrossReferences`),
+    enabled,
+  });
+
+export const useAnilistEpisodeXrefsQuery = (
+  seriesId: number,
+  isNewLink: boolean,
+  anilistAnimeID: number,
+  enabled = true,
+) =>
+  useQuery<ListResultType<AnilistEpisodeXrefType>, unknown, AnilistEpisodeXrefType[]>({
+    queryKey: ['series', seriesId, 'anilist', 'cross-references', 'episode', isNewLink, anilistAnimeID],
+    queryFn: () =>
+      axios.get(
+        `Series/${seriesId}/Anilist/Anime/CrossReferences/Episode${isNewLink ? '/Auto' : ''}`,
+        { params: { pageSize: 0, anilistAnimeID: isNewLink ? anilistAnimeID : undefined } },
+      ),
+    select: transformListResultSimplified,
+    enabled,
+  });
+
+export const useAnilistAutoEpisodeXrefsPreviewQuery = (
+  seriesId: number,
+  params: AnilistAutoXrefsPreviewRequestType,
+  enabled = true,
+) =>
+  useQuery<ListResultType<AnilistEpisodeXrefType>, unknown, AnilistEpisodeXrefType[]>({
+    queryKey: ['series', seriesId, 'anilist', 'cross-references', 'episode', 'auto-preview', params],
+    queryFn: () =>
+      axios.get(
+        `Series/${seriesId}/Anilist/Anime/CrossReferences/Episode/Auto`,
+        { params: { pageSize: 0, ...params } },
+      ),
+    select: transformListResultSimplified,
+    enabled,
+  });
+
+export const useEpisodeAnilistEpisodesQuery = (
+  episodeId: number,
+  include: AnilistEpisodeIncludeValues[] = [],
+  enabled = true,
+) =>
+  useQuery<AnilistEpisodeType[]>({
+    queryKey: ['episode', episodeId, 'anilist', 'episode', include],
+    queryFn: () => axios.get(`Episode/${episodeId}/Anilist/Episode`, { params: { include } }),
+    enabled,
+  });
+
+export const useEpisodeAnilistEpisodeXrefsQuery = (episodeId: number, enabled = true) =>
+  useQuery<AnilistEpisodeXrefType[]>({
+    queryKey: ['episode', episodeId, 'anilist', 'cross-references'],
+    queryFn: () => axios.get(`Episode/${episodeId}/Anilist/Episode/CrossReferences`),
+    enabled,
+  });
+
+export const useAnilistAnimeListQuery = (params: AnilistAnimeListRequestType, enabled = true) =>
+  useInfiniteQuery<ListResultType<AnilistAnimeType>>({
+    queryKey: ['series', 'anilist', 'anime', 'list', params],
+    queryFn: ({ pageParam }) => axios.get('Anilist/Anime', { params: { ...params, page: pageParam as number } }),
+    initialPageParam: 1,
+    getNextPageParam: (lastPage, _, lastPageParam: number) => {
+      if (!params.pageSize || lastPage.Total / params.pageSize <= lastPageParam) return undefined;
+      return lastPageParam + 1;
+    },
+    enabled,
+  });
+
+export const useAnilistAnimeQuery = (anilistId: number, params: AnilistAnimeRequestType = {}, enabled = true) =>
+  useQuery<AnilistAnimeType>({
+    queryKey: ['series', 'anilist', 'anime', anilistId, params],
+    queryFn: () => axios.get(`Anilist/Anime/${anilistId}`, { params }),
+    enabled,
+  });
+
+export const useAnilistAnimeOnlineQuery = (anilistId: number, enabled = true) =>
+  useQuery<AnilistSearchResultType>({
+    queryKey: ['series', 'anilist', 'anime', 'online', anilistId],
+    queryFn: () => axios.get(`Anilist/Anime/Online/${anilistId}`),
+    retry: retryUnlessAnilistUnavailable,
+    enabled,
+  });
+
+export const useAnilistAnimeXrefsByAnimeQuery = (anilistId: number, enabled = true) =>
+  useQuery<AnilistAnimeXrefType[]>({
+    queryKey: ['series', 'anilist', 'anime', anilistId, 'cross-references'],
+    queryFn: () => axios.get(`Anilist/Anime/${anilistId}/CrossReferences`),
+    enabled,
+  });
+
+export const useAnilistAnimeEpisodesQuery = (
+  anilistId: number,
+  params: AnilistAnimeEpisodesRequestType,
+  enabled = true,
+) =>
+  useInfiniteQuery<ListResultType<AnilistEpisodeType>>({
+    queryKey: ['series', 'anilist', 'episodes', anilistId, params],
+    queryFn: ({ pageParam }) =>
+      axios.get(
+        `Anilist/Anime/${anilistId}/Episode`,
+        { params: { ...params, page: pageParam as number } },
+      ),
+    initialPageParam: 1,
+    getNextPageParam: (lastPage, _, lastPageParam: number) => {
+      if (!params.pageSize || lastPage.Total / params.pageSize <= lastPageParam) return undefined;
+      return lastPageParam + 1;
+    },
+    enabled,
+    staleTime: Infinity,
+  });
+
+export const useAnilistAnimeAllEpisodesQuery = (anilistId: number, enabled = true) =>
+  useQuery<ListResultType<AnilistEpisodeType>, unknown, AnilistEpisodeType[]>({
+    queryKey: ['series', 'anilist', 'episodes', anilistId, 'all'],
+    queryFn: () => axios.get(`Anilist/Anime/${anilistId}/Episode`, { params: { pageSize: 0 } }),
+    select: transformListResultSimplified,
+    enabled,
+    staleTime: Infinity,
+  });
+
+export const useAnilistAnimeAnidbAnimeQuery = (anilistId: number, enabled = true) =>
+  useQuery<AniDBSeriesType[]>({
+    queryKey: ['series', 'anilist', 'anime', anilistId, 'anidb'],
+    queryFn: () => axios.get(`Anilist/Anime/${anilistId}/AniDB/Anime`),
+    enabled,
+  });
+
+export const useAnilistAnimeShokoSeriesQuery = (anilistId: number, enabled = true) =>
+  useQuery<SeriesType[]>({
+    queryKey: ['series', 'anilist', 'anime', anilistId, 'shoko'],
+    queryFn: () => axios.get(`Anilist/Anime/${anilistId}/Shoko/Series`),
+    enabled,
+  });
+
+export const useAnilistSearchQuery = (query: string, params: AnilistSearchRequestType) =>
+  useQuery<AnilistSearchResultType[]>({
+    queryKey: ['series', 'anilist', 'search', query, params],
+    queryFn: async () => {
+      const finalData: AnilistSearchResultType[] = [];
+
+      if (toNumber(query) !== 0) {
+        try {
+          const idLookupData: AnilistSearchResultType = await axios.get(`Anilist/Anime/Online/${query}`);
+          finalData.push(idLookupData);
+        } catch (error) {
+          // Surface upstream outages, otherwise ignore, anime not found on AniList with provided ID
+          if (getAnilistUnavailableState(error)) throw error;
+        }
+      }
+
+      const searchData: ListResultType<AnilistSearchResultType> = await axios.get('Anilist/Anime/Online/Search', {
+        params: { ...params, query },
+      });
+      finalData.push(...searchData.List.filter(result => result.ID !== finalData[0]?.ID));
+
+      return finalData;
+    },
+    retry: retryUnlessAnilistUnavailable,
+    enabled: query.length > 0,
+  });
+
+const anilistAnimeCastQueryOptions = (anilistId: number, enabled: boolean) => ({
+  queryKey: ['series', 'anilist', 'anime', anilistId, 'cast'],
+  queryFn: (): Promise<SeriesCast[]> => axios.get(`Anilist/Anime/${anilistId}/Cast`),
+  enabled,
+});
+
+const anilistAnimeCrewQueryOptions = (anilistId: number, enabled: boolean) => ({
+  queryKey: ['series', 'anilist', 'anime', anilistId, 'crew'],
+  queryFn: (): Promise<SeriesCast[]> => axios.get(`Anilist/Anime/${anilistId}/Crew`),
+  enabled,
+});
+
+export const useAnilistAnimeCastQuery = (anilistId: number, enabled = true) =>
+  useQuery(anilistAnimeCastQueryOptions(anilistId, enabled));
+
+export const useAnilistAnimeCrewQuery = (anilistId: number, enabled = true) =>
+  useQuery(anilistAnimeCrewQueryOptions(anilistId, enabled));
+
+/**
+ * Fetches the cast and crew for every given AniList anime and concatenates
+ * them into a single list.
+ */
+export const useAnilistAnimeCreditsQueries = (anilistIds: number[], enabled = true) =>
+  useQueries({
+    queries: anilistIds.flatMap(anilistId => [
+      anilistAnimeCastQueryOptions(anilistId, enabled),
+      anilistAnimeCrewQueryOptions(anilistId, enabled),
+    ]),
+    combine: results => ({
+      data: results.flatMap(result => result.data ?? []),
+      isPending: results.some(result => result.isPending),
+      isFetching: results.some(result => result.isFetching),
+    }),
+  });
diff --git a/src/core/react-query/anilist/types.ts b/src/core/react-query/anilist/types.ts
new file mode 100644
index 000000000..1ada31a26
--- /dev/null
+++ b/src/core/react-query/anilist/types.ts
@@ -0,0 +1,98 @@
+import type { PaginationType } from '@/core/types/api';
+
+export type AnilistSeriesRefreshRequestType = {
+  Force?: boolean;
+  DownloadImages?: boolean;
+  /** `null` follows the settings. */
+  DownloadCharactersAndStaff?: boolean | null;
+  Immediate?: boolean;
+  /** Fetch only the anime and its episodes, skipping images, characters and staff. */
+  QuickRefresh?: boolean;
+};
+
+export type AnilistRefreshRequestType = {
+  anilistId: number;
+} & AnilistSeriesRefreshRequestType;
+
+export type AnilistAddLinkRequestType = {
+  ID: number;
+  Replace?: boolean;
+  Refresh?: boolean;
+};
+
+export type AnilistDeleteLinkRequestType = {
+  ID?: number;
+  Purge?: boolean;
+};
+
+export type AnilistAddAutoXrefsRequestType = {
+  AnilistAnimeID?: number;
+  KeepExisting?: boolean;
+  ConsiderExistingOtherLinks?: boolean | null;
+};
+
+export type AnilistAutoXrefsPreviewRequestType = {
+  anilistAnimeID?: number;
+  keepExisting?: boolean;
+  considerExistingOtherLinks?: boolean | null;
+} & PaginationType;
+
+export type AnilistEpisodeXrefMappingRequestType = {
+  AniDBID: number;
+  AnilistID: number;
+  Replace?: boolean;
+  Index?: number | null;
+};
+
+export type AnilistEditEpisodeXrefsRequestType = {
+  UnsetAll?: boolean;
+  Mapping: AnilistEpisodeXrefMappingRequestType[];
+};
+
+export type AnilistSearchRequestType = {
+  includeRestricted?: boolean;
+} & PaginationType;
+
+export type AnilistAnimeIncludeValues =
+  | 'Synonyms'
+  | 'Titles'
+  | 'Overviews'
+  | 'Images'
+  | 'MalIDs'
+  | 'Tags'
+  | 'Studios'
+  | 'CrossReferences';
+
+export type AnilistEpisodeIncludeValues = 'CrossReferences';
+
+export type AnilistAnimeListRequestType = {
+  search?: string;
+  fuzzy?: boolean;
+  include?: AnilistAnimeIncludeValues[];
+  restricted?: 'True' | 'False' | 'Only';
+} & PaginationType;
+
+export type AnilistAnimeRequestType = {
+  include?: AnilistAnimeIncludeValues[];
+};
+
+export type AnilistAnimeEpisodesRequestType = {
+  include?: AnilistEpisodeIncludeValues[];
+} & PaginationType;
+
+export type AnilistExportRequestType = {
+  AnidbEpisodeID?: number | null;
+  AnidbAnimeID?: number | null;
+  AnilistAnimeID?: number | null;
+  AnilistEpisodeID?: number | null;
+  Automatic?: 'True' | 'False' | 'Only';
+  WithEpisodes?: 'True' | 'False' | 'Only';
+  IncludeComments?: boolean;
+  SectionSet?: ('Anime' | 'Episode')[] | null;
+};
+
+export type AnilistImportRequestType = {
+  file: File;
+  removeExisting?: boolean;
+  addMissingAnime?: boolean;
+};
diff --git a/src/core/react-query/dashboard/queries.ts b/src/core/react-query/dashboard/queries.ts
index f091dac54..188b0f1b4 100644
--- a/src/core/react-query/dashboard/queries.ts
+++ b/src/core/react-query/dashboard/queries.ts
@@ -5,6 +5,7 @@ import { transformSeriesSummary } from '@/core/react-query/dashboard/helpers';
 import { transformListResultSimplified } from '@/core/react-query/helpers';
 
 import type {
+  DashboardCalendarEpisodesRequestType,
   DashboardCalendarRequestType,
   DashboardContinueWatchingRequestType,
   DashboardNextUpRequestType,
@@ -24,6 +25,13 @@ export const useDashboardCalendarQuery = (params: DashboardCalendarRequestType)
     queryFn: () => axios.get('Dashboard/AniDBCalendar', { params }),
   });
 
+export const useDashboardCalendarEpisodesQuery = (params: DashboardCalendarEpisodesRequestType, enabled = true) =>
+  useQuery<DashboardEpisodeDetailsType[]>({
+    queryKey: ['dashboard', 'calendar', 'episodes', params],
+    queryFn: () => axios.get('Dashboard/CalendarEpisodes', { params }),
+    enabled,
+  });
+
 export const useDashboardContinueWatchingQuery = (params: DashboardContinueWatchingRequestType) =>
   useQuery<ListResultType<DashboardEpisodeDetailsType>, unknown, DashboardEpisodeDetailsType[]>({
     queryKey: ['dashboard', 'continue-watching', params],
diff --git a/src/core/react-query/dashboard/types.ts b/src/core/react-query/dashboard/types.ts
index bcaa10be2..9dd877a66 100644
--- a/src/core/react-query/dashboard/types.ts
+++ b/src/core/react-query/dashboard/types.ts
@@ -1,4 +1,5 @@
 import type { DashboardRequestType } from '@/core/react-query/types';
+import type { EpisodeTypeValues } from '@/core/types/api/episode';
 
 export type DashboardCalendarRequestType = {
   includeRestricted?: boolean;
@@ -12,3 +13,16 @@ export type DashboardContinueWatchingRequestType = {
 export type DashboardNextUpRequestType = {
   onlyUnwatched?: boolean;
 } & DashboardRequestType;
+
+export type DashboardCalendarEpisodesRequestType = {
+  /** Inclusive start of the range, `YYYY-MM-DD`. */
+  startDate: string;
+  /** Inclusive end of the range, `YYYY-MM-DD`. */
+  endDate: string;
+  includeMissing?: 'True' | 'False' | 'Only';
+  includeRestricted?: 'True' | 'False' | 'Only';
+  /** `Only` keeps episodes with a known broadcast time, `False` those without, `True` (default) all. */
+  includeWithAirTime?: 'True' | 'False' | 'Only';
+  /** AniDB episode types to include. Omitted, the server defaults to `Episode` only. */
+  type?: EpisodeTypeValues[];
+};
diff --git a/src/core/react-query/series/mutations.ts b/src/core/react-query/series/mutations.ts
index 3223488d3..29318866a 100644
--- a/src/core/react-query/series/mutations.ts
+++ b/src/core/react-query/series/mutations.ts
@@ -121,6 +121,25 @@ export const useUpdateSeriesTMDBImagesMutation = (seriesId: number) =>
     onSuccess: () => toast.success('TMDB image download queued!'),
   });
 
+export const useAutoSearchAnilistMatchMutation = (seriesId: number) =>
+  useMutation({
+    mutationFn: () => axios.post(`Series/${seriesId}/Anilist/Action/AutoSearch`),
+    onSuccess: () => toast.success('AniList auto-search queued!'),
+  });
+
+export const useRefreshSeriesAnilistInfoMutation = (seriesId: number) =>
+  useMutation({
+    mutationFn: () => axios.post(`Series/${seriesId}/Anilist/Anime/Action/Refresh`, {}),
+    onSuccess: () => toast.success('AniList refresh queued!'),
+  });
+
+export const useUpdateSeriesAnilistImagesMutation = (seriesId: number) =>
+  useMutation({
+    mutationFn: ({ force = false }: { force?: boolean }) =>
+      axios.post(`Series/${seriesId}/Anilist/Anime/Action/DownloadImages`, { force }),
+    onSuccess: () => toast.success('AniList image download queued!'),
+  });
+
 export const useRelocateSeriesFilesMutation = (seriesId: number) =>
   useMutation({
     mutationFn: () => axios.post(`Series/${seriesId}/File/Relocate`),
diff --git a/src/core/react-query/settings/helpers.ts b/src/core/react-query/settings/helpers.ts
index 2766060d4..f3c5cda85 100644
--- a/src/core/react-query/settings/helpers.ts
+++ b/src/core/react-query/settings/helpers.ts
@@ -287,6 +287,9 @@ export const initialSettings: SettingsType = {
       tmdb: {
         includeRestricted: false,
       },
+      anilist: {
+        includeRestricted: false,
+      },
       anidb: {
         filterDescription: false,
       },
@@ -372,6 +375,23 @@ export const initialSettings: SettingsType = {
     AutoDownloadStudioImages: true,
     UserApiKey: null,
   },
+  Anilist: {
+    AutoLink: false,
+    AutoLinkRestricted: true,
+    ConsiderExistingOtherLinks: false,
+    AutoDownloadStaff: false,
+    AutoDownloadCharacters: false,
+    ImageCdnUrl: null,
+    AutoDownloadPosters: true,
+    AutoDownloadBanners: true,
+    AutoDownloadStudios: false,
+    AutoSearchCandidateCount: 5,
+    AutoPurgeUnlinkedAfterDays: 14,
+    RateLimit: {
+      MaxRequestsPerWindow: 1,
+      WindowDurationMs: 4000,
+    },
+  },
   Language: {
     UseSynonyms: false,
     SeriesTitleLanguageOrder: ['x-main'],
diff --git a/src/core/router/index.tsx b/src/core/router/index.tsx
index 9b982266b..70558b808 100644
--- a/src/core/router/index.tsx
+++ b/src/core/router/index.tsx
@@ -10,6 +10,7 @@ import { useSelector } from '@/core/store';
 import { BodyVisibleContext } from '@/hooks/useBodyVisibleContext';
 import Collection from '@/pages/collection/Collection';
 import Series from '@/pages/collection/Series';
+import AnilistLinking from '@/pages/collection/series/AnilistLinking';
 import SeriesCredits from '@/pages/collection/series/SeriesCredits';
 import SeriesEpisodes from '@/pages/collection/series/SeriesEpisodes';
 import SeriesFileSummary from '@/pages/collection/series/SeriesFileSummary';
@@ -33,6 +34,7 @@ import SentryErrorBoundaryWrapper from '@/pages/SentryErrorBoundaryWrapper';
 import PluginPageEmbed from '@/pages/settings/plugin/PluginPageEmbed';
 import SettingsPage from '@/pages/settings/SettingsPage';
 import AniDBSettings from '@/pages/settings/tabs/AniDBSettings';
+import AnilistSettings from '@/pages/settings/tabs/AnilistSettings';
 import ApiKeys from '@/pages/settings/tabs/ApiKeys';
 import CollectionSettings from '@/pages/settings/tabs/CollectionSettings';
 import GeneralSettings from '@/pages/settings/tabs/GeneralSettings';
@@ -44,6 +46,7 @@ import TmdbSettings from '@/pages/settings/tabs/TmdbSettings';
 import UserManagementSettings from '@/pages/settings/tabs/UserManagementSettings';
 import StatusPage from '@/pages/StatusPage';
 import UnsupportedPage from '@/pages/unsupported/UnsupportedPage';
+import Calendar from '@/pages/utilities/Calendar';
 import DuplicateFilesLinkedTab from '@/pages/utilities/DuplicateFilesTabs/DuplicateFilesLinkedTab';
 import DuplicateFilesUnrecognizedTab from '@/pages/utilities/DuplicateFilesTabs/DuplicateFilesUnrecognizedTab';
 import FileSearch from '@/pages/utilities/FileSearch';
@@ -106,6 +109,7 @@ const router = sentryCreateBrowserRouter(
             <Route path="file-search" element={<FileSearch />} />
             <Route path="renamer" element={<Renamer />} />
             <Route path="link-with-providers" element={<LinkFilesWithProviders />} />
+            <Route path="calendar" element={<Calendar />} />
           </Route>
           <Route path="log" element={<LogsPage />} />
           <Route path="collection">
@@ -124,6 +128,7 @@ const router = sentryCreateBrowserRouter(
               <Route path="tags" element={<SeriesTags />} />
             </Route>
             <Route path="series/:seriesId/tmdb-linking" element={<TmdbLinking />} />
+            <Route path="series/:seriesId/anilist-linking" element={<AnilistLinking />} />
           </Route>
           <Route path="settings" element={<SettingsPage />}>
             <Route index element={<Navigate to="general" replace />} />
@@ -132,6 +137,7 @@ const router = sentryCreateBrowserRouter(
             <Route path="hashing-release" element={<HashingAndReleaseSettings />} />
             <Route path="anidb" element={<AniDBSettings />} />
             <Route path="tmdb" element={<TmdbSettings />} />
+            <Route path="anilist" element={<AnilistSettings />} />
             <Route path="collection" element={<CollectionSettings />} />
             <Route path="integrations" element={<IntegrationsSettings />} />
             <Route path="plugin-management">
diff --git a/src/core/types/api/anilist.ts b/src/core/types/api/anilist.ts
new file mode 100644
index 000000000..34b038c5f
--- /dev/null
+++ b/src/core/types/api/anilist.ts
@@ -0,0 +1,133 @@
+import type { ImageType, RatingType } from '@/core/types/api/common';
+import type { MatchRatingValues } from '@/core/types/api/episode';
+
+export type AnilistAnimeTypeValues =
+  | 'Unknown'
+  | 'TVSeries'
+  | 'TVShort'
+  | 'Movie'
+  | 'OVA'
+  | 'Web'
+  | 'TVSpecial'
+  | 'MusicVideo';
+
+export type AnilistMediaStatusValues =
+  | 'Unknown'
+  | 'Finished'
+  | 'Releasing'
+  | 'NotYetReleased'
+  | 'Cancelled'
+  | 'Hiatus';
+
+export type AnilistSeasonValues = 'Winter' | 'Spring' | 'Summer' | 'Fall';
+
+/**
+ * A partial date as serialized by the server. Only the year is guaranteed to
+ * be present.
+ */
+export type AnilistPartialDateType = string;
+
+export type AnilistRatingType = Omit<RatingType, 'Type'> & {
+  Type: string;
+};
+
+export type AnilistTagType = {
+  ID: number;
+  Name: string;
+  Description?: string | null;
+  Rank: number;
+  IsSpoiler: boolean;
+};
+
+export type AnilistStudioType = {
+  ID: number;
+  Name: string;
+  CountryOfOrigin: string;
+  Size: number;
+  Logos: ImageType[];
+  Source: string;
+};
+
+export type AnilistAnimeXrefType = {
+  AnidbAnimeID: number;
+  AnilistAnimeID: number;
+  Rating: MatchRatingValues;
+};
+
+export type AnilistEpisodeXrefType = {
+  AnidbAnimeID: number;
+  AnidbEpisodeID: number;
+  AnilistAnimeID: number;
+  AnilistEpisodeID: number;
+  EpisodeNumber: number;
+  Index: number;
+  Rating: MatchRatingValues;
+};
+
+export type AnilistAnimeType = {
+  ID: number;
+  Title: string;
+  /** Transcribed canonical title; romaji for japanese anime, pinyin for chinese. */
+  MainTitle: string;
+  NativeTitle: string;
+  Synonyms?: string[];
+  Overview: string;
+  OriginalLanguage: string;
+  IsRestricted: boolean;
+  UserRating: AnilistRatingType;
+  MeanScore: number;
+  Popularity: number;
+  FavoriteCount: number;
+  Type: AnilistAnimeTypeValues;
+  Status: AnilistMediaStatusValues;
+  Source: string;
+  Season?: AnilistSeasonValues | null;
+  SeasonYear?: number | null;
+  EpisodeCount: number;
+  EpisodeDuration?: number | null;
+  Genres: string[];
+  CoverImage?: string | null;
+  BannerImage?: string | null;
+  Color?: string | null;
+  MalIDs?: number[];
+  Tags?: AnilistTagType[];
+  Studios?: AnilistStudioType[];
+  CrossReferences?: AnilistAnimeXrefType[];
+  StartedAt?: AnilistPartialDateType | null;
+  EndedAt?: AnilistPartialDateType | null;
+  CreatedAt: string;
+  LastUpdatedAt: string;
+};
+
+export type AnilistEpisodeType = {
+  ID: number;
+  AnimeID: number;
+  ScheduleID?: number | null;
+  EpisodeNumber: number;
+  Runtime: string;
+  AiredAt?: string | null;
+  CreatedAt: string;
+  LastUpdatedAt: string;
+  CrossReferences?: AnilistEpisodeXrefType[];
+};
+
+export type AnilistSearchResultType = {
+  ID: number;
+  Title: string;
+  OriginalTitle: string;
+  OriginalLanguage: string;
+  Overview: string;
+  IsRestricted: boolean;
+  Type: AnilistAnimeTypeValues;
+  FirstAiredAt?: AnilistPartialDateType | null;
+  CoverImage?: string | null;
+  BannerImage?: string | null;
+  UserRating: AnilistRatingType;
+};
+
+export type AnilistAutoSearchResultType = {
+  AnimeID: number;
+  IsLocal: boolean;
+  IsRemote: boolean;
+  Anime: AnilistSearchResultType;
+};
diff --git a/src/core/types/api/dashboard.ts b/src/core/types/api/dashboard.ts
index 1d9948ac1..10d56ea07 100644
--- a/src/core/types/api/dashboard.ts
+++ b/src/core/types/api/dashboard.ts
@@ -41,7 +41,14 @@ export type DashboardEpisodeDetailsType = {
   Title: string;
   Number: number;
   Type: EpisodeTypeValues;
+  /** UTC calendar day of the broadcast (`YYYY-MM-DD`) when the time is known, otherwise the AniDB air date. */
   AirDate: string | null;
+  /** ISO UTC datetime; midnight UTC on `AirDate` when no broadcast time is known. */
+  AiredAt: string | null;
+  /** `AiredAt` carries a real broadcast time (from AniList, or estimated). */
+  HasAirTime: boolean;
+  /** The broadcast time is an estimate learned from the series' other episodes. */
+  IsAirTimeEstimated: boolean;
   Duration: string;
   ResumePosition: string | null;
   Watched: string | null;
diff --git a/src/core/types/api/episode.ts b/src/core/types/api/episode.ts
index 1c006f8e4..14356a8b9 100644
--- a/src/core/types/api/episode.ts
+++ b/src/core/types/api/episode.ts
@@ -58,10 +58,12 @@ export type AniDBEpisodeType = {
 };
 
 export type MatchRatingValues =
+  | 'DateAndNumberMatches'
   | 'DateAndTitleKindaMatches'
   | 'DateAndTitleMatches'
   | 'DateKindaMatches'
   | 'DateMatches'
+  | 'DateOffsetMatches'
   | 'FirstAvailable'
   | 'None'
   | 'TitleKindaMatches'
diff --git a/src/core/types/api/image.ts b/src/core/types/api/image.ts
index 2ec29f089..5b1e12151 100644
--- a/src/core/types/api/image.ts
+++ b/src/core/types/api/image.ts
@@ -15,4 +15,4 @@ export type RandomImageMetadataResultType = {
   };
 };
 
-export type ImageTabType = 'Posters' | 'Backdrops' | 'Logos';
+export type ImageTabType = 'Posters' | 'Backdrops' | 'Banners' | 'Logos';
diff --git a/src/core/types/api/series.ts b/src/core/types/api/series.ts
index ee0605d70..1b556dde0 100644
--- a/src/core/types/api/series.ts
+++ b/src/core/types/api/series.ts
@@ -28,6 +28,7 @@ export type SeriesIDsType = {
   ParentGroup: number;
   TopLevelGroup: number;
   AniDB: number;
+  AniList: number[];
   MAL: number[];
   TMDB: {
     Movie: number[];
@@ -89,10 +90,20 @@ export type SeriesTitleType = {
   Type: string;
 };
 
+export type SeriesLinkTypeValues =
+  | 'Website'
+  | 'Streaming'
+  | 'Metadata'
+  | 'CrossReference'
+  | 'Social'
+  | 'Trailer';
+
 export type SeriesLinkType = {
-  Type: string;
+  Type: SeriesLinkTypeValues;
   Name: string;
   URL: string;
+  /** Language/region code for per-region links, eg. AniList streaming links. */
+  LanguageCode?: string | null;
 };
 
 export type SeriesSizesType = {
@@ -172,7 +183,12 @@ export type SeriesRolePerson = {
 };
 
 export type SeriesCast = {
-  Language: string;
+  /**
+   * Language code of the role, eg. `ja`, `en`. AniDB and TMDB roles report
+   * the work's original language, AniList roles report the language the
+   * voice actor or dub staff member performs in. Omitted when unknown.
+   */
+  Language?: string;
   Staff: SeriesRolePerson;
   Character?: SeriesRolePerson;
   RoleName: string;
diff --git a/src/core/types/api/settings.ts b/src/core/types/api/settings.ts
index 484d82ea1..e3e83a947 100644
--- a/src/core/types/api/settings.ts
+++ b/src/core/types/api/settings.ts
@@ -247,6 +247,110 @@ export type SettingsTMDBType = {
   UserApiKey: string | null;
 };
 
+export type SettingsAnilistType = {
+  /**
+   * Automagically link AniDB anime to AniList anime.
+   *
+   * @default false
+   */
+  AutoLink: boolean;
+
+  /**
+   * Automagically link restricted AniDB anime to AniList anime.
+   * {@link AutoLink} also needs to be set for this setting to take
+   * effect.
+   *
+   * @default true
+   */
+  AutoLinkRestricted: boolean;
+
+  /**
+   * Consider existing links from other providers when auto-matching
+   * episodes.
+   *
+   * @default false
+   */
+  ConsiderExistingOtherLinks: boolean;
+
+  /**
+   * Automagically download staff for AniList anime.
+   *
+   * @default false
+   */
+  AutoDownloadStaff: boolean;
+
+  /**
+   * Automagically download characters for AniList anime.
+   *
+   * @default false
+   */
+  AutoDownloadCharacters: boolean;
+
+  /**
+   * Optional. Image CDN base URL to use instead of the default AniList CDN.
+   *
+   * @default null
+   */
+  ImageCdnUrl: string | null;
+
+  /**
+   * Automagically download posters for AniList anime.
+   *
+   * @default true
+   */
+  AutoDownloadPosters: boolean;
+
+  /**
+   * Automagically download banners for AniList anime.
+   *
+   * @default true
+   */
+  AutoDownloadBanners: boolean;
+
+  /**
+   * Automagically download studios for AniList anime.
+   *
+   * @default false
+   */
+  AutoDownloadStudios: boolean;
+
+  /**
+   * The number of candidates to consider during an auto-search.
+   *
+   * @default 5
+   */
+  AutoSearchCandidateCount: number;
+
+  /**
+   * Purge unlinked AniList anime after the given number of days. Set to 0 to
+   * disable.
+   *
+   * @default 14
+   */
+  AutoPurgeUnlinkedAfterDays: number;
+
+  /**
+   * AniList request rate limit.
+   */
+  RateLimit: SettingsAnilistRateLimitType;
+};
+
+export type SettingsAnilistRateLimitType = {
+  /**
+   * Maximum number of requests per window. Range 1-90.
+   *
+   * @default 1
+   */
+  MaxRequestsPerWindow: number;
+
+  /**
+   * Window duration in milliseconds. Range 1000-120000.
+   *
+   * @default 4000
+   */
+  WindowDurationMs: number;
+};
+
 export type SettingsLanguageType = {
   /**
    * Use synonyms when selecting the preferred language from AniDB.
@@ -389,6 +493,7 @@ export type SettingsServerType = {
     & SettingsAnidbMylistType
     & SettingsAnidbUpdateType;
   TMDB: SettingsTMDBType;
+  Anilist: SettingsAnilistType;
   Language: SettingsLanguageType;
   Plex: SettingsPlexType;
   Logging: SettingsLoggingType;
@@ -433,6 +538,9 @@ export type WebUISettingsType = {
     tmdb: {
       includeRestricted: boolean;
     };
+    anilist: {
+      includeRestricted: boolean;
+    };
     anidb: {
       filterDescription: boolean;
     };
diff --git a/src/core/util.ts b/src/core/util.ts
index 0ebdd3612..9cf658275 100644
--- a/src/core/util.ts
+++ b/src/core/util.ts
@@ -29,6 +29,7 @@ dayjs.extend(customParseFormatPlugin);
 export { default as dayjs } from 'dayjs';
 
 export * from '@/core/anidbUtils';
+export * from '@/core/anilistUtils';
 
 /**
  * Shared stale time: ~100 days. Used for relatively static data that rarely changes server-side.
diff --git a/src/pages/collection/series/AnilistLinking.tsx b/src/pages/collection/series/AnilistLinking.tsx
new file mode 100644
index 000000000..6133bc07c
--- /dev/null
+++ b/src/pages/collection/series/AnilistLinking.tsx
@@ -0,0 +1,437 @@
+import { useMemo, useState } from 'react';
+import { useOutletContext, useParams, useSearchParams } from 'react-router';
+import { mdiLoading, mdiOpenInNew, mdiPencilCircleOutline } from '@mdi/js';
+import { Icon } from '@mdi/react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import cx from 'classnames';
+import { debounce, every, find, forEach, groupBy, map, reduce, toNumber } from 'lodash';
+import { useImmer } from 'use-immer';
+
+import AnilistLinkSelectPanel from '@/components/Collection/Anilist/AnilistLinkSelectPanel';
+import EpisodeRow from '@/components/Collection/Anilist/EpisodeRow';
+import AniDBEpisode from '@/components/Collection/Tmdb/AniDBEpisode';
+import TopPanel from '@/components/Collection/Tmdb/TopPanel';
+import Button from '@/components/Input/Button';
+import {
+  useAnilistAddAutoXrefsMutation,
+  useAnilistEditEpisodeXrefsMutation,
+  useAnilistResetEpisodeXrefsMutation,
+} from '@/core/react-query/anilist/mutations';
+import {
+  useAnilistAnimeAllEpisodesQuery,
+  useAnilistAnimeQuery,
+  useAnilistEpisodeXrefsQuery,
+} from '@/core/react-query/anilist/queries';
+import { resetQueries } from '@/core/react-query/queryClient';
+import { useSeriesEpisodesInfiniteQuery, useSeriesQuery } from '@/core/react-query/series/queries';
+import toast from '@/core/toast';
+import { getAnidbAnimeLink, getAnilistAnimeLink } from '@/core/util';
+import useFlattenListResult from '@/hooks/useFlattenListResult';
+import useNavigateVoid from '@/hooks/useNavigateVoid';
+
+import type { SeriesContextType } from '@/components/Collection/constants';
+import type { AnilistEpisodeXrefMappingRequestType } from '@/core/react-query/anilist/types';
+import type { AnilistEpisodeXrefType } from '@/core/types/api/anilist';
+
+const AnilistLinking = () => {
+  const seriesId = toNumber(useParams().seriesId);
+
+  const navigate = useNavigateVoid();
+  if (seriesId === 0) {
+    navigate('..');
+  }
+
+  const [searchParams, setSearchParams] = useSearchParams();
+  const anilistId = useMemo(() => toNumber(searchParams.get('id')), [searchParams]);
+
+  const seriesQuery = useSeriesQuery(seriesId, { includeDataFrom: ['AniDB'] }, !!seriesId);
+
+  const [createInProgress, setCreateInProgress] = useState(false);
+
+  const isNewLink = useMemo(() => {
+    if (anilistId === 0 || !seriesQuery.data) return false;
+    return !seriesQuery.data.IDs.AniList.includes(anilistId);
+  }, [anilistId, seriesQuery.data]);
+
+  const episodesQuery = useSeriesEpisodesInfiniteQuery(
+    seriesId,
+    {
+      includeDataFrom: ['AniDB'],
+      includeMissing: 'true',
+      includeUnaired: 'true',
+      type: ['Episode', 'Special', 'Other'],
+      pageSize: 50,
+    },
+    !!seriesId,
+  );
+  const [episodes, episodeCount] = useFlattenListResult(episodesQuery.data);
+
+  const episodeXrefsQuery = useAnilistEpisodeXrefsQuery(
+    seriesId,
+    isNewLink,
+    anilistId,
+    !createInProgress && !!seriesId && anilistId !== 0 && !!seriesQuery.data,
+  );
+  const episodeXrefs = useMemo(
+    () => (episodeXrefsQuery.data
+      ? groupBy(episodeXrefsQuery.data, 'AnidbEpisodeID') as Record<string, AnilistEpisodeXrefType[]>
+      : undefined),
+    [episodeXrefsQuery.data],
+  );
+
+  const anilistEpisodesQuery = useAnilistAnimeAllEpisodesQuery(anilistId, anilistId !== 0);
+
+  const anilistAnimeQuery = useAnilistAnimeQuery(anilistId, {}, anilistId !== 0);
+
+  const { scrollRef } = useOutletContext<SeriesContextType>();
+
+  const [
+    linkOverrides,
+    setLinkOverrides,
+  ] = useImmer<Record<number, number[]>>({});
+
+  const estimateSize = (index: number) => {
+    const episode = episodes[index];
+    if (!episode) return 60; // 60px is the minimum height of a loaded row.
+    return 60 * (linkOverrides[episode.IDs.AniDB]?.length || 1);
+  };
+
+  const rowVirtualizer = useVirtualizer({
+    count: episodeCount,
+    getScrollElement: () => scrollRef.current,
+    estimateSize,
+    initialOffset: () => scrollRef.current?.scrollTop ?? 0,
+    overscan: 10,
+    gap: 8,
+  });
+  const virtualItems = rowVirtualizer.getVirtualItems();
+
+  const fetchNextPageDebounced = useMemo(
+    () =>
+      debounce(() => {
+        episodesQuery.fetchNextPage().catch(console.error);
+      }, 100),
+    [episodesQuery],
+  );
+
+  // Overrides merged with episodeXrefs
+  const finalEpisodeXrefs = useMemo(() => {
+    if (!episodeXrefs || !seriesQuery.data) return undefined;
+
+    const tempXrefs: Record<number, AnilistEpisodeXrefType[]> = { ...episodeXrefs };
+
+    forEach(linkOverrides, (overrideIds, anidbEpisodeId) => {
+      const episodeId = toNumber(anidbEpisodeId);
+      tempXrefs[episodeId] = [];
+      forEach(overrideIds, (overrideId, index) => {
+        tempXrefs[episodeId].push({
+          AnidbAnimeID: seriesQuery.data.IDs.AniDB,
+          AnidbEpisodeID: episodeId,
+          AnilistAnimeID: anilistId,
+          AnilistEpisodeID: overrideId,
+          EpisodeNumber: find(anilistEpisodesQuery.data, { ID: overrideId })?.EpisodeNumber ?? 0,
+          Index: index,
+          Rating: 'UserVerified',
+        });
+      });
+    });
+
+    return tempXrefs;
+  }, [anilistEpisodesQuery.data, anilistId, episodeXrefs, linkOverrides, seriesQuery.data]);
+
+  const { mutateAsync: editEpisodeLinks } = useAnilistEditEpisodeXrefsMutation(seriesId);
+  const { mutateAsync: createAutoLinks } = useAnilistAddAutoXrefsMutation(seriesId);
+  const { mutateAsync: resetEpisodeLinks } = useAnilistResetEpisodeXrefsMutation(seriesId);
+
+  const createEpisodeLinks = async () => {
+    setCreateInProgress(true);
+    try {
+      // If we're not giving the server any clues about which anime to link
+      // then we need to first create the auto links before sending the
+      // mappings.
+      if (
+        isNewLink
+        && (Object.keys(linkOverrides).length === 0 || every(linkOverrides, links => every(links, link => link === 0)))
+      ) {
+        await createAutoLinks({ AnilistAnimeID: anilistId });
+      }
+
+      if (Object.keys(linkOverrides).length > 0) {
+        const set = new Set<string>();
+        const newMappings = reduce(
+          linkOverrides,
+          (result, overrides, episodeId) => {
+            forEach(overrides, (overrideId, index) => {
+              if (index > 0 && overrideId === 0) return;
+              result.push({
+                AniDBID: toNumber(episodeId),
+                AnilistID: overrideId,
+                // Replace is used when we link multiple anidb episodes to a single anilist episode.
+                Replace: !set.has(episodeId) ? Boolean(set.add(episodeId)) : false,
+              });
+            });
+            return result;
+          },
+          [] as AnilistEpisodeXrefMappingRequestType[],
+        );
+
+        await editEpisodeLinks({
+          UnsetAll: false,
+          Mapping: newMappings,
+        });
+      }
+
+      resetQueries(['series', seriesId]);
+      setLinkOverrides({});
+      if (isNewLink) {
+        toast.success(
+          'Series has been linked and AniList related tasks for data and images have been added to the queue!',
+        );
+      } else {
+        toast.success('Episode links have been updated!');
+      }
+      // Note: The anilist linking page's parent is the collection page, so we need to navigate from the collection page to the series page, even though we use the series id on the anilist linking page too.
+      navigate(`../series/${seriesId}`);
+    } catch (_) {
+      toast.error('Failed to save links!');
+    }
+    setCreateInProgress(false);
+  };
+
+  const resetLinks = async () => {
+    setCreateInProgress(true);
+    try {
+      await resetEpisodeLinks();
+      await createAutoLinks({ AnilistAnimeID: anilistId, KeepExisting: false });
+      resetQueries(['series', seriesId]);
+      setLinkOverrides({});
+      toast.success('Episode links have been reset!');
+    } catch (_) {
+      toast.error('Failed to reset links!');
+    }
+    setCreateInProgress(false);
+  };
+
+  const handleCreateLink = () => {
+    createEpisodeLinks().catch(console.error);
+  };
+
+  const handleResetLinks = () => {
+    resetLinks().catch(console.error);
+  };
+
+  const disableCreateLink = useMemo(() => {
+    if (isNewLink) return false;
+
+    return Object.keys(linkOverrides).length === 0;
+  }, [isNewLink, linkOverrides]);
+
+  const handleNewLinkEdit = () => {
+    setSearchParams({});
+    setLinkOverrides({});
+  };
+
+  return (
+    <div className="flex grow flex-col gap-y-6">
+      <TopPanel
+        createInProgress={createInProgress}
+        disableCreateLink={disableCreateLink}
+        handleCreateLink={handleCreateLink}
+        handleResetLinks={anilistId !== 0 && !!seriesQuery.data && !isNewLink ? handleResetLinks : undefined}
+        seriesId={seriesId}
+        xrefs={finalEpisodeXrefs}
+      />
+      <div className="flex grow flex-col rounded-lg border border-panel-border bg-panel-background px-4 py-6">
+        {(seriesQuery.isPending || episodesQuery.isPending) && (
+          <div className="flex grow items-center justify-center text-panel-text-primary">
+            <Icon path={mdiLoading} size={4} spin />
+          </div>
+        )}
+
+        {(seriesQuery.data && episodesQuery.data) && (
+          <div
+            className={cx(
+              'grid grid-rows-[auto_minmax(0,1fr)] gap-2',
+              anilistId !== 0 ? 'grid-cols-[minmax(0,1fr)_3.5rem_minmax(0,1fr)]' : 'grid-cols-2',
+            )}
+          >
+            <div className="flex items-center rounded-lg border border-panel-border bg-panel-background-alt p-4 font-semibold">
+              <div className="shrink-0">
+                AniDB |&nbsp;
+              </div>
+              <a
+                className="flex cursor-pointer font-semibold text-panel-text-primary"
+                href={getAnidbAnimeLink(seriesQuery.data.IDs.AniDB)}
+                target="_blank"
+                rel="noopener noreferrer"
+                data-tooltip-id="tooltip"
+                data-tooltip-content={seriesQuery.data.Name}
+              >
+                <div className="shrink-0">
+                  {seriesQuery.data.IDs.AniDB}
+                  &nbsp;-&nbsp;
+                </div>
+
+                <div className="line-clamp-1">
+                  {seriesQuery.data.Name}
+                </div>
+
+                <div className="mx-1 shrink-0">
+                  <Icon path={mdiOpenInNew} size={1} />
+                </div>
+              </a>
+            </div>
+
+            {anilistId !== 0 && <div />}
+
+            {anilistId !== 0
+              ? (
+                <div className="flex items-center justify-between rounded-lg border border-panel-border bg-panel-background-alt p-4 font-semibold">
+                  {anilistAnimeQuery.data && (
+                    <>
+                      <div className="flex grow items-center">
+                        <div className="shrink-0">
+                          AniList |&nbsp;
+                        </div>
+                        <a
+                          className="flex cursor-pointer font-semibold text-panel-text-primary"
+                          href={getAnilistAnimeLink(anilistId)}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          data-tooltip-id="tooltip"
+                          data-tooltip-content={anilistAnimeQuery.data.Title}
+                        >
+                          <div className="shrink-0">
+                            {anilistId}
+                            &nbsp;-&nbsp;
+                          </div>
+
+                          <div className="line-clamp-1">
+                            {anilistAnimeQuery.data.Title}
+                          </div>
+
+                          <div className="mx-1 shrink-0">
+                            <Icon path={mdiOpenInNew} size={1} />
+                          </div>
+                        </a>
+                        <div className="grow" />
+                      </div>
+                      {isNewLink && (
+                        <Button
+                          className="ml-1 text-panel-text-primary"
+                          onClick={handleNewLinkEdit}
+                          tooltip="Edit Link"
+                        >
+                          <Icon path={mdiPencilCircleOutline} size={1} />
+                        </Button>
+                      )}
+                    </>
+                  )}
+
+                  {anilistAnimeQuery.isPending && (
+                    <Icon path={mdiLoading} size={1} spin className="m-auto text-panel-text-primary" />
+                  )}
+                </div>
+              )
+              : <AnilistLinkSelectPanel />}
+
+            <div
+              className={cx(
+                'relative w-full',
+                anilistId === 0 ? 'col-span-1' : 'col-span-3',
+              )}
+              style={{ height: rowVirtualizer.getTotalSize() }}
+            >
+              {virtualItems.map((virtualItem) => {
+                const episode = episodes[virtualItem.index];
+                const isOdd = virtualItem.index % 2 === 1;
+
+                if (!episode && !episodesQuery.isFetchingNextPage) fetchNextPageDebounced();
+
+                const overrides = episode
+                  ? (linkOverrides[episode.IDs.AniDB] ?? finalEpisodeXrefs?.[episode.IDs.AniDB] ?? [0])
+                  : [0];
+
+                const existingXrefs = episode
+                  ? episodeXrefs?.[episode.IDs.AniDB]?.map(xref => xref.AnilistEpisodeID)
+                  : undefined;
+
+                return (
+                  <div
+                    className={cx(
+                      'absolute top-0 left-0 flex w-full gap-x-2',
+                      episode && anilistId !== 0 && 'flex-col gap-y-2',
+                    )}
+                    style={{
+                      transform: `translateY(${virtualItem.start ?? 0}px)`,
+                    }}
+                    key={episode?.IDs.ID ?? `loading-${virtualItem.key}`}
+                    ref={rowVirtualizer.measureElement}
+                    data-index={virtualItem.index}
+                  >
+                    {episode && anilistId !== 0 && (
+                      map(
+                        overrides,
+                        (_, index) => (
+                          <div
+                            key={`episode-${episode.IDs.AniDB}-${index}`}
+                            className="relative top-0 left-0 grid w-full grid-cols-[1fr_auto_1fr] gap-x-2"
+                          >
+                            <EpisodeRow
+                              anilistEpisodes={anilistEpisodesQuery.data}
+                              anilistEpisodesPending={anilistEpisodesQuery.isPending}
+                              episode={episode}
+                              offset={index}
+                              isOdd={isOdd}
+                              setLinkOverrides={setLinkOverrides}
+                              existingXrefs={existingXrefs}
+                              xrefs={finalEpisodeXrefs}
+                            />
+                          </div>
+                        ),
+                      )
+                    )}
+
+                    {/* To render only anidb episodes (left panel) for new links */}
+                    {episode && anilistId === 0 && <AniDBEpisode episode={episode} isOdd={isOdd} />}
+
+                    {!episode && (
+                      <>
+                        <div
+                          className={cx(
+                            'flex grow justify-center rounded-lg border border-panel-border p-4 text-panel-text-primary',
+                            isOdd ? 'bg-panel-background-alt' : 'bg-panel-background',
+                          )}
+                        >
+                          <Icon path={mdiLoading} spin size={1} />
+                        </div>
+                        {anilistId !== 0 && (
+                          <div
+                            className={cx(
+                              'w-16 rounded-lg border border-panel-border',
+                              isOdd ? 'bg-panel-background-alt' : 'bg-panel-background',
+                            )}
+                          />
+                        )}
+                        <div
+                          className={cx(
+                            'flex grow justify-center rounded-lg border border-panel-border p-4 text-panel-text-primary',
+                            isOdd ? 'bg-panel-background-alt' : 'bg-panel-background',
+                          )}
+                        >
+                          <Icon path={mdiLoading} spin size={1} />
+                        </div>
+                      </>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default AnilistLinking;
diff --git a/src/pages/collection/series/SeriesCredits.tsx b/src/pages/collection/series/SeriesCredits.tsx
index 60c5eb542..848deb3d6 100644
--- a/src/pages/collection/series/SeriesCredits.tsx
+++ b/src/pages/collection/series/SeriesCredits.tsx
@@ -5,31 +5,59 @@ import { useOutletContext } from 'react-router';
 import CreditsSearchAndFilterPanel from '@/components/Collection/Credits/CreditsSearchAndFilterPanel';
 import StaffPanelVirtualizer from '@/components/Collection/Credits/CreditsStaffVirtualizer';
 import MultiStateButton from '@/components/Input/MultiStateButton';
-import { useRefreshSeriesAniDBInfoMutation } from '@/core/react-query/series/mutations';
+import SelectSmall from '@/components/Input/SelectSmall';
+import { useAnilistAnimeCreditsQueries } from '@/core/react-query/anilist/queries';
+import {
+  useRefreshSeriesAniDBInfoMutation,
+  useRefreshSeriesAnilistInfoMutation,
+} from '@/core/react-query/series/mutations';
 import { useSeriesCastQuery } from '@/core/react-query/series/queries';
+import { useSupportedLanguagesQuery } from '@/core/react-query/settings/queries';
 
 import type { SeriesContextType } from '@/components/Collection/constants';
 import type { SeriesCast } from '@/core/types/api/series';
 
 export type CreditsModeType = 'Character' | 'Staff';
 
+export type CreditsSourceType = 'AniDB' | 'AniList';
+
 const cleanString = (input = '') => input.replaceAll(' ', '').toLowerCase();
 
 const getUniqueRoles = (castList: SeriesCast[]) => [...new Set(castList.map(cast => cast.RoleDetails))];
 
+const getUniqueLanguages = (castList: SeriesCast[]) =>
+  [...new Set(castList.map(cast => cast.Language).filter((language): language is string => !!language))]
+    .sort((languageA, languageB) => languageA.localeCompare(languageB));
+
+const allLanguages = 'all';
+
 const modeStates: { label?: string, value: CreditsModeType }[] = [
   { label: 'Characters', value: 'Character' },
   { value: 'Staff' },
 ];
 
+const sourceStates: { value: CreditsSourceType }[] = [
+  { value: 'AniDB' },
+  { value: 'AniList' },
+];
+
 const SeriesCredits = () => {
   const { series } = useOutletContext<SeriesContextType>();
 
   const { isPending: pendingRefreshAniDb, mutate: refreshAniDbMutation } = useRefreshSeriesAniDBInfoMutation(
     series.IDs.ID,
   );
+  const { isPending: pendingRefreshAnilist, mutate: refreshAnilistMutation } = useRefreshSeriesAnilistInfoMutation(
+    series.IDs.ID,
+  );
+
+  const [source, setSource] = useState<CreditsSourceType>(sourceStates[0].value);
 
-  const refreshAniDb = () => {
+  const refreshSource = () => {
+    if (source === 'AniList') {
+      refreshAnilistMutation();
+      return;
+    }
     refreshAniDbMutation({ force: true });
   };
 
@@ -39,14 +67,26 @@ const SeriesCredits = () => {
 
   const [roleFilter, setRoleFilter] = useState<Set<string>>(new Set());
 
+  const [language, setLanguage] = useState(allLanguages);
+
   const handleModeChange = (newMode: CreditsModeType) => {
     setMode(() => {
       setSearch('');
       setRoleFilter(new Set());
+      setLanguage(allLanguages);
       return newMode;
     });
   };
 
+  const handleSourceChange = (newSource: CreditsSourceType) => {
+    setSource(() => {
+      setSearch('');
+      setRoleFilter(new Set());
+      setLanguage(allLanguages);
+      return newSource;
+    });
+  };
+
   const handleFilterChange = (event: ChangeEvent<HTMLInputElement>) => {
     const { id: description } = event.target;
     setRoleFilter((prevState) => {
@@ -60,7 +100,15 @@ const SeriesCredits = () => {
     setSearch(event.target.value);
   };
 
-  const cast = useSeriesCastQuery(series.IDs.ID).data;
+  const handleLanguageChange = (event: ChangeEvent<HTMLSelectElement>) => {
+    setLanguage(event.target.value);
+  };
+
+  const languageNames = useSupportedLanguagesQuery().data;
+
+  const anidbCast = useSeriesCastQuery(series.IDs.ID, source === 'AniDB').data;
+  const anilistCredits = useAnilistAnimeCreditsQueries(series.IDs.AniList, source === 'AniList').data;
+  const cast = source === 'AniList' ? anilistCredits : anidbCast;
   const castByType = useMemo(() => ({
     Character: cast?.filter(credit => credit.RoleName === 'Actor') ?? [],
     Staff: cast?.filter(credit => credit.RoleName !== 'Actor') ?? [],
@@ -71,17 +119,22 @@ const SeriesCredits = () => {
     Staff: getUniqueRoles(castByType.Staff),
   }), [castByType]);
 
+  const languages = useMemo(() => getUniqueLanguages(castByType[mode]), [castByType, mode]);
+  // Only worth showing when there is actually something to choose between, eg. multiple dubs.
+  const showLanguageFilter = languages.length > 1;
+
   const filteredCast = useMemo(() => (castByType[mode].filter(item => (
     (search === ''
       || ([item?.Character?.Name, item?.Staff?.Name].some(name => cleanString(name).includes(cleanString(search)))))
     && !roleFilter.has(item?.RoleDetails)
+    && (language === allLanguages || item.Language === language)
   )).sort((castA, castB) => {
     const nameA = castA[mode]?.Name ?? '';
     const nameB = castB[mode]?.Name ?? '';
     if (nameA > nameB) return 1;
     if (nameA < nameB) return -1;
     return 0;
-  })), [castByType, mode, search, roleFilter]);
+  })), [castByType, language, mode, search, roleFilter]);
 
   return (
     <>
@@ -95,8 +148,8 @@ const SeriesCredits = () => {
             uniqueRoles={uniqueRoles[mode]}
             handleSearchChange={handleSearchChange}
             handleFilterChange={handleFilterChange}
-            refreshAniDbAction={refreshAniDb}
-            aniDbRefreshing={pendingRefreshAniDb}
+            refreshAniDbAction={refreshSource}
+            aniDbRefreshing={source === 'AniList' ? pendingRefreshAnilist : pendingRefreshAniDb}
           />
         </div>
 
@@ -104,7 +157,7 @@ const SeriesCredits = () => {
           <div className="flex h-24.5 items-center justify-between rounded-lg border border-panel-border bg-panel-background-transparent px-6 py-4">
             <div className="text-xl font-semibold">
               Credits |&nbsp;
-              {(search !== '' || roleFilter.size > 0) && (
+              {(search !== '' || roleFilter.size > 0 || language !== allLanguages) && (
                 <>
                   <span className="text-panel-text-important">
                     {filteredCast.length}
@@ -119,7 +172,26 @@ const SeriesCredits = () => {
               {mode === 'Character' ? 'Characters' : mode}
               &nbsp;Listed
             </div>
-            <MultiStateButton activeState={mode} states={modeStates} onStateChange={handleModeChange} />
+            <div className="flex items-center gap-x-6">
+              {showLanguageFilter && (
+                <SelectSmall
+                  id="credits-language"
+                  label="Language"
+                  className="gap-x-3"
+                  value={language}
+                  onChange={handleLanguageChange}
+                >
+                  <option value={allLanguages}>All</option>
+                  {languages.map(code => (
+                    <option key={code} value={code}>
+                      {languageNames?.[code] ?? code.toUpperCase()}
+                    </option>
+                  ))}
+                </SelectSmall>
+              )}
+              <MultiStateButton activeState={source} states={sourceStates} onStateChange={handleSourceChange} />
+              <MultiStateButton activeState={mode} states={modeStates} onStateChange={handleModeChange} />
+            </div>
           </div>
           <StaffPanelVirtualizer castArray={filteredCast} mode={mode} />
         </div>
diff --git a/src/pages/collection/series/SeriesImages.tsx b/src/pages/collection/series/SeriesImages.tsx
index 799af4a2a..83d9366ba 100644
--- a/src/pages/collection/series/SeriesImages.tsx
+++ b/src/pages/collection/series/SeriesImages.tsx
@@ -32,12 +32,14 @@ import type { ImageTabType } from '@/core/types/api/image';
 const tabToImageTypeMap: Record<ImageTabType, ImageEntityValues> = {
   Posters: 'Primary',
   Backdrops: 'Backdrop',
+  Banners: 'Banner',
   Logos: 'Logo',
 };
 
 const tabStates = [
   { value: 'Posters' as const },
   { value: 'Backdrops' as const },
+  { value: 'Banners' as const },
   { value: 'Logos' as const },
 ];
 
@@ -51,6 +53,7 @@ const InfoLine = ({ title, value }: { title: string, value: string }) => (
 const imageItemSize: Record<ImageTabType, { height: number, width: number }> = {
   Posters: { width: 13, height: 19.5 },
   Backdrops: { width: 27, height: 16 },
+  Banners: { width: 38, height: 8 }, // Wide strips, eg. AniList banners are 1900x400 (4.75:1).
   Logos: { width: 15, height: 15 },
 };
 
diff --git a/src/pages/collection/series/SeriesOverview.tsx b/src/pages/collection/series/SeriesOverview.tsx
index 3816ab049..b15bf8372 100644
--- a/src/pages/collection/series/SeriesOverview.tsx
+++ b/src/pages/collection/series/SeriesOverview.tsx
@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react';
 import { useOutletContext } from 'react-router';
-import { mdiEarth, mdiOpenInNew } from '@mdi/js';
+import { mdiEarth, mdiMoviePlayOutline, mdiOpenInNew, mdiShareVariantOutline } from '@mdi/js';
 import { Icon } from '@mdi/react';
 import cx from 'classnames';
 import { flatMap, get, map, round } from 'lodash';
@@ -20,10 +20,16 @@ import {
 
 import type { SeriesContextType } from '@/components/Collection/constants';
 import type { ImageType } from '@/core/types/api/common';
-import type { SeriesCast } from '@/core/types/api/series';
+import type { SeriesCast, SeriesLinkTypeValues } from '@/core/types/api/series';
 
 // Links
-const MetadataLinks = ['AniDB', 'TMDB'] as const;
+const MetadataLinks = ['AniDB', 'TMDB', 'AniList'] as const;
+
+// Icons for the link types that are not a plain website; everything else keeps the globe.
+const linkTypeIcons: Partial<Record<SeriesLinkTypeValues, string>> = {
+  Social: mdiShareVariantOutline,
+  Trailer: mdiMoviePlayOutline,
+};
 
 const SeriesOverview = () => {
   const { series } = useOutletContext<SeriesContextType>();
@@ -105,7 +111,22 @@ const SeriesOverview = () => {
                     ];
                   }
 
-                  // Site is not TMDB, so it's either a single ID or an array of IDs
+                  if (site === 'AniList') {
+                    const anilistIds = series.IDs.AniList;
+                    if (anilistIds.length === 0) {
+                      return <SeriesMetadata key={site} site={site} seriesId={series.IDs.ID} />;
+                    }
+
+                    return [
+                      ...anilistIds.map(id => (
+                        <SeriesMetadata key={`${site}-${id}`} site={site} id={id} seriesId={series.IDs.ID} />
+                      )),
+                      /* Show row to add new AniList links */
+                      <SeriesMetadata key="AniList-add-new" site="AniList" seriesId={series.IDs.ID} />,
+                    ];
+                  }
+
+                  // Site is not TMDB or AniList, so it's either a single ID or an array of IDs
                   const idOrIds = series?.IDs[site] ?? [0];
                   const linkIds = typeof idOrIds === 'number' ? [idOrIds] : idOrIds;
                   if (linkIds.length === 0) linkIds.push(0);
@@ -125,19 +146,28 @@ const SeriesOverview = () => {
               >
                 {series.Links.map(link => (
                   <a
-                    className="flex w-full gap-x-2 rounded-lg border border-panel-border bg-panel-background px-4 py-3 text-left text-base! font-normal! text-panel-icon-action hover:bg-panel-toggle-background-hover"
-                    key={link.URL}
+                    className="flex w-full items-center gap-x-2 rounded-lg border border-panel-border bg-panel-background px-4 py-3 text-left text-base! font-normal! text-panel-icon-action hover:bg-panel-toggle-background-hover"
+                    key={`${link.Type}-${link.LanguageCode ?? ''}-${link.URL}`}
                     href={link.URL}
                     rel="noopener noreferrer"
                     target="_blank"
                   >
                     <Icon
                       className="text-panel-icon"
-                      path={mdiEarth}
+                      path={linkTypeIcons[link.Type] ?? mdiEarth}
                       size={1}
                     />
 
                     {link.Name}
+                    {link.LanguageCode && (
+                      <span
+                        className="rounded-md border border-panel-border bg-panel-background-alt px-2 text-xs font-semibold text-panel-text uppercase"
+                        data-tooltip-id="tooltip"
+                        data-tooltip-content="Region"
+                      >
+                        {link.LanguageCode}
+                      </span>
+                    )}
                     <Icon
                       className="text-panel-icon-action"
                       path={mdiOpenInNew}
diff --git a/src/pages/firstrun/MetadataSources.tsx b/src/pages/firstrun/MetadataSources.tsx
index f8702b0a4..a3435feec 100644
--- a/src/pages/firstrun/MetadataSources.tsx
+++ b/src/pages/firstrun/MetadataSources.tsx
@@ -11,6 +11,7 @@ import useFirstRunSettingsContext from '@/hooks/useFirstRunSettingsContext';
 
 import Footer from './Footer';
 import AniDBTab from './MetadataSourcesTabs/AniDBTab';
+import AnilistTab from './MetadataSourcesTabs/AnilistTab';
 import TMDBTab from './MetadataSourcesTabs/TMDBTab';
 
 import type { TestStatusType } from '@/core/slices/firstrun';
@@ -46,6 +47,8 @@ const TabContent = ({ setStatus, tab }: { setStatus: (status: TestStatusType) =>
       return <AniDBTab setStatus={setStatus} />;
     case 'moviedb':
       return <TMDBTab />;
+    case 'anilist':
+      return <AnilistTab />;
     default:
       return <AniDBTab setStatus={setStatus} />;
   }
@@ -91,6 +94,13 @@ const MetadataSources = () => {
             tabKey="moviedb"
             title="TMDB"
           />
+          |
+          <TabButton
+            active={activeTab === 'anilist'}
+            setActiveTab={setActiveTab}
+            tabKey="anilist"
+            title="AniList"
+          />
         </div>
         <div className="flex h-80 shrink flex-col overflow-y-auto pr-8">
           <TabContent setStatus={setStatus} tab={activeTab} />
diff --git a/src/pages/firstrun/MetadataSourcesTabs/AnilistTab.tsx b/src/pages/firstrun/MetadataSourcesTabs/AnilistTab.tsx
new file mode 100644
index 000000000..74441c0ea
--- /dev/null
+++ b/src/pages/firstrun/MetadataSourcesTabs/AnilistTab.tsx
@@ -0,0 +1,24 @@
+import AnilistDownloadSettings from '@/components/Settings/MetadataSitesSettings/AnilistDownloadSettings';
+import AnilistSettings from '@/components/Settings/MetadataSitesSettings/AnilistSettings';
+import TransitionDiv from '@/components/TransitionDiv';
+import useFirstRunSettingsContext from '@/hooks/useFirstRunSettingsContext';
+
+const AnilistTab = () => {
+  const { newSettings, setNewSettings, updateSetting } = useFirstRunSettingsContext();
+
+  return (
+    <TransitionDiv className="flex flex-col gap-y-6">
+      <div className="border-b-2 border-panel-border pb-4 font-semibold">Linking Options</div>
+      <div className="flex flex-col gap-y-2">
+        <AnilistSettings newSettings={newSettings} setNewSettings={setNewSettings} updateSetting={updateSetting} />
+      </div>
+
+      <div className="border-b-2 border-panel-border pb-4 font-semibold">Download Options</div>
+      <div className="flex flex-col gap-y-2">
+        <AnilistDownloadSettings newSettings={newSettings} updateSetting={updateSetting} />
+      </div>
+    </TransitionDiv>
+  );
+};
+
+export default AnilistTab;
diff --git a/src/pages/settings/SettingsPage.tsx b/src/pages/settings/SettingsPage.tsx
index 6576e2322..ae6941c5a 100644
--- a/src/pages/settings/SettingsPage.tsx
+++ b/src/pages/settings/SettingsPage.tsx
@@ -32,6 +32,7 @@ const items = [
   { name: 'Hashing & Release', path: 'hashing-release' },
   { name: 'AniDB', path: 'anidb' },
   { name: 'TMDB', path: 'tmdb' },
+  { name: 'AniList', path: 'anilist' },
   { name: 'Collection', path: 'collection' },
   { name: 'Integrations', path: 'integrations' },
   { name: 'Plugin Management', path: 'plugin-management' },
diff --git a/src/pages/settings/tabs/AnilistSettings.tsx b/src/pages/settings/tabs/AnilistSettings.tsx
new file mode 100644
index 000000000..878f00355
--- /dev/null
+++ b/src/pages/settings/tabs/AnilistSettings.tsx
@@ -0,0 +1,45 @@
+import AnilistDownloadSettings from '@/components/Settings/MetadataSitesSettings/AnilistDownloadSettings';
+import AnilistSettingsOptions from '@/components/Settings/MetadataSitesSettings/AnilistSettings';
+import useSettingsContext from '@/hooks/useSettingsContext';
+
+const AnilistSettings = () => {
+  const { newSettings, setNewSettings, updateSetting } = useSettingsContext();
+
+  return (
+    <>
+      <title>Settings &gt; AniList | Shoko</title>
+      <div className="flex flex-col gap-y-1">
+        <div className="text-xl font-semibold">AniList</div>
+        <div>
+          Customize the information and images that Shoko downloads for the series in your collection
+        </div>
+      </div>
+
+      <div className="border-b border-panel-border" />
+
+      <div className="flex flex-col gap-y-6">
+        <div className="flex items-center font-semibold">AniList Options</div>
+        <div className="flex flex-col gap-y-1">
+          <AnilistSettingsOptions
+            newSettings={newSettings}
+            setNewSettings={setNewSettings}
+            updateSetting={updateSetting}
+          />
+        </div>
+      </div>
+
+      <div className="border-b border-panel-border" />
+
+      <div className="flex flex-col gap-y-6">
+        <div className="flex items-center font-semibold">AniList Download Options</div>
+        <div className="flex flex-col gap-y-1">
+          <AnilistDownloadSettings newSettings={newSettings} updateSetting={updateSetting} />
+        </div>
+      </div>
+
+      <div className="border-b border-panel-border" />
+    </>
+  );
+};
+
+export default AnilistSettings;
diff --git a/src/pages/utilities/Calendar.tsx b/src/pages/utilities/Calendar.tsx
new file mode 100644
index 000000000..a01af36dc
--- /dev/null
+++ b/src/pages/utilities/Calendar.tsx
@@ -0,0 +1,319 @@
+import { useMemo, useState } from 'react';
+import { Link } from 'react-router';
+import { mdiCalendarTodayOutline, mdiChevronLeft, mdiChevronRight, mdiLoading } from '@mdi/js';
+import { Icon } from '@mdi/react';
+import cx from 'classnames';
+import { groupBy, range, sortBy, xor } from 'lodash';
+import { useToggle } from 'usehooks-ts';
+
+import BackgroundImagePlaceholderDiv from '@/components/BackgroundImagePlaceholderDiv';
+import Button from '@/components/Input/Button';
+import Checkbox from '@/components/Input/Checkbox';
+import MultiStateButton from '@/components/Input/MultiStateButton';
+import ShokoPanel from '@/components/Panels/ShokoPanel';
+import ItemCount from '@/components/Utilities/ItemCount';
+import { useDashboardCalendarEpisodesQuery } from '@/core/react-query/dashboard/queries';
+import { useSettingsQuery } from '@/core/react-query/settings/queries';
+import { dayjs, getAnidbAnimeLink } from '@/core/util';
+import { getEpisodePrefixAlt } from '@/core/utilities/getEpisodePrefix';
+
+import type { DashboardEpisodeDetailsType } from '@/core/types/api/dashboard';
+import type { EpisodeTypeValues } from '@/core/types/api/episode';
+import type { Dayjs } from 'dayjs';
+
+type CalendarViewType = 'month' | 'week';
+
+const viewStates: { label?: string, value: CalendarViewType }[] = [
+  { label: 'Month', value: 'month' },
+  { label: 'Week', value: 'week' },
+];
+
+const dateKeyFormat = 'YYYY-MM-DD';
+
+const episodeTypeOptions: { label: string, value: EpisodeTypeValues }[] = [
+  { label: 'Episodes', value: 'Episode' },
+  { label: 'Specials', value: 'Special' },
+  { label: 'Credits', value: 'Credits' },
+  { label: 'Trailers', value: 'Trailer' },
+  { label: 'Parodies', value: 'Parody' },
+  { label: 'Others', value: 'Other' },
+];
+
+// What the server assumes when no `type` is sent.
+const defaultEpisodeTypes: EpisodeTypeValues[] = ['Episode'];
+
+// The day an episode belongs to for the viewer: the local day of the broadcast when the time is known,
+// otherwise the (UTC) air date as-is so a date-only entry never drifts to a neighbouring day.
+const getLocalDay = (episode: DashboardEpisodeDetailsType) => {
+  if (episode.HasAirTime && episode.AiredAt) return dayjs(episode.AiredAt);
+  return dayjs(episode.AirDate ?? episode.AiredAt ?? undefined);
+};
+
+const getVisibleRange = (anchor: Dayjs, view: CalendarViewType) => {
+  if (view === 'week') {
+    const start = anchor.startOf('week');
+    return { start, end: start.add(6, 'day') };
+  }
+  return {
+    start: anchor.startOf('month').startOf('week'),
+    end: anchor.endOf('month').endOf('week').startOf('day'),
+  };
+};
+
+const weekdayNames = range(7).map(day => dayjs().day(day).format('ddd'));
+
+type EpisodeCardProps = {
+  episode: DashboardEpisodeDetailsType;
+};
+
+const EpisodeCard = ({ episode }: EpisodeCardProps) => {
+  const inCollection = episode.IDs.ShokoSeries !== null;
+  const episodeLabel = `${getEpisodePrefixAlt(episode.Type)}${episode.Number} - ${episode.Title}`;
+  const airTime = episode.HasAirTime && episode.AiredAt ? dayjs(episode.AiredAt).format('HH:mm') : null;
+
+  const content = (
+    <>
+      <BackgroundImagePlaceholderDiv
+        image={episode.SeriesPoster}
+        className="h-12 w-8 shrink-0 rounded-sm border border-panel-border"
+      />
+      <div className="flex min-w-0 grow flex-col">
+        <div className="truncate font-semibold" data-tooltip-id="tooltip" data-tooltip-content={episode.SeriesTitle}>
+          {episode.SeriesTitle}
+        </div>
+        <div className="truncate opacity-65" data-tooltip-id="tooltip" data-tooltip-content={episodeLabel}>
+          {episodeLabel}
+        </div>
+        {airTime && (
+          <div
+            className={cx('font-semibold', episode.IsAirTimeEstimated ? 'opacity-65' : 'text-panel-text-primary')}
+            data-tooltip-id="tooltip"
+            data-tooltip-content={episode.IsAirTimeEstimated ? 'Estimated' : ''}
+          >
+            {episode.IsAirTimeEstimated ? `~${airTime}` : airTime}
+          </div>
+        )}
+      </div>
+    </>
+  );
+
+  const cardClassName = cx(
+    'flex gap-x-2 rounded-md border border-panel-border p-1.5 text-xs transition-colors hover:bg-panel-toggle-background-hover',
+    inCollection ? 'bg-panel-background-alt' : 'bg-panel-background opacity-75',
+  );
+
+  if (inCollection) {
+    return (
+      <Link to={`/webui/collection/series/${episode.IDs.ShokoSeries}`} className={cardClassName}>
+        {content}
+      </Link>
+    );
+  }
+
+  return (
+    <a href={getAnidbAnimeLink(episode.IDs.Series)} target="_blank" rel="noopener noreferrer" className={cardClassName}>
+      {content}
+    </a>
+  );
+};
+
+const Calendar = () => {
+  const { hideR18Content } = useSettingsQuery().data.WebUI_Settings.dashboard;
+
+  const [view, setView] = useState<CalendarViewType>('month');
+  const [anchor, setAnchor] = useState(() => dayjs().startOf('day'));
+  const [includeMissing, toggleIncludeMissing] = useToggle(false);
+  const [includeRestricted, toggleIncludeRestricted] = useToggle(!hideR18Content);
+  const [onlyWithAirTime, toggleOnlyWithAirTime] = useToggle(false);
+  const [episodeTypes, setEpisodeTypes] = useState<EpisodeTypeValues[]>(defaultEpisodeTypes);
+
+  const handleViewChange = (newView: CalendarViewType) => {
+    setView(newView);
+  };
+
+  const toggleEpisodeType = (type: EpisodeTypeValues) => {
+    setEpisodeTypes(prev => xor(prev, [type]));
+  };
+
+  // Leave the parameter out when the selection matches the server default.
+  const isDefaultEpisodeTypes = xor(episodeTypes, defaultEpisodeTypes).length === 0;
+
+  const visibleRange = useMemo(() => getVisibleRange(anchor, view), [anchor, view]);
+
+  // The server works in UTC days while the grid is in local days, so pad the request by a day on each side.
+  const episodesQuery = useDashboardCalendarEpisodesQuery({
+    startDate: visibleRange.start.subtract(1, 'day').format(dateKeyFormat),
+    endDate: visibleRange.end.add(1, 'day').format(dateKeyFormat),
+    includeMissing: includeMissing ? 'True' : 'False',
+    includeRestricted: includeRestricted ? 'True' : 'False',
+    includeWithAirTime: onlyWithAirTime ? 'Only' : 'True',
+    type: isDefaultEpisodeTypes ? undefined : episodeTypes,
+  });
+
+  const days = useMemo(() => {
+    const dayCount = visibleRange.end.diff(visibleRange.start, 'day') + 1;
+    return range(dayCount).map(offset => visibleRange.start.add(offset, 'day'));
+  }, [visibleRange]);
+
+  const episodesByDay = useMemo(() => {
+    const sorted = sortBy(episodesQuery.data ?? [], [
+      episode => (episode.HasAirTime && episode.AiredAt ? dayjs(episode.AiredAt).valueOf() : 0),
+      'SeriesTitle',
+      'Number',
+    ]);
+    return groupBy(sorted, episode => getLocalDay(episode).format(dateKeyFormat));
+  }, [episodesQuery.data]);
+
+  const visibleEpisodeCount = useMemo(
+    () => days.reduce((count, day) => count + (episodesByDay[day.format(dateKeyFormat)]?.length ?? 0), 0),
+    [days, episodesByDay],
+  );
+
+  const today = dayjs().format(dateKeyFormat);
+  const unit = view === 'week' ? 'week' : 'month';
+  const rangeLabel = view === 'week'
+    ? `${visibleRange.start.format('MMM D')} – ${visibleRange.end.format('MMM D, YYYY')}`
+    : anchor.format('MMMM YYYY');
+
+  return (
+    <>
+      <title>Calendar | Shoko</title>
+      <div className="flex grow flex-col gap-y-6">
+        <div>
+          <ShokoPanel
+            title="Calendar"
+            options={<ItemCount count={visibleEpisodeCount} suffix="Episodes" />}
+          >
+            <div className="flex flex-wrap items-center gap-3">
+              <div className="flex items-center gap-x-2">
+                <Button
+                  buttonType="secondary"
+                  buttonSize="normal"
+                  className="py-3"
+                  onClick={() => setAnchor(prev => prev.subtract(1, unit))}
+                  tooltip={`Previous ${unit}`}
+                >
+                  <Icon path={mdiChevronLeft} size={1} />
+                </Button>
+                <Button
+                  buttonType="secondary"
+                  buttonSize="normal"
+                  className="flex items-center gap-x-2 py-3"
+                  onClick={() => setAnchor(dayjs().startOf('day'))}
+                >
+                  <Icon path={mdiCalendarTodayOutline} size={1} />
+                  Today
+                </Button>
+                <Button
+                  buttonType="secondary"
+                  buttonSize="normal"
+                  className="py-3"
+                  onClick={() => setAnchor(prev => prev.add(1, unit))}
+                  tooltip={`Next ${unit}`}
+                >
+                  <Icon path={mdiChevronRight} size={1} />
+                </Button>
+              </div>
+              <div className="flex h-13 grow items-center rounded-lg border border-panel-border bg-panel-background-alt px-4 text-xl font-semibold">
+                {rangeLabel}
+                {episodesQuery.isFetching && !episodesQuery.isPending && (
+                  <Icon path={mdiLoading} size={1} spin className="ml-3 text-panel-text-primary" />
+                )}
+              </div>
+              <div className="flex items-center gap-x-6 rounded-lg border border-panel-border bg-panel-background-alt px-4 py-3">
+                <Checkbox
+                  id="calendar-include-missing"
+                  label="Include Missing"
+                  isChecked={includeMissing}
+                  onChange={toggleIncludeMissing}
+                  labelRight
+                />
+                <Checkbox
+                  id="calendar-include-restricted"
+                  label="Include Restricted"
+                  isChecked={includeRestricted}
+                  onChange={toggleIncludeRestricted}
+                  labelRight
+                />
+                <Checkbox
+                  id="calendar-only-with-air-time"
+                  label="Only With Air Time"
+                  isChecked={onlyWithAirTime}
+                  onChange={toggleOnlyWithAirTime}
+                  labelRight
+                />
+              </div>
+              <div className="flex items-center gap-x-2 rounded-lg border border-panel-border bg-panel-background-alt px-4 py-2">
+                {episodeTypeOptions.map(option => (
+                  <Button
+                    key={option.value}
+                    buttonType={episodeTypes.includes(option.value) ? 'primary' : 'secondary'}
+                    buttonSize="small"
+                    onClick={() => toggleEpisodeType(option.value)}
+                    tooltip={`${episodeTypes.includes(option.value) ? 'Hide' : 'Show'} ${option.label.toLowerCase()}`}
+                  >
+                    {option.label}
+                  </Button>
+                ))}
+              </div>
+              <MultiStateButton activeState={view} states={viewStates} onStateChange={handleViewChange} />
+            </div>
+          </ShokoPanel>
+        </div>
+
+        <div className="flex grow flex-col overflow-y-auto rounded-lg border border-panel-border bg-panel-background px-4 py-6">
+          {episodesQuery.isPending && (
+            <div className="flex grow items-center justify-center text-panel-text-primary">
+              <Icon path={mdiLoading} size={4} spin />
+            </div>
+          )}
+
+          {!episodesQuery.isPending && (
+            <div className="flex flex-col gap-y-2">
+              <div className="grid grid-cols-7 gap-2">
+                {weekdayNames.map(name => (
+                  <div key={name} className="text-center text-sm font-semibold opacity-65">
+                    {name}
+                  </div>
+                ))}
+              </div>
+              <div className="grid grid-cols-7 gap-2">
+                {days.map((day) => {
+                  const dateKey = day.format(dateKeyFormat);
+                  const isToday = dateKey === today;
+                  const isOutsideMonth = view === 'month' && !day.isSame(anchor, 'month');
+                  const episodes = episodesByDay[dateKey] ?? [];
+
+                  return (
+                    <div
+                      key={dateKey}
+                      className={cx(
+                        'flex flex-col gap-y-1.5 rounded-lg border p-2',
+                        view === 'week' ? 'min-h-96' : 'min-h-36',
+                        isToday ? 'border-panel-text-primary' : 'border-panel-border',
+                        isOutsideMonth ? 'bg-panel-background opacity-50' : 'bg-panel-background-alt',
+                      )}
+                    >
+                      <div
+                        className={cx(
+                          'flex items-center justify-between text-sm font-semibold',
+                          isToday && 'text-panel-text-primary',
+                        )}
+                      >
+                        <span>{day.date() === 1 || view === 'week' ? day.format('MMM D') : day.date()}</span>
+                        {episodes.length > 0 && <span className="text-xs opacity-65">{episodes.length}</span>}
+                      </div>
+                      {episodes.map(episode => <EpisodeCard key={episode.IDs.ID} episode={episode} />)}
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Calendar;