diff --git a/src/client/components/ComicDetail.tsx b/src/client/components/ComicDetail.tsx
index 2132a62..42c535b 100644
--- a/src/client/components/ComicDetail.tsx
+++ b/src/client/components/ComicDetail.tsx
@@ -286,13 +286,6 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
                     />
                   </>
                 )}
-                {/* comic vine scraped metadata */}
-                {isComicBookMetadataAvailable && (
-                  <ComicVineDetails
-                    data={comicBookDetailData.sourcedMetadata.comicvine}
-                    updatedAt={comicBookDetailData.updatedAt}
-                  />
-                )}
               </div>
             </div>
 
diff --git a/src/client/components/ComicDetail/ComicVineDetails.tsx b/src/client/components/ComicDetail/ComicVineDetails.tsx
index a86bc6d..27985c2 100644
--- a/src/client/components/ComicDetail/ComicVineDetails.tsx
+++ b/src/client/components/ComicDetail/ComicVineDetails.tsx
@@ -3,60 +3,105 @@ import PropTypes from "prop-types";
 import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils";
 import dayjs from "dayjs";
 import { isUndefined } from "lodash";
-
+import Card from "../Carda";
 export const ComicVineDetails = (props): ReactElement => {
   const { data, updatedAt } = props;
   return (
-    <div className="content comic-detail comicvine-metadata">
-      <dl>
-        <dt>ComicVine Metadata</dt>
-        <dd className="is-size-7">
-          Last scraped on {dayjs(updatedAt).format("MMM D YYYY [at] h:mm a")}
-        </dd>
-        <dd>
-          <h6>{data.name}</h6>
-        </dd>
-        {data.issue_number && (
-          <dd className="mb-2">
-            <div className="tags has-addons">
-              <span className="tag is-light">Issue Number</span>
-              <span className="tag is-warning">{data.issue_number}</span>
+    <div className="column is-two-thirds">
+      <div className="comic-detail comicvine-metadata">
+        <dl>
+          <dt>ComicVine Metadata</dt>
+          <dd className="is-size-7">
+            Last scraped on {dayjs(updatedAt).format("MMM D YYYY [at] h:mm a")}
+          </dd>
+
+          <dd>
+            <div className="columns mt-2">
+              <div className="column is-2">
+                <Card
+                  imageUrl={data.volumeInformation.image.thumb_url}
+                  orientation={"vertical"}
+                  hasDetails={false}
+                  // cardContainerStyle={{ maxWidth: 200 }}
+                />
+              </div>
+              <div className="column is-10">
+                <dl>
+                  <dt>
+                    <h6 className="has-text-weight-bold mb-2">{data.name}</h6>
+                  </dt>
+                  <dd>
+                    Is a part of{" "}
+                    <span className="has-text-info">
+                      {data.volumeInformation.name}
+                    </span>
+                  </dd>
+
+                  <dd>
+                    Published by
+                    <span className="has-text-weight-semibold">
+                      {" "}
+                      {data.volumeInformation.publisher.name}
+                    </span>
+                  </dd>
+                  <dd>
+                    Total issues in this volume:
+                    {data.volumeInformation.count_of_issues}
+                  </dd>
+
+                  <dd>
+                    <div className="field is-grouped mt-2">
+                      {data.issue_number && (
+                        <div className="control">
+                          <div className="tags has-addons">
+                            <span className="tag is-light">Issue Number</span>
+                            <span className="tag is-warning">
+                              {data.issue_number}
+                            </span>
+                          </div>
+                        </div>
+                      )}
+                      {!isUndefined(
+                        detectIssueTypes(data.volumeInformation.description),
+                      ) ? (
+                        <div className="control">
+                          <div className="tags has-addons">
+                            <span className="tag is-light">Detected Type</span>
+                            <span className="tag is-warning">
+                              {
+                                detectIssueTypes(
+                                  data.volumeInformation.description,
+                                ).displayName
+                              }
+                            </span>
+                          </div>
+                        </div>
+                      ) : data.resource_type ? (
+                        <div className="control">
+                          <div className="tags has-addons">
+                            <span className="tag is-light">Type</span>
+                            <span className="tag is-warning">
+                              {data.resource_type}
+                            </span>
+                          </div>
+                        </div>
+                      ) : null}
+                      <div className="control">
+                        <div className="tags has-addons">
+                          <span className="tag is-light">
+                            ComicVine Issue ID
+                          </span>
+                          <span className="tag is-success">{data.id}</span>
+                        </div>
+                      </div>
+                    </div>
+                  </dd>
+                </dl>
+              </div>
             </div>
           </dd>
-        )}
-        <dd>
-          <div className="field is-grouped is-grouped-multiline">
-            {!isUndefined(
-              detectIssueTypes(data.volumeInformation.description),
-            ) ? (
-              <div className="control">
-                <div className="tags has-addons">
-                  <span className="tag is-light">Detected Type</span>
-                  <span className="tag is-warning">
-                    {
-                      detectIssueTypes(data.volumeInformation.description)
-                        .displayName
-                    }
-                  </span>
-                </div>
-              </div>
-            ) : data.resource_type ? (
-              <div className="control">
-                <div className="tags has-addons">
-                  <span className="tag is-light">Type</span>
-                  <span className="tag is-warning">{data.resource_type}</span>
-                </div>
-              </div>
-            ) : null}
-            <div className="control">
-              <div className="tags has-addons">
-                <span className="tag is-light">ComicVine Issue ID</span>
-                <span className="tag is-success">{data.id}</span>
-              </div>
-            </div>
-          </div>
-        </dd>
-      </dl>
+        </dl>
+      </div>
     </div>
   );
 };
