diff --git a/package.json b/package.json
index 0818d79..0068d5d 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
"better-docs": "^2.3.2",
"calibre-opds": "^1.0.7",
"comlink-loader": "^2.0.0",
+ "dayjs": "^1.10.6",
"ellipsize": "^0.1.0",
"event-stream": "^4.0.1",
"express": "^4.17.1",
diff --git a/src/client/components/ComicDetail.tsx b/src/client/components/ComicDetail.tsx
index 684011c..22cc533 100644
--- a/src/client/components/ComicDetail.tsx
+++ b/src/client/components/ComicDetail.tsx
@@ -1,6 +1,5 @@
import React, { useState, useEffect, useCallback, ReactElement } from "react";
import { useParams } from "react-router-dom";
-import axios from "axios";
import Card from "./Card";
import MatchResult from "./MatchResult";
import ComicVineSearchForm from "./ComicVineSearchForm";
@@ -12,12 +11,22 @@ import { IExtractedComicBookCoverFile, RootState } from "threetwo-ui-typings";
import { fetchComicVineMatches } from "../actions/fileops.actions";
import { getComicBookDetailById } from "../actions/comicinfo.actions";
import { Drawer, Divider } from "antd";
+import * as dayjs from "dayjs";
const prettyBytes = require("pretty-bytes");
import "antd/dist/antd.css";
import { useDispatch, useSelector } from "react-redux";
type ComicDetailProps = {};
+/**
+ * Component for displaying the metadata for a comic in greater detail.
+ *
+ * @component
+ * @example
+ * return (
+ *