diff --git a/src/client/components/ComicDetail/AcquisitionPanel.tsx b/src/client/components/ComicDetail/AcquisitionPanel.tsx
index 6174d7c..40bfdab 100644
--- a/src/client/components/ComicDetail/AcquisitionPanel.tsx
+++ b/src/client/components/ComicDetail/AcquisitionPanel.tsx
@@ -323,52 +323,45 @@ export const AcquisitionPanel = (
       {!isNil(airDCPPSearchInstance) &&
         !isEmpty(airDCPPSearchInfo) &&
         !isNil(hubs) && (
-          <div className="columns">
-            <div className="column is-one-quarter is-size-7">
-              <div className="card">
-                <div className="card-content">
-                  <dl>
-                    <dt>
-                      <div className="tags mb-1">
-                        {hubs.map((value, idx) => (
-                          <span className="tag is-warning" key={idx}>
-                            {value.identity.name}
-                          </span>
-                        ))}
-                      </div>
-                    </dt>
-                    <dt>
-                      Query:
-                      <span className="has-text-weight-semibold">
-                        {airDCPPSearchInfo.query.pattern}
+          <div className="flex flex-row gap-3 my-5 font-hasklig">
+            <div className="block max-w-sm h-fit p-6 text-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-slate-400 dark:border-gray-700">
+              <dl>
+                <dt>
+                  <div className="mb-1">
+                    {hubs.map((value, idx) => (
+                      <span className="tag is-warning" key={idx}>
+                        {value.identity.name}
                       </span>
-                    </dt>
-                    <dd>
-                      Extensions:
-                      <span className="has-text-weight-semibold">
-                        {airDCPPSearchInfo.query.extensions.join(", ")}
-                      </span>
-                    </dd>
-                    <dd>
-                      File type:
-                      <span className="has-text-weight-semibold">
-                        {airDCPPSearchInfo.query.file_type}
-                      </span>
-                    </dd>
-                  </dl>
-                </div>
-              </div>
+                    ))}
+                  </div>
+                </dt>
+
+                <dt>
+                  Query:
+                  <span className="has-text-weight-semibold">
+                    {airDCPPSearchInfo.query.pattern}
+                  </span>
+                </dt>
+                <dd>
+                  Extensions:
+                  <span className="has-text-weight-semibold">
+                    {airDCPPSearchInfo.query.extensions.join(", ")}
+                  </span>
+                </dd>
+                <dd>
+                  File type:
+                  <span className="has-text-weight-semibold">
+                    {airDCPPSearchInfo.query.file_type}
+                  </span>
+                </dd>
+              </dl>
             </div>
-            <div className="column is-one-quarter is-size-7">
-              <div className="card">
-                <div className="card-content">
-                  <dl>
-                    <dt>Search Instance: {airDCPPSearchInstance.id}</dt>
-                    <dt>Owned by {airDCPPSearchInstance.owner}</dt>
-                    <dd>Expires in: {airDCPPSearchInstance.expires_in}</dd>
-                  </dl>
-                </div>
-              </div>
+            <div className="block max-w-sm p-6 h-fit text-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-slate-400 dark:border-gray-700">
+              <dl>
+                <dt>Search Instance: {airDCPPSearchInstance.id}</dt>
+                <dt>Owned by {airDCPPSearchInstance.owner}</dt>
+                <dd>Expires in: {airDCPPSearchInstance.expires_in}</dd>
+              </dl>
             </div>
           </div>
         )}
@@ -376,8 +369,8 @@ export const AcquisitionPanel = (
       {/* AirDC++ results */}
       <div className="columns">
         {!isNil(airDCPPSearchResults) && !isEmpty(airDCPPSearchResults) ? (
-          <div className="overflow-x-auto w-fit mt-4 rounded-lg border border-gray-200">
-            <table className="min-w-full divide-y-2 divide-gray-200 dark:divide-gray-200 text-md">
+          <div className="overflow-x-auto w-fit mt-4 rounded-lg border border-gray-200 dark:border-gray-500">
+            <table className="min-w-full divide-y-2 divide-gray-200 dark:divide-gray-500 text-md">
               <thead>
                 <tr>
                   <th className="whitespace-nowrap px-2 py-2 font-medium text-gray-900 dark:text-slate-200">
@@ -394,13 +387,15 @@ export const AcquisitionPanel = (
                   </th>
                 </tr>
               </thead>
-              <tbody className="divide-y divide-slate-500">
+              <tbody className="divide-y divide-slate-100 dark:divide-gray-500">
                 {map(airDCPPSearchResults, ({ result }, idx) => {
                   return (
                     <tr
                       key={idx}
                       className={
-                        !isNil(result.dupe) ? "bg-purple-50" : "w-fit text-sm"
+                        !isNil(result.dupe)
+                          ? "bg-gray-100 dark:bg-gray-700"
+                          : "w-fit text-sm"
                       }
                     >
                       <td className="whitespace-nowrap px-3 py-3 text-gray-700 dark:text-slate-300">
@@ -415,7 +410,15 @@ export const AcquisitionPanel = (
                           <dd>
                             <div className="inline-flex flex-row gap-2">
                               {!isNil(result.dupe) ? (
-                                <span className="tag is-warning">Dupe</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">
+                                  <span className="pr-1 pt-1">
+                                    <i className="icon-[solar--copy-bold-duotone] w-5 h-5"></i>
+                                  </span>
+
+                                  <span className="text-md text-slate-500 dark:text-slate-900">
+                                    Dupe
+                                  </span>
+                                </span>
                               ) : null}
 
                               {/* Nicks */}
@@ -468,9 +471,9 @@ export const AcquisitionPanel = (
                           </span>
                         </span>
                       </td>
-                      <td>
+                      <td className="px-2">
                         <button
-                          className="button is-small is-light is-success"
+                          className="flex space-x-1 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-3 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
                           onClick={() =>
                             download(
                               airDCPPSearchInstance.id,
@@ -483,10 +486,10 @@ export const AcquisitionPanel = (
                             )
                           }
                         >
-                          <span className="icon">
-                            <i className="fas fa-file-download"></i>
+                          <span className="text-xs">Download</span>
+                          <span className="w-5 h-5">
+                            <i className="h-5 w-5 icon-[solar--download-bold-duotone]"></i>
                           </span>
-                          <span>Download </span>
                         </button>
                       </td>
                     </tr>
diff --git a/src/client/components/ComicDetail/ActionMenu/Menu.tsx b/src/client/components/ComicDetail/ActionMenu/Menu.tsx
index aede5df..2a68361 100644
--- a/src/client/components/ComicDetail/ActionMenu/Menu.tsx
+++ b/src/client/components/ComicDetail/ActionMenu/Menu.tsx
@@ -70,27 +70,28 @@ export const Menu = (props): ReactElement => {
     }
   };
   const customStyles = {
+    placeholder: (base) => ({
+      ...base,
+      color: "black",
+    }),
     option: (base, { data, isDisabled, isFocused, isSelected }) => {
       return {
         ...base,
-        backgroundColor: isFocused ? "gray" : "black",
+        backgroundColor: isFocused ? "gray" : "rgb(156, 163, 175)",
       };
     },
     control: (base) => ({
       ...base,
-      backgroundColor: "black",
-      border: "1px solid #CCC",
+      backgroundColor: "rgb(156, 163, 175)",
+      color: "black",
+      border: "1px solid rgb(156, 163, 175)",
     }),
   };
 
   return (
     <Select
       components={{ Placeholder }}
-      placeholder={
-        <span>
-          <i className="fa-solid fa-list"></i> Actions
-        </span>
-      }
+      placeholder={<span>Select Action</span>}
       styles={customStyles}
       name="actions"
       isSearchable={false}
diff --git a/src/client/components/ComicDetail/ComicDetail.tsx b/src/client/components/ComicDetail/ComicDetail.tsx
index b313857..e566903 100644
--- a/src/client/components/ComicDetail/ComicDetail.tsx
+++ b/src/client/components/ComicDetail/ComicDetail.tsx
@@ -224,7 +224,9 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
     {
       id: 5,
       icon: (
-        <i className="h-5 w-5 icon-[solar--magnet-bold-duotone] text-slate-500 dark:text-slate-300" />
+        <span className="inline-flex flex-row">
+          <i className="h-5 w-5 icon-[solar--magnet-bold-duotone] text-slate-500 dark:text-slate-300" />
+        </span>
       ),
       name: "Torrent Search",
       content: <>Torrents</>,
@@ -233,7 +235,15 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
     {
       id: 6,
       icon: (
-        <i className="h-5 w-5 icon-[solar--download-bold-duotone] text-slate-500 dark:text-slate-300" />
+        <span className="inline-flex flex-row">
+          {/* download count */}
+          <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">
+            <span className="text-md text-slate-500 dark:text-slate-900">
+              34
+            </span>
+          </span>
+          <i className="h-5 w-5 icon-[solar--download-bold-duotone] text-slate-500 dark:text-slate-300" />
+        </span>
       ),
       name: "Downloads",
       content:
@@ -283,7 +293,15 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
                           created_at: createdAt,
                           updated_at: updatedAt,
                         }}
-                      />
+                      >
+                        {/* action dropdown */}
+                        <div className="mt-1 flex flex-row gap-2 w-full">
+                          <Menu
+                            data={data.data}
+                            handlers={{ setSlidingPanelContentId, setVisible }}
+                          />
+                        </div>
+                      </RawFileDetails>
 
                       {/* <Modal
                       style={{ content: { marginTop: "2rem" } }}
@@ -305,13 +323,6 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
                     </Modal> */}
                     </div>
                   )}
-                {/* action dropdown */}
-                {/* <div className="mt-4 is-size-7">
-                  <Menu
-                    data={data.data}
-                    handlers={{ setSlidingPanelContentId, setVisible }}
-                  />
-                </div> */}
               </div>
             </div>
 
diff --git a/src/client/components/ComicDetail/DownloadsPanel.tsx b/src/client/components/ComicDetail/DownloadsPanel.tsx
index 0d71a9d..17ed8cc 100644
--- a/src/client/components/ComicDetail/DownloadsPanel.tsx
+++ b/src/client/components/ComicDetail/DownloadsPanel.tsx
@@ -61,7 +61,6 @@ export const DownloadsPanel = (
   }, [comicObject]);
 
   const Bundles = (props) => {
-    console.log("asdas", props);
     return (
       <div className="overflow-x-auto w-fit mt-4 rounded-lg border border-gray-200">
         <table className="min-w-full divide-y-2 divide-gray-200 dark:divide-gray-200 text-md">
diff --git a/src/client/components/ComicDetail/RawFileDetails.tsx b/src/client/components/ComicDetail/RawFileDetails.tsx
index 4ffddbe..25fcf59 100644
--- a/src/client/components/ComicDetail/RawFileDetails.tsx
+++ b/src/client/components/ComicDetail/RawFileDetails.tsx
@@ -7,7 +7,6 @@ import { format, parseISO } from "date-fns";
 export const RawFileDetails = (props): ReactElement => {
   const { rawFileDetails, inferredMetadata, created_at, updated_at } =
     props.data;
-  const PaperClipIcon = () => <></>;
   return (
     <>
       <div className="max-w-2xl ml-5">
@@ -89,52 +88,7 @@ export const RawFileDetails = (props): ReactElement => {
               <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
                 Actions
               </dt>
-              <dd className="mt-1 text-sm text-gray-900">
-                <ul
-                  role="list"
-                  className="divide-y divide-gray-200 rounded-md border border-gray-200"
-                >
-                  <li className="flex items-center justify-between py-3 pl-3 pr-4 text-sm">
-                    <div className="flex w-0 flex-1 items-center">
-                      <PaperClipIcon
-                        className="h-5 w-5 flex-shrink-0 text-gray-400"
-                        aria-hidden="true"
-                      />
-                      <span className="ml-2 w-0 flex-1 truncate">
-                        resume_back_end_developer.pdf
-                      </span>
-                    </div>
-                    <div className="ml-4 flex-shrink-0">
-                      <a
-                        href="#"
-                        className="font-medium text-indigo-600 hover:text-indigo-500"
-                      >
-                        Download
-                      </a>
-                    </div>
-                  </li>
-                  <li className="flex items-center justify-between py-3 pl-3 pr-4 text-sm">
-                    <div className="flex w-0 flex-1 items-center">
-                      {/* Read comic button */}
-                      <button
-                        className="button is-success is-light"
-                        onClick={() => {}}
-                      >
-                        <i className="fa-solid fa-book-open mr-2"></i>
-                        Read
-                      </button>
-                    </div>
-                    <div className="ml-4 flex-shrink-0">
-                      <a
-                        href="#"
-                        className="font-medium text-indigo-600 hover:text-indigo-500"
-                      >
-                        Download
-                      </a>
-                    </div>
-                  </li>
-                </ul>
-              </dd>
+              <dd className="mt-1 text-sm text-gray-900">{props.children}</dd>
             </div>
           </dl>
         </div>
@@ -169,4 +123,5 @@ RawFileDetails.propTypes = {
     created_at: PropTypes.string,
     updated_at: PropTypes.string,
   }),
+  children: PropTypes.any,
 };
diff --git a/src/client/components/ComicDetail/TabControls.tsx b/src/client/components/ComicDetail/TabControls.tsx
index 1201998..219a155 100644
--- a/src/client/components/ComicDetail/TabControls.tsx
+++ b/src/client/components/ComicDetail/TabControls.tsx
@@ -24,21 +24,22 @@ export const TabControls = (props): ReactElement => {
                 onClick={() => setActive(id)}
               >
                 {/* Downloads tab and count badge */}
-                {/* <a>
-                {id === 6 && !isNil(acquisition.directconnect) ? (
-                  <span className="download-icon-labels">
-                    <i className="fa-solid fa-download"></i>
-                    <span className="tag downloads-count is-info is-light">
-                      {acquisition.directconnect.downloads.length}
+                <>
+                  {id === 6 && !isNil(acquisition.directconnect) ? (
+                    <span className="inline-flex flex-row">
+                      {/* download count */}
+                      <span className="inline-flex mx-2 items-center bg-slate-200 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                        <span className="text-md text-slate-500 dark:text-slate-900">
+                          {acquisition.directconnect.downloads.length}
+                        </span>
+                      </span>
+                      <i className="h-5 w-5 icon-[solar--download-bold-duotone] text-slate-500 dark:text-slate-300" />
                     </span>
-                  </span>
-                ) : (
-                  <span className="icon is-small">{icon}</span>
-                )}
-                {name}
-              </a> */}
-                <span className="w-5 h-5">{icon}</span>
-                {name}
+                  ) : (
+                    <span className="w-5 h-5">{icon}</span>
+                  )}
+                  {name}
+                </>
               </a>
             ))}
           </nav>
diff --git a/src/client/components/Library/Library.tsx b/src/client/components/Library/Library.tsx
index 4cca3c5..fa95938 100644
--- a/src/client/components/Library/Library.tsx
+++ b/src/client/components/Library/Library.tsx
@@ -4,6 +4,7 @@ import { useNavigate } from "react-router-dom";
 import { isEmpty, isNil, isUndefined } from "lodash";
 import MetadataPanel from "../shared/MetadataPanel";
 import T2Table from "../shared/T2Table";
+import SearchBar from "../Library/SearchBar";
 import ellipsize from "ellipsize";
 import { useQuery, keepPreviousData } from "@tanstack/react-query";
 import axios from "axios";
@@ -20,6 +21,7 @@ export const Library = (): ReactElement => {
   // Default page state
   // offset: 0
   const [offset, setOffset] = useState(0);
+  const [searchResults, setSearchResults] = useState([]);
 
   // Method to fetch paginated issues
   const fetchIssues = async (searchQuery, offset, type) => {
@@ -216,6 +218,7 @@ export const Library = (): ReactElement => {
         {!isUndefined(searchResults?.hits) ? (
           <div>
             <div className="library">
+              <SearchBar />
               <T2Table
                 totalPages={searchResults.hits.total.value}
                 columns={columns}
diff --git a/src/client/components/Library/SearchBar.tsx b/src/client/components/Library/SearchBar.tsx
index 268a025..b26accc 100644
--- a/src/client/components/Library/SearchBar.tsx
+++ b/src/client/components/Library/SearchBar.tsx
@@ -6,7 +6,6 @@ import { searchIssue } from "../../actions/fileops.actions";
 
 export const SearchBar = (): ReactElement => {
   const handleSubmit = useCallback((e) => {
-    // dispatch(
     //   searchIssue(
     //     {
     //       query: {
@@ -22,7 +21,6 @@ export const SearchBar = (): ReactElement => {
     //       trigger: "libraryPage",
     //     },
     //   ),
-    // );
   }, []);
   return (
     <Form
diff --git a/src/client/components/shared/T2Table.tsx b/src/client/components/shared/T2Table.tsx
index bda11ff..91b45fe 100644
--- a/src/client/components/shared/T2Table.tsx
+++ b/src/client/components/shared/T2Table.tsx
@@ -1,6 +1,5 @@
 import React, { ReactElement, useMemo, useState } from "react";
 import PropTypes from "prop-types";
-import SearchBar from "../Library/SearchBar";
 import { Link } from "react-router-dom";
 import {
   ColumnDef,
@@ -74,8 +73,6 @@ export const T2Table = (tableOptions): ReactElement => {
       <div>
         {/* Search bar */}
         <div className="flex flex-row gap-2 justify-between mt-5">
-          <SearchBar />
-
           {/* pagination controls */}
           <div>
             Page {pageIndex} of {Math.ceil(totalPages / pageSize)}