diff --git a/src/client/components/ComicDetail/RawFileDetails.tsx b/src/client/components/ComicDetail/RawFileDetails.tsx
index db48844..c601f1f 100644
--- a/src/client/components/ComicDetail/RawFileDetails.tsx
+++ b/src/client/components/ComicDetail/RawFileDetails.tsx
@@ -7,61 +7,67 @@ export const RawFileDetails = (props): ReactElement => {
   const { rawFileDetails, inferredMetadata } = props.data;
   console.log(props);
   return (
-    <div className="content comic-detail raw-file-details">
-      <dl>
-        <dt>Raw File Details</dt>
-        <dd className="is-size-7">
-          {rawFileDetails.containedIn +
-            "/" +
-            rawFileDetails.name +
-            rawFileDetails.extension}
-        </dd>
-        <dd>
-          <div className="field is-grouped mt-2">
-            <div className="control">
-              <div className="tags has-addons">
-                <span className="tag">Size</span>
-                <span className="tag is-info is-light">
-                  {prettyBytes(rawFileDetails.fileSize)}
-                </span>
-              </div>
-            </div>
-            <div className="control">
-              <div className="tags has-addons">
-                <span className="tag">Extension</span>
-                <span className="tag is-primary is-light">
-                  {rawFileDetails.extension}
-                </span>
-              </div>
-            </div>
-          </div>
-        </dd>
-        {/* inferred metadata */}
-        <dt className="mt-3">Inferred Issue Metadata</dt>
-        <dd>
-          <div className="field is-grouped mt-2">
-            <div className="control">
-              <div className="tags has-addons">
-                <span className="tag">Name</span>
-                <span className="tag is-info is-light">
-                  {inferredMetadata.issue.name}
-                </span>
-              </div>
-            </div>
-            {!isUndefined(inferredMetadata.issue.number) ? (
+    <>
+      <div className="comic-detail raw-file-details">
+        <dl>
+          <dt>Raw File Details</dt>
+          <dd className="is-size-7">
+            {rawFileDetails.containedIn +
+              "/" +
+              rawFileDetails.name +
+              rawFileDetails.extension}
+          </dd>
+          <dd>
+            <div className="field is-grouped mt-2">
               <div className="control">
                 <div className="tags has-addons">
-                  <span className="tag">Number</span>
-                  <span className="tag is-primary is-light">
-                    {inferredMetadata.issue.number}
+                  <span className="tag">Size</span>
+                  <span className="tag is-info is-light">
+                    {prettyBytes(rawFileDetails.fileSize)}
                   </span>
                 </div>
               </div>
-            ) : null}
-          </div>
-        </dd>
-      </dl>
-    </div>
+              <div className="control">
+                <div className="tags has-addons">
+                  <span className="tag">Extension</span>
+                  <span className="tag is-primary is-light">
+                    {rawFileDetails.extension}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </dd>
+        </dl>
+        </div>
+        <div className="content comic-detail raw-file-details mt-3">
+          <dl>
+            {/* inferred metadata */}
+            <dt>Inferred Issue Metadata</dt>
+            <dd>
+              <div className="field is-grouped mt-2">
+                <div className="control">
+                  <div className="tags has-addons">
+                    <span className="tag">Name</span>
+                    <span className="tag is-info is-light">
+                      {inferredMetadata.issue.name}
+                    </span>
+                  </div>
+                </div>
+                {!isUndefined(inferredMetadata.issue.number) ? (
+                  <div className="control">
+                    <div className="tags has-addons">
+                      <span className="tag">Number</span>
+                      <span className="tag is-primary is-light">
+                        {inferredMetadata.issue.number}
+                      </span>
+                    </div>
+                  </div>
+                ) : null}
+              </div>
+            </dd>
+          </dl>
+        </div>
+    </>
   );
 };
 
