diff --git a/src/client/components/App.tsx b/src/client/components/App.tsx
index 3f933de..93b1c08 100644
--- a/src/client/components/App.tsx
+++ b/src/client/components/App.tsx
@@ -22,7 +22,7 @@ class App extends React.Component<Record<string, unknown>, undefined> {
               <Import path={"./comics"} />
             </Route>
             <Route
-              path={"/comic/details/:mongoObjId"}
+              path={"/comic/details/:comicObjectId"}
               component={ComicDetail}
             />
           </Switch>
diff --git a/src/client/components/Card.tsx b/src/client/components/Card.tsx
index 82cc7d1..cef84ef 100644
--- a/src/client/components/Card.tsx
+++ b/src/client/components/Card.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import { IExtractedComicBookCoverFile } from "../../server/interfaces/folder.interface";
+import { removeLeadingPeriod } from "../shared/utils/formatting.utils";
 import { isUndefined, isEmpty } from "lodash";
 import { Link } from "react-router-dom";
 
@@ -14,14 +15,7 @@ class Card extends React.Component<IProps, IState> {
     super(props);
     console.log(props);
   }
-  private removeLeadingPeriod = (input: string): string => {
-    if (!isUndefined(this.props.comicBookCoversMetadata)) {
-      if (input.charAt(0) == ".") {
-        input = input.substr(1);
-      }
-    }
-    return input;
-  };
+
   public drawCoverCard = (
     metadata: IExtractedComicBookCoverFile,
   ): JSX.Element => {
@@ -34,7 +28,7 @@ class Card extends React.Component<IProps, IState> {
                 <img
                   src={
                     "http://localhost:3000" +
-                    this.removeLeadingPeriod(metadata.path) +
+                    removeLeadingPeriod(metadata.path) +
                     "/" +
                     metadata.name
                   }
diff --git a/src/client/components/ComicDetail.tsx b/src/client/components/ComicDetail.tsx
index c4b1e09..2726326 100644
--- a/src/client/components/ComicDetail.tsx
+++ b/src/client/components/ComicDetail.tsx
@@ -1,5 +1,40 @@
-import React from "react";
-
+import React, { useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
+import axios from "axios";
+import Card from "./Card";
+import { isEmpty, isUndefined } from "lodash";
 type ComicDetailProps = {};
 
-export const ComicDetail = ({}: ComicDetailProps) => <section>1,2,3</section>;
+export const ComicDetail = ({}: ComicDetailProps) => {
+  const [page, setPage] = useState(1);
+  const [comicDetail, setComicDetail] = useState([]);
+  const { comicObjectId } = useParams();
+
+  useEffect(() => {
+    axios
+      .request({
+        url: `http://localhost:3000/api/import/getComicBookById`,
+
+        method: "POST",
+        data: {
+          id: comicObjectId,
+        },
+      })
+      .then((response) => {
+        console.log("fetched", response);
+        setComicDetail(response.data);
+      })
+      .catch((error) => console.log(error));
+  }, [page]);
+
+  return (
+    <section className="container">
+      {!isEmpty(comicDetail) && !isUndefined(comicDetail) && (
+        <>
+          <h1 className="title">{comicDetail.rawFileDetails.name}</h1>
+          <Card comicBookCoversMetadata={comicDetail.rawFileDetails} />
+        </>
+      )}
+    </section>
+  );
+};
diff --git a/src/client/shared/utils/formatting.utils.ts b/src/client/shared/utils/formatting.utils.ts
new file mode 100644
index 0000000..48de8a8
--- /dev/null
+++ b/src/client/shared/utils/formatting.utils.ts
@@ -0,0 +1,6 @@
+export const removeLeadingPeriod = (input: string): string => {
+  if (input.charAt(0) == ".") {
+    input = input.substr(1);
+  }
+  return input;
+};