diff --git a/src/client/components/Library/Library.tsx b/src/client/components/Library/Library.tsx
index 3d4bde2..299316e 100644
--- a/src/client/components/Library/Library.tsx
+++ b/src/client/components/Library/Library.tsx
@@ -152,10 +152,10 @@ export const Library = (): ReactElement => {
             accessorKey: "_source.createdAt",
             cell: (info) => {
               return !isNil(info.getValue()) ? (
-                <div className="text-sm w-max ml-3 my-3 text-slate-600 dark:text-slate-900">
-                  <p>{format(parseISO(info.getValue()), "dd MMMM, yyyy")} </p>
-                  {format(parseISO(info.getValue()), "h aaaa")}
-                </div>
+                <span className="inline-flex items-center bg-slate-300 dark:bg-slate-500 text-xs font-medium text-slate-700 dark:text-slate-200 px-3 py-1 rounded-md shadow-sm whitespace-nowrap ml-3 my-3">
+                  <i className="icon-[solar--file-download-bold] w-4 h-4 mr-2 opacity-70" />
+                  {format(parseISO(info.getValue()), "dd MMM yyyy, h:mm a")}
+                </span>
               ) : null;
             },
           },
@@ -164,23 +164,25 @@ export const Library = (): ReactElement => {
             accessorKey: "_source.acquisition",
             cell: (info) => (
               <div className="flex flex-col gap-2 ml-3 my-3">
-                <span className="inline-flex items-center w-fit bg-slate-50 text-slate-800 text-xs px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                  <span className="pr-1 pt-1">
-                    <i className="icon-[solar--folder-path-connect-bold-duotone] w-5 h-5"></i>
+                {/* DC++ Downloads */}
+                {info.getValue().directconnect?.downloads?.length > 0 ? (
+                  <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-1 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                    <i className="icon-[solar--folder-path-connect-bold-duotone] w-4 h-4 mr-1 opacity-70" />
+                    <span>
+                      DC++: {info.getValue().directconnect.downloads.length}
+                    </span>
                   </span>
-                  <span className="text-md text-slate-900 dark:text-slate-900">
-                    DC++: {info.getValue().directconnect.downloads.length}
-                  </span>
-                </span>
+                ) : null}
 
-                <span className="inline-flex w-fit items-center bg-slate-50 text-slate-800 text-xs px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                  <span className="pr-1 pt-1">
-                    <i className="icon-[solar--magnet-bold-duotone] w-5 h-5"></i>
+                {/* Torrent Downloads */}
+                {info.getValue().torrent.length > 0 ? (
+                  <span className="inline-flex items-center whitespace-nowrap bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-1 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                    <i className="icon-[solar--magnet-bold-duotone] w-4 h-4 mr-1 opacity-70" />
+                    <span className="whitespace-nowrap">
+                      Torrent: {info.getValue().torrent.length}
+                    </span>
                   </span>
-                  <span className="text-md text-slate-900 dark:text-slate-900">
-                    Torrent: {info.getValue().torrent.length}
-                  </span>
-                </span>
+                ) : null}
               </div>
             ),
           },
diff --git a/src/client/components/Search/Search.tsx b/src/client/components/Search/Search.tsx
index 29d75e7..765f62c 100644
--- a/src/client/components/Search/Search.tsx
+++ b/src/client/components/Search/Search.tsx
@@ -271,23 +271,22 @@ export const Search = ({}: ISearchProps): ReactElement => {
               return result.resource_type === "issue" ? (
                 <div
                   key={result.id}
-                  className="relative flex items-start gap-4 py-6 border-b border-slate-300 dark:border-slate-700"
+                  className="relative flex gap-4 py-6 px-3 border-b border-slate-200 dark:border-slate-700 hover:bg-slate-100/50 dark:hover:bg-slate-800/30 transition-colors duration-150 group"
                 >
                   {/* IMAGE */}
-                  <Card
-                    orientation="cover-only"
-                    imageUrl={result?.image?.small_url}
-                    hasDetails={false}
-                    cardContainerStyle={{
-                      width: "120px",
-                      maxWidth: "150px",
-                    }}
-                  />
+                  <div className="flex-shrink-0">
+                    <Card
+                      orientation="cover-only"
+                      imageUrl={result.image.small_url}
+                      hasDetails={false}
+                      cardContainerStyle={{ width: "120px", maxWidth: "150px" }}
+                    />
+                  </div>
 
                   {/* RIGHT-SIDE CONTENT */}
                   <div className="flex-1 min-w-0">
                     {/* TITLE */}
-                    <div className="text-base font-semibold text-gray-900 dark:text-white truncate">
+                    <div className="text-base font-medium text-slate-800 dark:text-white tracking-tight truncate">
                       {result.volume?.name || <span>No Name</span>}
                     </div>
 
@@ -335,9 +334,10 @@ export const Search = ({}: ISearchProps): ReactElement => {
                         )}
                       </p>
                     )}
+
                     {/* CTA BUTTON */}