diff --git a/src/client/components/ComicDetail/Tabs/VolumeInformation.tsx b/src/client/components/ComicDetail/Tabs/VolumeInformation.tsx
index d3290e4..ce38efe 100644
--- a/src/client/components/ComicDetail/Tabs/VolumeInformation.tsx
+++ b/src/client/components/ComicDetail/Tabs/VolumeInformation.tsx
@@ -1,4 +1,5 @@
 import React, { ReactElement } from "react";
+import ComicVineDetails from "../ComicVineDetails";
 
 export const VolumeInformation = (props): ReactElement => {
   const { data } = props;
@@ -8,44 +9,13 @@ export const VolumeInformation = (props): ReactElement => {
 
   return (
     <div key={1}>
-      <div className="columns">
-        <div className="column is-narrow">
-          <figure className="card-image">
-            <img
-              src={
-                data.sourcedMetadata.comicvine.volumeInformation.image.thumb_url
-              }
-            />
-          </figure>
-        </div>
-        <div className="column is-4">
-          <dl>
-            <dt>
-              Is a part of{" "}
-              <span className="has-text-info">
-                {data.sourcedMetadata.comicvine.volumeInformation.name}
-              </span>
-            </dt>
-            <dd>
-              Published by
-              <span className="has-text-weight-semibold">
-                {" "}
-                {
-                  data.sourcedMetadata.comicvine.volumeInformation.publisher
-                    .name
-                }
-              </span>
-            </dd>
-            <dd>
-              Total issues in this volume:
-              {data.sourcedMetadata.comicvine.volumeInformation.count_of_issues}
-            </dd>
-          </dl>
-        </div>
-      </div>
-      <div className="columns">
+      <div className="columns is-multiline">
+        <ComicVineDetails
+          data={data.sourcedMetadata.comicvine}
+          updatedAt={data.updatedAt}
+        />
         <div
-          className="column is-three-quarters"
+          className="column is-8"
           dangerouslySetInnerHTML={createDescriptionMarkup(
             data.sourcedMetadata.comicvine.volumeInformation.description,
           )}
diff --git a/src/client/shared/utils/tradepaperback.utils.ts b/src/client/shared/utils/tradepaperback.utils.ts
index 2b5d502..1dd8b4a 100644
--- a/src/client/shared/utils/tradepaperback.utils.ts
+++ b/src/client/shared/utils/tradepaperback.utils.ts
@@ -13,15 +13,6 @@ export const detectIssueTypes = (deck: string): any => {
     { regex: [/mini\Wseries/gim], displayName: "Mini-Series" },
   ];
 
-  // const issueNames = await axios.request({
-  //   url: "http://localhost:3000/api/import/scrapeIssueNamesFromDOM",
-  //   method: "POST",
-  //   data: {
-  //     html: deck,
-  //   },
-  // });
-  // console.log(deck);
-  // console.log("DOM", issueNames);
   const matches = map(issueTypeMatchers, (matcher) => {
     return getIssueTypeDisplayName(deck, matcher.regex, matcher.displayName);
   });