-                    {result.volume.name ? (
-                      <div className="mt-4 justify-self-end">
+                    {result.volume.name && (
+                      <div className="absolute bottom-4 right-4">
                         <PopoverButton
                           content={`This will add ${result?.volume?.name} to your wanted list.`}
                           clickHandler={() =>
@@ -350,14 +350,14 @@ export const Search = ({}: ISearchProps): ReactElement => {
                           }
                         />
                       </div>
-                    ) : null}
+                    )}
                   </div>
                 </div>
               ) : (
                 result.resource_type === "volume" && (
                   <div
                     key={result.id}
-                    className="relative flex items-start gap-4 py-6 border-b border-slate-300 dark:border-slate-700"
+                    className="relative flex gap-4 py-6 px-3 border-b border-slate-200 dark:border-slate-700 hover:bg-slate-100/50 dark:hover:bg-slate-800/30 transition-colors duration-150 group"
                   >
                     {/* LEFT COLUMN: COVER */}
                     <Card
diff --git a/src/client/components/shared/MetadataPanel.tsx b/src/client/components/shared/MetadataPanel.tsx
index 9426f91..1571a95 100644
--- a/src/client/components/shared/MetadataPanel.tsx
+++ b/src/client/components/shared/MetadataPanel.tsx
@@ -67,21 +67,21 @@ export const MetadataPanel = (props: MetadataPanelProps): ReactElement => {
 
           {inferredMetadata.issue.number && (
             <dd className="my-2">
-              <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                <i className="icon-[solar--hashtag-outline] w-3.5 h-3.5 pr-1 pt-1"></i>
+              <span className="inline-flex items-center bg-slate-100 dark:bg-slate-400 text-slate-800 dark:text-slate-900 text-xs font-medium px-2 py-1 rounded-md">
+                <i className="icon-[solar--hashtag-bold-duotone] w-4 h-4 mr-1 opacity-70"></i>
                 <span>{inferredMetadata.issue.number}</span>
               </span>
             </dd>
           )}
 
           <dd className="flex flex-row gap-2 w-max">
-            <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
-              <i className="icon-[solar--zip-file-bold-duotone] w-5 h-5 pr-1 pt-1" />
+            <span className="inline-flex items-center bg-slate-100 dark:bg-slate-400 text-slate-800 dark:text-slate-900 text-xs font-medium px-2 py-1 rounded-md">
+              <i className="icon-[solar--file-text-bold-duotone] w-4 h-4 mr-1 opacity-70" />
               {rawFileDetails.mimeType}
             </span>
 
-            <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
-              <i className="icon-[solar--mirror-right-bold-duotone] w-5 h-5 pr-1 pt-1" />
+            <span className="inline-flex items-center bg-slate-100 dark:bg-slate-400 text-slate-800 dark:text-slate-900 text-xs font-medium px-2 py-1 rounded-md">
+              <i className="icon-[solar--database-bold-duotone] w-4 h-4 mr-1 opacity-70" />
               {prettyBytes(rawFileDetails.fileSize)}
             </span>
 
@@ -98,43 +98,48 @@ export const MetadataPanel = (props: MetadataPanelProps): ReactElement => {
     {
       name: "comicvine",
       content: () => {
-        console.log("comicvine:", comicvine);
-        console.log("volumeInformation:", comicvine?.volumeInformation);
         return (
           !isUndefined(comicvine?.volumeInformation) && (
-            <dl>
-              <dt>
-                <h6
-                  className="name has-text-weight-medium mb-1"
-                  style={props.titleStyle}
-                >
-                  {ellipsize(issueName, 18)}
-                </h6>
+            <dl className="space-y-1 text-sm text-slate-700 dark:text-slate-200">
+              {/* Title */}
+              <dt className="text-base font-semibold text-slate-900 dark:text-white">
+                {ellipsize(issueName, 28)}
               </dt>
+
+              {/* Volume Name */}
               <dd>
-                <span className="is-size-7">
-                  Is a part of{" "}
-                  <span className="has-text-weight-semibold">
+                <span className="text-sm text-slate-600 dark:text-slate-300">
+                  Part of{" "}
+                  <span className="font-medium text-slate-800 dark:text-white">
                     {comicvine.volumeInformation.name}
                   </span>
                 </span>
               </dd>
-              <dd className="is-size-7">
-                <span>
-                  {ellipsize(
-                    convert(comicvine.description || "", {
-                      baseElements: { selectors: ["p"] },
-                    }),
-                    120,
-                  )}
-                </span>
+
+              {/* Description */}
+              <dd className="text-slate-600 dark:text-slate-300">
+                {ellipsize(
+                  convert(comicvine.description || "", {
+                    baseElements: { selectors: ["p"] },
+                  }),
+                  160,
+                )}
               </dd>
-              <dd className="is-size-7 mt-2">
-                <span className="my-3 mx-2">
+
+              {/* Misc Info */}
+              <dd className="flex flex-wrap items-center gap-2 pt-2 text-xs text-slate-500 dark:text-slate-300">
+                <span className="inline-flex items-center bg-slate-100 dark:bg-slate-600 px-2 py-0.5 rounded-md">
+                  <i className="icon-[solar--calendar-bold-duotone] w-4 h-4 mr-1 opacity-70" />
                   {comicvine.volumeInformation.start_year}
                 </span>
-                {comicvine.volumeInformation.count_of_issues}
-                ComicVine ID: {comicvine.id}
+                <span className="inline-flex items-center bg-slate-100 dark:bg-slate-600 px-2 py-0.5 rounded-md">
+                  <i className="icon-[solar--book-bold-duotone] w-4 h-4 mr-1 opacity-70" />
+                  {comicvine.volumeInformation.count_of_issues} issues
+                </span>
+                <span className="inline-flex items-center bg-slate-100 dark:bg-slate-600 px-2 py-0.5 rounded-md">
+                  <i className="icon-[solar--hashtag-bold-duotone] w-4 h-4 mr-1 opacity-70" />
+                  ID: {comicvine.id}
+                </span>
               </dd>
             </dl>
           )
@@ -187,6 +192,7 @@ export const MetadataPanel = (props: MetadataPanelProps): ReactElement => {
         orientation="cover-only"
         hasDetails={false}
         imageStyle={props.imageStyle}
+        cardContainerStyle={{ width: "190px", maxWidth: "230px" }}
       />
       <div>{metadataPanel?.content()}</div>
     </div>