💅🏼 Formatting tweaks to tabs

💅🏼 Formatting improvements
🧲 Added visual indicators of torrent progress
2024-03-30 21:28:48 -04:00 · 2024-03-29 23:26:43 -04:00 · 2024-03-29 19:35:57 -04:00 · 2024-03-27 22:23:24 -05:00 · 2024-03-24 17:30:51 -04:00 · 2024-03-16 18:34:41 -04:00
84 changed files with 6637 additions and 5351 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -4,6 +4,7 @@ comics/
 docs/
 userdata/
 dist/
 storybook-static/*
 src/client/assets/scss/App.css
 /server/
 node_modules/
--- a/README.md
+++ b/README.md
@@ -6,14 +6,25 @@ ThreeTwo! _aims to be_ a comic book curation app.
 ### Screenshots
-![](https://github.com/rishighan/threetwo-visual-updates/raw/67e56878eb0381c73c1dea746a45253d3dcaa184/update_december_2022/Dashboard.png)
+#### Dashboard
-![](https://github.com/rishighan/threetwo-visual-updates/raw/67e56878eb0381c73c1dea746a45253d3dcaa184/update_december_2022/Library.png)
+![](https://raw.githubusercontent.com/rishighan/threetwo/ef05dee6005f683f1e4547631217681def9ebe86/screenshots/Dashboard.jpg)
-![](https://github.com/rishighan/threetwo-visual-updates/raw/67e56878eb0381c73c1dea746a45253d3dcaa184/update_december_2022/DC%2B%2B%20integration.png)
+#### Issue View
-![](https://github.com/rishighan/threetwo-visual-updates/raw/67e56878eb0381c73c1dea746a45253d3dcaa184/update_december_2022/ComicVine%20Matching.png)
+![](https://raw.githubusercontent.com/rishighan/threetwo/ef05dee6005f683f1e4547631217681def9ebe86/screenshots/ComicDetail.jpg)
 #### DC++ Search
 ![](https://raw.githubusercontent.com/rishighan/threetwo/ef05dee6005f683f1e4547631217681def9ebe86/screenshots/DC%2B%2BSearching.jpg)
 #### Import
 ![](https://raw.githubusercontent.com/rishighan/threetwo/ef05dee6005f683f1e4547631217681def9ebe86/screenshots/Import.jpg)
 #### Comic Vine Matching, Metadata Scraping
 ![](https://raw.githubusercontent.com/rishighan/threetwo/ef05dee6005f683f1e4547631217681def9ebe86/screenshots/CVMatching.jpg)
 ### 🦄 Early Development Support Channel
@@ -28,7 +39,8 @@ ThreeTwo! currently is set up as:
 1. The UI, this repo.
 2. [threetwo-core-service](https://github.com/rishighan/threetwo-core-service)
 3. [threetwo-metadata-service](https://github.com/rishighan/threetwo-metadata-service)
-4. [threetwo-ui-typings](https://github.com/rishighan/threetwo-frontend-types) which are the types used across the UI, installable as an `npm` dependency.
+4. [threetwo-acquisition-service](https://github.com/rishighan/threetwo-acquisition-service)
 5. [threetwo-ui-typings](https://github.com/rishighan/threetwo-frontend-types) which are the types used across the UI, installable as an `npm` dependency.
 ## Docker Instructions
@@ -43,20 +55,18 @@ For debugging and troubleshooting, you can run this app locally using these step
 3. This will open `http://localhost:5173` in your default browser
 4. Note that this is simply the UI layer and won't offer anything beyond a scaffold. You have to spin up the microservices locally to get it to work.
 ## Troubleshooting
 ### Docker
 1. `docker-compose up` is taking a long time
-   
+
   This is primarily because `threetwo-import-service` pulls `calibre` from the CDN and it has been known to be extremely slow. I can't find a more reliable alternative, so give it some time to finish downloading.
 2. What folder do my comics go in?
-   
+
   Your comics go in the `comics` directory at the root of this project.
 ## Contribution Guidelines
 See [contribution guidelines](https://github.com/rishighan/threetwo/blob/master/contributing.md)
--- a/index.html
+++ b/index.html
@@ -1,16 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
-
+  <head>
-<head>
+    <meta charset="UTF-8" />
-    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Three Two!</title>
-</head>
+  </head>
-<body>
+  <body class="dark:bg-slate-600">
    <div id="root"></div>
    <script type="module" src="/src/client/index.tsx"></script>
-</body>
+  </body>
-
+</html>
 </html>
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "threetwo",
-  "version": "0.0.2",
+  "version": "0.1.0",
-  "description": "ThreeTwo! A comic book curator.",
+  "description": "ThreeTwo! A good comic book curator.",
  "main": "server/index.js",
  "typings": "server/index.js",
  "scripts": {
@@ -19,13 +19,13 @@
    "@dnd-kit/sortable": "^7.0.2",
    "@dnd-kit/utilities": "^3.2.1",
    "@fortawesome/fontawesome-free": "^6.3.0",
-    "@redux-devtools/extension": "^3.2.5",
+    "@popperjs/core": "^2.11.8",
    "@rollup/plugin-node-resolve": "^15.0.1",
    "@tanstack/react-query": "^5.0.5",
    "@tanstack/react-table": "^8.9.3",
    "@types/mime-types": "^2.1.0",
    "@types/react-router-dom": "^5.3.3",
-    "@vitejs/plugin-react": "^3.1.0",
+    "@vitejs/plugin-react": "^4.2.1",
    "airdcpp-apisocket": "^2.5.0-beta.2",
    "axios": "^1.3.4",
    "axios-cache-interceptor": "^1.0.1",
@@ -38,9 +38,12 @@
    "filename-parser": "^1.0.2",
    "final-form": "^4.20.2",
    "final-form-arrays": "^3.0.2",
    "focus-trap-react": "^10.2.3",
    "history": "^5.3.0",
    "html-to-text": "^8.1.0",
    "immer": "^10.0.3",
    "jsdoc": "^3.6.10",
    "keen-slider": "^6.8.6",
    "lodash": "^4.17.21",
    "pretty-bytes": "^5.6.0",
    "prop-types": "^15.8.1",
@@ -48,33 +51,32 @@
    "react": "^18.2.0",
    "react-collapsible": "^2.9.0",
    "react-comic-viewer": "^0.4.0",
-    "react-day-picker": "^8.6.0",
+    "react-day-picker": "^8.10.0",
    "react-dom": "^18.2.0",
    "react-fast-compare": "^3.2.0",
    "react-final-form": "^6.5.9",
    "react-final-form-arrays": "^3.1.4",
    "react-loader-spinner": "^4.0.0",
    "react-masonry-css": "^1.0.16",
    "react-modal": "^3.15.1",
    "react-popper": "^2.3.0",
    "react-router": "^6.9.0",
    "react-router-dom": "^6.9.0",
-    "react-select": "^5.3.2",
+    "react-select": "^5.8.0",
    "react-select-async-paginate": "^0.7.2",
    "react-slick": "^0.29.0",
    "react-sliding-pane": "^7.1.0",
    "react-stickynode": "^4.1.0",
    "react-textarea-autosize": "^8.3.4",
    "reapop": "^4.2.1",
    "slick-carousel": "^1.8.1",
    "socket.io-client": "^4.3.2",
-    "styled-components": "^6.0.7",
+    "styled-components": "^6.1.0",
    "threetwo-ui-typings": "^1.0.14",
-    "vite": "^4.5.0",
+    "vite": "^5.0.5",
    "vite-plugin-html": "^3.2.0",
    "websocket": "^1.0.34",
    "zustand": "^4.4.6"
  },
  "devDependencies": {
    "@iconify-json/solar": "^1.1.8",
    "@iconify/tailwind": "^0.1.4",
    "@storybook/addon-essentials": "^7.4.1",
    "@storybook/addon-interactions": "^7.4.1",
    "@storybook/addon-links": "^7.4.1",
@@ -94,8 +96,8 @@
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@types/react-redux": "^7.1.25",
    "autoprefixer": "^10.4.16",
    "body-parser": "^1.19.0",
    "bulma": "^0.9.4",
    "docdash": "^2.0.2",
    "eslint": "^8.49.0",
    "eslint-config-prettier": "^8.1.0",
@@ -110,15 +112,18 @@
    "install": "^0.13.0",
    "jest": "^29.6.3",
    "nodemon": "^3.0.1",
    "postcss": "^8.4.32",
    "postcss-import": "^15.1.0",
    "prettier": "^2.2.1",
    "react-refresh": "^0.14.0",
    "rimraf": "^4.1.3",
-    "sass": "^1.66.1",
+    "sass": "^1.69.5",
    "storybook": "^7.3.2",
    "tailwindcss": "^3.4.1",
    "tui-jsdoc-template": "^1.2.2",
    "typescript": "^5.1.6"
  },
  "resolutions": {
-    "styled-components": "^5"
+    "jackspeak": "2.1.1"
  }
 }
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -0,0 +1,7 @@
 module.exports = {
  plugins: {
    "postcss-import": {},
    tailwindcss: {},
    autoprefixer: {},
  },
 };
--- a/public/fonts/Hasklig-Regular.otf
+++ b/public/fonts/Hasklig-Regular.otf
--- a/public/fonts/PPObjectSans-Heavy.otf
+++ b/public/fonts/PPObjectSans-Heavy.otf
--- a/public/fonts/PPObjectSans-HeavySlanted.otf
+++ b/public/fonts/PPObjectSans-HeavySlanted.otf
--- a/public/fonts/PPObjectSans-Regular.otf
+++ b/public/fonts/PPObjectSans-Regular.otf
--- a/public/fonts/PPObjectSans-Slanted.otf
+++ b/public/fonts/PPObjectSans-Slanted.otf
--- a/screenshots/CVMatching.jpg
+++ b/screenshots/CVMatching.jpg
--- a/screenshots/ComicDetail.jpg
+++ b/screenshots/ComicDetail.jpg
--- a/screenshots/DC++Searching.jpg
+++ b/screenshots/DC++Searching.jpg
--- a/screenshots/Dashboard.jpg
+++ b/screenshots/Dashboard.jpg
--- a/screenshots/Import.jpg
+++ b/screenshots/Import.jpg
--- a/screenshots/Library.jpg
+++ b/screenshots/Library.jpg
--- a/src/client/actions/airdcpp.actions.tsx
+++ b/src/client/actions/airdcpp.actions.tsx
@@ -33,9 +33,9 @@ interface SearchData {
  priority: PriorityEnum;
 }
-function sleep(ms: number): Promise<NodeJS.Timeout> {
+export const sleep = (ms: number): Promise<NodeJS.Timeout> => {
  return new Promise((resolve) => setTimeout(resolve, ms));
-}
+};
 export const toggleAirDCPPSocketConnectionStatus =
  (status: String, payload?: any) => async (dispatch) => {
@@ -59,83 +59,6 @@ export const toggleAirDCPPSocketConnectionStatus =
        break;
    }
  };
 export const search =
  (data: SearchData, ADCPPSocket: any, credentials: any) =>
  async (dispatch) => {
    try {
      if (!ADCPPSocket.isConnected()) {
        await ADCPPSocket();
      }
      const instance: SearchInstance = await ADCPPSocket.post("search");
      dispatch({
        type: AIRDCPP_SEARCH_IN_PROGRESS,
      });
      // We want to get notified about every new result in order to make the user experience better
      await ADCPPSocket.addListener(
        `search`,
        "search_result_added",
        async (groupedResult) => {
          // ...add the received result in the UI
          // (it's probably a good idea to have some kind of throttling for the UI updates as there can be thousands of results)
          dispatch({
            type: AIRDCPP_SEARCH_RESULTS_ADDED,
            groupedResult,
          });
        },
        instance.id,
      );
      // We also want to update the existing items in our list when new hits arrive for the previously listed files/directories
      await ADCPPSocket.addListener(
        `search`,
        "search_result_updated",
        async (groupedResult) => {
          // ...update properties of the existing result in the UI
          dispatch({
            type: AIRDCPP_SEARCH_RESULTS_UPDATED,
            groupedResult,
          });
        },
        instance.id,
      );
      // We need to show something to the user in case the search won't yield any results so that he won't be waiting forever)
      // Wait for 5 seconds for any results to arrive after the searches were sent to the hubs
      await ADCPPSocket.addListener(
        `search`,
        "search_hub_searches_sent",
        async (searchInfo) => {
          await sleep(5000);
          // Check the number of received results (in real use cases we should know that even without calling the API)
          const currentInstance = await ADCPPSocket.get(
            `search/${instance.id}`,
          );
          if (currentInstance.result_count === 0) {
            // ...nothing was received, show an informative message to the user
            console.log("No more search results.");
          }
          // The search can now be considered to be "complete"
          // If there's an "in progress" indicator in the UI, that could also be disabled here
          dispatch({
            type: AIRDCPP_HUB_SEARCHES_SENT,
            searchInfo,
            instance,
          });
        },
        instance.id,
      );
      // Finally, perform the actual search
      await ADCPPSocket.post(`search/${instance.id}/hub_search`, data);
    } catch (error) {
      console.log(error);
      throw error;
    }
  };
 export const downloadAirDCPPItem =
  (
    searchInstanceId: Number,
--- a/src/client/assets/scss/App.scss
+++ b/src/client/assets/scss/App.scss
@@ -1,635 +1,15 @@
-@import "/node_modules/bulma/bulma.sass";
+@tailwind base;
-$fa-font-path: "/node_modules/@fortawesome/fontawesome-free/webfonts";
+@tailwind components;
-@import "/node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
+@tailwind utilities;
@import "/node_modules/@fortawesome/fontawesome-free/scss/regular.scss";
@import "/node_modules/@fortawesome/fontawesome-free/scss/solid.scss";
 $bg-color: yellow;
 $border-color: red;
-$volume-color: #fdecd1;
+@layer base {
-$issue-color: #f2f1f9;
+  @font-face {
-$size-8: 0.9rem;
+    font-family: "PP Object Sans Regular";
-$size-9: 0.7rem;
+    src: url("/fonts/PPObjectSans-Regular.otf") format("opentype");
-$flexSize: 4em;
+  }
 $boxSpacing: 1em;
 $colorText: #404646;
-.is-size-8 {
+  @font-face {
-  font-size: $size-8;
+    font-family: "Hasklig Regular";
-}
+    src: url("/fonts/Hasklig-Regular.otf") format("opentype");
 .is-size-9 {
  font-size: $size-9;
 }
 .small-tag {
  align-items: center;
  background-color: #fff6de;
  border-radius: 4px;
  color: #4a4a4a;
  display: inline-flex;
  font-size: $size-9;
  height: 1.5em;
  justify-content: center;
  line-height: 1.5;
  padding-left: 0.55em;
  padding-right: 0.55em;
  white-space: nowrap;
 }
 // global style overrides
 pre {
  border-radius: 0.5rem;
 }
 .container {
  margin-top: 2em;
 }
 .app {
  font-family: helvetica, arial, sans-serif;
  padding: 2em;
  border: 5px solid $border-color;
  p {
    background-color: $bg-color;
  }
 }
 // Navbar
 .navbar {
  border-bottom: 1px solid #f2f1f9;
  .download-progress-meter {
    margin-left: -300px;
    min-width: 500px;
  }
  .airdcpp-status {
    min-width: 300px;
    line-height: 1.7rem;
  }
  body {
    background: #454a59;
  }
  body {
    background: #454a59;
  }
  .pulsating-circle {
    position: relative;
    left: -120%;
    top: 20%;
    transform: translateX(-50%) translateY(-50%);
    width: 15px;
    height: 15px;
    &:before {
      content: "";
      position: relative;
      display: block;
      width: 300%;
      height: 300%;
      box-sizing: border-box;
      margin-left: -100%;
      margin-top: -100%;
      border-radius: 45px;
      background-color: #01a4e9;
      animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
    }
    &:after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      display: block;
      width: 100%;
      height: 100%;
      background-color: green;
      border-radius: 15px;
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
      animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
    }
  }
  @keyframes pulse-ring {
    0% {
      transform: scale(0.33);
    }
    80%,
    100% {
      opacity: 0;
    }
  }
  @keyframes pulse-dot {
    0% {
      transform: scale(0.8);
    }
    50% {
      transform: scale(1);
    }
    100% {
      transform: scale(0.8);
    }
  }
 }
 .navbar-item.is-mega {
  position: static;
  .is-mega-menu-title {
    margin-bottom: 0;
    padding: 0.375rem 1rem;
  }
 }
 // Dashboard
 // slick slider overrides
 .slick-slider {
  margin-left: -10px;
  .slick-list {
    padding: 0 0px 15px 10px;
  }
 }
 .recent-comics-container {
  display: -webkit-box; /* Not needed if autoprefixing */
  display: -ms-flexbox; /* Not needed if autoprefixing */
  display: flex;
  margin-left: -22px; /* gutter size offset */
  width: auto;
  .recent-comics-column {
    padding-left: 22px; /* gutter size */
    background-clip: padding-box;
    & > div {
      /* change div to reference your elements you put in <Masonry> */
      margin-bottom: 20px;
    }
  }
 }
 .volumes-container {
  .stack {
    display: inline-block;
    border-radius: 0.5rem;
    box-shadow:
    /* The top layer shadow */ 0 -1px 1px rgba(0, 0, 0, 0.15),
      /* The second layer */ 0 -10px 0 -5px #eee,
      /* The second layer shadow */ 0 -10px 1px -4px rgba(0, 0, 0, 0.15),
      /* The third layer */ 0 -20px 0 -10px #eee,
      /* The third layer shadow */ 0 -20px 1px -9px rgba(0, 0, 0, 0.15);
    img {
      height: auto;
      border-top-left-radius: 0.5rem;
      border-top-right-radius: 0.5rem;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
    .stack-title {
      margin-bottom: 0.4rem;
    }
    .content {
      margin: -5px 0 0 0;
      padding: 0.5rem 1rem;
      border-bottom-left-radius: 0.25rem;
      box-shadow: 1px 8px 23px 7px rgba(0, 0, 0, 0.12);
      border-bottom-right-radius: 0.25rem;
    }
  }
  .volumes-grid {
    display: -webkit-box; /* Not needed if autoprefixing */
    display: -ms-flexbox; /* Not needed if autoprefixing */
    display: flex;
    margin-left: -30px; /* gutter size offset */
    width: auto;
  }
  .volumes-grid-column {
    padding-left: 22px; /* gutter size */
    background-clip: padding-box;
    & > div {
      /* change div to reference your elements you put in <Masonry> */
      margin-bottom: 20px;
    }
  }
 }
 .min {
  overflow: visible;
  margin: auto;
  .tag__custom {
    height: auto !important;
    padding: 0.3rem;
    white-space: unset !important;
    width: 100%;
    background-color: #effaf5;
    color: #257953;
  }
  .tags {
    display: inline;
    margin-right: 5px;
    margin-left: 5px;
    &:first-child {
      margin-left: 0;
    }
  }
  pre {
    border-radius: 0.4em;
    margin: 10px 0 10px 0;
    white-space: pre-wrap;
  }
 }
 .generic-card {
  display: inline-block;
  background-color: #fff;
  border-top-left-radius: 0.4rem;
  border-top-right-radius: 0.4rem;
  border-bottom-left-radius: 0.4rem;
  border-bottom-right-radius: 0.4rem;
  box-shadow: 1px 8px 23px 7px rgba(0, 0, 0, 0.12);
  .green-border {
    border: 1px dotted #168b64;
    border-radius: 0.4rem;
  }
  .truncate {
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .partial-rounded-card-image {
    figure {
      display: flex;
      img {
        border-top-left-radius: 0.4rem;
        border-top-right-radius: 0.4rem;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }
  .rounded-card-image {
    figure {
      display: flex;
      img {
        border-radius: 0.4rem;
      }
    }
  }
  .card-content {
    .card-title {
      margin-bottom: 0.4rem;
    }
    .custom-icon,
    i {
      margin: 4px 4px 4px 0;
    }
    padding: 0.5rem 1rem;
  }
 }
 .card-container {
  // display: grid;
  // grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  // column-gap: 0.5em;
  // row-gap: 1.2em;
  .card {
    margin: 0 0 15px 0;
    .partial-rounded-card-image {
      img {
        border-top-left-radius: 0.4rem;
        border-top-right-radius: 0.4rem;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
    .rounded-card-image {
      border-radius: 0.4rem;
    }
    .is-horizontal {
      // margin: $boxSpacing / 2;
      border-radius: 1.5em;
      height: $flexSize;
      max-width: $flexSize * 3;
      flex: 1 1 auto;
      display: flex;
      .card-image {
        // leaving this here... for posterity
        img.image {
          border-top-left-radius: 8px;
          border-bottom-left-radius: 8px;
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
          height: 100%;
          max-width: $flexSize * 1.3;
          object-fit: cover;
          flex: 1 1 auto;
        }
        img.cropped-image {
          width: 70px;
          border-top-left-radius: 8px;
          border-bottom-left-radius: 8px;
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
          height: 64px;
          object-fit: cover;
          object-position: 100% 0;
          //  flex: 1 1 auto;
        }
      }
    }
    .card-content {
      align-self: top;
      flex: 1;
      padding-left: 0.7em;
      padding-top: 0.4em;
      padding-bottom: 0em;
    }
  }
 }
 // raw file details
 .raw-file-details {
  padding: 1rem;
  background-color: beige;
  border-radius: 0.5rem;
 }
 .comic-viewer {
  border: 1px solid red;
 }
 // comicvine metadata
 .comicvine-metadata {
  background-color: #f2f1f9;
  padding: 0.8rem;
  border-radius: 0.5rem;
 }
 .issue-metadata {
  background-color: #fbffee;
  padding: 0.8em;
  border-radius: 0.5rem;
  .name {
    font-size: 0.95rem;
    color: #4a4f50;
  }
 }
 .comicInfo-metadata {
  background-color: #f7ebdd;
  padding: 0.8rem;
  border-radius: 0.5rem;
 }
 // Comic Detail
 .comic-detail {
  dl {
    dd {
      margin: 0;
    }
  }
  .button {
    .airdcpp-text {
      margin: 0 0 0 0.2rem;
    }
  }
 }
 // AirDC++ search results
 .dupe-search-result {
  background: lavender;
 }
 // Search
 .search {
  .main-search-bar {
    border: 0;
    border-bottom: 1px solid #999;
    border-radius: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
  }
 }
 // Library
 .header-area {
  width: 100%;
  padding: 25px 0 15px 0;
  position: sticky;
  z-index:9999;
  background: #fffffc;
  top: 50px;
 }
 .library {
  .table-controls {
    background: #fffffc;
    justify-content: space-between;
    position: sticky;
    top: 126px;
    padding-bottom: 10px;
  }
  .pagination {
    margin: 0;
    background: #fffffc;
  }
  table {
    border-collapse: separate;
    width: 100%;
    thead {
      position: sticky;
      top: 250px;
      z-index: 1;
      background: #fffffc;
      min-height: 130px;
    }
    tr {
      td {
        border: 0 none;
        .card {
          margin: 8px 0 7px 0;
          .name {
            margin: 0 0 4px 0;
          }
        }
      }
    }
    tbody {
      padding: 10px 0 0 0;
    }
  }
 }
 // Comic Detail
 .control-palette {
  background-color: #fff6de;
  display: inline-block;
  i {
    display: flex;
    justify-content: center;
    align-items: center;
    // padding: 1.5rem 2rem;
  }
 }
 // airdcpp downloads tab
 .tabs {
  .download-icon-labels {
    .downloads-count {
      margin: 0 1em -1px 0.4em;
      border: 1px solid #ccc;
    }
  }
  .download-tab-name {
  }
 }
 // drawer content padding override
 .slide-pane__content {
  padding: 24px 12px;
 }
 .slide-pane__header {
  margin-top: 3.5rem;
 }
 .comic-vine-match-drawer {
  // comic detail drawer
  .search-criteria-card {
    width: 100%;
    .card-content {
      padding: 10px;
      .ant-divider-horizontal {
        margin: 12px 0;
      }
    }
  }
  .field {
    margin: 5px 0 0 0;
  }
 }
 // Volume detail
 .volume-details {
  .is-volume-related {
    $tag-background-color: $volume-color;
  }
  .issues-container {
    display: -webkit-box; /* Not needed if autoprefixing */
    display: -ms-flexbox; /* Not needed if autoprefixing */
    display: flex;
    margin-left: -10px; /* gutter size offset */
    width: auto;
    .issues-column {
      max-width: 102px;
      margin: 10px;
      background-clip: padding-box;
      & > div {
        /* change div to reference your elements you put in <Masonry> */
        margin-bottom: 20px;
      }
    }
  }
 }
 // Potential issue matches in library slideout panel
 .potential-matches-container {
  .potential-issue-match {
    border-radius: 0.3rem;
    background-color: beige;
    padding: 10px;
    pre {
      padding: 5px;
      background-color: transparent;
      border-radius: 0.3rem;
      white-space: pre-wrap; /* Since CSS 2.1 */
      white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
      white-space: -pre-wrap; /* Opera 4-6 */
      white-space: -o-pre-wrap; /* Opera 7 */
      word-wrap: break-word;
    }
    .generic-card {
      max-width: 90px;
    }
  }
 }
 // comicvine search results
 .search-results-container {
  margin: 15px 0 0 0;
  overflow: hidden;
  .search-result {
    margin: 0 0 10px 0;
    padding: 1em;
    border-radius: 10px;
    background: #f2f1f9;
    .cover-image {
      border-radius: 5px;
    }
    .search-result-details {
      .score {
        float: right;
      }
    }
    .volume-information {
      margin-top: -2.5em;
      width: 80%;
      background: #fdecd1;
      border-radius: 10px;
    }
    .vertical-line {
      position: relative;
      top: -25px;
      left: 1.5rem;
      border: 2px dotted #ccc;
      width: 20px;
      min-height: 35px;
      border-color: transparent transparent #f3a22d #f3a22d;
      border-bottom-left-radius: 10px;
    }
  }
 }
 // Library grid
 .my-masonry-grid {
  display: -webkit-box; /* Not needed if autoprefixing */
  display: -ms-flexbox; /* Not needed if autoprefixing */
  display: flex;
  margin-left: -30px; /* gutter size offset */
  width: auto;
 }
 .my-masonry-grid_column {
  padding-left: 30px; /* gutter size */
  background-clip: padding-box;
 }
 .my-masonry-grid_column > div {
  /* change div to reference your elements you put in <Masonry> */
  margin-bottom: 20px;
 }
 // progress
 .progress-indicator-container {
  height: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  .indicator {
    padding: 5px;
    width: 120px;
    height: 120px;
  }
 }
--- a/src/client/components/App.tsx
+++ b/src/client/components/App.tsx
@@ -1,52 +1,15 @@
-import React, { ReactElement, useContext, useEffect } from "react";
+import React, { ReactElement } from "react";
-import Dashboard from "./Dashboard/Dashboard";
+import { Outlet } from "react-router-dom";
-import Import from "./Import/Import";
+import { Navbar2 } from "./shared/Navbar2";
 import { ComicDetailContainer } from "./ComicDetail/ComicDetailContainer";
 import TabulatedContentContainer from "./Library/TabulatedContentContainer";
 import LibraryGrid from "./Library/LibraryGrid";
 import Search from "./Search/Search";
 import Settings from "./Settings/Settings";
 import VolumeDetail from "./VolumeDetail/VolumeDetail";
 import Downloads from "./Downloads/Downloads";
 import { Routes, Route } from "react-router-dom";
 import Navbar from "./shared/Navbar";
 import "../assets/scss/App.scss";
 import { SocketIOProvider } from "../context/SocketIOContext";
 import socketIOConnectionInstance from "../shared/socket.io/instance";
 import { isEmpty, isNil, isUndefined } from "lodash";
 import {
  AIRDCPP_DOWNLOAD_PROGRESS_TICK,
  LS_SINGLE_IMPORT,
 } from "../constants/action-types";
 /**
 * Method that initializes an AirDC++ socket connection
 * 1. Initializes event listeners for download init, tick and complete events
 * 2. Handles errors in case the connection to AirDC++ is not established or terminated
 * @returns void
 */
 export const App = (): ReactElement => {
-  // useEffect(() => {
+  return (
-  //   // Check if there is a sessionId in localStorage
+    <>
-  //   const sessionId = localStorage.getItem("sessionId");
+      <Navbar2 />
-  //   if (!isNil(sessionId)) {
+      <Outlet />
-  //     // Resume the session
+    </>
-  //     dispatch({
+  );
  //       type: "RESUME_SESSION",
  //       meta: { remote: true },
  //       session: { sessionId },
  //     });
  //   } else {
  //     // Inititalize the session and persist the sessionId to localStorage
  //     socketIOConnectionInstance.on("sessionInitialized", (sessionId) => {
  //       localStorage.setItem("sessionId", sessionId);
  //     });
  //   }
  // }, []);
  return <>{/* The rest of your application */}</>;
 };
 export default App;
--- a/src/client/components/ComicDetail/AcquisitionPanel.tsx
+++ b/src/client/components/ComicDetail/AcquisitionPanel.tsx
@@ -1,21 +1,15 @@
-import React, {
+import React, { useCallback, ReactElement, useEffect, useState } from "react";
-  useCallback,
+import { getBundlesForComic, sleep } from "../../actions/airdcpp.actions";
-  useContext,
+import { SearchQuery, PriorityEnum, SearchResponse } from "threetwo-ui-typings";
  ReactElement,
  useEffect,
  useState,
 } from "react";
 import {
  search,
  downloadAirDCPPItem,
  getBundlesForComic,
 } from "../../actions/airdcpp.actions";
 import { useDispatch, useSelector } from "react-redux";
 import { RootState, SearchInstance } from "threetwo-ui-typings";
 import ellipsize from "ellipsize";
 import { Form, Field } from "react-final-form";
 import { difference } from "../../shared/utils/object.utils";
 import { isEmpty, isNil, map } from "lodash";
-import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
+import { useStore } from "../../store";
 import { useShallow } from "zustand/react/shallow";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import axios from "axios";
 interface IAcquisitionPanelProps {
  query: any;
@@ -27,162 +21,268 @@ interface IAcquisitionPanelProps {
 export const AcquisitionPanel = (
  props: IAcquisitionPanelProps,
 ): ReactElement => {
  const {
    airDCPPSocketInstance,
    airDCPPClientConfiguration,
    airDCPPSessionInformation,
    airDCPPDownloadTick,
  } = useStore(
    useShallow((state) => ({
      airDCPPSocketInstance: state.airDCPPSocketInstance,
      airDCPPClientConfiguration: state.airDCPPClientConfiguration,
      airDCPPSessionInformation: state.airDCPPSessionInformation,
      airDCPPDownloadTick: state.airDCPPDownloadTick,
    })),
  );
  interface SearchData {
    query: Pick<SearchQuery, "pattern"> & Partial<Omit<SearchQuery, "pattern">>;
    hub_urls: string[] | undefined | null;
    priority: PriorityEnum;
  }
  /**
   * Get the hubs list from an AirDCPP Socket
   */
  const { data: hubs } = useQuery({
    queryKey: ["hubs"],
    queryFn: async () => await airDCPPSocketInstance.get(`hubs`),
  });
  const { comicObjectId } = props;
  const issueName = props.query.issue.name || "";
  // const { settings } = props;
  const sanitizedIssueName = issueName.replace(/[^a-zA-Z0-9 ]/g, " ");
  // Selectors for picking state
  const airDCPPSearchResults = useSelector((state: RootState) => {
    return state.airdcpp.searchResults;
  });
  const isAirDCPPSearchInProgress = useSelector(
    (state: RootState) => state.airdcpp.isAirDCPPSearchInProgress,
  );
  const searchInfo = useSelector(
    (state: RootState) => state.airdcpp.searchInfo,
  );
  const searchInstance: SearchInstance = useSelector(
    (state: RootState) => state.airdcpp.searchInstance,
  );
  // const settings = useSelector((state: RootState) => state.settings.data);
  const airDCPPConfiguration = useContext(AirDCPPSocketContext);
  const dispatch = useDispatch();
  const [dcppQuery, setDcppQuery] = useState({});
  const [airDCPPSearchResults, setAirDCPPSearchResults] = useState([]);
  const [airDCPPSearchStatus, setAirDCPPSearchStatus] = useState(false);
  const [airDCPPSearchInstance, setAirDCPPSearchInstance] = useState({});
  const [airDCPPSearchInfo, setAirDCPPSearchInfo] = useState({});
  const queryClient = useQueryClient();
  // Construct a AirDC++ query based on metadata inferred, upon component mount
  // Pre-populate the search input with the search string, so that
  // All the user has to do is hit "Search AirDC++"
  useEffect(() => {
-    if (!isEmpty(airDCPPConfiguration.airDCPPState.settings)) {
+    // AirDC++ search query
-      // AirDC++ search query
+    const dcppSearchQuery = {
-      const dcppSearchQuery = {
+      query: {
-        query: {
+        pattern: `${sanitizedIssueName.replace(/#/g, "")}`,
-          pattern: `${sanitizedIssueName.replace(/#/g, "")}`,
+        extensions: ["cbz", "cbr", "cb7"],
-          extensions: ["cbz", "cbr", "cb7"],
+      },
      hub_urls: map(hubs, (item) => item.value),
      priority: 5,
    };
    setDcppQuery(dcppSearchQuery);
  }, []);
  /**
   * Method to perform a search via an AirDC++ websocket
   * @param {SearchData} data - a SearchData query
   * @param {any} ADCPPSocket - an intialized AirDC++ socket instance
   */
  const search = async (data: SearchData, ADCPPSocket: any) => {
    try {
      if (!ADCPPSocket.isConnected()) {
        await ADCPPSocket();
      }
      const instance: SearchInstance = await ADCPPSocket.post("search");
      setAirDCPPSearchStatus(true);
      // We want to get notified about every new result in order to make the user experience better
      await ADCPPSocket.addListener(
        `search`,
        "search_result_added",
        async (groupedResult) => {
          // ...add the received result in the UI
          // (it's probably a good idea to have some kind of throttling for the UI updates as there can be thousands of results)
          setAirDCPPSearchResults((state) => [...state, groupedResult]);
        },
-        hub_urls: map(
+        instance.id,
-          airDCPPConfiguration.airDCPPState.settings.directConnect.client.hubs,
+      );
-          (item) => item.value,
+
-        ),
+      // We also want to update the existing items in our list when new hits arrive for the previously listed files/directories
-        priority: 5,
+      await ADCPPSocket.addListener(
-      };
+        `search`,
-      setDcppQuery(dcppSearchQuery);
+        "search_result_updated",
        async (groupedResult) => {
          // ...update properties of the existing result in the UI
          const bundleToUpdateIndex = airDCPPSearchResults?.findIndex(
            (bundle) => bundle.result.id === groupedResult.result.id,
          );
          const updatedState = [...airDCPPSearchResults];
          if (
            !isNil(difference(updatedState[bundleToUpdateIndex], groupedResult))
          ) {
            updatedState[bundleToUpdateIndex] = groupedResult;
          }
          setAirDCPPSearchResults((state) => [...state, ...updatedState]);
        },
        instance.id,
      );
      // We need to show something to the user in case the search won't yield any results so that he won't be waiting forever)
      // Wait for 5 seconds for any results to arrive after the searches were sent to the hubs
      await ADCPPSocket.addListener(
        `search`,
        "search_hub_searches_sent",
        async (searchInfo) => {
          await sleep(5000);
          // Check the number of received results (in real use cases we should know that even without calling the API)
          const currentInstance = await ADCPPSocket.get(
            `search/${instance.id}`,
          );
          setAirDCPPSearchInstance(currentInstance);
          setAirDCPPSearchInfo(searchInfo);
          if (currentInstance.result_count === 0) {
            // ...nothing was received, show an informative message to the user
            console.log("No more search results.");
          }
          // The search can now be considered to be "complete"
          // If there's an "in progress" indicator in the UI, that could also be disabled here
          setAirDCPPSearchInstance(instance);
          setAirDCPPSearchStatus(false);
        },
        instance.id,
      );
      // Finally, perform the actual search
      await ADCPPSocket.post(`search/${instance.id}/hub_search`, data);
    } catch (error) {
      console.log(error);
      throw error;
    }
-  }, [airDCPPConfiguration]);
+  };
-  const getDCPPSearchResults = useCallback(
+  /**
-    async (searchQuery) => {
+   * Method to download a bundle associated with a search result from AirDC++
-      const manualQuery = {
+   * @param {Number} searchInstanceId - description
-        query: {
+   * @param {String} resultId - description
-          pattern: `${searchQuery.issueName}`,
+   * @param {String} comicObjectId - description
-          extensions: ["cbz", "cbr", "cb7"],
+   * @param {String} name - description
-        },
+   * @param {Number} size - description
-        hub_urls: map(
+   * @param {any} type - description
-          airDCPPConfiguration.airDCPPState.settings.directConnect.client.hubs,
+   * @param {any} ADCPPSocket - description
-          (item) => item.value,
+   * @returns {void}  - description
-        ),
+   */
-        priority: 5,
+  const download = async (
-      };
+    searchInstanceId: Number,
-      dispatch(
+    resultId: String,
-        search(manualQuery, airDCPPConfiguration.airDCPPState.socket, {
+    comicObjectId: String,
-          username: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.username}`,
+    name: String,
-          password: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.password}`,
+    size: Number,
-        }),
+    type: any,
    ADCPPSocket: any,
  ): void => {
    try {
      if (!ADCPPSocket.isConnected()) {
        await ADCPPSocket.connect();
      }
      let bundleDBImportResult = {};
      const downloadResult = await ADCPPSocket.post(
        `search/${searchInstanceId}/results/${resultId}/download`,
      );
    },
    [dispatch, airDCPPConfiguration],
  );
-  // download via AirDC++
+      if (!isNil(downloadResult)) {
-  const downloadDCPPResult = useCallback(
+        bundleDBImportResult = await axios({
-    (searchInstanceId, resultId, name, size, type) => {
+          method: "POST",
-      dispatch(
+          url: `http://localhost:3000/api/library/applyAirDCPPDownloadMetadata`,
-        downloadAirDCPPItem(
+          headers: {
-          searchInstanceId,
+            "Content-Type": "application/json; charset=utf-8",
          resultId,
          props.comicObjectId,
          name,
          size,
          type,
          airDCPPConfiguration.airDCPPState.socket,
          {
            username: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.username}`,
            password: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.password}`,
          },
-        ),
+          data: {
-      );
+            bundleId: downloadResult.bundle_info.id,
-      // this is to update the download count badge on the downloads tab
+            comicObjectId,
-      dispatch(
+            name,
-        getBundlesForComic(
+            size,
-          props.comicObjectId,
+            type,
          airDCPPConfiguration.airDCPPState.socket,
          {
            username: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.username}`,
            password: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.password}`,
          },
-        ),
+        });
-      );
+        console.log(bundleDBImportResult?.data);
-    },
+        queryClient.invalidateQueries({ queryKey: ["comicBookMetadata"] });
-    [airDCPPConfiguration],
+
-  );
+        //         dispatch({
        //           type: AIRDCPP_RESULT_DOWNLOAD_INITIATED,
        //           downloadResult,
        //           bundleDBImportResult,
        //         });
        //
        //         dispatch({
        //           type: IMS_COMIC_BOOK_DB_OBJECT_FETCHED,
        //           comicBookDetail: bundleDBImportResult.data,
        //           IMS_inProgress: false,
        //         });
      }
    } catch (error) {
      throw error;
    }
  };
  const getDCPPSearchResults = async (searchQuery) => {
    const manualQuery = {
      query: {
        pattern: `${searchQuery.issueName}`,
        extensions: ["cbz", "cbr", "cb7"],
      },
      hub_urls: map(hubs, (hub) => hub.hub_url),
      priority: 5,
    };
    search(manualQuery, airDCPPSocketInstance);
  };
  return (
    <>
-      <div className="comic-detail columns">
+      <div className="mt-5">
-        {!isEmpty(airDCPPConfiguration.airDCPPState.socket) ? (
+        {!isEmpty(airDCPPSocketInstance) ? (
          <Form
            onSubmit={getDCPPSearchResults}
            initialValues={{
              issueName,
            }}
            render={({ handleSubmit, form, submitting, pristine, values }) => (
-              <form
+              <form onSubmit={handleSubmit}>
-                onSubmit={handleSubmit}
+                <Field name="issueName">
-                className="column is-three-quarters"
+                  {({ input, meta }) => {
-              >
+                    return (
-                <div className="box search">
+                      <div className="max-w-fit">
-                  <div className="columns">
+                        <div className="flex flex-row bg-slate-300 dark:bg-slate-400 rounded-l-lg">
-                    <Field name="issueName">
+                          <div className="w-10 pl-2 pt-1 text-gray-400 dark:text-gray-200">
-                      {({ input, meta }) => {
+                            <i className="icon-[solar--magnifer-bold-duotone] h-7 w-7" />
                        return (
                          <div className="column is-two-thirds">
                            <input
                              {...input}
                              className="input main-search-bar is-medium"
                              placeholder="Type an issue/volume name"
                            />
                            <span className="help is-clearfix is-light is-info">
                              Use this to perform a manual search.
                            </span>
                          </div>
-                        );
+                          <input
-                      }}
+                            {...input}
-                    </Field>
+                            className="dark:bg-slate-400 bg-slate-300 py-2 px-2 rounded-l-md border-gray-300 h-10 min-w-full dark:text-slate-800 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
                            placeholder="Type an issue/volume name"
                          />
-                    <div className="column">
+                          <button
-                      <button
+                            className="sm:mt-0 min-w-fit rounded-r-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"
-                        type="submit"
+                            type="submit"
-                        className={
+                          >
-                          isAirDCPPSearchInProgress
+                            <div className="flex flex-row">
-                            ? "button is-loading is-warning"
+                              Search DC++
-                            : "button"
+                              <div className="h-5 w-5 ml-2">
-                        }
+                                <img
-                      >
+                                  src="/src/client/assets/img/airdcpp_logo.svg"
-                        <span className="icon is-small">
+                                  className="h-5 w-5"
-                          <img src="/src/client/assets/img/airdcpp_logo.svg" />
+                                />
-                        </span>
+                              </div>
-                        <span className="airdcpp-text">Search on AirDC++</span>
+                            </div>
-                      </button>
+                          </button>
-                    </div>
+                        </div>
-                  </div>
+                      </div>
-                </div>
+                    );
                  }}
                </Field>
              </form>
            )}
          />
        ) : (
-          <div className="column is-three-fifths">
+          <div className="">
-            <article className="message is-info">
+            <article className="">
-              <div className="message-body is-size-6 is-family-secondary">
+              <div className="">
                AirDC++ is not configured. Please configure it in{" "}
-                <code>Settings</code>.
+                <code>Settings &gt; AirDC++ &gt; Connection</code>.
              </div>
            </article>
          </div>
@@ -190,91 +290,127 @@ export const AcquisitionPanel = (
      </div>
      {/* AirDC++ search instance details */}
-      {!isNil(searchInfo) && !isNil(searchInstance) && (
+      {!isNil(airDCPPSearchInstance) &&
-        <div className="columns">
+        !isEmpty(airDCPPSearchInfo) &&
-          <div className="column is-one-quarter is-size-7">
+        !isNil(hubs) && (
-            <div className="card">
+          <div className="flex flex-row gap-3 my-5 font-hasklig">
-              <div className="card-content">
+            <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>
+              <dl>
-                  <dt>
+                <dt>
-                    <div className="tags mb-1">
+                  <div className="mb-1">
-                      {airDCPPConfiguration.airDCPPState.settings.directConnect.client.hubs.map(
+                    {hubs.map((value, idx) => (
-                        ({ value }) => (
+                      <span className="tag is-warning" key={idx}>
-                          <span className="tag is-warning" key={value}>
+                        {value.identity.name}
-                            {value}
+                      </span>
-                          </span>
+                    ))}
-                        ),
+                  </div>
-                      )}
+                </dt>
-                    </div>
+
-                  </dt>
+                <dt>
-                  <dt>
+                  Query:
-                    Query:{" "}
+                  <span className="has-text-weight-semibold">
-                    <span className="has-text-weight-semibold">
+                    {airDCPPSearchInfo.query.pattern}
-                      {searchInfo.query.pattern}
+                  </span>
-                    </span>
+                </dt>
-                  </dt>
+                <dd>
-                  <dd>Extensions: {searchInfo.query.extensions.join(", ")}</dd>
+                  Extensions:
-                  <dd>File type: {searchInfo.query.file_type}</dd>
+                  <span className="has-text-weight-semibold">
-                </dl>
+                    {airDCPPSearchInfo.query.extensions.join(", ")}
-              </div>
+                  </span>
                </dd>
                <dd>
                  File type:
                  <span className="has-text-weight-semibold">
                    {airDCPPSearchInfo.query.file_type}
                  </span>
                </dd>
              </dl>
            </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>
-          <div className="column is-one-quarter is-size-7">
+        )}
            <div className="card">
              <div className="card-content">
                <dl>
                  <dt>Search Instance: {searchInstance.id}</dt>
                  <dt>Owned by {searchInstance.owner}</dt>
                  <dd>Expires in: {searchInstance.expires_in}</dd>
                </dl>
              </div>
            </div>
          </div>
        </div>
      )}
      {/* AirDC++ results */}
      <div className="columns">
        {!isNil(airDCPPSearchResults) && !isEmpty(airDCPPSearchResults) ? (
-          <div className="column">
+          <div className="overflow-x-auto w-fit mt-4 rounded-lg border border-gray-200 dark:border-gray-500">
-            <table className="table">
+            <table className="min-w-full divide-y-2 divide-gray-200 dark:divide-gray-500 text-md">
              <thead>
                <tr>
-                  <th>Name</th>
+                  <th className="whitespace-nowrap px-2 py-2 font-medium text-gray-900 dark:text-slate-200">
-                  <th>Type</th>
+                    Name
-                  <th>Slots</th>
+                  </th>
-                  <th>Actions</th>
+                  <th className="whitespace-nowrap py-2 font-medium text-gray-900 dark:text-slate-200">
                    Type
                  </th>
                  <th className="whitespace-nowrap py-2 font-medium text-gray-900 dark:text-slate-200">
                    Slots
                  </th>
                  <th className="whitespace-nowrap py-2 font-medium text-gray-900 dark:text-slate-200">
                    Actions
                  </th>
                </tr>
              </thead>
-              <tbody>
+              <tbody className="divide-y divide-slate-100 dark:divide-gray-500">
                {map(airDCPPSearchResults, ({ result }, idx) => {
                  return (
                    <tr
                      key={idx}
                      className={
-                        !isNil(result.dupe) ? "dupe-search-result" : ""
+                        !isNil(result.dupe)
                          ? "bg-gray-100 dark:bg-gray-700"
                          : "w-fit text-sm"
                      }
                    >
-                      <td>
+                      <td className="whitespace-nowrap px-3 py-3 text-gray-700 dark:text-slate-300">
                        <p className="mb-2">
                          {result.type.id === "directory" ? (
                            <i className="fas fa-folder"></i>
-                          ) : null}{" "}
+                          ) : null}
                          {ellipsize(result.name, 70)}
                        </p>
                        <dl>
                          <dd>
-                            <div className="tags">
+                            <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}
-                              <span className="tag is-light is-info">
+
-                                {result.users.user.nicks}
+                              {/* Nicks */}
                              <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--user-rounded-bold-duotone] w-5 h-5"></i>
                                </span>
                                <span className="text-md text-slate-500 dark:text-slate-900">
                                  {result.users.user.nicks}
                                </span>
                              </span>
                              {/* Flags */}
                              {result.users.user.flags.map((flag, idx) => (
-                                <span className="tag is-light" key={idx}>
+                                <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">
-                                  {flag}
+                                  <span className="pr-1 pt-1">
                                    <i className="icon-[solar--tag-horizontal-bold-duotone] w-5 h-5"></i>
                                  </span>
                                  <span className="text-md text-slate-500 dark:text-slate-900">
                                    {flag}
                                  </span>
                                </span>
                              ))}
                            </div>
@@ -282,36 +418,49 @@ export const AcquisitionPanel = (
                        </dl>
                      </td>
                      <td>
-                        <span className="tag is-light is-info">
+                        {/* Extension */}
-                          {result.type.id === "directory"
+                        <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">
-                            ? "directory"
+                          <span className="pr-1 pt-1">
-                            : result.type.str}
+                            <i className="icon-[solar--zip-file-bold-duotone] w-5 h-5"></i>
                          </span>
                          <span className="text-md text-slate-500 dark:text-slate-900">
                            {result.type.str}
                          </span>
                        </span>
                      </td>
-                      <td>
+                      <td className="px-2">
-                        <div className="tags has-addons">
+                        {/* Slots */}
-                          <span className="tag is-success">
+                        <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">
-                            {result.slots.free} free
+                          <span className="pr-1 pt-1">
                            <i className="icon-[solar--settings-minimalistic-bold-duotone] w-5 h-5"></i>
                          </span>
-                          <span className="tag is-light">
+
-                            {result.slots.total}
+                          <span className="text-md text-slate-500 dark:text-slate-900">
                            {result.slots.total} slots; {result.slots.free} free
                          </span>
-                        </div>
+                        </span>
                      </td>
-                      <td>
+                      <td className="px-2">
-                        <a
+                        <button
                          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={() =>
-                            downloadDCPPResult(
+                            download(
-                              searchInstance.id,
+                              airDCPPSearchInstance.id,
                              result.id,
                              comicObjectId,
                              result.name,
                              result.size,
                              result.type,
                              airDCPPSocketInstance,
                            )
                          }
                        >
-                          <i className="fas fa-file-download"></i>
+                          <span className="text-xs">Download</span>
-                        </a>
+                          <span className="w-5 h-5">
                            <i className="h-5 w-5 icon-[solar--download-bold-duotone]"></i>
                          </span>
                        </button>
                      </td>
                    </tr>
                  );
@@ -320,13 +469,28 @@ export const AcquisitionPanel = (
            </table>
          </div>
        ) : (
-          <div className="column is-three-fifths">
+          <div className="">
-            <article className="message is-info">
+            <article
-              <div className="message-body is-size-6 is-family-secondary">
+              role="alert"
              className="mt-4 rounded-lg text-sm max-w-screen-md border-s-4 border-blue-500 bg-blue-50 p-4 dark:border-s-4 dark:border-blue-600 dark:bg-blue-300 dark:text-slate-600"
            >
              <div>
                The default search term is an auto-detected title; you may need
                to change it to get better matches if the auto-detected one
                doesn't work.
              </div>
            </article>
            <article
              role="alert"
              className="mt-4 rounded-lg text-sm max-w-screen-md border-s-4 border-blue-500 bg-blue-50 p-4 dark:border-s-4 dark:border-blue-600 dark:bg-blue-300 dark:text-slate-600"
            >
              <div>
                Searching via <strong>AirDC++</strong> is still in{" "}
                <strong>alpha</strong>. Some searches may take arbitrarily long,
-                or may not work at all. Searches from <code>ADCS</code> hubs are
+                or may not work at all. Searches from{" "}
-                more reliable than <code>NMDCS</code> ones.
+                <code className="font-hasklig">ADCS</code> hubs are more
                reliable than <code className="font-hasklig">NMDCS</code> ones.
              </div>
            </article>
          </div>
@@ -336,4 +500,4 @@ export const AcquisitionPanel = (
  );
 };
-export default AcquisitionPanel;
+export default AcquisitionPanel;
--- a/src/client/components/ComicDetail/ActionMenu/Menu.tsx
+++ b/src/client/components/ComicDetail/ActionMenu/Menu.tsx
@@ -1,87 +1,26 @@
-import { filter, isEmpty, isNil, isUndefined } from "lodash";
+import React, { ReactElement } from "react";
-import React, { ReactElement, useCallback } from "react";
+import Select from "react-select";
 import { useSelector, useDispatch } from "react-redux";
 import Select, { components } from "react-select";
 import { fetchComicVineMatches } from "../../../actions/fileops.actions";
 import { refineQuery } from "filename-parser";
 export const Menu = (props): ReactElement => {
-  const { data } = props;
+  const {
-  const { setSlidingPanelContentId, setVisible } = props.handlers;
+    filteredActionOptions,
-  const dispatch = useDispatch();
+    customStyles,
-  const openDrawerWithCVMatches = useCallback(() => {
+    handleActionSelection,
-    let seriesSearchQuery: IComicVineSearchQuery = {} as IComicVineSearchQuery;
+    Placeholder,
-    let issueSearchQuery: IComicVineSearchQuery = {} as IComicVineSearchQuery;
+  } = props.configuration;
    if (!isUndefined(data.rawFileDetails)) {
      issueSearchQuery = refineQuery(data.rawFileDetails.name);
    } else if (!isEmpty(data.sourcedMetadata)) {
      issueSearchQuery = refineQuery(data.sourcedMetadata.comicvine.name);
    }
    dispatch(fetchComicVineMatches(data, issueSearchQuery, seriesSearchQuery));
    setSlidingPanelContentId("CVMatches");
    setVisible(true);
  }, [dispatch, data]);
  const openEditMetadataPanel = useCallback(() => {
    setSlidingPanelContentId("editComicBookMetadata");
    setVisible(true);
  }, []);
  //  Actions menu options and handler
  const CVMatchLabel = (
    <span>
      <i className="fa-solid fa-wand-magic"></i> Match on ComicVine
    </span>
  );
  const editLabel = (
    <span>
      <i className="fa-regular fa-pen-to-square"></i> Edit Metadata
    </span>
  );
  const deleteLabel = (
    <span>
      <i className="fa-regular fa-trash-alt"></i> Delete Comic
    </span>
  );
  const Placeholder = (props) => {
    return <components.Placeholder {...props} />;
  };
  const actionOptions = [
    { value: "match-on-comic-vine", label: CVMatchLabel },
    { value: "edit-metdata", label: editLabel },
    { value: "delete-comic", label: deleteLabel },
  ];
  const filteredActionOptions = filter(actionOptions, (item) => {
    if (isUndefined(data.rawFileDetails)) {
      return item.value !== "match-on-comic-vine";
    }
    return item;
  });
  const handleActionSelection = (action) => {
    switch (action.value) {
      case "match-on-comic-vine":
        openDrawerWithCVMatches();
        break;
      case "edit-metdata":
        openEditMetadataPanel();
        break;
      default:
        console.log("No valid action selected.");
        break;
    }
  };
  return (
    <Select
      className="basic-single"
      classNamePrefix="select"
      components={{ Placeholder }}
      placeholder={
-        <span>
+        <span className="inline-flex flex-row items-center gap-2 pt-1">
-          <i className="fa-solid fa-list"></i> Actions
+          <div className="w-6 h-6">
            <i className="icon-[solar--cursor-bold-duotone] w-6 h-6"></i>
          </div>
          <div>Select An Action</div>
        </span>
      }
      styles={customStyles}
      name="actions"
      isSearchable={false}
      options={filteredActionOptions}
--- a/src/client/components/ComicDetail/AirDCPPBundles.tsx
+++ b/src/client/components/ComicDetail/AirDCPPBundles.tsx
@@ -0,0 +1,51 @@
 import React from "react";
 import prettyBytes from "pretty-bytes";
 import dayjs from "dayjs";
 import ellipsize from "ellipsize";
 import { map } from "lodash";
 export const AirDCPPBundles = (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">
        <thead>
          <tr>
            <th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-slate-200">
              Filename
            </th>
            <th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-slate-200">
              Size
            </th>
            <th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-slate-200">
              Download Time
            </th>
            <th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-slate-200">
              Bundle ID
            </th>
          </tr>
        </thead>
        <tbody className="divide-y divide-gray-200">
          {map(props.data, (bundle) => (
            <tr key={bundle.id} className="text-sm">
              <td className="whitespace-nowrap px-2 py-2 text-gray-700 dark:text-slate-300">
                <h5>{ellipsize(bundle.name, 58)}</h5>
                <span className="text-xs">{ellipsize(bundle.target, 88)}</span>
              </td>
              <td className="whitespace-nowrap px-2 py-2 text-gray-700 dark:text-slate-300">
                {prettyBytes(bundle.size)}
              </td>
              <td className="whitespace-nowrap px-2 py-2 text-gray-700 dark:text-slate-300">
                {dayjs
                  .unix(bundle.time_finished)
                  .format("h:mm on ddd, D MMM, YYYY")}
              </td>
              <td className="whitespace-nowrap px-2 py-2 text-gray-700 dark:text-slate-300">
                <span className="tag is-warning">{bundle.id}</span>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
 };
--- a/src/client/components/ComicDetail/ComicDetail.tsx
+++ b/src/client/components/ComicDetail/ComicDetail.tsx
@@ -1,5 +1,4 @@
 import React, { useState, ReactElement, useCallback } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
 import Card from "../shared/Carda";
 import { ComicVineMatchPanel } from "./ComicVineMatchPanel";
@@ -13,10 +12,12 @@ import { Menu } from "./ActionMenu/Menu";
 import { ArchiveOperations } from "./Tabs/ArchiveOperations";
 import { ComicInfoXML } from "./Tabs/ComicInfoXML";
 import AcquisitionPanel from "./AcquisitionPanel";
 import TorrentSearchPanel from "./TorrentSearchPanel";
 import DownloadsPanel from "./DownloadsPanel";
 import { VolumeInformation } from "./Tabs/VolumeInformation";
-import { isEmpty, isUndefined, isNil } from "lodash";
+import { isEmpty, isUndefined, isNil, filter } from "lodash";
 import { components } from "react-select";
 import { RootState } from "threetwo-ui-typings";
 import "react-sliding-pane/dist/react-sliding-pane.css";
@@ -28,6 +29,10 @@ import ComicViewer from "react-comic-viewer";
 import { extractComicArchive } from "../../actions/fileops.actions";
 import { determineCoverFile } from "../../shared/utils/metadata.utils";
 import axios from "axios";
 import { styled } from "styled-components";
 import { COMICVINE_SERVICE_URI } from "../../constants/endpoints";
 import { refineQuery } from "filename-parser";
 type ComicDetailProps = {};
 /**
@@ -47,6 +52,9 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
      rawFileDetails,
      inferredMetadata,
      sourcedMetadata: { comicvine, locg, comicInfo },
      acquisition,
      createdAt,
      updatedAt,
    },
    userSettings,
  } = data;
@@ -54,37 +62,29 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
  const [visible, setVisible] = useState(false);
  const [slidingPanelContentId, setSlidingPanelContentId] = useState("");
  const [modalIsOpen, setIsOpen] = useState(false);
  const [comicVineMatches, setComicVineMatches] = useState([]);
  const comicVineSearchResults = useSelector(
    (state: RootState) => state.comicInfo.searchResults,
  );
  const comicVineSearchQueryObject = useSelector(
    (state: RootState) => state.comicInfo.searchQuery,
  );
  const comicVineAPICallProgress = useSelector(
    (state: RootState) => state.comicInfo.inProgress,
  );
  const extractedComicBook = useSelector(
    (state: RootState) => state.fileOps.extractedComicBookArchive.reading,
  );
  const { comicObjectId } = useParams<{ comicObjectId: string }>();
-  const dispatch = useDispatch();
+  // const dispatch = useDispatch();
  const openModal = useCallback((filePath) => {
    setIsOpen(true);
-    dispatch(
+    // dispatch(
-      extractComicArchive(filePath, {
+    //   extractComicArchive(filePath, {
-        type: "full",
+    //     type: "full",
-        purpose: "reading",
+    //     purpose: "reading",
-        imageResizeOptions: {
+    //     imageResizeOptions: {
-          baseWidth: 1024,
+    //       baseWidth: 1024,
-        },
+    //     },
-      }),
+    //   }),
-    );
+    // );
  }, []);
  // overridden <SlidingPanel> with some styles
  const StyledSlidingPanel = styled(SlidingPane)`
    background: #ccc;
  `;
  const afterOpenModal = useCallback((things) => {
    // references are now sync'd and can be accessed.
    // subtitle.style.color = "#f00";
@@ -100,57 +100,183 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
    CVMatches: {
      content: (props) => (
        <>
-          <div className="card search-criteria-card">
+          <div>
-            <div className="card-content">
+            <ComicVineSearchForm data={rawFileDetails} />
              <ComicVineSearchForm data={rawFileDetails} />
            </div>
          </div>
-          <p className="is-size-5 mt-3 mb-2 ml-3">Searching for:</p>
+
-          {inferredMetadata.issue ? (
+          <div className="border-slate-500 border rounded-lg p-2 mt-3">
-            <div className="ml-3">
+            <p className="">Searching for:</p>
-              <span className="tag mr-3">{inferredMetadata.issue.name} </span>
+            {inferredMetadata.issue ? (
-              <span className="tag"> # {inferredMetadata.issue.number} </span>
+              <>
-            </div>
+                <span className="">{inferredMetadata.issue.name} </span>
-          ) : null}
+                <span className=""> # {inferredMetadata.issue.number} </span>
-          {!comicVineAPICallProgress ? (
+              </>
-            <ComicVineMatchPanel
+            ) : null}
-              props={{
+          </div>
-                comicVineSearchQueryObject,
+          <ComicVineMatchPanel
-                comicVineAPICallProgress,
+            props={{
-                comicVineSearchResults,
+              comicVineMatches,
-                comicObjectId,
+              comicObjectId,
-              }}
+            }}
-            />
+          />
          ) : (
            <div className="progress-indicator-container">
              <div className="indicator">
                <Loader
                  type="MutatingDots"
                  color="#CCC"
                  secondaryColor="#999"
                  height={100}
                  width={100}
                  visible={comicVineAPICallProgress}
                />
              </div>
            </div>
          )}
        </>
      ),
    },
    editComicBookMetadata: {
-      content: () => <EditMetadataPanel />,
+      content: () => <EditMetadataPanel data={rawFileDetails} />,
    },
  };
  // Actions
  const fetchComicVineMatches = async (
    searchPayload,
    issueSearchQuery,
    seriesSearchQuery,
  ) => {
    try {
      const response = await axios({
        url: `${COMICVINE_SERVICE_URI}/volumeBasedSearch`,
        method: "POST",
        data: {
          format: "json",
          // hack
          query: issueSearchQuery.inferredIssueDetails.name
            .replace(/[^a-zA-Z0-9 ]/g, "")
            .trim(),
          limit: "100",
          page: 1,
          resources: "volume",
          scorerConfiguration: {
            searchParams: issueSearchQuery.inferredIssueDetails,
          },
          rawFileDetails: searchPayload,
        },
        transformResponse: (r) => {
          const matches = JSON.parse(r);
          return matches;
          // return sortBy(matches, (match) => -match.score);
        },
      });
      let matches: any = [];
      if (!isNil(response.data.results) && response.data.results.length === 1) {
        matches = response.data.results;
      } else {
        matches = response.data.map((match) => match);
      }
      const scoredMatches = matches.sort((a, b) => b.score - a.score);
      setComicVineMatches(scoredMatches);
    } catch (err) {
      console.log(err);
    }
  };
  // Action event handlers
  const openDrawerWithCVMatches = () => {
    let seriesSearchQuery: IComicVineSearchQuery = {} as IComicVineSearchQuery;
    let issueSearchQuery: IComicVineSearchQuery = {} as IComicVineSearchQuery;
    if (!isUndefined(rawFileDetails)) {
      issueSearchQuery = refineQuery(rawFileDetails.name);
    } else if (!isEmpty(comicvine)) {
      issueSearchQuery = refineQuery(comicvine.name);
    }
    fetchComicVineMatches(rawFileDetails, issueSearchQuery, seriesSearchQuery);
    setSlidingPanelContentId("CVMatches");
    setVisible(true);
  };
  const openEditMetadataPanel = useCallback(() => {
    setSlidingPanelContentId("editComicBookMetadata");
    setVisible(true);
  }, []);
  //  Actions menu options and handler
  const CVMatchLabel = (
    <span className="inline-flex flex-row items-center gap-2">
      <div className="w-6 h-6">
        <i className="icon-[solar--magic-stick-3-bold-duotone] w-6 h-6"></i>
      </div>
      <div>Match on ComicVine</div>
    </span>
  );
  const editLabel = (
    <span className="inline-flex flex-row items-center gap-2">
      <div className="w-6 h-6">
        <i className="icon-[solar--pen-2-bold-duotone] w-6 h-6"></i>
      </div>
      <div>Edit Metadata</div>
    </span>
  );
  const deleteLabel = (
    <span className="inline-flex flex-row items-center gap-2">
      <div className="w-6 h-6">
        <i className="icon-[solar--trash-bin-trash-bold-duotone] w-6 h-6"></i>
      </div>
      <div>Delete Comic</div>
    </span>
  );
  const Placeholder = (props) => {
    return <components.Placeholder {...props} />;
  };
  const actionOptions = [
    { value: "match-on-comic-vine", label: CVMatchLabel },
    { value: "edit-metdata", label: editLabel },
    { value: "delete-comic", label: deleteLabel },
  ];
  const filteredActionOptions = filter(actionOptions, (item) => {
    if (isUndefined(rawFileDetails)) {
      return item.value !== "match-on-comic-vine";
    }
    return item;
  });
  const handleActionSelection = (action) => {
    switch (action.value) {
      case "match-on-comic-vine":
        openDrawerWithCVMatches();
        break;
      case "edit-metdata":
        openEditMetadataPanel();
        break;
      default:
        console.log("No valid action selected.");
        break;
    }
  };
  const customStyles = {
    menu: (base) => ({
      ...base,
      backgroundColor: "rgb(156, 163, 175)",
    }),
    placeholder: (base) => ({
      ...base,
      color: "black",
    }),
    option: (base, { data, isDisabled, isFocused, isSelected }) => ({
      ...base,
      backgroundColor: isFocused ? "gray" : "rgb(156, 163, 175)",
    }),
    singleValue: (base) => ({
      ...base,
      paddingTop: "0.4rem",
    }),
    control: (base) => ({
      ...base,
      backgroundColor: "rgb(156, 163, 175)",
      color: "black",
      border: "1px solid rgb(156, 163, 175)",
    }),
  };
  // check for the availability of CV metadata
  const isComicBookMetadataAvailable =
    !isUndefined(comicvine) && !isUndefined(comicvine.volumeInformation);
  // check for the availability of rawFileDetails
  const areRawFileDetailsAvailable =
-    !isUndefined(rawFileDetails) && !isEmpty(rawFileDetails.cover);
+    !isUndefined(rawFileDetails) && !isEmpty(rawFileDetails);
  const { issueName, url } = determineCoverFile({
    rawFileDetails,
@@ -170,7 +296,9 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
    {
      id: 1,
      name: "Volume Information",
-      icon: <i className="fa-solid fa-layer-group"></i>,
+      icon: (
        <i className="h-5 w-5 icon-[solar--book-2-bold] text-slate-500 dark:text-slate-300"></i>
      ),
      content: isComicBookMetadataAvailable ? (
        <VolumeInformation data={data.data} key={1} />
      ) : null,
@@ -179,26 +307,30 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
    {
      id: 2,
      name: "ComicInfo.xml",
-      icon: <i className="fa-solid fa-code"></i>,
+      icon: (
        <i className="h-5 w-5 icon-[solar--code-file-bold-duotone] text-slate-500 dark:text-slate-300" />
      ),
      content: (
-        <div className="columns" key={2}>
+        <div key={2}>
-          <div className="column is-three-quarters">
+          {!isNil(comicInfo) && <ComicInfoXML json={comicInfo} />}
            {!isNil(comicInfo) && <ComicInfoXML json={comicInfo} />}
          </div>
        </div>
      ),
      shouldShow: !isEmpty(comicInfo),
    },
    {
      id: 3,
-      icon: <i className="fa-regular fa-file-archive"></i>,
+      icon: (
        <i className="h-5 w-5 icon-[solar--winrar-bold-duotone] text-slate-500 dark:text-slate-300" />
      ),
      name: "Archive Operations",
      content: <ArchiveOperations data={data.data} key={3} />,
      shouldShow: areRawFileDetailsAvailable,
    },
    {
      id: 4,
-      icon: <i className="fa-solid fa-circle-nodes"></i>,
+      icon: (
        <i className="h-5 w-5 icon-[solar--folder-path-connect-bold-duotone] text-slate-500 dark:text-slate-300" />
      ),
      name: "DC++ Search",
      content: (
        <AcquisitionPanel
@@ -213,26 +345,37 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
    },
    {
      id: 5,
-      icon: <i className="fa-solid fa-droplet"></i>,
+      icon: (
        <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</>,
+      content: <TorrentSearchPanel comicObjectId={_id} issueName={issueName} />,
      shouldShow: true,
    },
    {
      id: 6,
-      icon: null,
+      name: "Downloads",
-      name: !isEmpty(data.data) ? (
+      icon: (
-        <span className="download-tab-name">Downloads</span>
+        <>
-      ) : (
+          {acquisition?.directconnect?.downloads?.length +
-        "Downloads"
+            acquisition?.torrent.length}
-      ),
+        </>
      content: !isNil(data.data) && !isEmpty(data.data) && (
        <DownloadsPanel
          data={data.data.acquisition.directconnect}
          comicObjectId={comicObjectId}
          key={5}
        />
      ),
      content:
        !isNil(data.data) && !isEmpty(data.data) ? (
          <DownloadsPanel key={5} />
        ) : (
          <div className="column is-three-fifths">
            <article className="message is-info">
              <div className="message-body is-size-6 is-family-secondary">
                AirDC++ is not configured. Please configure it in{" "}
                <code>Settings</code>.
              </div>
            </article>
          </div>
        ),
      shouldShow: true,
    },
  ];
@@ -244,73 +387,74 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
  // 2. from the CV-scraped version
  return (
-    <section className="container">
+    <section className="container mx-auto">
      <div className="section">
        {!isNil(data) && !isEmpty(data) && (
          <>
-            <h1 className="title">{issueName}</h1>
+            <div>
-            <div className="columns is-multiline">
+              <div className="flex flex-row mt-5">
              <div className="column is-narrow">
                <Card
                  imageUrl={url}
-                  orientation={"vertical"}
+                  orientation={"cover-only"}
                  hasDetails={false}
                  cardContainerStyle={{ maxWidth: 275 }}
                />
-                {/* action dropdown */}
+
-                <div className="mt-4 is-size-7">
+                {/* raw file details */}
                  <Menu
                    data={data.data}
                    handlers={{ setSlidingPanelContentId, setVisible }}
                  />
                </div>
              </div>
              {/* raw file details */}
              <div className="column">
                {!isUndefined(rawFileDetails) &&
                  !isEmpty(rawFileDetails.cover) && (
-                    <>
+                    <div className="grid">
                      <RawFileDetails
                        data={{
                          rawFileDetails: rawFileDetails,
                          inferredMetadata: inferredMetadata,
                          created_at: createdAt,
                          updated_at: updatedAt,
                        }}
                      />
                      {/* Read comic button */}
                      <button
                        className="button is-success is-light"
                        onClick={() => openModal(rawFileDetails.filePath)}
                      >
-                        <i className="fa-solid fa-book-open mr-2"></i>
+                        {/* action dropdown */}
-                        Read
+                        <div className="mt-1 flex flex-row gap-2 w-full">
-                      </button>
+                          <Menu
-
+                            data={data.data}
-                      <Modal
+                            handlers={{ setSlidingPanelContentId, setVisible }}
-                        style={{ content: { marginTop: "2rem" } }}
+                            configuration={{
-                        isOpen={modalIsOpen}
+                              filteredActionOptions,
-                        onAfterOpen={afterOpenModal}
+                              customStyles,
-                        onRequestClose={closeModal}
+                              handleActionSelection,
-                        contentLabel="Example Modal"
+                              Placeholder,
                      >
                        <button onClick={closeModal}>close</button>
                        {extractedComicBook && (
                          <ComicViewer
                            pages={extractedComicBook}
                            direction="ltr"
                            className={{
                              closeButton: "border: 1px solid red;",
                            }}
                          />
-                        )}
+                        </div>
-                      </Modal>
+                      </RawFileDetails>
-                    </>
+
                      {/* <Modal
                      style={{ content: { marginTop: "2rem" } }}
                      isOpen={modalIsOpen}
                      onAfterOpen={afterOpenModal}
                      onRequestClose={closeModal}
                      contentLabel="Example Modal"
                    >
                      <button onClick={closeModal}>close</button>
                      {extractedComicBook && (
                        <ComicViewer
                          pages={extractedComicBook}
                          direction="ltr"
                          className={{
                            closeButton: "border: 1px solid red;",
                          }}
                        />
                      )}
                    </Modal> */}
                    </div>
                  )}
              </div>
            </div>
-            {<TabControls filteredTabs={filteredTabs} />}
+            <TabControls
              filteredTabs={filteredTabs}
              downloadCount={acquisition?.directconnect?.downloads?.length}
            />
-            <SlidingPane
+            <StyledSlidingPanel
              isOpen={visible}
              onRequestClose={() => setVisible(false)}
              title={"Comic Vine Search Matches"}
@@ -318,7 +462,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
            >
              {slidingPanelContentId !== "" &&
                contentForSlidingPanel[slidingPanelContentId].content()}
-            </SlidingPane>
+            </StyledSlidingPanel>
          </>
        )}
      </div>
--- a/src/client/components/ComicDetail/ComicDetailContainer.tsx
+++ b/src/client/components/ComicDetail/ComicDetailContainer.tsx
@@ -1,22 +1,35 @@
-import { isEmpty, isNil, isUndefined } from "lodash";
+import React, { ReactElement } from "react";
 import React, { ReactElement, useContext, useEffect, useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { useParams } from "react-router-dom";
 import { getComicBookDetailById } from "../../actions/comicinfo.actions";
 import { ComicDetail } from "../ComicDetail/ComicDetail";
 import { useQuery } from "@tanstack/react-query";
 import { LIBRARY_SERVICE_BASE_URI } from "../../constants/endpoints";
 import axios from "axios";
 export const ComicDetailContainer = (): ReactElement | null => {
  const comicBookDetailData = useSelector(
    (state: RootState) => state.comicInfo.comicBookDetail,
  );
  const dispatch = useDispatch();
  const { comicObjectId } = useParams<{ comicObjectId: string }>();
-  useEffect(() => {
+  const {
-    dispatch(getComicBookDetailById(comicObjectId));
+    data: comicBookDetailData,
-    // dispatch(getSettings());
+    isLoading,
-  }, [dispatch]);
+    isError,
-  return !isEmpty(comicBookDetailData) ? (
+  } = useQuery({
-    <ComicDetail data={comicBookDetailData} />
+    queryKey: ["comicBookMetadata"],
-  ) : null;
+    queryFn: async () =>
      await axios({
        url: `${LIBRARY_SERVICE_BASE_URI}/getComicBookById`,
        method: "POST",
        data: {
          id: comicObjectId,
        },
      }),
  });
  {
    isError && <>Error</>;
  }
  {
    isLoading && <>Loading...</>;
  }
  return (
    comicBookDetailData?.data && <ComicDetail data={comicBookDetailData.data} />
  );
 };
--- a/src/client/components/ComicDetail/ComicVineDetails.tsx
+++ b/src/client/components/ComicDetail/ComicVineDetails.tsx
@@ -2,105 +2,105 @@ import React, { ReactElement } from "react";
 import PropTypes from "prop-types";
 import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils";
 import dayjs from "dayjs";
-import { isUndefined } from "lodash";
+import { isEmpty, isUndefined } from "lodash";
 import Card from "../shared/Carda";
 import { convert } from "html-to-text";
 export const ComicVineDetails = (props): ReactElement => {
  const { data, updatedAt } = props;
  return (
-    <div className="column is-half">
+    <div className="text-slate-500 dark:text-gray-400">
-      <div className="comic-detail comicvine-metadata">
+      <div className="">
-        <dl>
+        <div>
-          <dt>ComicVine Metadata</dt>
+          <div className="flex flex-row gap-4">
-          <dd className="is-size-7">
+            <div className="min-w-fit">
-            Last scraped on {dayjs(updatedAt).format("MMM D YYYY [at] h:mm a")}
+              <Card
-          </dd>
+                imageUrl={data.volumeInformation.image.thumb_url}
-
+                orientation={"cover-only"}
-          <dd>
+                hasDetails={false}
-            <div className="columns mt-2">
+                // cardContainerStyle={{ maxWidth: 200 }}
-              <div className="column is-2">
+              />
-                <Card
+            </div>
-                  imageUrl={data.volumeInformation.image.thumb_url}
+            <div className="flex flex-col gap-5">
-                  orientation={"vertical"}
+              <div className="flex flex-row">
-                  hasDetails={false}
+                <div>
-                  // cardContainerStyle={{ maxWidth: 200 }}
+                  {/* Title */}
-                />
+                  <div>
-              </div>
+                    <div className="text-lg">{data.name}</div>
-              <div className="column is-10">
+                    <div className="text-sm">
-                <dl>
+                      Is a part of{" "}
-                  <dt>
+                      <span className="has-text-info">
-                    <h6 className="has-text-weight-bold mb-2">{data.name}</h6>
+                        {data.volumeInformation.name}
-                  </dt>
+                      </span>
                  <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>
+                  </div>
-                </dl>
+
                  {/* Comicvine metadata */}
                  <div className="mt-2">
                    <div className="text-md">ComicVine Metadata</div>
                    <div className="text-sm">
                      Last scraped on{" "}
                      {dayjs(updatedAt).format("MMM D YYYY [at] h:mm a")}
                    </div>
                    <div className="text-sm">
                      ComicVine Issue ID
                      <span>{data.id}</span>
                    </div>
                  </div>
                </div>
                {/* Publisher details */}
                <div className="ml-8">
                  Published by{" "}
                  <span>{data.volumeInformation.publisher.name}</span>
                  <div>
                    Total issues in this volume{" "}
                    <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-900 dark:text-slate-900">
                        {data.volumeInformation.count_of_issues}
                      </span>
                    </span>
                  </div>
                  <div>
                    {data.issue_number && (
                      <div className="">
                        <span>Issue Number</span>
                        <span>{data.issue_number}</span>
                      </div>
                    )}
                    {!isUndefined(
                      detectIssueTypes(data.volumeInformation.description),
                    ) ? (
                      <div>
                        <span>Detected Type</span>
                        <span>
                          {
                            detectIssueTypes(data.volumeInformation.description)
                              .displayName
                          }
                        </span>
                      </div>
                    ) : data.resource_type ? (
                      <div>
                        <span>Type</span>
                        <span>{data.resource_type}</span>
                      </div>
                    ) : null}
                  </div>
                </div>
              </div>
              {/* Description */}
              <div className="mt-3 w-3/4">
                {!isEmpty(data.description) &&
                  convert(data.description, {
                    baseElements: {
                      selectors: ["p"],
                    },
                  })}
              </div>
            </div>
-          </dd>
+          </div>
-        </dl>
+        </div>
      </div>
    </div>
  );
--- a/src/client/components/ComicDetail/ComicVineMatchPanel.tsx
+++ b/src/client/components/ComicDetail/ComicVineMatchPanel.tsx
@@ -2,22 +2,41 @@ import React, { ReactElement } from "react";
 import { ComicVineSearchForm } from "../ComicVineSearchForm";
 import MatchResult from "./MatchResult";
 import { isEmpty } from "lodash";
 import { useStore } from "../../store";
 import { useShallow } from "zustand/react/shallow";
 export const ComicVineMatchPanel = (comicVineData): ReactElement => {
-  const {
+  const { comicObjectId, comicVineMatches } = comicVineData.props;
-    comicObjectId,
+  const { comicvine } = useStore(
-    comicVineSearchQueryObject,
+    useShallow((state) => ({
-    comicVineAPICallProgress,
+      comicvine: state.comicvine,
-    comicVineSearchResults,
+    })),
-  } = comicVineData.props;
+  );
  return (
    <>
-      <div className="search-results-container">
+      <div>
-        {!isEmpty(comicVineSearchResults) && (
+        {!isEmpty(comicVineMatches) ? (
          <MatchResult
-            matchData={comicVineSearchResults}
+            matchData={comicVineMatches}
            comicObjectId={comicObjectId}
          />
        ) : (
          <>
            <article
              role="alert"
              className="mt-4 rounded-lg max-w-screen-md border-s-4 border-yellow-500 bg-yellow-50 p-4 dark:border-s-4 dark:border-yellow-600 dark:bg-yellow-300 dark:text-slate-600 text-sm"
            >
              <div>
                <p>ComicVine match results are an approximation.</p>
                <p>
                  Auto-matching is not available yet. If you see no results or
                  poor quality ones, you can override the search query
                  parameters to get better ones.
                </p>
              </div>
            </article>
            <div className="text-md my-5">{comicvine.scrapingStatus}</div>
          </>
        )}
      </div>
    </>
--- a/src/client/components/ComicDetail/ComicVineSearchForm.tsx
+++ b/src/client/components/ComicDetail/ComicVineSearchForm.tsx
@@ -2,7 +2,6 @@ import React, { useCallback } from "react";
 import { Form, Field } from "react-final-form";
 import Collapsible from "react-collapsible";
 import { fetchComicVineMatches } from "../../actions/fileops.actions";
 import { useDispatch } from "react-redux";
 /**
 * Component for performing search against ComicVine
@@ -14,7 +13,6 @@ import { useDispatch } from "react-redux";
 * )
 */
 export const ComicVineSearchForm = (data) => {
  const dispatch = useDispatch();
  const onSubmit = useCallback((value) => {
    const userInititatedQuery = {
      inferredIssueDetails: {
@@ -24,7 +22,7 @@ export const ComicVineSearchForm = (data) => {
        year: value.issueYear,
      },
    };
-    dispatch(fetchComicVineMatches(data, userInititatedQuery));
+    // dispatch(fetchComicVineMatches(data, userInititatedQuery));
  }, []);
  const validate = () => {
    return true;
@@ -36,83 +34,55 @@ export const ComicVineSearchForm = (data) => {
      validate={validate}
      render={({ handleSubmit }) => (
        <form onSubmit={handleSubmit}>
-          <span className="field is-normal">
+          <span className="flex items-center">
-            <label className="label mb-2 is-size-5">Search Manually</label>
+            <span className="text-md text-slate-500 dark:text-slate-500 pr-5">
              Override Search Query
            </span>
            <span className="h-px flex-1 bg-slate-200 dark:bg-slate-400"></span>
          </span>
-          <div className="field is-horizontal">
+          <label className="block py-1">Issue Name</label>
-            <div className="field-body">
+          <Field name="issueName">
-              <div className="field">
+            {(props) => (
-                <Field name="issueName">
+              <input
-                  {(props) => (
+                {...props.input}
-                    <p className="control is-expanded has-icons-left">
+                className="appearance-none dark:bg-slate-100 bg-slate-100 h-10 w-full rounded-md border-none text-gray-700 dark:text-slate-200 py-1 pr-7 pl-3 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
-                      <input
+                placeholder="Type the issue name"
-                        {...props.input}
+              />
-                        className="input is-normal"
+            )}
-                        placeholder="Type the issue name"
+          </Field>
-                      />
+          <div className="flex flex-row gap-4">
-                      <span className="icon is-small is-left">
+            <div>
-                        <i className="fas fa-journal-whills"></i>
+              <label className="block py-1">Number</label>
-                      </span>
+              <Field name="issueNumber">
-                    </p>
+                {(props) => (
-                  )}
+                  <input
-                </Field>
+                    {...props.input}
-              </div>
+                    className="appearance-none dark:bg-slate-100 bg-slate-100 h-10 w-14 rounded-md border-none text-gray-700 dark:text-slate-200 py-1 pr-7 pl-3 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
                    placeholder="#"
                  />
                )}
              </Field>
            </div>
-          </div>
+            <div>
-
+              <label className="block py-1">Year</label>
-          <div className="field is-horizontal">
+              <Field name="issueYear">
-            <div className="field-body">
+                {(props) => (
-              <div className="field">
+                  <input
-                <Field name="issueNumber">
+                    {...props.input}
-                  {(props) => (
+                    className="appearance-none dark:bg-slate-100 bg-slate-100 h-10 w-20 rounded-md border-none text-gray-700 dark:text-slate-200 py-1 pr-7 pl-3 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
-                    <p className="control has-icons-left">
+                    placeholder="1984"
-                      <input
+                  />
-                        {...props.input}
+                )}
-                        className="input is-normal"
+              </Field>
                        placeholder="Type the issue number"
                      />
                      <span className="icon is-small is-left">
                        <i className="fas fa-hashtag"></i>
                      </span>
                    </p>
                  )}
                </Field>
              </div>
              <div className="field">
                <Field name="issueYear">
                  {(props) => (
                    <p className="control has-icons-left">
                      <input
                        {...props.input}
                        className="input is-normal"
                        placeholder="Type the issue year"
                      />
                      <span className="icon is-small is-left">
                        <i className="fas fa-hashtag"></i>
                      </span>
                    </p>
                  )}
                </Field>
              </div>
            </div>
          </div>
-          <div className="field is-horizontal">
+            <div className="flex justify-end mt-5">
-            <div className="field-body">
+              <button
-              <div className="field">
+                type="submit"
-                <div className="control">
+                className="flex h-10 sm:mt-3 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-4 py-2 text-gray-500 hover:bg-transparent hover:text-red-600 focus:outline-none focus:ring active:text-indigo-500"
-                  <button
+              >
-                    type="submit"
+                Search
-                    className="button is-success is-light is-outlined is-small"
+              </button>
                  >
                    <span className="icon">
                      <i className="fas fa-search"></i>
                    </span>
                    <span>Search</span>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </form>
--- a/src/client/components/ComicDetail/DownloadProgressTick.tsx
+++ b/src/client/components/ComicDetail/DownloadProgressTick.tsx
@@ -3,10 +3,10 @@ import React, { ReactElement } from "react";
 export const DownloadProgressTick = (props): ReactElement => {
  return (
-    <div >
+    <div>
-      <h4 className="is-size-6">{props.data.name}</h4>
+      <h4 className="is-size-5">{props.data.name}</h4>
      <div>
-        <span className="is-size-3 has-text-weight-semibold">
+        <span className="is-size-4 has-text-weight-semibold">
          {prettyBytes(props.data.downloaded_bytes)} of{" "}
          {prettyBytes(props.data.size)}{" "}
        </span>
@@ -20,13 +20,12 @@ export const DownloadProgressTick = (props): ReactElement => {
          %
        </progress>
      </div>
-      <div className="is-size-5">
+      <div className="is-size-6 mt-1 mb-2">
-        {prettyBytes(props.data.speed)} per second.
+        <p>{prettyBytes(props.data.speed)} per second.</p>
      </div>
      <div className="is-size-5">
        Time left:
        {Math.round(parseInt(props.data.seconds_left) / 60)}
      </div>
      <div>{props.data.target}</div>
    </div>
  );
--- a/src/client/components/ComicDetail/DownloadsPanel.tsx
+++ b/src/client/components/ComicDetail/DownloadsPanel.tsx
@@ -1,106 +1,147 @@
-import React, { useEffect, useContext, ReactElement } from "react";
+import React, { useEffect, useContext, ReactElement, useState } from "react";
 import { getBundlesForComic } from "../../actions/airdcpp.actions";
 import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "threetwo-ui-typings";
-import { isEmpty, isNil, map } from "lodash";
+import { isEmpty, map } from "lodash";
-import prettyBytes from "pretty-bytes";
+import { AirDCPPBundles } from "./AirDCPPBundles";
-import dayjs from "dayjs";
+import { TorrentDownloads } from "./TorrentDownloads";
-import ellipsize from "ellipsize";
+import { useQuery } from "@tanstack/react-query";
-import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
+import axios from "axios";
 import {
  LIBRARY_SERVICE_BASE_URI,
  QBITTORRENT_SERVICE_BASE_URI,
  TORRENT_JOB_SERVICE_BASE_URI,
 } from "../../constants/endpoints";
 import { useStore } from "../../store";
 import { useShallow } from "zustand/react/shallow";
 import { useParams } from "react-router-dom";
 interface IDownloadsPanelProps {
-  data: any;
+  key: number;
  comicObjectId: string;
 }
 export const DownloadsPanel = (
  props: IDownloadsPanelProps,
 ): ReactElement | null => {
-  const bundles = useSelector((state: RootState) => {
+  const { comicObjectId } = useParams<{ comicObjectId: string }>();
-    return state.airdcpp.bundles;
+  const [bundles, setBundles] = useState([]);
  const [infoHashes, setInfoHashes] = useState<string[]>([]);
  const [torrentDetails, setTorrentDetails] = useState([]);
  const [activeTab, setActiveTab] = useState("torrents");
  const { airDCPPSocketInstance, socketIOInstance } = useStore(
    useShallow((state: any) => ({
      airDCPPSocketInstance: state.airDCPPSocketInstance,
      socketIOInstance: state.socketIOInstance,
    })),
  );
  // React to torrent progress data sent over websockets
  socketIOInstance.on("AS_TORRENT_DATA", (data) => {
    const torrents = data.torrents
      .flatMap(({ _id, details }) => {
        if (_id === comicObjectId) {
          return details;
        }
      })
      .filter((item) => item !== undefined);
    setTorrentDetails(torrents);
  });
  // Fetch the downloaded files and currently-downloading file(s) from AirDC++
  const { data: comicObject, isSuccess } = useQuery({
    queryKey: ["bundles"],
    queryFn: async () =>
      await axios({
        url: `${LIBRARY_SERVICE_BASE_URI}/getComicBookById`,
        method: "POST",
        headers: {
          "Content-Type": "application/json; charset=utf-8",
        },
        data: {
          id: `${comicObjectId}`,
        },
      }),
  });
-  // AirDCPP Socket initialization
+  const getBundles = async (comicObject) => {
-  const userSettings = useSelector((state: RootState) => state.settings.data);
+    if (comicObject?.data.acquisition.directconnect) {
-  const airDCPPConfiguration = useContext(AirDCPPSocketContext);
+      const filteredBundles =
-
+        comicObject.data.acquisition.directconnect.downloads.map(
-  const {
+          async ({ bundleId }) => {
-    airDCPPState: { socket, settings },
+            return await airDCPPSocketInstance.get(`queue/bundles/${bundleId}`);
-  } = airDCPPConfiguration;
+          },
  const dispatch = useDispatch();
  // Fetch the downloaded files and currently-downloading file(s) from AirDC++
  useEffect(() => {
    try {
      if (!isEmpty(userSettings)) {
        dispatch(
          getBundlesForComic(props.comicObjectId, socket, {
            username: `${settings.directConnect.client.host.username}`,
            password: `${settings.directConnect.client.host.password}`,
          }),
        );
-      }
+      return await Promise.all(filteredBundles);
    } catch (error) {
      throw new Error(error);
    }
  }, [dispatch, airDCPPConfiguration]);
  const Bundles = (props) => {
    return !isEmpty(props.data) ? (
      <div className="column is-full">
        <table className="table is-striped">
          <thead>
            <tr>
              <th>Filename</th>
              <th>Size</th>
              <th>Download Time</th>
              <th>Bundle ID</th>
            </tr>
          </thead>
          <tbody>
            {map(props.data, (bundle) => (
              <tr key={bundle.id}>
                <td>
                  <h5>{ellipsize(bundle.name, 58)}</h5>
                  <span className="is-size-7">{bundle.target}</span>
                </td>
                <td>{prettyBytes(bundle.size)}</td>
                <td>
                  {dayjs
                    .unix(bundle.time_finished)
                    .format("h:mm on ddd, D MMM, YYYY")}
                </td>
                <td>
                  <span className="tag is-warning">{bundle.id}</span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    ) : (
      <div className="column is-full"> {"No Downloads Found"} </div>
    );
  };
-  return !isNil(props.data) ? (
+  // Call the scheduled job for fetching torrent data
-    <>
+  // triggered by the active tab been set to "torrents"
-      <div className="columns is-multiline">
+  const { data: torrentData } = useQuery({
-        {!isEmpty(socket) ? (
+    queryFn: () =>
-          <Bundles data={bundles} />
+      axios({
-        ) : (
+        url: `${TORRENT_JOB_SERVICE_BASE_URI}/getTorrentData`,
-          <div className="column is-three-fifths">
+        method: "GET",
-            <article className="message is-info">
+        params: {
-              <div className="message-body is-size-6 is-family-secondary">
+          trigger: activeTab,
-                AirDC++ is not configured. Please configure it in{" "}
+        },
-                <code>Settings</code>.
+      }),
-              </div>
+    queryKey: [activeTab],
-            </article>
+  });
          </div>
        )}
      </div>
    </>
  ) : null;
 };
  useEffect(() => {
    getBundles(comicObject).then((result) => {
      setBundles(result);
    });
  }, [comicObject]);
  return (
    <div className="columns is-multiline">
      {!isEmpty(airDCPPSocketInstance) &&
        !isEmpty(bundles) &&
        activeTab === "directconnect" && <AirDCPPBundles data={bundles} />}
      <div>
        <div className="sm:hidden">
          <label htmlFor="Download Type" className="sr-only">
            Download Type
          </label>
          <select id="Tab" className="w-full rounded-md border-gray-200">
            <option>DC++ Downloads</option>
            <option>Torrents</option>
          </select>
        </div>
        <div className="hidden sm:block">
          <nav className="flex gap-6" aria-label="Tabs">
            <a
              href="#"
              className={`shrink-0 rounded-lg p-2 text-sm font-medium hover:bg-gray-50 hover:text-gray-700 ${
                activeTab === "directconnect"
                  ? "bg-slate-200 dark:text-slate-200 dark:bg-slate-400 text-slate-800"
                  : "dark:text-slate-400 text-slate-800"
              }`}
              aria-current="page"
              onClick={() => setActiveTab("directconnect")}
            >
              DC++ Downloads
            </a>
            <a
              href="#"
              className={`shrink-0 rounded-lg p-2 text-sm font-medium hover:bg-gray-50 hover:text-gray-700 ${
                activeTab === "torrents"
                  ? "bg-slate-200 text-slate-800"
                  : "dark:text-slate-400 text-slate-800"
              }`}
              onClick={() => setActiveTab("torrents")}
            >
              Torrents
            </a>
          </nav>
        </div>
      </div>
      {activeTab === "torrents" && <TorrentDownloads data={torrentDetails} />}
    </div>
  );
 };
 export default DownloadsPanel;
--- a/src/client/components/ComicDetail/EditMetadataPanel.tsx
+++ b/src/client/components/ComicDetail/EditMetadataPanel.tsx
@@ -1,5 +1,4 @@
 import React, { ReactElement, useCallback, useEffect, useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { Form, Field } from "react-final-form";
 import arrayMutators from "final-form-arrays";
 import { FieldArray } from "react-final-form-arrays";
@@ -9,7 +8,9 @@ import TextareaAutosize from "react-textarea-autosize";
 export const EditMetadataPanel = (props): ReactElement => {
  const validate = async () => {};
  const onSubmit = async () => {};
- 
+
  const { data } = props;
  const AsyncSelectPaginateAdapter = ({ input, ...rest }) => {
    return (
      <AsyncSelectPaginate
@@ -28,10 +29,9 @@ export const EditMetadataPanel = (props): ReactElement => {
      />
    );
  };
-  const rawFileDetails = useSelector(
+  // const rawFileDetails = useSelector(
-    (state: RootState) => state.comicInfo.comicBookDetail.rawFileDetails.name,
+  //   (state: RootState) => state.comicInfo.comicBookDetail.rawFileDetails.name,
-  );
+  // );
  const dispatch = useDispatch();
  return (
    <>
@@ -58,90 +58,59 @@ export const EditMetadataPanel = (props): ReactElement => {
                <label className="label">Issue Details</label>
              </div>
              <div className="field-body">
-                <div className="field">
+                <Field
-                  <p className="control is-expanded has-icons-left">
+                  name="issue_name"
-                    <Field
+                  component="input"
-                      name="issue_name"
+                  className="appearance-none w-full dark:bg-slate-400 bg-slate-100 h-10 rounded-md border-none text-gray-700 dark:text-slate-200 py-1 pr-7 pl-3 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
-                      component="input"
+                  initialValue={data.name}
-                      className="input"
+                  placeholder={"Issue Name"}
-                      initialValue={rawFileDetails}
+                />
                      placeholder={"Issue Name"}
                    />
                    <span className="icon is-small is-left">
                      <i className="fa-solid fa-user-ninja"></i>
                    </span>
                  </p>
                </div>
              </div>
            </div>
            {/* Issue Number and year */}
-            <div className="field is-horizontal">
+            <div className="mt-4 flex flex-row gap-2">
-              <div className="field-label"></div>
+              <div>
-              <div className="field-body">
+                <div className="text-sm">Issue Number</div>
-                <div className="field">
+                <Field
-                  <p className="control has-icons-left">
+                  name="issue_number"
-                    <Field
+                  component="input"
-                      name="issue_number"
+                  className="dark:bg-slate-400 w-20 bg-slate-100 py-2 px-2 rounded-md border-gray-300 h-10 dark:text-slate-200 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
-                      component="input"
+                  placeholder="Issue Number"
-                      className="input"
+                />
-                      placeholder="Issue Number"
+                <p className="text-xs">Do not enter the first zero</p>
-                    />
+              </div>
-                    <span className="icon is-small is-left">
+              <div>
                      <i className="fa-solid fa-hashtag"></i>
                    </span>
                  </p>
                  <p className="help">Do not enter the first zero</p>
                </div>
                {/* year */}
-                <div className="field">
+                <div className="text-sm">Issue Year</div>
-                  <p className="control">
+                <Field
-                    <Field
+                  name="issue_year"
-                      name="issue_year"
+                  component="input"
-                      component="input"
+                  className="dark:bg-slate-400 w-20 bg-slate-100 py-2 px-2 rounded-md border-gray-300 h-10 dark:text-slate-200 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
-                      className="input"
+                />
-                    />
+              </div>
-                  </p>
+
-                </div>
+              <div>
                <div className="text-sm">Page Count</div>
                <Field
                  name="page_count"
                  component="input"
                  className="dark:bg-slate-400 w-20 bg-slate-100 py-2 px-2 rounded-md border-gray-300 h-10 dark:text-slate-200 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
                  placeholder="Page Count"
                />
              </div>
            </div>
            {/* page count */}
            <div className="field is-horizontal">
              <div className="field-label"></div>
              <div className="field-body">
                <div className="field">
                  <p className="control has-icons-left">
                    <Field
                      name="page_count"
                      component="input"
                      className="input"
                      placeholder="Page Count"
                    />
                    <span className="icon is-small is-left">
                      <i className="fa-solid fa-note-sticky"></i>
                    </span>
                  </p>
                </div>
              </div>
            </div>
            {/* Description */}
-            <div className="field is-horizontal">
+            <div className="mt-2">
-              <div className="field-label is-normal">
+              <label className="text-sm">Description</label>
-                <label className="label">Description</label>
+              <Field
-              </div>
+                name={"description"}
-              <div className="field-body">
+                className="dark:bg-slate-400 w-full min-h-24 bg-slate-100 py-2 px-2 rounded-md border-gray-300 h-10 dark:text-slate-200 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
-                <div className="field">
+                component={TextareaAutosizeAdapter}
-                  <p className="control is-expanded has-icons-left">
+                placeholder={"Description"}
-                    <Field
+              />
                      name={"description"}
                      className="textarea"
                      component={TextareaAutosizeAdapter}
                      placeholder={"Description"}
                    />
                  </p>
                </div>
              </div>
            </div>
            <hr size="1" />
--- a/src/client/components/ComicDetail/MatchResult.tsx
+++ b/src/client/components/ComicDetail/MatchResult.tsx
@@ -1,9 +1,9 @@
-import React, { useCallback } from "react";
+import React from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { isNil, map } from "lodash";
 import { applyComicVineMatch } from "../../actions/comicinfo.actions";
 import { convert } from "html-to-text";
 import ellipsize from "ellipsize";
 import { LIBRARY_SERVICE_BASE_URI } from "../../constants/endpoints";
 import axios from "axios";
 interface MatchResultProps {
  matchData: any;
@@ -15,15 +15,24 @@ const handleBrokenImage = (e) => {
 };
 export const MatchResult = (props: MatchResultProps) => {
-  const dispatch = useDispatch();
+  const applyCVMatch = async (match, comicObjectId) => {
-  const applyCVMatch = useCallback(
+    return await axios.request({
-    (match, comicObjectId) => {
+      url: `${LIBRARY_SERVICE_BASE_URI}/applyComicVineMetadata`,
-      dispatch(applyComicVineMatch(match, comicObjectId));
+      method: "POST",
-    },
+      data: {
-    [dispatch],
+        match,
-  );
+        comicObjectId,
      },
    });
  };
  return (
    <>
      <span className="flex items-center mt-6">
        <span className="text-md text-slate-500 dark:text-slate-500 pr-5">
          ComicVine Matches
        </span>
        <span className="h-px flex-1 bg-slate-200 dark:bg-slate-400"></span>
      </span>
      {map(props.matchData, (match, idx) => {
        let issueDescription = "";
        if (!isNil(match.description)) {
@@ -33,88 +42,90 @@ export const MatchResult = (props: MatchResultProps) => {
            },
          });
        }
        const bestMatchCSSClass = idx === 0 ? "bg-green-100" : "bg-slate-300";
        return (
-          <div className="search-result mb-4" key={idx}>
+          <div className={`${bestMatchCSSClass} my-5 p-4 rounded-lg`} key={idx}>
-            <div className="columns">
+            <div className="flex flex-row gap-4">
-              <div className="column is-one-fifth">
+              <div className="min-w-fit">
                <img
-                  className="cover-image"
+                  className="rounded-md"
                  src={match.image.thumb_url}
                  onError={handleBrokenImage}
                />
              </div>
              <div>
                <div className="flex flex-row mb-1 justify-end">
                  {match.name ? (
                    <p className="text-md w-full">{match.name}</p>
                  ) : null}
-              <div className="search-result-details column">
+                  {/* score */}
-                <div className="is-size-5">{match.name}</div>
+                  <span className="inline-flex h-fit w-fit items-center bg-green-50 text-sm text-slate-800 font-medium px-2 rounded-md dark:text-slate-900 dark:bg-green-400">
-
+                    <span className="pr-1 pt-1">
-                <div className="field is-grouped is-grouped-multiline mt-1">
+                      <i className="icon-[solar--course-up-line-duotone] w-4 h-4"></i>
-                  <div className="control">
+                    </span>
-                    <div className="tags has-addons">
+                    <span className="text-slate-900 dark:text-slate-900">
-                      <span className="tag">Number</span>
+                      {parseInt(match.score, 10)}
-                      <span className="tag is-primary">
+                    </span>
-                        {match.issue_number}
+                  </span>
                      </span>
                    </div>
                  </div>
                  <div className="control">
                    <div className="tags has-addons">
                      <span className="tag">Cover Date</span>
                      <span className="tag is-warning">{match.cover_date}</span>
                    </div>
                  </div>
                </div>
-                <div className="is-size-7">
+                <span className="flex flex-row gap-2 mb-2">
                  <span className="inline-flex items-center bg-slate-50 text-sm text-slate-800 font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
                    <span className="pr-1 pt-1">
                      <i className="icon-[solar--hashtag-outline] w-4 h-4"></i>
                    </span>
                    <span className="text-slate-900 dark:text-slate-900">
                      {parseInt(match.issue_number, 10)}
                    </span>
                  </span>
                  <span className="inline-flex items-center bg-slate-50 text-slate-800 text-sm font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
                    <span className="pr-1 pt-1">
                      <i className="icon-[solar--calendar-mark-bold-duotone] w-5 h-5"></i>
                    </span>
                    <span className="text-slate-900 dark:text-slate-900">
                      Cover Date: {match.cover_date}
                    </span>
                  </span>
                </span>
                <div className="text-sm">
                  {ellipsize(issueDescription, 300)}
                </div>
              </div>
            </div>
-            <div className="vertical-line"></div>
+            <div className="flex flex-row gap-2 my-4 ml-10">
-
+              <div className="">
            <div className="columns ml-6 volume-information">
              <div className="column is-one-fifth">
                <img
                  src={match.volumeInformation.results.image.icon_url}
-                  className="cover-image"
+                  className="rounded-md w-full"
                  onError={handleBrokenImage}
                />
              </div>
-              <div className="column">
+              <div className="">
-                <div className="is-size-6">{match.volume.name}</div>
+                <span>{match.volume.name}</span>
-                <div className="field is-grouped is-grouped-multiline mt-2">
+                <div className="text-sm">
-                  <div className="control">
+                  <p>
-                    <div className="tags has-addons">
+                    Total Issues:
-                      <span className="tag">Total Issues</span>
+                    {match.volumeInformation.results.count_of_issues}
-                      <span className="tag is-warning">
+                  </p>
-                        {match.volumeInformation.results.count_of_issues}
+                  <p>
-                      </span>
+                    Published by{" "}
-                    </div>
+                    {match.volumeInformation.results.publisher.name}
-                  </div>
+                  </p>
                  <div className="control">
                    <div className="tags has-addons">
                      <span className="tag">Publisher</span>
                      <span className="tag is-warning">
                        {match.volumeInformation.results.publisher.name}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
-            <div className="columns">
+            <div className="flex justify-end">
-              <div className="column">
+              <button
-                <button
+                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"
-                  className="button is-normal is-outlined is-primary is-light is-pulled-right"
+                onClick={() => applyCVMatch(match, props.comicObjectId)}
-                  onClick={() => applyCVMatch(match, props.comicObjectId)}
+              >
-                >
+                <span className="text-md">Apply Match</span>
-                  <span className="icon is-size-5">
+                <span className="w-5 h-5">
-                    <i className="fas fa-clipboard-check"></i>
+                  <i className="h-5 w-5 icon-[solar--magic-stick-3-bold-duotone]"></i>
-                  </span>
+                </span>
-                  <span>Apply Match</span>
+              </button>
                </button>
              </div>
            </div>
          </div>
        );
--- a/src/client/components/ComicDetail/RawFileDetails.tsx
+++ b/src/client/components/ComicDetail/RawFileDetails.tsx
@@ -2,78 +2,96 @@ import React, { ReactElement } from "react";
 import PropTypes from "prop-types";
 import prettyBytes from "pretty-bytes";
 import { isEmpty } from "lodash";
 import { format, parseISO } from "date-fns";
 export const RawFileDetails = (props): ReactElement => {
-  const { rawFileDetails, inferredMetadata } = props.data;
+  const { rawFileDetails, inferredMetadata, created_at, updated_at } =
    props.data;
  return (
    <>
-      <div className="comic-detail raw-file-details column is-three-fifths">
+      <div className="max-w-2xl ml-5">
-        <dl>
+        <div className="px-4 sm:px-6">
-          <dt>Raw File Details</dt>
+          <p className="text-gray-500 dark:text-gray-400">
-          <dd className="is-size-7">
+            <span className="text-xl">{rawFileDetails.name}</span>
-            {rawFileDetails.containedIn +
+          </p>
-              "/" +
+        </div>
-              rawFileDetails.name +
+        <div className="px-4 py-5 sm:px-6">
-              rawFileDetails.extension}
+          <dl className="grid grid-cols-1 gap-x-4 gap-y-4 sm:grid-cols-2">
-          </dd>
+            <div className="sm:col-span-1">
-          <dd>
+              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
-            <div className="field is-grouped mt-2">
+                Raw File Details
-              <div className="control">
+              </dt>
-                <div className="tags has-addons">
+              <dd className="mt-1 text-sm text-gray-900 dark:text-gray-400">
-                  <span className="tag">Size</span>
+                {rawFileDetails.containedIn +
-                  <span className="tag is-info is-light">
+                  "/" +
-                    {prettyBytes(rawFileDetails.fileSize)}
+                  rawFileDetails.name +
-                  </span>
+                  rawFileDetails.extension}
-                </div>
+              </dd>
-              </div>
+            </div>
-              <div className="control">
+            <div className="sm:col-span-1">
-                <div className="tags has-addons">
+              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
-                  <span className="tag">Extension</span>
+                Inferred Issue Metadata
              </dt>
              <dd className="mt-1 text-sm text-gray-900 dark:text-gray-400">
                Series Name: {inferredMetadata.issue.name}
                {!isEmpty(inferredMetadata.issue.number) ? (
                  <span className="tag is-primary is-light">
-                    {rawFileDetails.extension}
+                    {inferredMetadata.issue.number}
                  </span>
-                </div>
+                ) : null}
-              </div>
+              </dd>
-              <div className="control">
+            </div>
-                <div className="tags has-addons">
+            <div className="sm:col-span-1">
-                  <span className="tag">MIME type</span>
+              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
-                  <span className="tag is-primary is-light">
+                MIMEType
              </dt>
              <dd className="mt-1 text-sm text-gray-500 dark:text-slate-900">
                {/* File extension */}
                <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="pt-1">
                    <i className="icon-[solar--zip-file-bold-duotone] w-5 h-5"></i>
                  </span>
                  <span className="text-md text-slate-500 dark:text-slate-900">
                    {rawFileDetails.mimeType}
                  </span>
-                </div>
+                </span>
-              </div>
+              </dd>
            </div>
-          </dd>
+            <div className="sm:col-span-1">
-        </dl>
+              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
-      </div>
+                File Size
-
+              </dt>
-      <div className="content comic-detail raw-file-details mt-3 column is-three-fifths">
+              <dd className="mt-1 text-sm text-gray-500 dark:text-slate-900">
-        <dl>
+                {/* size */}
-          {/* inferred metadata */}
+                <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">
-          <dt>Inferred Issue Metadata</dt>
+                  <span className="pr-1 pt-1">
-          <dd>
+                    <i className="icon-[solar--mirror-right-bold-duotone] w-5 h-5"></i>
            <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>
+                  <span className="text-md text-slate-500 dark:text-slate-900">
-              {!isEmpty(inferredMetadata.issue.number) ? (
+                    {prettyBytes(rawFileDetails.fileSize)}
-                <div className="control">
+                  </span>
-                  <div className="tags has-addons">
+                </span>
-                    <span className="tag">Number</span>
+              </dd>
                    <span className="tag is-primary is-light">
                      {inferredMetadata.issue.number}
                    </span>
                  </div>
                </div>
              ) : null}
            </div>
-          </dd>
+            <div className="sm:col-span-2">
-        </dl>
+              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
                Import Details
              </dt>
              <dd className="mt-1 text-sm text-gray-900 dark:text-gray-400">
                {format(parseISO(created_at), "dd MMMM, yyyy")},{" "}
                {format(parseISO(created_at), "h aaaa")}
              </dd>
            </div>
            <div className="sm:col-span-2">
              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
                Actions
              </dt>
              <dd className="mt-1 text-sm text-gray-900">{props.children}</dd>
            </div>
          </dl>
        </div>
      </div>
    </>
  );
@@ -102,5 +120,8 @@ RawFileDetails.propTypes = {
        subtitle: PropTypes.string,
      }),
    }),
    created_at: PropTypes.string,
    updated_at: PropTypes.string,
  }),
-};
+  children: PropTypes.any,
 };
--- a/src/client/components/ComicDetail/TabControls.tsx
+++ b/src/client/components/ComicDetail/TabControls.tsx
@@ -1,49 +1,47 @@
-import React, { ReactElement, useEffect, useState } from "react";
+import React, { ReactElement, useState } from "react";
-import { isEmpty, isNil } from "lodash";
+import { isNil } from "lodash";
 import { useSelector } from "react-redux";
 export const TabControls = (props): ReactElement => {
-  const comicBookDetailData = useSelector(
+  const { filteredTabs, downloadCount } = props;
    (state: RootState) => state.comicInfo.comicBookDetail,
  );
  const { filteredTabs } = props;
  const [active, setActive] = useState(filteredTabs[0].id);
  useEffect(() => {
    setActive(filteredTabs[0].id);
  }, [comicBookDetailData]);
  return (
    <>
-      <div className="tabs">
+      <div className="hidden sm:block mt-7 mb-3 w-fit">
-        <ul>
+        <div className="border-b border-gray-200">
-          {filteredTabs.map(({ id, name, icon }) => (
+          <nav className="flex gap-6" aria-label="Tabs">
-            <li
+            {filteredTabs.map(({ id, name, icon }) => (
-              key={id}
+              <a
-              className={id === active ? "is-active" : ""}
+                key={id}
-              onClick={() => setActive(id)}
+                className={`inline-flex shrink-0 items-center gap-2 px-1 py-1 text-md font-medium text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:border-b hover:dark:text-slate-200 ${
-            >
+                  active === id
-              {/* Downloads tab and count badge */}
+                    ? "border-b border-cyan-50 dark:text-slate-200"
-              <a>
+                    : "border-b border-transparent"
-                {id === 6 &&
+                }`}
-                !isNil(comicBookDetailData.acquisition.directconnect) ? (
+                aria-current="page"
-                  <span className="download-icon-labels">
+                onClick={() => setActive(id)}
-                    <i className="fa-solid fa-download"></i>
+              >
-                    <span className="tag downloads-count is-info is-light">
+                {/* Downloads tab and count badge */}
-                      {
+                <>
-                        comicBookDetailData.acquisition.directconnect.downloads
+                  {id === 6 && !isNil(downloadCount) ? (
-                          .length
+                    <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-orange-400">
                        <span className="text-md text-slate-500 dark:text-slate-900">
                          {icon}
                        </span>
                      </span>
                      <i className="h-5 w-5 icon-[solar--download-bold-duotone] text-slate-500 dark:text-slate-300" />
                    </span>
-                  </span>
+                  ) : (
-                ) : (
+                    <span className="w-5 h-5">{icon}</span>
-                  <span className="icon is-small">{icon}</span>
+                  )}
-                )}
+                  {name}
-                {name}
+                </>
              </a>
-            </li>
+            ))}
-          ))}
+          </nav>
-        </ul>
+        </div>
      </div>
      {filteredTabs.map(({ id, content }) => {
        return active === id ? content : null;
--- a/src/client/components/ComicDetail/Tabs/ArchiveOperations.tsx
+++ b/src/client/components/ComicDetail/Tabs/ArchiveOperations.tsx
@@ -1,44 +1,134 @@
-import React, { ReactElement, useCallback, useState } from "react";
+import React, { ReactElement, useCallback, useEffect, useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { DnD } from "../../shared/Draggable/DnD";
 import { isEmpty } from "lodash";
 import Sticky from "react-stickynode";
 import SlidingPane from "react-sliding-pane";
 import { extractComicArchive } from "../../../actions/fileops.actions";
 import { analyzeImage } from "../../../actions/fileops.actions";
 import { Canvas } from "../../shared/Canvas";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import axios from "axios";
 import {
  IMAGETRANSFORMATION_SERVICE_BASE_URI,
  LIBRARY_SERVICE_BASE_URI,
  LIBRARY_SERVICE_HOST,
 } from "../../../constants/endpoints";
 import { useStore } from "../../../store";
 import { useShallow } from "zustand/react/shallow";
 import { escapePoundSymbol } from "../../../shared/utils/formatting.utils";
 export const ArchiveOperations = (props): ReactElement => {
  const { data } = props;
-  const isComicBookExtractionInProgress = useSelector(
+
-    (state: RootState) => state.fileOps.comicBookExtractionInProgress,
+  const { socketIOInstance } = useStore(
    useShallow((state) => ({
      socketIOInstance: state.socketIOInstance,
    })),
  );
-  const extractedComicBookArchive = useSelector(
+  const queryClient = useQueryClient();
    (state: RootState) => state.fileOps.extractedComicBookArchive.analysis,
  );
  const imageAnalysisResult = useSelector((state: RootState) => {
    return state.fileOps.imageAnalysisResults;
  });
  const dispatch = useDispatch();
  const unpackComicArchive = useCallback(() => {
    dispatch(
      extractComicArchive(data.rawFileDetails.filePath, {
        type: "full",
        purpose: "analysis",
        imageResizeOptions: {
          baseWidth: 275,
        },
      }),
    );
  }, []);
  // sliding panel config
  const [visible, setVisible] = useState(false);
  const [slidingPanelContentId, setSlidingPanelContentId] = useState("");
  // current image
  const [currentImage, setCurrentImage] = useState([]);
  const [uncompressedArchive, setUncompressedArchive] = useState([]);
  const [imageAnalysisResult, setImageAnalysisResult] = useState({});
  const [shouldRefetchComicBookData, setShouldRefetchComicBookData] =
    useState(false);
  const constructImagePaths = (data): Array<string> => {
    return data?.map((path: string) =>
      escapePoundSymbol(encodeURI(`${LIBRARY_SERVICE_HOST}/${path}`)),
    );
  };
  // Listen to the uncompression complete event and orchestrate the final payload
  socketIOInstance.on("LS_UNCOMPRESSION_JOB_COMPLETE", (data) => {
    setUncompressedArchive(constructImagePaths(data?.uncompressedArchive));
  });
  useEffect(() => {
    let isMounted = true;
    if (data.rawFileDetails?.archive?.uncompressed) {
      const fetchUncompressedArchive = async () => {
        try {
          const response = await axios({
            url: `${LIBRARY_SERVICE_BASE_URI}/walkFolders`,
            method: "POST",
            data: {
              basePathToWalk: data?.rawFileDetails?.archive?.expandedPath,
              extensions: [".jpg", ".jpeg", ".png", ".bmp", "gif"],
            },
            transformResponse: async (responseData) => {
              const parsedData = JSON.parse(responseData);
              const paths = parsedData.map((pathObject) => {
                return `${pathObject.containedIn}/${pathObject.name}${pathObject.extension}`;
              });
              const uncompressedArchive = constructImagePaths(paths);
              if (isMounted) {
                setUncompressedArchive(uncompressedArchive);
                setShouldRefetchComicBookData(true);
              }
            },
          });
        } catch (error) {
          console.error("Error fetching uncompressed archive:", error);
          // Handle error if necessary
        }
      };
      fetchUncompressedArchive();
    }
    // Cleanup function
    return () => {
      isMounted = false;
      setUncompressedArchive([]);
    };
  }, [data]);
  const analyzeImage = async (imageFilePath: string) => {
    const response = await axios({
      url: `${IMAGETRANSFORMATION_SERVICE_BASE_URI}/analyze`,
      method: "POST",
      data: {
        imageFilePath,
      },
    });
    setImageAnalysisResult(response?.data);
    queryClient.invalidateQueries({ queryKey: ["uncompressedArchive"] });
  };
  const {
    data: uncompressionResult,
    refetch,
    isLoading,
    isSuccess,
  } = useQuery({
    queryFn: async () =>
      await axios({
        method: "POST",
        url: `http://localhost:3000/api/library/uncompressFullArchive`,
        headers: {
          "Content-Type": "application/json; charset=utf-8",
        },
        data: {
          filePath: data.rawFileDetails.filePath,
          comicObjectId: data._id,
          options: {
            type: "full",
            purpose: "analysis",
            imageResizeOptions: {
              baseWidth: 275,
            },
          },
        },
      }),
    queryKey: ["uncompressedArchive"],
    enabled: false,
  });
  if (isSuccess && shouldRefetchComicBookData) {
    queryClient.invalidateQueries({ queryKey: ["comicBookMetadata"] });
    setShouldRefetchComicBookData(false);
  }
  // sliding panel init
  const contentForSlidingPanel = {
@@ -46,13 +136,13 @@ export const ArchiveOperations = (props): ReactElement => {
      content: () => {
        return (
          <div>
-            <pre className="is-size-7">{currentImage}</pre>
+            <pre className="text-sm">{currentImage}</pre>
            {!isEmpty(imageAnalysisResult) ? (
-              <pre className="is-size-7 p-2 mt-3">
+              <pre className="p-2 mt-3">
                <Canvas data={imageAnalysisResult} />
              </pre>
            ) : null}
-            <pre className="is-size-7 mt-3">
+            <pre className="font-hasklig mt-3 text-sm">
              {JSON.stringify(imageAnalysisResult.analyzedData, null, 2)}
            </pre>
          </div>
@@ -64,54 +154,81 @@ export const ArchiveOperations = (props): ReactElement => {
  // sliding panel handlers
  const openImageAnalysisPanel = useCallback((imageFilePath) => {
    setSlidingPanelContentId("imageAnalysis");
-    dispatch(analyzeImage(imageFilePath));
+    analyzeImage(imageFilePath);
    setCurrentImage(imageFilePath);
    setVisible(true);
  }, []);
  return (
    <div key={2}>
-      <button
+      <article
-        className={
+        role="alert"
-          isComicBookExtractionInProgress
+        className="mt-4 text-md rounded-lg max-w-screen-md border-s-4 border-blue-500 bg-blue-50 p-4 dark:border-s-4 dark:border-blue-600 dark:bg-blue-300 dark:text-slate-600"
            ? "button is-loading is-warning"
            : "button is-warning"
        }
        onClick={unpackComicArchive}
      >
-        <span className="icon is-small">
+        <div>
-          <i className="fa-solid fa-box-open"></i>
+          <p>You can perform several operations on your comic book archive.</p>
-        </span>
+          <p>
-        <span>Unpack comic archive</span>
+            Uncompressing, re-organizing the individual pages, then
-      </button>
+            re-compressing to a different format, for example.
-      <div className="columns">
+          </p>
-        <div className="mt-5">
+          <p>You can also analyze color histograms of pages.</p>
-          {!isEmpty(extractedComicBookArchive) ? (
+        </div>
      </article>
      <div className="mt-5">
        {data.rawFileDetails.archive?.uncompressed &&
        !isEmpty(uncompressedArchive) ? (
          <article
            role="alert"
            className="mt-4 text-md rounded-lg max-w-screen-md border-s-4 border-yellow-500 bg-yellow-50 p-4 dark:border-s-4 dark:border-yellow-600 dark:bg-yellow-300 dark:text-slate-600"
          >
            This issue is already uncompressed at:
            <p>
              <code className="font-hasklig text-sm">
                {data.rawFileDetails.archive.expandedPath}
              </code>
              <div className="">It has {uncompressedArchive?.length} pages</div>
            </p>
          </article>
        ) : null}
        <div className="flex flex-row gap-2 mt-4">
          {isEmpty(uncompressedArchive) ? (
            <button
              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-2 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
              onClick={() => refetch()}
            >
              <span className="text-md">Unpack Comic Archive</span>
              <span className="w-6 h-6">
                <i className="h-6 w-6 icon-[solar--box-bold-duotone]"></i>
              </span>
            </button>
          ) : null}
          {!isEmpty(uncompressedArchive) ? (
            <div>
              <button
                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-2 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
                onClick={() => refetch()}
              >
                <span className="text-md">Convert to .cbz</span>
                <span className="w-6 h-6">
                  <i className="h-6 w-6 icon-[solar--zip-file-bold-duotone]"></i>
                </span>
              </button>
            </div>
          ) : null}
        </div>
      </div>
      <div>
        <div className="mt-10">
          {!isEmpty(uncompressedArchive) ? (
            <DnD
-              data={extractedComicBookArchive}
+              data={uncompressedArchive}
              onClickHandler={openImageAnalysisPanel}
            />
          ) : null}
        </div>
        {!isEmpty(extractedComicBookArchive) ? (
          <div className="column mt-5">
            <Sticky enabled={true} top={70} bottomBoundary={3000}>
              <div className="card">
                <div className="card-content">
                  <span className="has-text-size-4">
                    {extractedComicBookArchive.length} pages
                  </span>
                  <button className="button is-small is-light is-primary is-outlined">
                    <span className="icon is-small">
                      <i className="fa-solid fa-compress"></i>
                    </span>
                    <span>Convert to CBZ</span>
                  </button>
                </div>
              </div>
            </Sticky>
          </div>
        ) : null}
      </div>
      <SlidingPane
        isOpen={visible}
@@ -126,4 +243,4 @@ export const ArchiveOperations = (props): ReactElement => {
  );
 };
-export default ArchiveOperations;
+export default ArchiveOperations;
--- a/src/client/components/ComicDetail/Tabs/ComicInfoXML.tsx
+++ b/src/client/components/ComicDetail/Tabs/ComicInfoXML.tsx
@@ -4,52 +4,59 @@ import React, { ReactElement } from "react";
 export const ComicInfoXML = (data): ReactElement => {
  const { json } = data;
  return (
-    <div className="comicInfo-metadata">
+    <div className="flex md:w-4/5 lg:w-78">
-      <dl className="has-text-size-7">
+      <dl className="dark:bg-yellow-600 bg-yellow-200 p-3 rounded-lg">
-        <dd className="has-text-weight-medium">{json.series[0]}</dd>
+        <dt>
-        <dd className="mt-2 mb-2">
+          <p className="text-lg">{json.series[0]}</p>
-          <div className="field is-grouped is-grouped-multiline">
+        </dt>
-            <div className="control">
+        <dd className="text-sm">
-              <span className="tags has-addons">
+          published by{" "}
-                <span className="tag">Pages</span>
+          <span className="underline">
-                <span className="tag is-warning is-light">
+            {json.publisher[0]}
-                  {json.publisher[0]}
+            <i className="icon-[solar--arrow-right-up-outline] w-4 h-4" />
          </span>
        </dd>
        <span className="inline-flex flex-row gap-2">
          {/* Issue number */}
          {!isUndefined(json.number) && (
            <dd className="my-2">
              <span className="inline-flex items-center bg-slate-50 text-sm text-slate-800 font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
                <span className="pr-1 pt-1">
                  <i className="icon-[solar--hashtag-outline] w-4 h-4"></i>
                </span>
                <span className="text-slate-900 dark:text-slate-900">
                  {parseInt(json.number[0], 10)}
                </span>
              </span>
-            </div>
+            </dd>
-            <div className="control">
+          )}
-              <span className="tags has-addons">
+          <dd className="my-2">
-                <span className="tag">Issue #</span>
+            {/* Genre */}
-                <span className="tag is-warning is-light">
+            <span className="inline-flex items-center bg-slate-50 text-slate-800 text-sm font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                  {!isUndefined(json.number) && parseInt(json.number[0], 10)}
+              <span className="pr-1 pt-1">
-                </span>
+                <i className="icon-[solar--sticker-smile-circle-bold-duotone] w-5 h-5"></i>
              </span>
-            </div>
+
-            <div className="control">
+              <span className="text-slate-500 dark:text-slate-900">
-              <span className="tags has-addons">
+                {json.genre[0]}
                <span className="tag">Pages</span>
                <span className="tag is-warning is-light">
                  {json.pagecount[0]}
                </span>
              </span>
-            </div>
+            </span>
-            {!isUndefined(json.genre) && (
+          </dd>
-              <div className="control">
+        </span>
-                <span className="tags has-addons">
+
-                  <span className="tag">Genre</span>
+        <dd className="my-1">
-                  <span className="tag is-success is-light">
+          {/* Summary */}
-                    {json.genre[0]}
+          {!isUndefined(json.summary) && (
-                  </span>
+            <span className="text-md text-slate-500 dark:text-slate-900">
-                </span>
+              {json.summary[0]}
-              </div>
+            </span>
-            )}
+          )}
          </div>
        </dd>
        <dd>
-          <span className="is-size-7">{json.notes[0]}</span>
+          {/* Notes */}
-        </dd>
+          <span className="text-sm text-slate-500 dark:text-slate-900">
-        <dd className="mt-1 mb-1">
+            {json.notes[0]}
-          {!isUndefined(json.summary) && json.summary[0]}
+          </span>
        </dd>
      </dl>
    </div>
--- a/src/client/components/ComicDetail/Tabs/VolumeInformation.tsx
+++ b/src/client/components/ComicDetail/Tabs/VolumeInformation.tsx
@@ -1,30 +1,15 @@
 import React, { ReactElement } from "react";
 import ComicVineDetails from "../ComicVineDetails";
 import { convert } from "html-to-text";
 import { isEmpty } from "lodash";
 export const VolumeInformation = (props): ReactElement => {
  const { data } = props;
  const createDescriptionMarkup = (html) => {
    return { __html: html };
  };
  return (
    <div key={1}>
-      <div className="columns is-multiline">
+      <ComicVineDetails
-        <ComicVineDetails
+        data={data.sourcedMetadata.comicvine}
-          data={data.sourcedMetadata.comicvine}
+        updatedAt={data.updatedAt}
-          updatedAt={data.updatedAt}
+      />
        />
        <div className="column is-8">
          {!isEmpty(data.sourcedMetadata.comicvine.description) &&
            convert(data.sourcedMetadata.comicvine.description, {
              baseElements: {
                selectors: ["p"],
              },
            })}
        </div>
      </div>
    </div>
  );
 };
--- a/src/client/components/ComicDetail/TorrentDownloads.tsx
+++ b/src/client/components/ComicDetail/TorrentDownloads.tsx
@@ -0,0 +1,77 @@
 import React from "react";
 import dayjs from "dayjs";
 import prettyBytes from "pretty-bytes";
 export const TorrentDownloads = (props) => {
  const { data } = props;
  console.log(Object.values(data));
  return (
    <>
      {data.map(({ torrent }) => {
        return (
          <dl className="mt-5 dark:text-slate-200 text-slate-600">
            <dt className="text-lg">{torrent.name}</dt>
            <p className="text-sm">{torrent.hash}</p>
            <p className="text-sm">
              Added on {dayjs.unix(torrent.added_on).format("ddd, D MMM, YYYY")}
            </p>
            <p className="flex gap-2 mt-1">
              {torrent.progress > 0 ? (
                <>
                  <progress
                    className="w-80 mt-2 [&::-webkit-progress-bar]:rounded-lg [&::-webkit-progress-value]:rounded-lg [&::-webkit-progress-bar]:bg-slate-300 [&::-webkit-progress-value]:bg-green-400 [&::-moz-progress-bar]:bg-green-400 h-2"
                    value={Math.floor(torrent.progress * 100).toString()}
                    max="100"
                  ></progress>
                  <span>{Math.floor(torrent.progress * 100)}%</span>
                  {/* downloaded/left */}
                  <p className="inline-flex items-center bg-slate-200 text-green-800 dark:text-green-900 text-xs font-medium px-2.5 py-1 rounded-md dark:bg-slate-400">
                    <span className="pr-1">
                      <i className="icon-[solar--arrow-to-down-left-outline] h-4 w-4"></i>
                    </span>
                    <span className="text-md">
                      {prettyBytes(torrent.downloaded)}
                    </span>
                    {/* uploaded */}
                    <span className="pr-1 text-orange-800 dark:text-orange-900 ml-2">
                      <i className="icon-[solar--arrow-to-top-left-outline] h-4 w-4"></i>
                    </span>
                    <span className="text-md text-orange-800 dark:text-orange-900">
                      {prettyBytes(torrent.uploaded)}
                    </span>
                  </p>
                </>
              ) : null}
            </p>
            <div className="flex gap-4 mt-2">
              {/* Peers */}
              <span className="inline-flex items-center bg-slate-200 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
                <span className="pr-1">
                  <i className="icon-[solar--station-minimalistic-line-duotone] h-5 w-5"></i>
                </span>
                <span className="text-md text-slate-900">
                  {torrent.trackers_count}
                </span>
              </span>
              {/* Size */}
              <span className="inline-flex items-center bg-slate-200 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
                <span className="pr-1 pt-1">
                  <i className="icon-[solar--mirror-right-bold-duotone] h-4 w-4"></i>
                </span>
                <span className="text-md text-slate-900">
                  {prettyBytes(torrent.total_size)}
                </span>
              </span>
            </div>
          </dl>
        );
      })}
    </>
  );
 };
 export default TorrentDownloads;
--- a/src/client/components/ComicDetail/TorrentSearchPanel.tsx
+++ b/src/client/components/ComicDetail/TorrentSearchPanel.tsx
@@ -0,0 +1,200 @@
 import React, { useState } from "react";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import axios from "axios";
 import { Form, Field } from "react-final-form";
 import {
  PROWLARR_SERVICE_BASE_URI,
  QBITTORRENT_SERVICE_BASE_URI,
 } from "../../constants/endpoints";
 import { isEmpty, isNil } from "lodash";
 import ellipsize from "ellipsize";
 import prettyBytes from "pretty-bytes";
 export const TorrentSearchPanel = (props) => {
  const { issueName, comicObjectId } = props;
  // Initialize searchTerm with issueName from props
  const [searchTerm, setSearchTerm] = useState({ issueName });
  const [torrentToDownload, setTorrentToDownload] = useState("");
  const { data, isSuccess, isLoading } = useQuery({
    queryKey: ["searchResults", searchTerm.issueName],
    queryFn: async () => {
      return await axios({
        url: `${PROWLARR_SERVICE_BASE_URI}/search`,
        method: "POST",
        data: {
          port: "9696",
          apiKey: "c4f42e265fb044dc81f7e88bd41c3367",
          offset: 0,
          categories: [7030],
          query: searchTerm.issueName,
          host: "localhost",
          limit: 100,
          type: "search",
          indexerIds: [2],
        },
      });
    },
    enabled: !isNil(searchTerm.issueName) && searchTerm.issueName.trim() !== "", // Make sure searchTerm is not empty
  });
  const mutation = useMutation({
    mutationFn: async (newTorrent) =>
      axios.post(`${QBITTORRENT_SERVICE_BASE_URI}/addTorrent`, newTorrent),
    onSuccess: async (data) => {
      console.log(data);
    },
  });
  const searchIndexer = (values) => {
    setSearchTerm({ issueName: values.issueName }); // Update searchTerm based on the form submission
  };
  const downloadTorrent = (evt) => {
    const newTorrent = {
      comicObjectId,
      torrentToDownload: evt,
    };
    mutation.mutate(newTorrent);
  };
  return (
    <>
      <div className="mt-5">
        <Form
          onSubmit={searchIndexer}
          initialValues={searchTerm}
          render={({ handleSubmit }) => (
            <form onSubmit={handleSubmit}>
              <Field name="issueName">
                {({ input, meta }) => (
                  <div className="max-w-fit">
                    <div className="flex flex-row bg-slate-300 dark:bg-slate-400 rounded-l-lg">
                      <div className="w-10 pl-2 pt-1 text-gray-400 dark:text-gray-200">
                        {/* Icon placeholder */}
                        <i className="icon-[solar--magnifer-bold-duotone] h-7 w-7" />
                      </div>
                      <input
                        {...input}
                        type="text"
                        className="dark:bg-slate-400 bg-slate-300 py-2 px-2 rounded-l-md border-gray-300 h-10 min-w-full dark:text-slate-800 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
                        placeholder="Enter a search term"
                      />
                      <button
                        className="sm:mt-0 min-w-fit rounded-r-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"
                        type="submit"
                      >
                        <div className="flex flex-row">
                          Search Indexer
                          <div className="h-5 w-5 ml-1">
                            <i className="h-6 w-6 icon-[solar--magnet-bold-duotone]" />
                          </div>
                        </div>
                      </button>
                    </div>
                  </div>
                )}
              </Field>
            </form>
          )}
        />
      </div>
      <article
        role="alert"
        className="mt-4 rounded-lg text-sm max-w-screen-md border-s-4 border-blue-500 bg-blue-50 p-4 dark:border-s-4 dark:border-blue-600 dark:bg-blue-300 dark:text-slate-600"
      >
        <div>
          The default search term is an auto-detected title; you may need to
          change it to get better matches if the auto-detected one doesn't work.
        </div>
      </article>
      {!isEmpty(data?.data) ? (
        <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">
                  Name
                </th>
                <th className="whitespace-nowrap py-2 font-medium text-gray-900 dark:text-slate-200">
                  Indexer
                </th>
                <th className="whitespace-nowrap py-2 font-medium text-gray-900 dark:text-slate-200">
                  Action
                </th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-100 dark:divide-gray-500">
              {data?.data.map((result, idx) => (
                <tr key={idx}>
                  <td className="px-3 py-3 text-gray-700 dark:text-slate-300 text-md">
                    <p>{ellipsize(result.fileName, 90)}</p>
                    {/* Seeders/Leechers */}
                    <div className="flex gap-3 mt-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">
                        <span className="pr-1 pt-1">
                          <i className="icon-[solar--archive-up-minimlistic-bold-duotone] w-5 h-5"></i>
                        </span>
                        <span className="text-md text-slate-500 dark:text-slate-900">
                          {result.seeders} seeders
                        </span>
                      </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--archive-down-minimlistic-bold-duotone] w-5 h-5"></i>
                        </span>
                        <span className="text-md text-slate-500 dark:text-slate-900">
                          {result.leechers} leechers
                        </span>
                      </span>
                      {/* Size */}
                      <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--mirror-right-bold-duotone] w-5 h-5"></i>
                        </span>
                        <span className="text-md text-slate-500 dark:text-slate-900">
                          {prettyBytes(result.size)}
                        </span>
                      </span>
                      {/* Files */}
                      <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--documents-bold-duotone] w-5 h-5"></i>
                        </span>
                        <span className="text-md text-slate-500 dark:text-slate-900">
                          {result.files} files
                        </span>
                      </span>
                    </div>
                  </td>
                  <td className="px-3 py-3 text-gray-700 dark:text-slate-300 text-sm">
                    {result.indexer}
                  </td>
                  <td className="px-3 py-3 text-gray-700 dark:text-slate-300 text-sm">
                    <button
                      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={() => downloadTorrent(result.downloadUrl)}
                    >
                      <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>
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      ) : null}
    </>
  );
 };
 export default TorrentSearchPanel;
--- a/src/client/components/Dashboard/Dashboard.tsx
+++ b/src/client/components/Dashboard/Dashboard.tsx
@@ -1,65 +1,77 @@
-import React, { ReactElement, useEffect } from "react";
+import React, { ReactElement } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import ZeroState from "./ZeroState";
 import { RecentlyImported } from "./RecentlyImported";
 import { WantedComicsList } from "./WantedComicsList";
 import { VolumeGroups } from "./VolumeGroups";
 import { LibraryStatistics } from "./LibraryStatistics";
 import { PullList } from "./PullList";
-import {
+import { useQuery } from "@tanstack/react-query";
-  fetchVolumeGroups,
+import axios from "axios";
-  getComicBooks,
+import { LIBRARY_SERVICE_BASE_URI } from "../../constants/endpoints";
 } from "../../actions/fileops.actions";
 import { getLibraryStatistics } from "../../actions/comicinfo.actions";
 import { isEmpty, isNil } from "lodash";
 import Header from "../shared/Header";
 export const Dashboard = (): ReactElement => {
-  //   useEffect(() => {
+  const { data: recentComics } = useQuery({
-  //     dispatch(fetchVolumeGroups());
+    queryFn: async () =>
-  //     dispatch(
+      await axios({
-  //       getComicBooks({
+        url: `${LIBRARY_SERVICE_BASE_URI}/getComicBooks`,
-  //         paginationOptions: {
+        method: "POST",
-  //           page: 0,
+        data: {
-  //           limit: 5,
+          paginationOptions: {
-  //           sort: { updatedAt: "-1" },
+            page: 0,
-  //         },
+            limit: 5,
-  //         predicate: { "acquisition.source.wanted": false },
+            sort: { updatedAt: "-1" },
-  //         comicStatus: "recent",
+          },
-  //       }),
+          predicate: { "acquisition.source.wanted": false },
-  //     );
+          comicStatus: "recent",
-  //     dispatch(
+        },
-  //       getComicBooks({
+      }),
-  //         paginationOptions: {
+    queryKey: ["recentComics"],
-  //           page: 0,
+  });
-  //           limit: 5,
+
-  //           sort: { updatedAt: "-1" },
+  const { data: wantedComics } = useQuery({
-  //         },
+    queryFn: async () =>
-  //         predicate: { "acquisition.source.wanted": true },
+      await axios({
-  //         comicStatus: "wanted",
+        url: `${LIBRARY_SERVICE_BASE_URI}/getComicBooks`,
-  //       }),
+        method: "POST",
-  //     );
+        data: {
-  //     dispatch(getLibraryStatistics());
+          paginationOptions: {
-  //   }, []);
+            page: 0,
-  //
+            limit: 5,
-  //   const recentComics = useSelector(
+            sort: { updatedAt: "-1" },
-  //     (state: RootState) => state.fileOps.recentComics,
+          },
-  //   );
+          predicate: { "acquisition.source.wanted": true },
-  //   const wantedComics = useSelector(
+        },
-  //     (state: RootState) => state.fileOps.wantedComics,
+      }),
-  //   );
+    queryKey: ["wantedComics"],
-  //   const volumeGroups = useSelector(
+  });
-  //     (state: RootState) => state.fileOps.comicVolumeGroups,
+  const { data: volumeGroups } = useQuery({
-  //   );
+    queryFn: async () =>
-  //
+      await axios({
-  //   const libraryStatistics = useSelector(
+        url: `${LIBRARY_SERVICE_BASE_URI}/getComicBookGroups`,
-  //     (state: RootState) => state.comicInfo.libraryStatistics,
+        method: "GET",
-  //   );
+      }),
    queryKey: ["volumeGroups"],
  });
  const { data: statistics } = useQuery({
    queryFn: async () =>
      await axios({
        url: `${LIBRARY_SERVICE_BASE_URI}/libraryStatistics`,
        method: "GET",
      }),
    queryKey: ["libraryStatistics"],
  });
  return (
-    <div className="container">
+    <div className="container mx-auto max-w-full">
-      <section className="section">
+      <PullList />
-        <h1 className="title">Dashboard</h1>
+      {recentComics && <RecentlyImported comics={recentComics?.data.docs} />}
-      </section>
+      {/* Wanted comics */}
      <WantedComicsList comics={wantedComics?.data?.docs} />
      {/* Library Statistics */}
      {statistics && <LibraryStatistics stats={statistics?.data} />}
      {/* Volume groups */}
      <VolumeGroups volumeGroups={volumeGroups?.data} />
    </div>
  );
 };
--- a/src/client/components/Dashboard/LibraryStatistics.tsx
+++ b/src/client/components/Dashboard/LibraryStatistics.tsx
@@ -1,113 +1,99 @@
 import React, { ReactElement, useEffect } from "react";
 import prettyBytes from "pretty-bytes";
 import { isEmpty, isUndefined, map } from "lodash";
 import Header from "../shared/Header";
 export const LibraryStatistics = (
  props: ILibraryStatisticsProps,
 ): ReactElement => {
-  // const { stats } = props;
+  const { stats } = props;
  return (
    <div className="mt-5">
-      <h4 className="title is-4">
+      <Header
-        <i className="fa-solid fa-chart-simple"></i> Your Library In Numbers 
+        headerContent="Your Library In Numbers"
-      </h4>
+        subHeaderContent={
-      <p className="subtitle is-7">A brief snapshot of your library.</p>
+          <span className="text-md">A brief snapshot of your library.</span>
-      <div className="columns is-multiline">
+        }
-        <div className="column is-narrow is-two-quarter">
+        iconClassNames="fa-solid fa-binoculars mr-2"
-          <dl className="box">
+      />
-            <dd className="is-size-4">
+
-              <span className="has-text-weight-bold">
+      <div className="mt-3">
-                {props.stats.totalDocuments}
+        <div className="flex flex-row gap-5">
-              </span>{" "}
+          <div className="flex flex-col rounded-lg bg-green-100 dark:bg-green-200 px-4 py-6 text-center">
-              files
+            <dt className="text-lg font-medium text-gray-500">Library size</dt>
            <dd className="text-3xl text-green-600 md:text-5xl">
              {props.stats.totalDocuments} files
            </dd>
-            <dd className="is-size-4">
+            <dd>
-              Library size
+              <span className="text-2xl text-green-600">
              <span className="has-text-weight-bold">
                {" "}
                {props.stats.comicDirectorySize &&
                  prettyBytes(props.stats.comicDirectorySize)}
              </span>
            </dd>
          </div>
          {/* comicinfo and comicvine tagged issues */}
          <div className="flex flex-col gap-4">
            {!isUndefined(props.stats.statistics) &&
              !isEmpty(props.stats.statistics[0].issues) && (
-                <dd className="is-size-6">
+                <div className="flex flex-col h-fit rounded-lg bg-green-100 dark:bg-green-200 px-4 py-3 text-center">
-                  <span className="has-text-weight-bold">
+                  <span className="text-xl">
                    {props.stats.statistics[0].issues.length}
                  </span>{" "}
                  tagged with ComicVine
-                </dd>
+                </div>
              )}
            {!isUndefined(props.stats.statistics) &&
              !isEmpty(props.stats.statistics[0].issuesWithComicInfoXML) && (
-                <dd className="is-size-6">
+                <div className="flex flex-col h-fit rounded-lg bg-green-100 dark:bg-green-200 px-4 py-3 text-center">
-                  <span className="has-text-weight-bold">
+                  <span className="text-xl">
                    {props.stats.statistics[0].issuesWithComicInfoXML.length}
                  </span>{" "}
                  with
                  <span className="tag is-warning has-text-weight-bold mr-2 ml-1">
-                    ComicInfo.xml
+                    with ComicInfo.xml
                  </span>
-                </dd>
+                </div>
              )}
-          </dl>
+          </div>
        </div>
-        <div className="p-3 column is-one-quarter">
+          <div className="">
-          <dl className="box">
+            {!isUndefined(props.stats.statistics) &&
-            <dd className="is-size-6">
+              !isEmpty(props.stats.statistics[0].fileTypes) &&
-              <span className="has-text-weight-bold"></span> Issues
+              map(props.stats.statistics[0].fileTypes, (fileType, idx) => {
-            </dd>
+                return (
-            <dd className="is-size-6">
+                  <span
-              <span className="has-text-weight-bold">304</span> Volumes
+                    key={idx}
-            </dd>
+                    className="flex flex-col mb-4 h-fit text-xl rounded-lg bg-green-100 dark:bg-green-200 px-4 py-3 text-center"
-            <dd className="is-size-6">
+                  >
-              {!isUndefined(props.stats.statistics) &&
+                    {fileType.data.length} {fileType._id}
-                !isEmpty(props.stats.statistics[0].fileTypes) &&
+                  </span>
-                map(props.stats.statistics[0].fileTypes, (fileType, idx) => {
+                );
-                  return (
+              })}
-                    <span key={idx}>
+          </div>
                      <span className="has-text-weight-bold">
                        {fileType.data.length}
                      </span>
                      <span className="tag is-warning has-text-weight-bold mr-2 ml-1">
                        {fileType._id}
                      </span>
                    </span>
                  );
                })}
            </dd>
          </dl>
        </div>
-        {/* file types */}
+          {/* file types */}
-        <div className="p-3 column is-two-fifths">
+          <div className="flex flex-col h-fit text-lg rounded-lg bg-green-100 dark:bg-green-200 px-4 py-3">
-          {/* publisher with most issues */}
+            {/* publisher with most issues */}
          <dl className="box">
            {!isUndefined(props.stats.statistics) &&
              !isEmpty(
                props.stats.statistics[0].publisherWithMostComicsInLibrary[0],
              ) && (
-                <dd className="is-size-6">
+                <>
-                  <span className="has-text-weight-bold">
+                  <span className="">
                    {
                      props.stats.statistics[0]
                        .publisherWithMostComicsInLibrary[0]._id
                    }
                  </span>
                  {" has the most issues "}
-                  <span className="has-text-weight-bold">
+                  <span className="">
                    {
                      props.stats.statistics[0]
                        .publisherWithMostComicsInLibrary[0].count
                    }
                  </span>
-                </dd>
+                </>
              )}
-            <dd className="is-size-6">
+          </div>
              <span className="has-text-weight-bold">304</span> Volumes
            </dd>
          </dl>
        </div>
      </div>
    </div>
--- a/src/client/components/Dashboard/PullList.tsx
+++ b/src/client/components/Dashboard/PullList.tsx
@@ -1,160 +1,165 @@
-import { isNil, map } from "lodash";
+import React, { ReactElement, useState } from "react";
-import React, { createRef, ReactElement, useCallback, useEffect } from "react";
+import { map } from "lodash";
 import Card from "../shared/Carda";
 import Header from "../shared/Header";
 import Masonry from "react-masonry-css";
 import { useDispatch, useSelector } from "react-redux";
 import { getWeeklyPullList } from "../../actions/comicinfo.actions";
 import { importToDB } from "../../actions/fileops.actions";
 import ellipsize from "ellipsize";
 import Slider from "react-slick";
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
 import { Link } from "react-router-dom";
 import axios from "axios";
 import rateLimiter from "axios-rate-limit";
 import { setupCache } from "axios-cache-interceptor";
 import { useQuery } from "@tanstack/react-query";
 import "keen-slider/keen-slider.min.css";
 import { useKeenSlider } from "keen-slider/react";
 import { COMICVINE_SERVICE_URI } from "../../constants/endpoints";
 import { Field, Form } from "react-final-form";
 import DatePickerDialog from "../shared/DatePicker";
 import { format } from "date-fns";
 type PullListProps = {
  issues: any;
 };
-export const PullList = ({ issues }: PullListProps): ReactElement => {
+const http = rateLimiter(axios.create(), {
-  const dispatch = useDispatch();
+  maxRequests: 1,
-  useEffect(() => {
+  perMilliseconds: 1000,
-    dispatch(
+  maxRPS: 1,
-      getWeeklyPullList({
+});
-        startDate: "2023-9-9",
+const cachedAxios = setupCache(axios);
-        pageSize: "15",
+export const PullList = (): ReactElement => {
-        currentPage: "1",
+  // datepicker
-      }),
+  const date = new Date();
-    );
+  const [inputValue, setInputValue] = useState<string>(
-  }, []);
+    format(date, "M-dd-yyyy"),
  const addToLibrary = useCallback(
    (sourceName: string, locgMetadata) =>
      dispatch(importToDB(sourceName, { locg: locgMetadata })),
    [],
  );
  /*
  const foo = {
    coverFile: {}, // pointer to which cover file to use
    rawFileDetails: {}, // #1
    sourcedMetadata: {
      comicInfo: {},
      comicvine: {}, // #2
      locg: {}, // #2
    },
  };
  */
-  const pullList = useSelector((state: RootState) => state.comicInfo.pullList);
+  // keen slider
-  let sliderRef = createRef();
+  const [sliderRef, instanceRef] = useKeenSlider(
-  const settings = {
+    {
-    dots: false,
+      loop: true,
-    infinite: false,
+      slides: {
-    speed: 500,
+        origin: "auto",
-    slidesToShow: 5,
+        number: 15,
-    slidesToScroll: 5,
+        perView: 5,
-    initialSlide: 0,
+        spacing: 15,
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3,
          infinite: false,
        },
      },
-      {
+      slideChanged() {
-        breakpoint: 600,
+        console.log("slide changed");
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2,
          initialSlide: 0,
        },
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
        },
      },
    },
    [
      // add plugins here
    ],
-  };
+  );
  const {
    data: pullList,
    refetch,
    isSuccess,
    isLoading,
    isError,
  } = useQuery({
    queryFn: async (): any =>
      await cachedAxios(`${COMICVINE_SERVICE_URI}/getWeeklyPullList`, {
        method: "get",
        params: { startDate: inputValue, pageSize: "15", currentPage: "1" },
      }),
    queryKey: ["pullList", inputValue],
  });
  const addToLibrary = (sourceName: string, locgMetadata) =>
    importToDB(sourceName, { locg: locgMetadata });
  const next = () => {
-    sliderRef.slickNext();
+    // sliderRef.slickNext();
  };
  const previous = () => {
-    sliderRef.slickPrev();
+    // sliderRef.slickPrev();
  };
  return (
    <>
      <div className="content">
-        <Header headerContent="Discover"
+        <Header
-                subHeaderContent="Pull List aggregated for the week from League Of Comic Geeks"
+          headerContent="Discover"
-                iconClassNames="fa-solid fa-binoculars mr-2"/>
+          subHeaderContent={
-        <div className="field is-grouped">
+            <span className="text-md">
              Pull List aggregated for the week from{" "}
              <span className="underline">
                <a href="https://leagueofcomicgeeks.com/comics/new-comics">
                  League Of Comic Geeks
                </a>
                <i className="icon-[solar--arrow-right-up-outline] w-4 h-4" />
              </span>
            </span>
          }
          iconClassNames="fa-solid fa-binoculars mr-2"
          link="/pull-list/all/"
        />
        <div className="flex flex-row gap-5 mb-3">
          {/* select week */}
-          <div className="control">
+          <div className="flex flex-row gap-4 my-3">
-            <div className="select is-small">
+            <Form
-              <select>
+              onSubmit={() => {}}
-                <option>Select Week</option>
+              render={({ handleSubmit }) => (
-                <option>With options</option>
+                <form>
-              </select>
+                  <div className="flex flex-col gap-2">
-            </div>
+                    {/* week selection for pull list */}
-          </div>
+                    <DatePickerDialog
-          {/* See all pull list issues */}
+                      inputValue={inputValue}
-          <div className="control">
+                      setter={setInputValue}
-            <Link to={"/pull-list/all/"}>
+                    />
-              <button className="button is-small">View all issues</button>
+                    {inputValue && (
-            </Link>
+                      <div className="text-sm">
-          </div>
+                        Showing pull list for{" "}
-          <div className="field has-addons">
+                        <span className="inline-flex mb-2 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">
-            <div className="control">
+                          {inputValue}
-              <button className="button is-rounded is-small" onClick={previous}>
+                        </span>
-                <i className="fa-solid fa-caret-left"></i>
+                      </div>
-              </button>
+                    )}
-            </div>
+                  </div>
-            <div className="control">
+                </form>
-              <button className="button is-rounded is-small" onClick={next}>
+              )}
-                <i className="fa-solid fa-caret-right"></i>
+            />
              </button>
            </div>
          </div>
        </div>
      </div>
-      <Slider {...settings} ref={(c) => (sliderRef = c)}>
+
-        {!isNil(pullList) &&
+      {isSuccess && !isLoading && (
-          pullList &&
+        <div ref={sliderRef} className="keen-slider flex flex-row">
-          map(pullList, ({ issue }, idx) => {
+          {map(pullList?.data.result, (issue, idx) => {
            return (
-              <Card
+              <div key={idx} className="keen-slider__slide">
-                key={idx}
+                <Card
-                orientation={"vertical"}
+                  orientation={"vertical-2"}
-                imageUrl={issue.cover}
+                  imageUrl={issue.cover}
-                hasDetails
+                  hasDetails
-                title={ellipsize(issue.name, 18)}
+                  title={ellipsize(issue.name, 25)}
-                cardContainerStyle={{
+                >
-                  marginRight: 22,
+                  <div className="px-1">
-                  boxShadow: "-2px 4px 15px -6px rgba(0,0,0,0.57)",
+                    <span className="inline-flex mb-2 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">
-                }}
+                      {issue.publisher}
-              >
+                    </span>
-                <div className="content">
+                    <div className="flex flex-row justify-end">
-                  <div className="control">
+                      <button
-                    <span className="tag">{issue.publisher}</span>
+                        className="flex space-x-1 mb-2 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-2 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
                        onClick={() => addToLibrary("locg", issue)}
                      >
                        <i className="icon-[solar--add-square-bold-duotone] w-5 h-5 mr-2"></i>{" "}
                        Want
                      </button>
                    </div>
                  </div>
-                  <div className="mt-2">
+                </Card>
-                    <button
+              </div>
                      className="button is-small is-success is-outlined is-light"
                      onClick={() => addToLibrary("locg", issue)}
                    >
                      <i className="fa-solid fa-plus"></i> Want
                    </button>
                  </div>
                </div>
              </Card>
            );
          })}
-      </Slider>
+        </div>
      )}
      {isLoading ? <div>Loading...</div> : null}
      {isError ? (
        <div>An error occurred while retrieving the pull list.</div>
      ) : null}
    </>
  );
 };
--- a/src/client/components/Dashboard/RecentlyImported.tsx
+++ b/src/client/components/Dashboard/RecentlyImported.tsx
@@ -4,47 +4,35 @@ import { Link } from "react-router-dom";
 import ellipsize from "ellipsize";
 import { isEmpty, isNil, isUndefined, map } from "lodash";
 import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils";
 import Masonry from "react-masonry-css";
 import {
  determineCoverFile,
  determineExternalMetadata,
 } from "../../shared/utils/metadata.utils";
 import { LIBRARY_SERVICE_HOST } from "../../constants/endpoints";
 import Header from "../shared/Header";
 type RecentlyImportedProps = {
-  comicBookCovers: any;
+  comics: any;
 };
-export const RecentlyImported = ({
+export const RecentlyImported = (
-  comicBookCovers,
+  comics: RecentlyImportedProps,
-}: RecentlyImportedProps): ReactElement => {
+): ReactElement => {
  const breakpointColumnsObj = {
    default: 5,
    1100: 4,
    700: 2,
    600: 2,
  };
  return (
-    <>
+    <div>
-      <div className="content mt-5">
+      <Header
-        <h4 className="title is-4">
+        headerContent="Recently Imported"
-          <i className="fa-solid fa-file-arrow-down"></i> Recently Imported
+        subHeaderContent="Recent Library activity such as imports, tagging, etc."
-        </h4>
+        iconClassNames="fa-solid fa-binoculars mr-2"
-        <p className="subtitle is-7">
+      />
-          Recent Library activity such as imports, tagging, etc.
+      <div className="grid grid-cols-5 gap-6 mt-3">
-        </p>
+        {comics?.comics.map(
      </div>
      <Masonry
        breakpointCols={breakpointColumnsObj}
        className="recent-comics-container"
        columnClassName="recent-comics-column"
      >
        {map(
          comicBookCovers,
          (
            {
              _id,
              rawFileDetails,
              sourcedMetadata: { comicvine, comicInfo, locg },
              inferredMetadata,
              acquisition: {
                source: { name },
              },
@@ -62,85 +50,80 @@ export const RecentlyImported = ({
              comicInfo,
              locg,
            });
-            const isComicBookMetadataAvailable =
+            const isComicVineMetadataAvailable =
              !isUndefined(comicvine) &&
              !isUndefined(comicvine.volumeInformation);
            const titleElement = (
              <Link to={"/comic/details/" + _id}>
                {ellipsize(issueName, 20)}
              </Link>
            );
            return (
-              <React.Fragment key={_id}>
+              <Card
-                <Card
+                orientation="vertical-2"
-                  orientation={"vertical"}
+                key={idx}
-                  imageUrl={url}
+                imageUrl={`${LIBRARY_SERVICE_HOST}/${rawFileDetails.cover.filePath}`}
-                  hasDetails
+                title={inferredMetadata.issue.name}
-                  title={issueName ? titleElement : null}
+                hasDetails
-                >
+              >
-                  <div className="content is-flex is-flex-direction-row">
+                <div>
-                    {/* Raw file presence  */}
+                  <dd className="text-sm my-1 flex flex-row gap-1">
-                    {isNil(rawFileDetails) && (
+                    {/* Issue number */}
-                      <span className="icon custom-icon is-small has-text-danger mr-2">
+                    <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                        <img src="/src/client/assets/img/missing-file.svg" />
+                      <span className="pr-1 pt-1">
                        <i className="icon-[solar--hashtag-outline]"></i>
                      </span>
-                    )}
+                      <span className="text-md text-slate-900">
                        {inferredMetadata.issue.number}
                      </span>
                    </span>
                    {/* File extension */}
                    <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
                      <span className="pr-1 pt-1">
                        <i className="icon-[solar--file-bold-duotone] w-4 h-4"></i>
                      </span>
                      <span className="text-md text-slate-500 dark:text-slate-900">
                        {rawFileDetails.extension}
                      </span>
                    </span>
                    {/* Uncompressed status  */}
                    {rawFileDetails?.archive?.uncompressed ? (
                      <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
                        <span className="pr-1 pt-1">
                          <i className="icon-[solar--bookmark-bold-duotone] w-4 h-4"></i>
                        </span>
                      </span>
                    ) : null}
                  </dd>
                </div>
                <div className="flex flex-row items-center gap-1 mt-2 pb-1">
                  <div className="sm:inline-flex sm:shrink-0 sm:items-center sm:gap-2">
                    {/* ComicInfo.xml presence */}
                    {!isNil(comicInfo) && !isEmpty(comicInfo) && (
-                      <span className="icon custom-icon is-small has-text-danger">
+                      <div mt-1>
-                        <img
+                        <i className="h-7 w-7 icon-[solar--code-file-bold-duotone] text-yellow-500 dark:text-yellow-300"></i>
-                          src="/src/client/assets/img/comicinfoxml.svg"
+                      </div>
                          alt={"ComicInfo.xml file detected."}
                        />
                      </span>
                    )}
                    {/* ComicVine metadata presence */}
-                    {isComicBookMetadataAvailable && (
+                    {isComicVineMetadataAvailable && (
-                      <span className="icon custom-icon">
+                      <span className="w-7 h-7">
                        <img
                          src="/src/client/assets/img/cvlogo.svg"
                          alt={"ComicVine metadata detected."}
                        />
                      </span>
                    )}
                    {/* Issue type */}
                    {isComicBookMetadataAvailable &&
                    !isNil(
                      detectIssueTypes(comicvine.volumeInformation.description),
                    ) ? (
                      <span className="tag is-warning">
                        {
                          detectIssueTypes(
                            comicvine.volumeInformation.description,
                          ).displayName
                        }
                      </span>
                    ) : null}
                  </div>
-                </Card>
+                  {/* Raw file presence  */}
-                {/* metadata card */}
+                  {isNil(rawFileDetails) && (
-                {!isNil(name) && (
+                    <span className="h-6 w-5 sm:shrink-0 sm:items-center sm:gap-2">
-                  <Card orientation="horizontal" hasDetails imageUrl={coverURL}>
+                      <i className="icon-[solar--file-corrupted-outline] h-5 w-5" />
-                    <dd className="is-size-9">
+                    </span>
-                      <dl>
+                  )}
-                        <span className="icon custom-icon">
+                </div>
-                          <img src={`/src/client/assets/img/${icon}`} />
+              </Card>
                        </span>
                      </dl>
                      <dl>
                        <span className="small-tag">
                          {ellipsize(issue, 15)}
                        </span>
                      </dl>
                    </dd>
                  </Card>
                )}
              </React.Fragment>
            );
          },
        )}
-      </Masonry>
+      </div>
-    </>
+    </div>
  );
-};
+};
--- a/src/client/components/Dashboard/VolumeGroups.tsx
+++ b/src/client/components/Dashboard/VolumeGroups.tsx
@@ -2,15 +2,10 @@ import { map, unionBy } from "lodash";
 import React, { ReactElement } from "react";
 import ellipsize from "ellipsize";
 import { Link, useNavigate } from "react-router-dom";
-import Masonry from "react-masonry-css";
+import Card from "../shared/Carda";
 import Header from "../shared/Header";
 export const VolumeGroups = (props): ReactElement => {
  const breakpointColumnsObj = {
    default: 5,
    1100: 4,
    700: 2,
    500: 1,
  };
  // Till mongo gives us back the deduplicated results with the ObjectId
  const deduplicatedGroups = unionBy(props.volumeGroups, "volumes.id");
  const navigate = useNavigate();
@@ -19,44 +14,48 @@ export const VolumeGroups = (props): ReactElement => {
  };
  return (
-    <section className="volumes-container mt-4">
+    <section>
-      <div className="content">
+      <Header
-        <a className="mb-1" onClick={navigateToVolumes}>
+        headerContent="Volumes"
-          <span className="is-size-4 has-text-weight-semibold">
+        subHeaderContent="Based on ComicVine Volume information"
-            <i className="fa-solid fa-layer-group"></i> Volumes
+        iconClassNames="fa-solid fa-binoculars mr-2"
-          </span>
+        link={"/volumes"}
-          <span className="icon mt-1">
+      />
-            <i className="fa-solid fa-angle-right"></i>
+      <div className="grid grid-cols-5 gap-6 mt-3">
          </span>
        </a>
        <p className="subtitle is-7">Based on ComicVine Volume information</p>
      </div>
      <Masonry
        breakpointCols={breakpointColumnsObj}
        className="volumes-grid"
        columnClassName="volumes-grid-column"
      >
        {map(deduplicatedGroups, (data) => {
          return (
-            <div className="stack" key={data._id}>
+            <div className="max-w-sm mx-auto" key={data._id}>
-              <img src={data.volumes.image.small_url} />
+              <Card
-              <div className="content">
+                orientation="vertical-2"
-                <div className="stack-title is-size-8">
+                key={data._id}
-                  <Link to={`/volume/details/${data._id}`}>
+                imageUrl={data.volumes.image.small_url}
-                    {ellipsize(data.volumes.name, 18)}
+                hasDetails
-                  </Link>
+              >
-                </div>
+                <div className="py-3">
-                <div className="control">
+                  <div className="text-sm">
-                  <span className="tags has-addons">
+                    <Link to={`/volume/details/${data._id}`}>
-                    <span className="tag is-primary is-light">Issues</span>
+                      {ellipsize(data.volumes.name, 48)}
-                    <span className="tag">{data.volumes.count_of_issues}</span>
+                    </Link>
                  </div>
                  {/* issue count */}
                  <span className="inline-flex mt-1 items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-600 dark:bg-slate-400">
                    <span className="pr-1 pt-1">
                      <i className="icon-[solar--documents-minimalistic-bold-duotone] w-5 h-5"></i>
                    </span>
                    <span className="text-md text-slate-500 dark:text-slate-900">
                      {data.volumes.count_of_issues} issues
                    </span>
                  </span>
                </div>
-              </div>
+              </Card>
              <div className="w-11/12 h-2 mx-auto bg-slate-900 rounded-b opacity-75"></div>
              <div className="w-10/12 h-2 mx-auto bg-slate-900 rounded-b opacity-50"></div>
              <div className="w-9/12 h-2 mx-auto bg-slate-900 rounded-b opacity-25"></div>
            </div>
          );
        })}
-      </Masonry>
+      </div>
    </section>
  );
 };
--- a/src/client/components/Dashboard/WantedComicsList.tsx
+++ b/src/client/components/Dashboard/WantedComicsList.tsx
@@ -4,8 +4,8 @@ import { Link, useNavigate } from "react-router-dom";
 import ellipsize from "ellipsize";
 import { isEmpty, isNil, isUndefined, map } from "lodash";
 import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils";
 import Masonry from "react-masonry-css";
 import { determineCoverFile } from "../../shared/utils/metadata.utils";
 import Header from "../shared/Header";
 type WantedComicsListProps = {
  comics: any;
@@ -14,37 +14,17 @@ type WantedComicsListProps = {
 export const WantedComicsList = ({
  comics,
 }: WantedComicsListProps): ReactElement => {
  const breakpointColumnsObj = {
    default: 5,
    1100: 4,
    700: 2,
    500: 1,
  };
  const navigate = useNavigate();
-  const navigateToWantedComics = (row) => {
+
    navigate(`/wanted/all`);
  };
  return (
    <>
-      <div className="content mt-6">
+      <Header
-        <a className="mb-1" onClick={navigateToWantedComics}>
+        headerContent="Wanted Comics"
-          <span className="is-size-4 has-text-weight-semibold">
+        subHeaderContent="Comics marked as wanted from various sources"
-            <i className="fa-solid fa-asterisk"></i> Wanted Comics
+        iconClassNames="fa-solid fa-binoculars mr-2"
-          </span>
+        link={"/wanted"}
-          <span className="icon mt-1">
+      />
-            <i className="fa-solid fa-angle-right"></i>
+      <div className="grid grid-cols-5 gap-6 mt-3">
          </span>
        </a>
        <p className="subtitle is-7">
          Comics marked as wanted from various sources.
        </p>
      </div>
      <Masonry
        breakpointCols={breakpointColumnsObj}
        className="recent-comics-container"
        columnClassName="recent-comics-column"
      >
        {map(
          comics,
          ({
@@ -73,42 +53,54 @@ export const WantedComicsList = ({
            return (
              <Card
                key={_id}
-                orientation={"vertical"}
+                orientation={"vertical-2"}
                imageUrl={url}
                hasDetails
                title={issueName ? titleElement : <span>No Name</span>}
              >
-                <div className="content is-flex is-flex-direction-row">
+                <div className="pb-1">
                  {/* comicVine metadata presence */}
                  {isComicBookMetadataAvailable && (
                    <span className="icon custom-icon">
                      <img src="/src/client/assets/img/cvlogo.svg" />
                    </span>
                  )}
                  {!isEmpty(locg) && (
                    <span className="icon custom-icon">
                      <img src="/src/client/assets/img/locglogo.svg" />
                    </span>
                  )}
                  {/* Issue type */}
                  {isComicBookMetadataAvailable &&
                  !isNil(
                    detectIssueTypes(comicvine.volumeInformation.description),
                  ) ? (
-                    <span className="tag is-warning">
+                    <div className="my-2">
-                      {
+                      <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                        detectIssueTypes(
+                        <span className="pr-1 pt-1">
-                          comicvine.volumeInformation.description,
+                          <i className="icon-[solar--book-2-line-duotone] w-5 h-5"></i>
-                        ).displayName
+                        </span>
-                      }
+
-                    </span>
+                        <span className="text-md text-slate-500 dark:text-slate-900">
                          {
                            detectIssueTypes(
                              comicvine.volumeInformation.description,
                            ).displayName
                          }
                        </span>
                      </span>
                    </div>
                  ) : null}
                  {/* comicVine metadata presence */}
                  {isComicBookMetadataAvailable && (
                    <img
                      src="/src/client/assets/img/cvlogo.svg"
                      alt={"ComicVine metadata detected."}
                      className="w-7 h-7"
                    />
                  )}
                  {!isEmpty(locg) && (
                    <img
                      src="/src/client/assets/img/locglogo.svg"
                      className="w-7 h-7"
                    />
                  )}
                </div>
              </Card>
            );
          },
        )}
-      </Masonry>
+      </div>
    </>
  );
 };
--- a/src/client/components/Dashboard/ZeroState.tsx
+++ b/src/client/components/Dashboard/ZeroState.tsx
@@ -6,8 +6,8 @@ interface ZeroStateProps {
 }
 const ZeroState: React.FunctionComponent<ZeroStateProps> = (props) => {
  return (
-    <article className="message is-info">
+    <article className="">
-      <div className="message-body">
+      <div className="">
        <p>{props.header}</p>
        {props.message}
      </div>
--- a/src/client/components/Downloads/Downloads.tsx
+++ b/src/client/components/Downloads/Downloads.tsx
@@ -1,13 +1,5 @@
-import React, {
+import React, { ReactElement, useEffect, useState } from "react";
  ReactElement,
  useCallback,
  useContext,
  useEffect,
  useState,
 } from "react";
 import { getTransfers } from "../../actions/airdcpp.actions";
 import { useDispatch, useSelector } from "react-redux";
 import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
 import { isEmpty, isNil, isUndefined } from "lodash";
 import { determineCoverFile } from "../../shared/utils/metadata.utils";
 import MetadataPanel from "../shared/MetadataPanel";
@@ -17,18 +9,18 @@ interface IDownloadsProps {
 }
 export const Downloads = (props: IDownloadsProps): ReactElement => {
-  const airDCPPConfiguration = useContext(AirDCPPSocketContext);
+  // const airDCPPConfiguration = useContext(AirDCPPSocketContext);
  const {
    airDCPPState: { settings, socket },
  } = airDCPPConfiguration;
-  const dispatch = useDispatch();
+  // const dispatch = useDispatch();
-  const airDCPPTransfers = useSelector(
+  // const airDCPPTransfers = useSelector(
-    (state: RootState) => state.airdcpp.transfers,
+  //   (state: RootState) => state.airdcpp.transfers,
-  );
+  // );
-  const issueBundles = useSelector(
+  // const issueBundles = useSelector(
-    (state: RootState) => state.airdcpp.issue_bundles,
+  //   (state: RootState) => state.airdcpp.issue_bundles,
-  );
+  // );
  const [bundles, setBundles] = useState([]);
  // Make the call to get all transfers from AirDC++
  useEffect(() => {
--- a/src/client/components/Import/Import.tsx
+++ b/src/client/components/Import/Import.tsx
@@ -1,14 +1,12 @@
 import React, { ReactElement, useCallback, useEffect } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import {
  fetchComicBookMetadata,
  getImportJobResultStatistics,
  setQueueControl,
 } from "../../actions/fileops.actions";
 import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
 import { format } from "date-fns";
 import Loader from "react-loader-spinner";
 import { isEmpty, isNil, isUndefined } from "lodash";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { useStore } from "../../store";
 import { useShallow } from "zustand/react/shallow";
 import axios from "axios";
 interface IProps {
  matches?: unknown;
@@ -18,10 +16,7 @@ interface IProps {
 }
 /**
- * Returns the average of two numbers.
+ * Component to facilitate the import of comics to the ThreeTwo library
 *
 * @remarks
 * This method is part of the {@link core-library#Statistics | Statistics subsystem}.
 *
 * @param x - The first input number
 * @param y - The second input number
@@ -31,62 +26,84 @@ interface IProps {
 */
 export const Import = (props: IProps): ReactElement => {
-  const dispatch = useDispatch();
+  const queryClient = useQueryClient();
-  const successfulImportJobCount = useSelector(
+  const { importJobQueue, socketIOInstance } = useStore(
-    (state: RootState) => state.fileOps.successfulJobCount,
+    useShallow((state) => ({
-  );
+      importJobQueue: state.importJobQueue,
-  const failedImportJobCount = useSelector(
+      socketIOInstance: state.socketIOInstance,
-    (state: RootState) => state.fileOps.failedJobCount,
+    })),
  );
-  const lastQueueJob = useSelector(
+  const sessionId = localStorage.getItem("sessionId");
-    (state: RootState) => state.fileOps.lastQueueJob,
+  const { mutate: initiateImport } = useMutation({
-  );
+    mutationFn: async () =>
-  const libraryQueueImportStatus = useSelector(
+      await axios.request({
-    (state: RootState) => state.fileOps.LSQueueImportStatus,
+        url: `http://localhost:3000/api/library/newImport`,
-  );
+        method: "POST",
        data: { sessionId },
      }),
  });
-  const allImportJobResults = useSelector(
+  const { data, isError, isLoading } = useQuery({
-    (state: RootState) => state.fileOps.importJobStatistics,
+    queryKey: ["allImportJobResults"],
-  );
+    queryFn: async () =>
-
+      await axios({
-  const initiateImport = useCallback(() => {
+        method: "GET",
-    if (typeof props.path !== "undefined") {
+        url: "http://localhost:3000/api/jobqueue/getJobResultStatistics",
-      dispatch(fetchComicBookMetadata(props.path));
+      }),
-    }
+  });
  }, [dispatch]);
  const toggleQueue = useCallback(
    (queueAction: string, queueStatus: string) => {
      dispatch(setQueueControl(queueAction, queueStatus));
    },
    [],
  );
  useEffect(() => {
    dispatch(getImportJobResultStatistics());
  }, []);
  const toggleQueue = (queueAction: string, queueStatus: string) => {
    socketIOInstance.emit(
      "call",
      "socket.setQueueStatus",
      {
        queueAction,
        queueStatus,
      },
      (data) => console.log(data),
    );
  };
  /**
   * Method to render import job queue pause/resume controls on the UI
   *
   * @param status The `string` status (either `"pause"` or `"resume"`)
   * @returns ReactElement A `<button/>` that toggles queue status
   * @remarks Sets the global `importJobQueue.status` state upon toggling
   */
  const renderQueueControls = (status: string): ReactElement | null => {
    switch (status) {
      case "running":
        return (
-          <div className="control">
+          <div>
            <button
-              className="button is-warning is-light"
+              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={() => toggleQueue("pause", "paused")}
+              onClick={() => {
                toggleQueue("pause", "paused");
                importJobQueue.setStatus("paused");
              }}
            >
-              <i className="fa-solid fa-pause mr-2"></i> Pause
+              <span className="text-md">Pause</span>
              <span className="w-5 h-5">
                <i className="h-5 w-5 icon-[solar--pause-bold]"></i>
              </span>
            </button>
          </div>
        );
      case "paused":
        return (
-          <div className="control">
+          <div>
            <button
-              className="button is-success is-light"
+              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={() => toggleQueue("resume", "running")}
+              onClick={() => {
                toggleQueue("resume", "running");
                importJobQueue.setStatus("running");
              }}
            >
-              <i className="fa-solid fa-play mr-2"></i> Resume
+              <span className="text-md">Resume</span>
              <span className="w-5 h-5">
                <i className="h-5 w-5 icon-[solar--play-bold]"></i>
              </span>
            </button>
          </div>
        );
@@ -99,136 +116,180 @@ export const Import = (props: IProps): ReactElement => {
    }
  };
  return (
-    <div className="container">
+    <div>
-      <section className="section is-small">
+      <section>
-        <h1 className="title">Import Comics</h1>
+        <header className="bg-slate-200 dark:bg-slate-500">
-        <article className="message is-dark">
+          <div className="mx-auto max-w-screen-xl px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
-          <div className="message-body">
+            <div className="sm:flex sm:items-center sm:justify-between">
-            <p className="mb-2">
+              <div className="text-center sm:text-left">
-              <span className="tag is-medium is-info is-light">
+                <h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
-                Import Comics
+                  Import
-              </span>
+                </h1>
-              will add comics identified from the mapped folder into ThreeTwo's
+
-              database.
+                <p className="mt-1.5 text-sm text-gray-500 dark:text-white">
-            </p>
+                  Import comics into the ThreeTwo library.
-            <p>
+                </p>
-              Metadata from ComicInfo.xml, if present, will also be extracted.
+              </div>
-            </p>
+            </div>
            <p>
              This process could take a while, if you have a lot of comics, or
              are importing over a network connection.
            </p>
          </div>
-        </article>
+        </header>
-        <p className="buttons">
+
-          <button
+        <div className="mx-auto max-w-screen-xl px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
-            className={
+          <article
-              libraryQueueImportStatus === "drained" ||
+            role="alert"
-              libraryQueueImportStatus === undefined
+            className="rounded-lg max-w-screen-md border-s-4 border-blue-500 bg-blue-50 p-4 dark:border-s-4 dark:border-blue-600 dark:bg-blue-300 dark:text-slate-600"
                ? "button is-medium"
                : "button is-loading is-medium"
            }
            onClick={initiateImport}
          >
-            <span className="icon">
+            <div>
-              <i className="fas fa-file-import"></i>
+              <p>
-            </span>
+                Importing will add comics identified from the mapped folder into
-            <span>Start Import</span>
+                ThreeTwo's database.
-          </button>
+              </p>
-        </p>
+              <p>
-        {libraryQueueImportStatus !== "drained" &&
+                Metadata from ComicInfo.xml, if present, will also be extracted.
-          !isUndefined(libraryQueueImportStatus) && (
+              </p>
              <p>
                This process could take a while, if you have a lot of comics, or
                are importing over a network connection.
              </p>
            </div>
          </article>
          <div className="my-4">
            {importJobQueue.status === "drained" ||
              (importJobQueue.status === undefined && (
                <button
                  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-5 py-3 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
                  onClick={() => {
                    initiateImport();
                    importJobQueue.setStatus("running");
                  }}
                >
                  <span className="text-md">Start Import</span>
                  <span className="w-6 h-6">
                    <i className="h-6 w-6 icon-[solar--file-left-bold-duotone]"></i>
                  </span>
                </button>
              ))}
          </div>
          {/* Activity */}
          {(importJobQueue.status === "running" ||
            importJobQueue.status === "paused") && (
            <>
-              <table className="table">
+              <span className="flex items-center my-5 max-w-screen-lg">
-                <thead>
+                <span className="text-xl text-slate-500 dark:text-slate-200 pr-5">
-                  <tr>
+                  Import Activity
-                    <th>Completed Jobs</th>
+                </span>
-                    <th>Failed Jobs</th>
+                <span className="h-px flex-1 bg-slate-200 dark:bg-slate-400"></span>
-                    <th>Queue Controls</th>
+              </span>
-                    <th>Queue Status</th>
+              <div className="mt-5 flex flex-col gap-4 sm:mt-0 sm:flex-row sm:items-center">
-                  </tr>
+                <dl className="grid grid-cols-2 gap-4 sm:grid-cols-2">
-                </thead>
+                  {/* Successful import counts */}
                  <div className="flex flex-col rounded-lg bg-green-100 dark:bg-green-200 px-4 py-6 text-center">
                    <dd className="text-3xl text-green-600 md:text-5xl">
                      {importJobQueue.successfulJobCount}
                    </dd>
                    <dt className="text-lg font-medium text-gray-500">
                      imported
                    </dt>
                  </div>
                  {/* Failed job counts */}
                  <div className="flex flex-col rounded-lg bg-red-100 dark:bg-red-200 px-4 py-6 text-center">
                    <dd className="text-3xl text-red-600 md:text-5xl">
                      {importJobQueue.failedJobCount}
                    </dd>
                    <dt className="text-lg font-medium text-gray-500">
                      failed
                    </dt>
                  </div>
-                <tbody>
+                  <div className="flex flex-col dark:text-slate-200 text-slate-400">
-                  <tr>
+                    <dd>{renderQueueControls(importJobQueue.status)}</dd>
-                    <th>
+                  </div>
-                      {successfulImportJobCount > 0 && (
+                </dl>
-                        <div className="box has-background-success-light has-text-centered">
+              </div>
-                          <span className="is-size-2 has-text-weight-bold">
+              <div className="flex">
-                            {successfulImportJobCount}
+                <span className="mt-2 dark:text-slate-200 text-slate-400">
-                          </span>
+                  Imported: <span>{importJobQueue.mostRecentImport}</span>
-                        </div>
+                </span>
-                      )}
+              </div>
                    </th>
                    <td>
                      {failedImportJobCount > 0 && (
                        <div className="box has-background-danger has-text-centered">
                          <span className="is-size-2 has-text-weight-bold">
                            {failedImportJobCount}
                          </span>
                        </div>
                      )}
                    </td>
                    <td>{renderQueueControls(libraryQueueImportStatus)}</td>
                    <td>
                      {libraryQueueImportStatus !== undefined ? (
                        <span className="tag is-warning">
                          {libraryQueueImportStatus}
                        </span>
                      ) : null}
                    </td>
                  </tr>
                </tbody>
              </table>
              Imported{" "}
              <span className="has-text-weight-bold">{lastQueueJob}</span>
            </>
          )}
-        {/* Past imports */}
+          {/* Past imports */}
          {!isLoading && !isEmpty(data?.data) && (
            <div className="max-w-screen-lg">
              <span className="flex items-center mt-6">
                <span className="text-xl text-slate-500 dark:text-slate-200 pr-5">
                  Past Imports
                </span>
                <span className="h-px flex-1 bg-slate-200 dark:bg-slate-400"></span>
              </span>
-        <h3 className="subtitle is-4 mt-5">Past Imports</h3>
+              <div className="overflow-x-auto w-fit mt-4 rounded-lg border border-gray-200">
-        <table className="table">
+                <table className="min-w-full divide-y-2 divide-gray-200 dark:divide-gray-200 text-md">
-          <thead>
+                  <thead className="ltr:text-left rtl:text-right">
-            <tr>
+                    <tr>
-              <th>Time Started</th>
+                      <th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-slate-200">
-              <th>Session Id</th>
+                        Time Started
-              <th>Imported</th>
+                      </th>
-              <th>Failed</th>
+                      <th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-slate-200">
-            </tr>
+                        Session Id
-          </thead>
+                      </th>
                      <th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-slate-200">
                        Imported
                      </th>
                      <th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-slate-200">
                        Failed
                      </th>
                    </tr>
                  </thead>
-          <tbody>
+                  <tbody className="divide-y divide-gray-200">
-            {allImportJobResults.map((jobResult, id) => {
+                    {data?.data.map((jobResult, id) => {
-              return (
+                      return (
-                <tr key={id}>
+                        <tr key={id}>
-                  <td>
+                          <td className="whitespace-nowrap px-2 py-2 text-gray-700 dark:text-slate-300">
-                    {format(
+                            {format(
-                      new Date(jobResult.earliestTimestamp),
+                              new Date(jobResult.earliestTimestamp),
-                      "EEEE, hh:mma, do LLLL Y",
+                              "EEEE, hh:mma, do LLLL Y",
-                    )}
+                            )}
-                  </td>
+                          </td>
-                  <td>
+                          <td className="whitespace-nowrap px-2 py-2 text-gray-700 dark:text-slate-300">
-                    <span className="tag is-warning">
+                            <span className="tag is-warning">
-                      {jobResult.sessionId}
+                              {jobResult.sessionId}
-                    </span>
+                            </span>
-                  </td>
+                          </td>
-                  <td>
+                          <td className="whitespace-nowrap px-4 py-2 text-gray-700 dark:text-slate-300">
-                    <span className="tag is-success">
+                            <span className="inline-flex items-center justify-center rounded-full bg-emerald-100 px-2 py-0.5 text-emerald-700">
-                      {jobResult.completedJobs}
+                              <span className="h-5 w-6">
-                    </span>
+                                <i className="icon-[solar--check-circle-line-duotone] h-5 w-5"></i>
-                  </td>
+                              </span>
-                  <td>
+                              <p className="whitespace-nowrap text-sm">
-                    <span className="tag is-danger">
+                                {jobResult.completedJobs}
-                      {jobResult.failedJobs}
+                              </p>
-                    </span>
+                            </span>
-                  </td>
+                          </td>
-                </tr>
+                          <td className="whitespace-nowrap px-4 py-2 text-gray-700 dark:text-slate-300">
-              );
+                            <span className="inline-flex items-center justify-center rounded-full bg-red-100 px-2 py-0.5 text-red-700">
-            })}
+                              <span className="h-5 w-6">
-          </tbody>
+                                <i className="icon-[solar--close-circle-line-duotone] h-5 w-5"></i>
-        </table>
+                              </span>
                              <p className="whitespace-nowrap text-sm">
                                {jobResult.failedJobs}
                              </p>
                            </span>
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
            </div>
          )}
        </div>
      </section>
    </div>
  );
--- a/src/client/components/Library/Library.tsx
+++ b/src/client/components/Library/Library.tsx
@@ -1,12 +1,18 @@
-import React, { useMemo, ReactElement, useCallback, useEffect } from "react";
+import React, { useMemo, ReactElement, useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import { useNavigate } from "react-router-dom";
 import { isEmpty, isNil, isUndefined } from "lodash";
 import MetadataPanel from "../shared/MetadataPanel";
 import T2Table from "../shared/T2Table";
-import { useDispatch, useSelector } from "react-redux";
+import SearchBar from "../Library/SearchBar";
 import { searchIssue } from "../../actions/fileops.actions";
 import ellipsize from "ellipsize";
 import {
  useQuery,
  keepPreviousData,
  useQueryClient,
 } from "@tanstack/react-query";
 import axios from "axios";
 import { format, fromUnixTime, parseISO } from "date-fns";
 /**
 * Component that tabulates the contents of the user's ThreeTwo Library.
@@ -16,30 +22,60 @@ import ellipsize from "ellipsize";
 * <Library />
 */
 export const Library = (): ReactElement => {
-  const searchResults = useSelector(
+  // Default page state
-    (state: RootState) => state.fileOps.libraryComics,
+  // offset: 0
-  );
+  const [offset, setOffset] = useState(0);
-  const searchError = useSelector((state: RootState) => state.fileOps.librarySearchError);
+  const [searchQuery, setSearchQuery] = useState({
-  const dispatch = useDispatch();
+    query: {},
-  useEffect(() => {
+    pagination: {
-    dispatch(
+      size: 25,
-      searchIssue(
+      from: offset,
-        {
+    },
-          query: {},
+    type: "all",
-        },
+    trigger: "libraryPage",
-        {
+  });
-          pagination: {
+  const queryClient = useQueryClient();
            size: 15,
            from: 0,
          },
          type: "all",
          trigger: "libraryPage",
        },
      ),
    );
  }, []);
-  // programatically navigate to comic detail
+  /**
   * Method that queries the Elasticsearch index "comics" for issues specified by the query
   * @param searchQuery - A searchQuery object that contains the search term, type, and pagination params.
   */
  const fetchIssues = async (searchQuery) => {
    const { pagination, query, type } = searchQuery;
    return await axios({
      method: "POST",
      url: "http://localhost:3000/api/search/searchIssue",
      data: {
        query,
        pagination,
        type,
      },
    });
  };
  const searchIssues = (e) => {
    queryClient.invalidateQueries({ queryKey: ["comics"] });
    setSearchQuery({
      query: {
        volumeName: e.search,
      },
      pagination: {
        size: 15,
        from: 0,
      },
      type: "volumeName",
      trigger: "libraryPage",
    });
  };
  const { data, isLoading, isError, isPlaceholderData } = useQuery({
    queryKey: ["comics", offset, searchQuery],
    queryFn: () => fetchIssues(searchQuery),
    placeholderData: keepPreviousData,
  });
  const searchResults = data?.data;
  // Programmatically navigate to comic detail
  const navigate = useNavigate();
  const navigateToComicDetail = (row) => {
    navigate(`/comic/details/${row.original._id}`);
@@ -47,45 +83,42 @@ export const Library = (): ReactElement => {
  const ComicInfoXML = (value) => {
    return value.data ? (
-      <div className="comicvine-metadata mt-3">
+      <dl className="flex flex-col text-md p-3 ml-4 my-3 rounded-lg dark:bg-yellow-500 bg-yellow-300 w-max">
-        <dl>
+        {/* Series Name */}
-          <span className="tags has-addons is-size-7">
+        <span className="inline-flex items-center w-fit bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
-            <span className="tag">Series</span>
+          <span className="pr-1 pt-1">
-            <span className="tag is-warning is-light">
+            <i className="icon-[solar--bookmark-square-minimalistic-bold-duotone] w-5 h-5"></i>
-              {ellipsize(value.data.series[0], 25)}
+          </span>
          <span className="text-md text-slate-900 dark:text-slate-900">
            {ellipsize(value.data.series[0], 45)}
          </span>
        </span>
        <div className="flex flex-row mt-2 gap-2">
          {/* Pages */}
          <span className="inline-flex 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--notebook-minimalistic-bold-duotone] w-5 h-5"></i>
            </span>
            <span className="text-md text-slate-900 dark:text-slate-900">
              Pages: {value.data.pagecount[0]}
            </span>
          </span>
-        </dl>
+          {/* Issue number */}
-        <dl>
+          <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
-          <div className="field is-grouped is-grouped-multiline">
+            <span className="pr-1 pt-1">
-            <div className="control">
+              <i className="icon-[solar--hashtag-outline] w-3.5 h-3.5"></i>
-              <span className="tags has-addons is-size-7  mt-2">
+            </span>
-                <span className="tag">Pages</span>
+            <span className="text-slate-900 dark:text-slate-900">
-                <span className="tag is-info is-light has-text-weight-bold">
+              {!isNil(value.data.number) && (
-                  {value.data.pagecount[0]}
+                <span>{parseInt(value.data.number[0], 10)}</span>
-                </span>
+              )}
-              </span>
+            </span>
-            </div>
+          </span>
-
+        </div>
-            <div className="control">
+      </dl>
              <span className="tags has-addons is-size-7 mt-2">
                <span className="tag">Issue</span>
                {!isNil(value.data.number) && (
                  <span className="tag has-text-weight-bold is-success is-light">
                    {parseInt(value.data.number[0], 10)}
                  </span>
                )}
              </span>
            </div>
          </div>
        </dl>
      </div>
    ) : null;
  };
  const WantedStatus = ({ value }) => {
    return !value ? <span className="tag is-info is-light">Wanted</span> : null;
  };
  const columns = useMemo(
    () => [
      {
@@ -104,14 +137,10 @@ export const Library = (): ReactElement => {
          {
            header: "ComicInfo.xml",
            accessorKey: "_source.sourcedMetadata.comicInfo",
            align: "center",
            minWidth: 250,
            cell: (info) =>
              !isEmpty(info.getValue()) ? (
                <ComicInfoXML data={info.getValue()} />
-              ) : (
+              ) : null,
                <span className="tag mt-5">No ComicInfo.xml</span>
              ),
          },
        ],
      },
@@ -119,28 +148,41 @@ export const Library = (): ReactElement => {
        header: "Additional Metadata",
        columns: [
          {
-            header: "Publisher",
+            header: "Date of Import",
-            accessorKey: "_source.sourcedMetadata.comicvine.volumeInformation",
+            accessorKey: "_source.createdAt",
            cell: (info) => {
-              return (
+              return !isNil(info.getValue()) ? (
-                !isNil(info.getValue()) && (
+                <div className="text-sm w-max ml-3 my-3 text-slate-600 dark:text-slate-900">
-                  <h6 className="is-size-7 has-text-weight-bold">
+                  <p>{format(parseISO(info.getValue()), "dd MMMM, yyyy")} </p>
-                    {info.getValue().publisher.name}
+                  {format(parseISO(info.getValue()), "h aaaa")}
-                  </h6>
+                </div>
-                )
+              ) : null;
              );
            },
          },
          {
-            header: "Something",
+            header: "Downloads",
-            accessorKey: "_source.acquisition.source.wanted",
+            accessorKey: "_source.acquisition",
-            cell: (info) => {
+            cell: (info) => (
-              !isUndefined(info.getValue()) ? (
+              <div className="flex flex-col gap-2 ml-3 my-3">
-                <WantedStatus value={info.getValue().toString()} />
+                <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">
-                "Nothing"
+                    <i className="icon-[solar--folder-path-connect-bold-duotone] w-5 h-5"></i>
-              );
+                  </span>
-            },
+                  <span className="text-md text-slate-900 dark:text-slate-900">
                    DC++: {info.getValue().directconnect.downloads.length}
                  </span>
                </span>
                <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>
                  </span>
                  <span className="text-md text-slate-900 dark:text-slate-900">
                    Torrent: {info.getValue().torrent.length}
                  </span>
                </span>
              </div>
            ),
          },
        ],
      },
@@ -156,23 +198,21 @@ export const Library = (): ReactElement => {
   * @returns void
   *
   **/
-  const nextPage = useCallback((pageIndex: number, pageSize: number) => {
+  const nextPage = (pageIndex: number, pageSize: number) => {
-    dispatch(
+    if (!isPlaceholderData) {
-      searchIssue(
+      queryClient.invalidateQueries({ queryKey: ["comics"] });
-        {
+      setSearchQuery({
-          query: {},
+        query: {},
        pagination: {
          size: 15,
          from: pageSize * pageIndex + 1,
        },
-        {
+        type: "all",
-          pagination: {
+        trigger: "libraryPage",
-            size: pageSize,
+      });
-            from: pageSize * pageIndex + 1,
+      // setOffset(pageSize * pageIndex + 1);
-          },
+    }
-          type: "all",
+  };
          trigger: "libraryPage",
        },
      ),
    );
  }, []);
  /**
   * Pagination control that fetches the previous x (pageSize) items
@@ -181,77 +221,95 @@ export const Library = (): ReactElement => {
   * @param {number} pageSize
   * @returns void
   **/
-  const previousPage = useCallback((pageIndex: number, pageSize: number) => {
+  const previousPage = (pageIndex: number, pageSize: number) => {
    let from = 0;
    if (pageIndex === 2) {
-      from = (pageIndex - 1) * pageSize + 2 - 17;
+      from = (pageIndex - 1) * pageSize + 2 - (pageSize + 2);
    } else {
-      from = (pageIndex - 1) * pageSize + 2 - 16;
+      from = (pageIndex - 1) * pageSize + 2 - (pageSize + 1);
    }
-    dispatch(
+    queryClient.invalidateQueries({ queryKey: ["comics"] });
-      searchIssue(
+    setSearchQuery({
-        {
+      query: {},
-          query: {},
+      pagination: {
-        },
+        size: 15,
-        {
+        from,
-          pagination: {
+      },
-            size: pageSize,
+      type: "all",
-            from,
+      trigger: "libraryPage",
-          },
+    });
-          type: "all",
+    // setOffset(from);
-          trigger: "libraryPage",
+  };
        },
      ),
    );
  }, []);
  // ImportStatus.propTypes = {
  //   value: PropTypes.bool.isRequired,
  // };
  return (
-    <section className="container">
+    <div>
-      <div className="section">
+      <section>
-        <div className="header-area">
+        <header className="bg-slate-200 dark:bg-slate-500">
-          <h1 className="title">Library</h1>
+          <div className="mx-auto max-w-screen-xl px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
-        </div>
+            <div className="sm:flex sm:items-center sm:justify-between">
-        {!isEmpty(searchResults) ? (
+              <div className="text-center sm:text-left">
                <h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
                  Library
                </h1>
                <p className="mt-1.5 text-sm text-gray-500 dark:text-white">
                  Browse your comic book collection.
                </p>
              </div>
            </div>
          </div>
        </header>
        {!isUndefined(searchResults?.hits) ? (
          <div>
-            <div className="library">
+            <div>
              <T2Table
-                totalPages={searchResults.total.value}
+                totalPages={searchResults.hits.total.value}
                columns={columns}
-                sourceData={searchResults?.hits}
+                sourceData={searchResults?.hits.hits}
                rowClickHandler={navigateToComicDetail}
                paginationHandlers={{
                  nextPage,
                  previousPage,
                }}
-              />
+              >
                <SearchBar searchHandler={(e) => searchIssues(e)} />
              </T2Table>
            </div>
          </div>
        ) : (
-          <div className="columns">
+          <div className="mx-auto max-w-screen-xl mt-5">
-            <div className="column is-two-thirds">
+            <article
-              <article className="message is-link">
+              role="alert"
-                <div className="message-body">
+              className="rounded-lg max-w-screen-md border-s-4 border-yellow-500 bg-yellow-50 p-4 dark:border-s-4 dark:border-yellow-600 dark:bg-yellow-300 dark:text-slate-600"
            >
              <div>
                <p>
                  No comics were found in the library, Elasticsearch reports no
                  indices. Try importing a few comics into the library and come
                  back.
-                </div>
+                </p>
-              </article>
+              </div>
-              <pre>
+            </article>
-                {!isUndefined(searchError.data) &&
+            <div className="block max-w-md p-6 bg-white border border-gray-200 my-3 rounded-lg shadow dark:bg-slate-400 dark:border-gray-700">
-                  JSON.stringify(
+              <pre className="text-sm font-hasklig text-slate-700 dark:text-slate-700">
-                    searchError.data.meta.body.error.root_cause,
+                {!isUndefined(searchResults?.data?.meta?.body) ? (
-                    null,
+                  <p>
-                    4,
+                    {JSON.stringify(
-                  )}
+                      searchResults?.data.meta.body.error.root_cause,
                      null,
                      4,
                    )}
                  </p>
                ) : null}
              </pre>
            </div>
          </div>
        )}
-      </div>
+      </section>
-    </section>
+    </div>
  );
 };
--- a/src/client/components/Library/SearchBar.tsx
+++ b/src/client/components/Library/SearchBar.tsx
@@ -1,63 +1,47 @@
-import React, { ReactElement, useCallback } from "react";
+import React, { ReactElement } from "react";
 import PropTypes from "prop-types";
 import { Form, Field } from "react-final-form";
 import { Link } from "react-router-dom";
 import { useDispatch } from "react-redux";
 import { searchIssue } from "../../actions/fileops.actions";
-export const SearchBar = (): ReactElement => {
+export const SearchBar = (props): ReactElement => {
-  const dispatch = useDispatch();
+  const { searchHandler } = props;
  const handleSubmit = useCallback((e) => {
    dispatch(
      searchIssue(
        {
          query: {
            volumeName: e.search,
          },
        },
        {
          pagination: {
            size: 25,
            from: 0,
          },
          type: "volumeName",
          trigger: "libraryPage",
        },
      ),
    );
  }, []);
  return (
-    <div className="box">
+    <Form
-      <Form
+      onSubmit={searchHandler}
-        onSubmit={handleSubmit}
+      initialValues={{}}
-        initialValues={{}}
+      render={({ handleSubmit, form, submitting, pristine, values }) => (
-        render={({ handleSubmit, form, submitting, pristine, values }) => (
+        <form onSubmit={handleSubmit}>
-          <form onSubmit={handleSubmit}>
+          <Field name="search">
-            <div className="field is-grouped">
+            {({ input, meta }) => {
-              <div className="control search is-expanded">
+              return (
-                <Field name="search">
+                <div className="flex flex-row w-full">
-                  {({ input, meta }) => {
+                  <div className="flex flex-row bg-slate-300 dark:bg-slate-500 rounded-l-lg p-2 min-w-full">
-                    return (
+                    <div className="w-10 text-gray-400">
-                      <input
+                      <i className="icon-[solar--magnifer-bold-duotone] h-7 w-7" />
-                        {...input}
+                    </div>
-                        className="input main-search-bar is-medium"
+
-                        placeholder="Type an issue/volume name"
+                    <input
-                      />
+                      {...input}
-                    );
+                      className="bg-slate-300 dark:bg-slate-500 outline-none text-lg text-gray-700 w-full"
-                  }}
+                      type="text"
-                </Field>
+                      id="search"
-              </div>
+                      placeholder="Type an issue/volume name"
-              <div className="control">
+                    />
-                <button className="button is-medium" type="submit">
+                  </div>
-                  Search
+
-                </button>
+                  <button
-              </div>
+                    className="sm:mt-0 rounded-r-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"
-            </div>
+                    type="submit"
-          </form>
+                  >
-        )}
+                    Search
-      />
+                  </button>
-      
+                </div>
-    </div>
+              );
            }}
          </Field>
        </form>
      )}
    />
  );
 };
--- a/src/client/components/PullList/PullList.tsx
+++ b/src/client/components/PullList/PullList.tsx
@@ -1,25 +1,23 @@
 import React, { ReactElement, useEffect, useMemo } from "react";
 import T2Table from "../shared/T2Table";
 import { getWeeklyPullList } from "../../actions/comicinfo.actions";
 import { useDispatch, useSelector } from "react-redux";
 import Card from "../shared/Carda";
 import ellipsize from "ellipsize";
 import { isNil } from "lodash";
 export const PullList = (): ReactElement => {
-  const pullListComics = useSelector(
+  // const pullListComics = useSelector(
-    (state: RootState) => state.comicInfo.pullList,
+  //   (state: RootState) => state.comicInfo.pullList,
-  );
+  // );
  const dispatch = useDispatch();
  useEffect(() => {
-    dispatch(
+    // dispatch(
-      getWeeklyPullList({
+    //   getWeeklyPullList({
-        startDate: "2023-7-28",
+    //     startDate: "2023-7-28",
-        pageSize: "15",
+    //     pageSize: "15",
-        currentPage: "1",
+    //     currentPage: "1",
-      }),
+    //   }),
-    );
+    // );
  }, []);
  const nextPageHandler = () => {};
  const previousPageHandler = () => {};
--- a/src/client/components/Search/Search.tsx
+++ b/src/client/components/Search/Search.tsx
@@ -1,15 +1,18 @@
-import React, { useCallback, ReactElement } from "react";
+import React, { useCallback, ReactElement, useState } from "react";
 import { isNil, isEmpty } from "lodash";
 import { IExtractedComicBookCoverFile, RootState } from "threetwo-ui-typings";
-import { importToDB } from "../../actions/fileops.actions";
+
 import { useSelector, useDispatch } from "react-redux";
 import { comicinfoAPICall } from "../../actions/comicinfo.actions";
 import { search } from "../../services/api/SearchApi";
 import { Form, Field } from "react-final-form";
 import Card from "../shared/Carda";
 import ellipsize from "ellipsize";
 import { convert } from "html-to-text";
 import dayjs from "dayjs";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import {
  COMICVINE_SERVICE_URI,
  LIBRARY_SERVICE_BASE_URI,
 } from "../../constants/endpoints";
 import axios from "axios";
 interface ISearchProps {}
@@ -17,164 +20,223 @@ export const Search = ({}: ISearchProps): ReactElement => {
  const formData = {
    search: "",
  };
-  const dispatch = useDispatch();
+  const queryClient = useQueryClient();
-  const getCVSearchResults = useCallback(
+  const [searchQuery, setSearchQuery] = useState("");
-    (searchQuery) => {
+  const [comicVineMetadata, setComicVineMetadata] = useState({});
-      dispatch(
+  const getCVSearchResults = (searchQuery) => {
-        comicinfoAPICall({
+    setSearchQuery(searchQuery.search);
-          callURIAction: "search",
+  };
-          callMethod: "GET",
+
-          callParams: {
+  const {
-            api_key: "a5fa0663683df8145a85d694b5da4b87e1c92c69",
+    data: comicVineSearchResults,
-            query: searchQuery.search,
+    isLoading,
-            format: "json",
+    isSuccess,
-            limit: "10",
+  } = useQuery({
-            offset: "0",
+    queryFn: async () =>
-            field_list:
+      await axios({
-              "id,name,deck,api_detail_url,image,description,volume,cover_date",
+        url: `${COMICVINE_SERVICE_URI}/search`,
-            resources: "issue",
+        method: "GET",
        params: {
          api_key: "a5fa0663683df8145a85d694b5da4b87e1c92c69",
          query: searchQuery,
          format: "json",
          limit: "10",
          offset: "0",
          field_list:
            "id,name,deck,api_detail_url,image,description,volume,cover_date",
          resources: "issue",
        },
      }),
    queryKey: ["comicvineSearchResults", searchQuery],
    enabled: !isNil(searchQuery),
  });
  // add to library
  const { data: additionResult } = useQuery({
    queryFn: async () =>
      await axios({
        url: `${LIBRARY_SERVICE_BASE_URI}/rawImportToDb`,
        method: "POST",
        data: {
          importType: "new",
          payload: {
            rawFileDetails: {
              name: "",
            },
            importStatus: {
              isImported: true,
              tagged: false,
              matchedResult: {
                score: "0",
              },
            },
            sourcedMetadata:
              { comicvine: comicVineMetadata?.comicData } || null,
            acquisition: { source: { wanted: true, name: "comicvine" } },
          },
-        }),
+        },
-      );
+      }),
-    },
+    queryKey: ["additionResult"],
-    [dispatch],
+    enabled: !isNil(comicVineMetadata.comicData),
-  );
+  });
-  const addToLibrary = useCallback(
+  const addToLibrary = (sourceName: string, comicData) =>
-    (sourceName: string, comicData) =>
+    setComicVineMetadata({ sourceName, comicData });
      dispatch(importToDB(sourceName, { comicvine: comicData })),
    [],
  );
  const comicVineSearchResults = useSelector(
    (state: RootState) => state.comicInfo.searchResults,
  );
  const createDescriptionMarkup = (html) => {
    return { __html: html };
  };
  return (
-    <>
+    <div>
-      <section className="container">
+      <section>
-        <div className="section search">
+        <header className="bg-slate-200 dark:bg-slate-500">
-          <h1 className="title">Search</h1>
+          <div className="px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
            <div className="sm:flex sm:items-center sm:justify-between">
              <div className="text-center sm:text-left">
                <h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
                  Search
                </h1>
                <p className="mt-1.5 text-sm text-gray-500 dark:text-white">
                  Browse your comic book collection.
                </p>
              </div>
            </div>
          </div>
        </header>
        <div className="mx-auto max-w-screen-sm px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
          <Form
            onSubmit={getCVSearchResults}
            initialValues={{
              ...formData,
            }}
            render={({ handleSubmit, form, submitting, pristine, values }) => (
-              <form onSubmit={handleSubmit} className="form columns search">
+              <form onSubmit={handleSubmit}>
-                <div className="column is-three-quarters search">
+                <div className="flex flex-row w-full">
-                  <Field name="search">
+                  <div className="flex flex-row bg-slate-300 dark:bg-slate-500 rounded-l-lg p-2 min-w-full">
-                    {({ input, meta }) => {
+                    <div className="w-10 text-gray-400">
-                      return (
+                      <i className="icon-[solar--magnifer-bold-duotone] h-7 w-7" />
-                        <input
+                    </div>
-                          {...input}
+
-                          className="input main-search-bar is-large"
+                    <Field name="search">
-                          placeholder="Type an issue/volume name"
+                      {({ input, meta }) => {
-                        />
+                        return (
-                      );
+                          <input
-                    }}
+                            {...input}
-                  </Field>
+                            className="bg-slate-300 dark:bg-slate-500 outline-none text-lg text-gray-700 w-full"
-                </div>
+                            placeholder="Type an issue/volume name"
-                <div className="column">
+                          />
-                  <button type="submit" className="button is-medium">
+                        );
                      }}
                    </Field>
                  </div>
                  <button
                    className="sm:mt-0 rounded-r-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"
                    type="submit"
                  >
                    Search
                  </button>
                </div>
              </form>
            )}
          />
-          {!isNil(comicVineSearchResults.results) &&
+        </div>
-          !isEmpty(comicVineSearchResults.results) ? (
+        {isLoading && <>Loading kaka...</>}
-            <div className="columns is-multiline">
+        {!isNil(comicVineSearchResults?.data.results) &&
-              {comicVineSearchResults.results.map((result) => {
+        !isEmpty(comicVineSearchResults?.data.results) ? (
-                return (
+          <div className="mx-auto max-w-screen-xl px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
-                  <div
+            {comicVineSearchResults.data.results.map((result) => {
-                    key={result.id}
+              return isSuccess ? (
-                    className="comicvine-metadata column is-10 mb-3"
+                <div key={result.id} className="mb-5">
-                  >
+                  <div className="flex flex-row">
-                    <div className="columns">
+                    <div className="mr-5">
-                      <div className="column is-one-quarter">
+                      <Card
-                        <Card
+                        key={result.id}
-                          key={result.id}
+                        orientation={"cover-only"}
-                          orientation={"vertical"}
+                        imageUrl={result.image.small_url}
-                          imageUrl={result.image.small_url}
+                        hasDetails={false}
-                          title={result.name}
+                      />
-                          hasDetails={false}
+                    </div>
-                        ></Card>
+                    <div className="column">
                      <div className="text-xl">
                        {!isEmpty(result.volume.name) ? (
                          result.volume.name
                        ) : (
                          <span className="is-size-3">No Name</span>
                        )}
                      </div>
-                      <div className="column">
+                      <div className="field is-grouped mt-1">
-                        <div className="is-size-3">
+                        <div className="control">
-                          {!isEmpty(result.name) ? (
+                          <div className="tags has-addons">
-                            result.name
+                            <span className="tag is-light">Cover date</span>
-                          ) : (
+                            <span className="tag is-info is-light">
-                            <span className="is-size-3">No Name</span>
+                              {dayjs(result.cover_date).format("MMM D, YYYY")}
-                          )}
+                            </span>
                        </div>
                        <div className="field is-grouped mt-1">
                          <div className="control">
                            <div className="tags has-addons">
                              <span className="tag is-light">Cover date</span>
                              <span className="tag is-info is-light">
                                {dayjs(result.cover_date).format("MMM D, YYYY")}
                              </span>
                            </div>
                          </div>
                          <div className="control">
                            <div className="tags has-addons">
                              <span className="tag is-warning">
                                {result.id}
                              </span>
                            </div>
                          </div>
                        </div>
-                        <a href={result.api_detail_url}>
+                        <div className="control">
-                          {result.api_detail_url}
+                          <div className="tags has-addons">
-                        </a>
+                            <span className="tag is-warning">{result.id}</span>
-                        <p>
+                          </div>
-                          {ellipsize(
+                        </div>
-                            convert(result.description, {
+                      </div>
-                              baseElements: {
+
-                                selectors: ["p"],
+                      <a href={result.api_detail_url}>
-                              },
+                        {result.api_detail_url}
-                            }),
+                      </a>
-                            320,
+                      <p>
-                          )}
+                        {ellipsize(
-                        </p>
+                          convert(result.description, {
                            baseElements: {
                              selectors: ["p", "div"],
                            },
                          }),
                          320,
                        )}
                      </p>
                      <div className="mt-2">
                        <button
-                          className="button is-success is-light is-outlined mt-2"
+                          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-2 py-2 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
                          onClick={() => addToLibrary("comicvine", result)}
                        >
-                          <i className="fa-solid fa-plus mr-2"></i> Want 
+                          <i className="icon-[solar--add-square-bold-duotone] w-6 h-6 mr-2"></i>{" "}
                          Mark as Wanted
                        </button>
                      </div>
                    </div>
                  </div>
-                );
+                </div>
-              })}
+              ) : (
-            </div>
+                <div>Loading</div>
-          ) : (
+              );
-            <article className="message is-dark is-half">
+            })}
-              <div className="message-body">
+          </div>
-                <p className="mb-2">
+        ) : (
-                  <span className="tag is-medium is-info is-light">
+          <div className="mx-auto mx-auto max-w-screen-md px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
-                    Search the ComicVine database
+            <article
-                  </span>
+              role="alert"
              className="mt-4 rounded-lg max-w-screen-md border-s-4 border-blue-500 bg-blue-50 p-4 dark:border-s-4 dark:border-blue-600 dark:bg-blue-300 dark:text-slate-600"
            >
              <div>
                <p> Search the ComicVine database</p>
                <p>
                  Note that you need an instance of AirDC++ already running to
                  use this form to connect to it.
                </p>
                <p>
                  Search and add issues, series and trade paperbacks to your
                  library. Then, download them using the configured AirDC++ or
                  torrent clients.
                </p>
              </div>
            </article>
-          )}
+          </div>
-        </div>
+        )}
      </section>
-    </>
+    </div>
  );
 };
--- a/src/client/components/Settings/AirDCPPSettings/AirDCPPHubsForm.tsx
+++ b/src/client/components/Settings/AirDCPPSettings/AirDCPPHubsForm.tsx
@@ -1,39 +1,65 @@
 import React, { ReactElement, useEffect, useState, useContext } from "react";
 import { Form, Field } from "react-final-form";
 import { useDispatch } from "react-redux";
 import { isEmpty, isNil, isUndefined } from "lodash";
 import Select from "react-select";
-import { saveSettings } from "../../../actions/settings.actions";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { AirDCPPSocketContext } from "../../../context/AirDCPPSocket";
+import { useStore } from "../../../store";
 import axios from "axios";
-export const AirDCPPHubsForm = (airDCPPClientUserSettings): ReactElement => {
+export const AirDCPPHubsForm = (): ReactElement => {
-  const dispatch = useDispatch();
+  const queryClient = useQueryClient();
  const [hubList, setHubList] = useState([]);
  const airDCPPConfiguration = useContext(AirDCPPSocketContext);
  const {
-    airDCPPState: { settings, socket },
+    airDCPPSocketInstance,
-  } = airDCPPConfiguration;
+    airDCPPClientConfiguration,
    airDCPPSessionInformation,
  } = useStore((state) => ({
    airDCPPSocketInstance: state.airDCPPSocketInstance,
    airDCPPClientConfiguration: state.airDCPPClientConfiguration,
    airDCPPSessionInformation: state.airDCPPSessionInformation,
  }));
-  useEffect(() => {
+  const {
-    (async () => {
+    data: settings,
-      if (!isEmpty(settings)) {
+    isLoading,
-        const hubs = await socket.get(`hubs`);
+    isError,
-        const hubSelectionOptions = hubs.map(({ hub_url, identity }) => ({
+  } = useQuery({
-          value: hub_url,
+    queryKey: ["settings"],
-          label: identity.name,
+    queryFn: async () =>
-        }));
+      await axios({
-
+        url: "http://localhost:3000/api/settings/getAllSettings",
-        setHubList(hubSelectionOptions);
+        method: "GET",
-      }
+      }),
-    })();
+  });
  }, []);
  const onSubmit = (values) => {
    if (!isUndefined(values.hubs)) {
      dispatch(saveSettings({ ...settings, hubs: values.hubs }, settings._id));
    }
  };
  /**
   * Get the hubs list from an AirDCPP Socket
   */
  const { data: hubs } = useQuery({
    queryKey: ["hubs"],
    queryFn: async () => await airDCPPSocketInstance.get(`hubs`),
  });
  let hubList = {};
  if (!isNil(hubs)) {
    hubList = hubs.map(({ hub_url, identity }) => ({
      value: hub_url,
      label: identity.name,
    }));
  }
  const { mutate } = useMutation({
    mutationFn: async (values) =>
      await axios({
        url: `http://localhost:3000/api/settings/saveSettings`,
        method: "POST",
        data: {
          settingsPayload: values,
          settingsObjectId: settings?.data._id,
          settingsKey: "directConnect",
        },
      }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["settings"] });
    },
  });
  const validate = async () => {};
  const SelectAdapter = ({ input, ...rest }) => {
@@ -42,53 +68,70 @@ export const AirDCPPHubsForm = (airDCPPClientUserSettings): ReactElement => {
  return (
    <>
-      <Form
+      {!isEmpty(hubList) && !isUndefined(hubs) ? (
-        onSubmit={onSubmit}
+        <Form
-        validate={validate}
+          onSubmit={mutate}
-        render={({ handleSubmit }) => (
+          validate={validate}
-          <form onSubmit={handleSubmit}>
+          render={({ handleSubmit }) => (
-            <div>
+            <form onSubmit={handleSubmit}>
-              <h3 className="title">Hubs</h3>
+              <div>
-              <h6 className="subtitle has-text-grey-light">
+                <h3 className="title">Hubs</h3>
-                Select the hubs you want to perform searches against.
+                <h6 className="subtitle has-text-grey-light">
-              </h6>
+                  Select the hubs you want to perform searches against.
-            </div>
+                </h6>
-            <div className="field">
+              </div>
-              <label className="label">AirDC++ Host</label>
+              <div className="field">
-              <div className="control">
+                <label className="label">AirDC++ Host</label>
-                <Field
+                <div className="control">
-                  name="hubs"
+                  <Field
-                  component={SelectAdapter}
+                    name="hubs"
-                  className="basic-multi-select"
+                    component={SelectAdapter}
-                  placeholder="Select Hubs to Search Against"
+                    className="basic-multi-select"
-                  options={hubList}
+                    placeholder="Select Hubs to Search Against"
-                />
+                    options={hubList}
                  />
                </div>
              </div>
            </div>
-            <button type="submit" className="button is-primary">
+              <button type="submit" className="button is-primary">
-              Submit
+                Submit
-            </button>
+              </button>
-          </form>
+            </form>
-        )}
+          )}
-      />
+        />
-      <div className="mt-4">
+      ) : (
-        <article className="message is-warning">
+        <>
-          <div className="message-body is-size-6 is-family-secondary">
+          <article className="message">
-            Your selection in the dropdown <strong>will replace</strong> the
+            <div className="message-body">
-            existing selection.
+              No configured hubs detected in AirDC++. <br />
              Configure to a hub in AirDC++ and then select a default hub here.
            </div>
          </article>
        </>
      )}
      {!isEmpty(settings?.data.directConnect?.client.hubs) ? (
        <>
          <div className="mt-4">
            <article className="message is-warning">
              <div className="message-body is-size-6 is-family-secondary">
                Your selection in the dropdown <strong>will replace</strong> the
                existing selection.
              </div>
            </article>
          </div>
-        </article>
+          <div className="box mt-3">
-      </div>
+            <h6>Default Hub For Searches:</h6>
-      <div className="box mt-3">
+            {settings?.data.directConnect?.client.hubs.map(
-        <h6>Selected hubs</h6>
+              ({ value, label }) => (
-        {settings.directConnect.client.hubs.map(({ value, label }) => (
+                <div key={value}>
-          <div key={value}>
+                  <div>{label}</div>
-            <div>{label}</div>
+                  <span className="is-size-7">{value}</span>
-            <span className="is-size-7">{value}</span>
+                </div>
              ),
            )}
          </div>
-        ))}
+        </>
-      </div>
+      ) : null}
    </>
  );
 };
--- a/src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsConfirmation.tsx
+++ b/src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsConfirmation.tsx
@@ -3,29 +3,36 @@ import React, { ReactElement } from "react";
 export const AirDCPPSettingsConfirmation = (settingsObject): ReactElement => {
  const { settings } = settingsObject;
  return (
-    <div className="mt-4 is-clearfix">
+    <div>
-      <div className="card">
+      <span className="flex items-center mt-10 mb-4">
-        <div className="card-content">
+        <span className="text-xl text-slate-500 dark:text-slate-200 pr-5">
-          <span className="tag is-pulled-right is-primary">Connected</span>
+          AirDC++ Client Information
-          <div className="content is-size-7">
+        </span>
-            <dl>
+        <span className="h-px flex-1 bg-slate-200 dark:bg-slate-400"></span>
-              <dt>{settings._id}</dt>
+      </span>
-              <dt>Client version: {settings.system_info.client_version}</dt>
+      <div className="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-slate-400 dark:border-gray-700">
-              <dt>Hostname: {settings.system_info.hostname}</dt>
+        <span className="inline-flex justify-center rounded-full bg-emerald-100 mb-4 px-2 py-0.5 text-emerald-700">
-              <dt>Platform: {settings.system_info.platform}</dt>
+          <span className="h-5 w-6">
            <i className="icon-[solar--plug-circle-bold] h-5 w-5"></i>
          </span>
          <p className="whitespace-nowrap text-sm">Connected</p>
        </span>
        <p className="font-hasklig text-sm text-slate-700 dark:text-slate-700">
          <dl>
            <dt>{settings._id}</dt>
            <dt>Client version: {settings.system_info.client_version}</dt>
            <dt>Hostname: {settings.system_info.hostname}</dt>
            <dt>Platform: {settings.system_info.platform}</dt>
-              <dt>Username: {settings.user.username}</dt>
+            <dt>Username: {settings.user.username}</dt>
-              <dt>Active Sessions: {settings.user.active_sessions}</dt>
+            <dt>Active Sessions: {settings.user.active_sessions}</dt>
-              <dt>
+            <dt>
-                Permissions:{" "}
+              Permissions:{" "}
-                <pre>
+              {JSON.stringify(settings.user.permissions, undefined, 2)}
-                  {JSON.stringify(settings.user.permissions, undefined, 2)}
+            </dt>
-                </pre>
+          </dl>
-              </dt>
+        </p>
            </dl>
          </div>
        </div>
      </div>
    </div>
  );
--- a/src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsForm.tsx
+++ b/src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsForm.tsx
@@ -2,60 +2,94 @@ import React, { ReactElement, useCallback } from "react";
 import { AirDCPPSettingsConfirmation } from "./AirDCPPSettingsConfirmation";
 import { isUndefined, isEmpty } from "lodash";
 import { ConnectionForm } from "../../shared/ConnectionForm/ConnectionForm";
-import { useStore } from "../../../store/index";
+import { initializeAirDCPPSocket, useStore } from "../../../store/index";
 import { useShallow } from "zustand/react/shallow";
 import { useMutation } from "@tanstack/react-query";
 import axios from "axios";
 export const AirDCPPSettingsForm = (): ReactElement => {
  // cherry-picking selectors for:
  // 1. initial values for the form
  // 2. If initial values are present, get the socket information to display
  const { setState } = useStore;
  const {
    airDCPPSocketConnected,
    airDCPPDisconnectionInfo,
-    airDCPPSocketConnectionInformation,
+    airDCPPSessionInformation,
    airDCPPClientConfiguration,
    airDCPPSocketInstance,
    setAirDCPPSocketInstance,
  } = useStore(
    useShallow((state) => ({
      airDCPPSocketConnected: state.airDCPPSocketConnected,
      airDCPPDisconnectionInfo: state.airDCPPDisconnectionInfo,
      airDCPPClientConfiguration: state.airDCPPClientConfiguration,
-      airDCPPSocketConnectionInformation:
+      airDCPPSessionInformation: state.airDCPPSessionInformation,
-        state.airDCPPSocketConnectionInformation,
+      airDCPPSocketInstance: state.airDCPPSocketInstance,
      setAirDCPPSocketInstance: state.setAirDCPPSocketInstance,
    })),
  );
-  const onSubmit = useCallback(async (values) => {
+  /**
-    try {
+   * Mutation to update settings and subsequently initialize
-      // airDCPPSettings.setSettings(values);
+   * AirDC++ socket with those settings
-    } catch (error) {
+   */
-      console.log(error);
+  const { mutate } = useMutation({
-    }
+    mutationFn: async (values) =>
-  }, []);
+      await axios({
-  const removeSettings = useCallback(async () => {
+        url: `http://localhost:3000/api/settings/saveSettings`,
-    // airDCPPSettings.setSettings({});
+        method: "POST",
-  }, []);
+        data: { settingsPayload: values, settingsKey: "directConnect" },
      }),
    onSuccess: async (values) => {
      const {
        data: {
          directConnect: {
            client: { host },
          },
        },
      } = values;
      const dcppSocketInstance = await initializeAirDCPPSocket(host);
      setState({
        airDCPPClientConfiguration: host,
        airDCPPSocketInstance: dcppSocketInstance,
      });
    },
  });
  const deleteSettingsMutation = useMutation(
    async () =>
      await axios.post("http://localhost:3000/api/settings/saveSettings", {
        settingsPayload: {},
        settingsKey: "directConnect",
      }),
  );
  // const removeSettings = useCallback(async () => {
  //   // airDCPPSettings.setSettings({});
  // }, []);
  //
  const initFormData = !isUndefined(airDCPPClientConfiguration)
    ? airDCPPClientConfiguration
    : {};
  return (
    <>
      <ConnectionForm
        initialData={initFormData}
-        submitHandler={onSubmit}
+        submitHandler={mutate}
        formHeading={"Configure AirDC++"}
      />
-      {!isEmpty(airDCPPSocketConnectionInformation) ? (
+      {!isEmpty(airDCPPSessionInformation) ? (
-        <AirDCPPSettingsConfirmation
+        <AirDCPPSettingsConfirmation settings={airDCPPSessionInformation} />
          settings={airDCPPSocketConnectionInformation}
        />
      ) : null}
      {!isEmpty(airDCPPClientConfiguration) ? (
        <p className="control mt-4">
-          <button className="button is-danger" onClick={removeSettings}>
+          as
          <button
            className="button is-danger"
            onClick={() => deleteSettingsMutation.mutate()}
          >
            Delete
          </button>
        </p>
--- a/src/client/components/Settings/ProwlarrSettings/ProwlarrSettingsForm.tsx
+++ b/src/client/components/Settings/ProwlarrSettings/ProwlarrSettingsForm.tsx
@@ -0,0 +1,62 @@
 import React from "react";
 import { useQuery } from "@tanstack/react-query";
 import { Form, Field } from "react-final-form";
 import { PROWLARR_SERVICE_BASE_URI } from "../../../constants/endpoints";
 import axios from "axios";
 export const ProwlarrSettingsForm = (props) => {
  const { data } = useQuery({
    queryFn: async (): any => {
      return await axios({
        url: `${PROWLARR_SERVICE_BASE_URI}/getIndexers`,
        method: "POST",
        data: {
          host: "localhost",
          port: "9696",
          apiKey: "c4f42e265fb044dc81f7e88bd41c3367",
        },
      });
    },
    queryKey: ["prowlarrConnectionResult"],
  });
  console.log(data);
  const submitHandler = () => {};
  const initialData = {};
  return (
    <>
      Prowlarr Settings.
      <Form
        onSubmit={submitHandler}
        initialValues={initialData}
        render={({ handleSubmit }) => (
          <form>
            <article
              role="alert"
              className="mt-4 rounded-lg max-w-screen-md border-s-4 border-blue-500 bg-blue-50 p-4 dark:border-s-4 dark:border-blue-600 dark:bg-blue-300 dark:text-slate-600"
            >
              <div>
                <p>Configure Prowlarr integration here.</p>
                <p>
                  Note that you need a Prowlarr instance hosted and running to
                  configure the integration.
                </p>
                <p>
                  See{" "}
                  <a
                    className="underline"
                    href="http://airdcpp.net/docs/installation/installation.html"
                  >
                    here
                  </a>{" "}
                  for Prowlarr installation instructions for various platforms.
                </p>
              </div>
            </article>
          </form>
        )}
      />
    </>
  );
 };
 export default ProwlarrSettingsForm;
--- a/src/client/components/Settings/QbittorrentSettings/QbittorrentConnectionForm.tsx
+++ b/src/client/components/Settings/QbittorrentSettings/QbittorrentConnectionForm.tsx
@@ -1,9 +1,10 @@
 import React, { ReactElement } from "react";
 import { ConnectionForm } from "../../shared/ConnectionForm/ConnectionForm";
-import { useQuery, useMutation } from "@tanstack/react-query";
+import { useQuery, useMutation, QueryClient } from "@tanstack/react-query";
 import axios from "axios";
 export const QbittorrentConnectionForm = (): ReactElement => {
  const queryClient = new QueryClient();
  // fetch settings
  const { data, isLoading, isError } = useQuery({
    queryKey: ["settings"],
@@ -13,18 +14,9 @@ export const QbittorrentConnectionForm = (): ReactElement => {
        method: "GET",
      }),
  });
-  const hostDetails = data?.data.bittorrent.client.host;
+  const hostDetails = data?.data?.bittorrent?.client?.host;
  // connect to qbittorrent client
-  const { data: connectionDetails } = useQuery({
+
    queryKey: [],
    queryFn: async () =>
      await axios({
        url: "http://localhost:3060/api/qbittorrent/connect",
        method: "POST",
        data: hostDetails,
      }),
    enabled: !!hostDetails,
  });
  // get qbittorrent client info
  const { data: qbittorrentClientInfo } = useQuery({
    queryKey: ["qbittorrentClientInfo"],
@@ -33,9 +25,7 @@ export const QbittorrentConnectionForm = (): ReactElement => {
        url: "http://localhost:3060/api/qbittorrent/getClientInfo",
        method: "GET",
      }),
    enabled: !!connectionDetails,
  });
  console.log(qbittorrentClientInfo?.data);
  // Update action using a mutation
  const { mutate } = useMutation({
    mutationFn: async (values) =>
@@ -44,6 +34,11 @@ export const QbittorrentConnectionForm = (): ReactElement => {
        method: "POST",
        data: { settingsPayload: values, settingsKey: "bittorrent" },
      }),
    onSuccess: () => {
      queryClient.invalidateQueries({
        queryKey: ["settings", "qbittorrentClientInfo"],
      });
    },
  });
  if (isError)
@@ -61,9 +56,24 @@ export const QbittorrentConnectionForm = (): ReactElement => {
          submitHandler={mutate}
        />
-        <pre className="mt-5">
+        <span className="flex items-center mt-10 mb-4">
-          {JSON.stringify(qbittorrentClientInfo?.data, null, 4)}
+          <span className="text-xl text-slate-500 dark:text-slate-200 pr-5">
-        </pre>
+            qBittorrent Client Information
          </span>
          <span className="h-px flex-1 bg-slate-200 dark:bg-slate-400"></span>
        </span>
        <div className="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-slate-400 dark:border-gray-700">
          <span className="inline-flex justify-center rounded-full bg-emerald-100 mb-4 px-2 py-0.5 text-emerald-700">
            <span className="h-5 w-6">
              <i className="icon-[solar--plug-circle-bold] h-5 w-5"></i>
            </span>
            <p className="whitespace-nowrap text-sm">Connected</p>
          </span>
          <pre className="font-hasklig text-sm text-slate-700 dark:text-slate-700">
            {JSON.stringify(qbittorrentClientInfo?.data, null, 4)}
          </pre>
        </div>
      </>
    );
  }
--- a/src/client/components/Settings/Settings.tsx
+++ b/src/client/components/Settings/Settings.tsx
@@ -3,6 +3,7 @@ import { AirDCPPSettingsForm } from "./AirDCPPSettings/AirDCPPSettingsForm";
 import { AirDCPPHubsForm } from "./AirDCPPSettings/AirDCPPHubsForm";
 import { QbittorrentConnectionForm } from "./QbittorrentSettings/QbittorrentConnectionForm";
 import { SystemSettingsForm } from "./SystemSettings/SystemSettingsForm";
 import ProwlarrSettingsForm from "./ProwlarrSettings/ProwlarrSettingsForm";
 import { ServiceStatuses } from "../ServiceStatuses/ServiceStatuses";
 import settingsObject from "../../constants/settings/settingsMenu.json";
 import { isUndefined, map } from "lodash";
@@ -11,10 +12,15 @@ interface ISettingsProps {}
 export const Settings = (props: ISettingsProps): ReactElement => {
  const [active, setActive] = useState("gen-db");
  console.log(active);
  const settingsContent = [
    {
      id: "adc-hubs",
-      content: <div key="adc-hubs">{/* <AirDCPPHubsForm /> */}</div>,
+      content: (
        <div key="adc-hubs">
          <AirDCPPHubsForm />
        </div>
      ),
    },
    {
      id: "adc-connection",
@@ -32,81 +38,116 @@ export const Settings = (props: ISettingsProps): ReactElement => {
        </div>
      ),
    },
    {
      id: "prwlr-connection",
      content: (
        <>
          <ProwlarrSettingsForm />
        </>
      ),
    },
    {
      id: "core-service",
      content: <>a</>,
    },
    {
      id: "flushdb",
-      content: <div key="flushdb">{/* <SystemSettingsForm /> */}</div>,
+      content: (
        <div key="flushdb">
          <SystemSettingsForm />
        </div>
      ),
    },
  ];
  return (
-    <section className="container">
+    <div>
-      <div className="columns">
+      <section>
-        <div className="section column is-one-quarter">
+        <header className="bg-slate-200 dark:bg-slate-500">
-          <h1 className="title">Settings</h1>
+          <div className="mx-auto max-w-screen-xl px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
-          <aside className="menu">
+            <div className="sm:flex sm:items-center sm:justify-between">
-            {map(settingsObject, (settingObject, idx) => {
+              <div className="text-center sm:text-left">
-              return (
+                <h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
-                <div key={idx}>
+                  Settings
-                  <p className="menu-label">{settingObject.category}</p>
+                </h1>
                  {/* First level children */}
                  {!isUndefined(settingObject.children) ? (
                    <ul className="menu-list" key={settingObject.id}>
                      {map(settingObject.children, (item, idx) => {
                        return (
                          <li key={idx}>
                            <a
                              className={
                                item.id.toString() === active ? "is-active" : ""
                              }
                              onClick={() => setActive(item.id.toString())}
                            >
                              {item.displayName}
                            </a>
                            {/* Second level children */}
                            {!isUndefined(item.children) ? (
                              <ul>
                                {map(item.children, (item, idx) => (
                                  <li key={item.id}>
                                    <a
                                      className={
                                        item.id.toString() === active
                                          ? "is-active"
                                          : ""
                                      }
                                      onClick={() =>
                                        setActive(item.id.toString())
                                      }
                                    >
                                      {item.displayName}
                                    </a>
                                  </li>
                                ))}
                              </ul>
                            ) : null}
                          </li>
                        );
                      })}
                    </ul>
                  ) : null}
                </div>
              );
            })}
          </aside>
        </div>
-        {/* content for settings */}
+                <p className="mt-1.5 text-sm text-gray-500 dark:text-white">
-        <div className="section column is-half mt-6">
+                  Import comics into the ThreeTwo library.
-          <div className="content">
+                </p>
-            {map(settingsContent, ({ id, content }) =>
+              </div>
-              active === id ? content : null,
+            </div>
-            )}
+          </div>
        </header>
        <div className="flex flex-row">
          <div className="inset-y-0 w-80 dark:bg-gray-800 bg-slate-300 text-white overflow-y-auto">
            <aside className="px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
              {map(settingsObject, (settingObject, idx) => {
                return (
                  <div
                    className="w-64 py-2 text-slate-700 dark:text-slate-400"
                    key={idx}
                  >
                    <h3 className="text-l pb-2">
                      {settingObject.category.toUpperCase()}
                    </h3>
                    {/* First level children */}
                    {!isUndefined(settingObject.children) ? (
                      <ul key={settingObject.id}>
                        {map(settingObject.children, (item, idx) => {
                          return (
                            <li key={idx} className="mb-2">
                              <a
                                className={
                                  item.id.toString() === active
                                    ? "is-active flex items-center"
                                    : "flex items-center"
                                }
                                onClick={() => setActive(item.id.toString())}
                              >
                                {item.displayName}
                              </a>
                              {/* Second level children */}
                              {!isUndefined(item.children) ? (
                                <ul className="pl-4 mt-2">
                                  {map(item.children, (item, idx) => (
                                    <li key={item.id} className="mb-2">
                                      <a
                                        className={
                                          item.id.toString() === active
                                            ? "is-active flex items-center"
                                            : "flex items-center"
                                        }
                                        onClick={() =>
                                          setActive(item.id.toString())
                                        }
                                      >
                                        {item.displayName}
                                      </a>
                                    </li>
                                  ))}
                                </ul>
                              ) : null}
                            </li>
                          );
                        })}
                      </ul>
                    ) : null}
                  </div>
                );
              })}
            </aside>
          </div>
          {/* content for settings */}
          <div className="flex mx-12">
            <div className="">
              {map(settingsContent, ({ id, content }) =>
                active === id ? content : null,
              )}
            </div>
          </div>
        </div>
-      </div>
+      </section>
-    </section>
+    </div>
  );
 };
--- a/src/client/components/Settings/SystemSettings/SystemSettingsForm.tsx
+++ b/src/client/components/Settings/SystemSettings/SystemSettingsForm.tsx
@@ -1,15 +1,16 @@
-import React, { ReactElement, useCallback } from "react";
+import React, { ReactElement } from "react";
-import { flushDb } from "../../../actions/settings.actions";
+import { useMutation } from "@tanstack/react-query";
-import { useDispatch, useSelector } from "react-redux";
+import axios from "axios";
 export const SystemSettingsForm = (): ReactElement => {
-  const dispatch = useDispatch();
+  const { mutate: flushDb, isLoading } = useMutation({
-  const isSettingsCallInProgress = useSelector(
+    mutationFn: async () => {
-    (state: RootState) => state.settings.inProgress,
+      await axios({
-  );
+        url: `http://localhost:3000/api/library/flushDb`,
-  const flushDatabase = useCallback(() => {
+        method: "POST",
-    dispatch(flushDb());
+      });
-  }, []);
+    },
  });
  return (
    <div className="is-clearfix">
@@ -48,11 +49,9 @@ export const SystemSettingsForm = (): ReactElement => {
        <button
          className={
-            isSettingsCallInProgress
+            isLoading ? "button is-danger is-loading" : "button is-danger"
              ? "button is-danger is-loading"
              : "button is-danger"
          }
-          onClick={flushDatabase}
+          onClick={() => flushDb()}
        >
          <span className="icon">
            <i className="fas fa-eraser"></i>
--- a/src/client/components/Volumes/Volumes.tsx
+++ b/src/client/components/Volumes/Volumes.tsx
@@ -1,22 +1,27 @@
 import React, { ReactElement, useEffect, useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { searchIssue } from "../../actions/fileops.actions";
 import Card from "../shared/Carda";
 import T2Table from "../shared/T2Table";
 import ellipsize from "ellipsize";
 import { convert } from "html-to-text";
-import { isUndefined } from "lodash";
+import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
 import { SEARCH_SERVICE_BASE_URI } from "../../constants/endpoints";
 export const Volumes = (props): ReactElement => {
-  const volumes = useSelector((state: RootState) => state.fileOps.volumes);
+  // const volumes = useSelector((state: RootState) => state.fileOps.volumes);
-  const dispatch = useDispatch();
+  const {
-  useEffect(() => {
+    data: volumes,
-    dispatch(
+    isSuccess,
-      searchIssue(
+    isError,
-        {
+    isLoading,
  } = useQuery({
    queryFn: async () =>
      await axios({
        url: `${SEARCH_SERVICE_BASE_URI}/searchIssue`,
        method: "POST",
        data: {
          query: {},
        },
        {
          pagination: {
            size: 25,
            from: 0,
@@ -24,106 +29,57 @@ export const Volumes = (props): ReactElement => {
          type: "volumes",
          trigger: "volumesPage",
        },
-      ),
+      }),
-    );
+    queryKey: ["volumes"],
-  }, []);
+  });
  console.log(volumes);
  const columnData = useMemo(
-    () => [
+    (): any => [
      {
        header: "Volume Details",
        id: "volumeDetails",
        minWidth: 450,
        accessorKey: "_source",
-        cell: (row) => {
+        cell: (row): any => {
          const foo = row.getValue();
          return (
-            <div className="columns">
+            <div className="flex flex-row gap-3 mt-5">
-              <div className="column">
+              <Card
-                <div className="comic-detail issue-metadata">
+                imageUrl={
-                  <dl>
+                  foo.sourcedMetadata.comicvine.volumeInformation.image
-                    <dd>
+                    .small_url
-                      <div className="columns mt-2">
+                }
-                        <div className="">
+                orientation={"cover-only"}
-                          <Card
+                hasDetails={false}
-                            imageUrl={
+              />
-                              foo.sourcedMetadata.comicvine.volumeInformation
+              <div className="dark:bg-[#647587] bg-slate-200 p-3 rounded-lg h-fit">
-                                .image.thumb_url
+                <span className="text-xl mb-1">
-                            }
+                  {foo.sourcedMetadata.comicvine.volumeInformation.name}
-                            orientation={"vertical"}
+                </span>
-                            hasDetails={false}
+                <p>
-                            // cardContainerStyle={{ maxWidth: 200 }}
+                  {ellipsize(
-                          />
+                    convert(
-                        </div>
+                      foo.sourcedMetadata.comicvine.volumeInformation
-                        <div className="column">
+                        .description,
-                          <dl>
+                      {
-                            <dt>
+                        baseElements: {
-                              <h6 className="name has-text-weight-medium mb-1">
+                          selectors: ["p"],
-                                {
+                        },
-                                  foo.sourcedMetadata.comicvine
+                      },
-                                    .volumeInformation.name
+                    ),
-                                }
+                    120,
-                              </h6>
+                  )}
-                            </dt>
+                </p>
                            <dd className="is-size-7">
                              published by{" "}
                              <span className="has-text-weight-semibold">
                                {
                                  foo.sourcedMetadata.comicvine
                                    .volumeInformation.publisher.name
                                }
                              </span>
                            </dd>
                            <dd className="is-size-7">
                              <span>
                                {ellipsize(
                                  convert(
                                    foo.sourcedMetadata.comicvine
                                      .volumeInformation.description,
                                    {
                                      baseElements: {
                                        selectors: ["p"],
                                      },
                                    },
                                  ),
                                  120,
                                )}
                              </span>
                            </dd>
                            <dd className="is-size-7 mt-2">
                              <div className="field is-grouped is-grouped-multiline">
                                <div className="control">
                                  <span className="tags">
                                    <span className="tag is-success is-light has-text-weight-semibold">
                                      Total Issues
                                    </span>
                                    <span className="tag is-success is-light">
                                      {
                                        foo.sourcedMetadata.comicvine
                                          .volumeInformation.count_of_issues
                                      }
                                    </span>
                                  </span>
                                </div>
                              </div>
                            </dd>
                          </dl>
                        </div>
                      </div>
                    </dd>
                  </dl>
                </div>
              </div>
            </div>
          );
        },
      },
      {
-        header: "Download Status",
+        header: "Other Details",
        columns: [
          {
-            header: "Files",
+            header: "Downloads",
            accessorKey: "_source.acquisition.directconnect",
            align: "right",
            cell: (props) => {
@@ -144,12 +100,34 @@ export const Volumes = (props): ReactElement => {
            },
          },
          {
-            header: "Type",
+            header: "Publisher",
-            id: "Air",
+            accessorKey: "_source.sourcedMetadata.comicvine.volumeInformation",
            cell: (props): any => {
              const row = props.getValue();
              return <div className="mt-5 text-md">{row.publisher.name}</div>;
            },
          },
          {
-            header: "Type",
+            header: "Issue Count",
-            id: "dcc",
+            accessorKey:
              "_source.sourcedMetadata.comicvine.volumeInformation.count_of_issues",
            cell: (props): any => {
              const row = props.getValue();
              return (
                <div className="mt-5">
                  {/* issue count */}
                  <span className="inline-flex items-center bg-slate-50 text-slate-800 font-medium px-2.5 py-0.5 rounded-md dark:text-slate-600 dark:bg-slate-400">
                    <span className="pr-1 pt-1">
                      <i className="icon-[solar--documents-minimalistic-bold-duotone] w-6 h-6"></i>
                    </span>
                    <span className="text-lg text-slate-500 dark:text-slate-900">
                      {row}
                    </span>
                  </span>
                </div>
              );
            },
          },
        ],
      },
@@ -157,17 +135,29 @@ export const Volumes = (props): ReactElement => {
    [],
  );
  return (
-    <section className="container">
+    <div>
-      <div className="section">
+      <section className="">
-        <div className="header-area">
+        <header className="bg-slate-200 dark:bg-slate-500">
-          <h1 className="title">Volumes</h1>
+          <div className="mx-auto max-w-screen-xl px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
-        </div>
+            <div className="sm:flex sm:items-center sm:justify-between">
-        {!isUndefined(volumes.hits) && (
+              <div className="text-center sm:text-left">
                <h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
                  Volumes
                </h1>
                <p className="mt-1.5 text-sm text-gray-500 dark:text-white">
                  Browse your collection of volumes.
                </p>
              </div>
            </div>
          </div>
        </header>
        {isSuccess ? (
          <div>
            <div className="library">
              <T2Table
-                sourceData={volumes?.hits}
+                sourceData={volumes?.data.hits.hits}
-                totalPages={volumes.hits.length}
+                totalPages={volumes?.data.hits.hits.length}
                paginationHandlers={{
                  nextPage: () => {},
                  previousPage: () => {},
@@ -176,9 +166,13 @@ export const Volumes = (props): ReactElement => {
              />
            </div>
          </div>
-        )}
+        ) : null}
-      </div>
+        {isError ? (
-    </section>
+          <div>An error was encountered while retrieving volumes</div>
        ) : null}
        {isLoading ? <>Loading...</> : null}
      </section>
    </div>
  );
 };
--- a/src/client/components/WantedComics/WantedComics.tsx
+++ b/src/client/components/WantedComics/WantedComics.tsx
@@ -1,34 +1,37 @@
 import React, { ReactElement, useCallback, useEffect, useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { searchIssue } from "../../actions/fileops.actions";
 import SearchBar from "../Library/SearchBar";
 import T2Table from "../shared/T2Table";
 import { isEmpty, isUndefined } from "lodash";
 import MetadataPanel from "../shared/MetadataPanel";
 import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
 import { SEARCH_SERVICE_BASE_URI } from "../../constants/endpoints";
 export const WantedComics = (props): ReactElement => {
-  const wantedComics = useSelector(
+  const {
-    (state: RootState) => state.fileOps.wantedComics,
+    data: wantedComics,
-  );
+    isSuccess,
-  const dispatch = useDispatch();
+    isFetched,
-  useEffect(() => {
+    isError,
-    dispatch(
+    isLoading,
-      searchIssue(
+  } = useQuery({
-        {
+    queryFn: async () =>
      await axios({
        url: `${SEARCH_SERVICE_BASE_URI}/searchIssue`,
        method: "POST",
        data: {
          query: {},
-        },
+
        {
          pagination: {
            size: 25,
            from: 0,
          },
          type: "wanted",
-          trigger: "wantedComicsPage"
+          trigger: "wantedComicsPage",
        },
-      ),
+      }),
-    );
+    queryKey: ["wantedComics"],
-  }, []);
+    enabled: true,
-
+  });
  const columnData = [
    {
      header: "Comic Information",
@@ -37,8 +40,12 @@ export const WantedComics = (props): ReactElement => {
          header: "Details",
          id: "comicDetails",
          minWidth: 350,
-          accessorFn: data => data,
+          accessorFn: (data) => data,
-          cell: (value) => <MetadataPanel data={value.getValue()} />,
+          cell: (value) => {
            console.log("ASDASd", value);
            const row = value.getValue()._source;
            return row && <MetadataPanel data={row} />;
          },
        },
      ],
    },
@@ -47,10 +54,12 @@ export const WantedComics = (props): ReactElement => {
      columns: [
        {
          header: "Files",
          accessorKey: "acquisition",
          align: "right",
-          cell: props => {
+          accessorKey: "_source.acquisition",
-            const { directconnect: { downloads } } = props.getValue();
+          cell: (props) => {
            const {
              directconnect: { downloads },
            } = props.getValue();
            return (
              <div
                style={{
@@ -60,9 +69,7 @@ export const WantedComics = (props): ReactElement => {
                }}
              >
                {downloads.length > 0 ? (
-                  <span className="tag is-warning">
+                  <span className="tag is-warning">{downloads.length}</span>
                    {downloads.length}
                  </span>
                ) : null}
              </div>
            );
@@ -71,12 +78,18 @@ export const WantedComics = (props): ReactElement => {
        {
          header: "Download Details",
          id: "downloadDetails",
-          accessorKey: "acquisition",
+          accessorKey: "_source.acquisition",
-          cell: data => <ol>
+          cell: (data) => (
-            {data.getValue().directconnect.downloads.map((download, idx) => {
+            <ol>
-              return <li className="is-size-7" key={idx}>{download.name}</li>;
+              {data.getValue().directconnect.downloads.map((download, idx) => {
-            })}
+                return (
-          </ol>
+                  <li className="is-size-7" key={idx}>
                    {download.name}
                  </li>
                );
              })}
            </ol>
          ),
        },
        {
          header: "Type",
@@ -92,26 +105,25 @@ export const WantedComics = (props): ReactElement => {
   * @param {number} pageIndex
   * @param {number} pageSize
   * @returns void
-   *  
+   *
   **/
-  const nextPage = useCallback((pageIndex: number, pageSize: number) => {
+  // const nextPage = useCallback((pageIndex: number, pageSize: number) => {
-    dispatch(
+  //   dispatch(
-      searchIssue(
+  //     searchIssue(
-        {
+  //       {
-          query: {},
+  //         query: {},
-        },
+  //       },
-        {
+  //       {
-          pagination: {
+  //         pagination: {
-            size: pageSize,
+  //           size: pageSize,
-            from: pageSize * pageIndex + 1,
+  //           from: pageSize * pageIndex + 1,
-          },
+  //         },
-          type: "wanted",
+  //         type: "wanted",
-          trigger: "wantedComicsPage",
+  //         trigger: "wantedComicsPage",
-        },
+  //       },
-      ),
+  //     ),
-    );
+  //   );
-  }, []);
+  // }, []);
  /**
   * Pagination control that fetches the previous x (pageSize) items
@@ -120,55 +132,71 @@ export const WantedComics = (props): ReactElement => {
   * @param {number} pageSize
   * @returns void
   **/
-  const previousPage = useCallback((pageIndex: number, pageSize: number) => {
+  // const previousPage = useCallback((pageIndex: number, pageSize: number) => {
-    let from = 0;
+  //   let from = 0;
-    if (pageIndex === 2) {
+  //   if (pageIndex === 2) {
-      from = (pageIndex - 1) * pageSize + 2 - 17;
+  //     from = (pageIndex - 1) * pageSize + 2 - 17;
-    } else {
+  //   } else {
-      from = (pageIndex - 1) * pageSize + 2 - 16;
+  //     from = (pageIndex - 1) * pageSize + 2 - 16;
-    }
+  //   }
-    dispatch(
+  //   dispatch(
-      searchIssue(
+  //     searchIssue(
-        {
+  //       {
-          query: {},
+  //         query: {},
-        },
+  //       },
-        {
+  //       {
-          pagination: {
+  //         pagination: {
-            size: pageSize,
+  //           size: pageSize,
-            from,
+  //           from,
-          },
+  //         },
-          type: "wanted",
+  //         type: "wanted",
-          trigger: "wantedComicsPage"
+  //         trigger: "wantedComicsPage",
-        },
+  //       },
-      ),
+  //     ),
-    );
+  //   );
-  }, []);
+  // }, []);
  return (
-    <section className="container">
+    <div className="">
-      <div className="section">
+      <section className="">
-        <div className="header-area">
+        <header className="bg-slate-200 dark:bg-slate-500">
-          <h1 className="title">Wanted Comics</h1>
+          <div className="mx-auto max-w-screen-xl px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
-        </div>
+            <div className="sm:flex sm:items-center sm:justify-between">
-        {!isEmpty(wantedComics) && (
+              <div className="text-center sm:text-left">
                <h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
                  Wanted Comics
                </h1>
                <p className="mt-1.5 text-sm text-gray-500 dark:text-white">
                  Browse through comics you marked as "wanted."
                </p>
              </div>
            </div>
          </div>
        </header>
        {isSuccess && wantedComics?.data.hits?.hits ? (
          <div>
            <div className="library">
              <T2Table
-                sourceData={wantedComics}
+                sourceData={wantedComics?.data.hits.hits}
-                totalPages={wantedComics.length}
+                totalPages={wantedComics?.data.hits.hits.length}
                columns={columnData}
                paginationHandlers={{
-                  nextPage: nextPage,
+                  nextPage: () => {},
-                  previousPage: previousPage,
+                  previousPage: () => {},
                }}
-              // rowClickHandler={navigateToComicDetail}
+                // rowClickHandler={navigateToComicDetail}
              />
              {/* pagination controls */}
            </div>
          </div>
-        )}
+        ) : null}
-      </div>
+        {isLoading ? <div>Loading...</div> : null}
-    </section>
+        {isError ? (
          <div>An error occurred while retrieving the pull list.</div>
        ) : null}
      </section>
    </div>
  );
 };
--- a/src/client/components/shared/Canvas.tsx
+++ b/src/client/components/shared/Canvas.tsx
@@ -1,8 +1,7 @@
 import React, { useEffect, useRef } from "react";
-export const Canvas = (data) => {
+export const Canvas = ({ data }) => {
-  const { colorHistogramData } = data.data;
+  const { colorHistogramData } = data;
  console.log(data);
  const width = 559;
  const height = 200;
  const pixelRatio = window.devicePixelRatio;
@@ -10,7 +9,11 @@ export const Canvas = (data) => {
  const canvas = useRef(null);
  useEffect(() => {
-    const context = canvas.current.getContext("2d");
+    const context = canvas.current?.getContext("2d");
    if (!context) {
      return;
    }
    context.scale(pixelRatio, pixelRatio);
    const guideHeight = 8;
    const startY = height - guideHeight;
@@ -46,18 +49,24 @@ export const Canvas = (data) => {
      context.stroke();
      // Guide
-      context.strokeStyle = "rgb(" + i + ", " + i + ", " + i + ")";
+      context.strokeStyle = `rgb(${i}, ${i}, ${i})`;
      context.beginPath();
      context.moveTo(x, startY);
      context.lineTo(x, height);
      context.closePath();
      context.stroke();
    }
-  });
+
    // Cleanup function
    return () => {
      // Perform cleanup actions here
    };
  }, [colorHistogramData, pixelRatio]);
  const dw = Math.floor(pixelRatio * width);
  const dh = Math.floor(pixelRatio * height);
  const style = { width, height };
  return <canvas ref={canvas} width={dw} height={dh} style={style} />;
 };
--- a/src/client/components/shared/Carda.tsx
+++ b/src/client/components/shared/Carda.tsx
@@ -4,8 +4,8 @@ import { isEmpty, isNil } from "lodash";
 interface ICardProps {
  orientation: string;
-  imageUrl: string;
+  imageUrl?: string;
-  hasDetails: boolean;
+  hasDetails?: boolean;
  title?: PropTypes.ReactElementLike | null;
  children?: PropTypes.ReactNodeLike;
  borderColorClass?: string;
@@ -80,6 +80,87 @@ const renderCard = (props: ICardProps): ReactElement => {
          </div>
        </div>
      );
    case "vertical-2":
      return (
        <div className="block rounded-md w-64 h-fit shadow-md shadow-white-400 bg-gray-200 dark:bg-slate-500">
          <img
            alt="Home"
            src={props.imageUrl}
            className="rounded-t-md object-cover"
          />
          {props.title ? (
            <div className="px-3 pt-3 mb-2">
              <dd className="text-sm text-slate-500 dark:text-black">
                {props.title}
              </dd>
            </div>
          ) : null}
          {props.hasDetails ? (
            <div className="px-2">
              <>{props.children}</>
            </div>
          ) : null}
        </div>
      );
    case "horizontal-small":
      return (
        <>
          <div className="flex flex-row justify-start align-top gap-3 bg-slate-200 h-fit rounded-md shadow-md shadow-white-400">
            {/* thumbnail */}
            <div className="rounded-md overflow-hidden">
              <img src={props.imageUrl} className="object-cover h-20 w-20" />
            </div>
            {/* details */}
            <div className="w-fit h-fit pl-1 pr-2 py-1">
              <p className="text-sm">{props.title}</p>
            </div>
          </div>
        </>
      );
    case "horizontal-medium":
      return (
        <>
          <div className="flex flex-row items-center align-top gap-3 bg-slate-200 h-fit p-2 rounded-md shadow-md shadow-white-400">
            {/* thumbnail */}
            <div className="rounded-md overflow-hidden">
              <img src={props.imageUrl} />
            </div>
            {/* details */}
            <div className="pl-1 pr-2 py-1">
              <p className="text-sm">{props.title}</p>
              {props.hasDetails && <>{props.children}</>}
            </div>
          </div>
        </>
      );
    case "cover-only":
      return (
        <>
          {/* thumbnail */}
          <div className="rounded-lg shadow-lg overflow-hidden w-fit h-fit">
            <img src={props.imageUrl} />
          </div>
        </>
      );
    case "card-with-info-panel":
      return (
        <>
          <div className="flex flex-row">
            {/* thumbnail */}
            <div className="rounded-md overflow-hidden w-fit h-fit">
              <img src={props.imageUrl} />
            </div>
            {/* myata-dyata */}
          </div>
        </>
      );
    default:
      return <></>;
  }
--- a/src/client/components/shared/ConnectionForm/ConnectionForm.tsx
+++ b/src/client/components/shared/ConnectionForm/ConnectionForm.tsx
@@ -14,91 +14,141 @@ export const ConnectionForm = ({
        onSubmit={submitHandler}
        initialValues={initialData}
        render={({ handleSubmit }) => (
-          <form onSubmit={handleSubmit}>
+          <form onSubmit={handleSubmit} className="mt-10">
-            <h2>{formHeading}</h2>
+            <h2 className="text-xl">{formHeading}</h2>
-            <label className="label">Hostname</label>
+            <article
-            <div className="field has-addons">
+              role="alert"
-              <p className="control">
+              className="mt-4 rounded-lg max-w-screen-md border-s-4 border-blue-500 bg-blue-50 p-4 dark:border-s-4 dark:border-blue-600 dark:bg-blue-300 dark:text-slate-600"
-                <span className="select">
+            >
-                  <Field name="protocol" component="select">
+              <div>
-                    <option>Protocol</option>
+                <p>Configure your AirDC++ client connection here.</p>
-                    <option value="http">http://</option>
+                <p>
-                    <option value="https">https://</option>
+                  Note that you need an instance of AirDC++ already running to
-                  </Field>
+                  use this form to connect to it.
-                </span>
+                </p>
-              </p>
+                <p>
-              <div className="control is-expanded">
+                  See{" "}
-                <Field name="hostname" validate={hostNameValidator}>
+                  <a
-                  {({ input, meta }) => (
+                    className="underline"
                    href="http://airdcpp.net/docs/installation/installation.html"
                  >
                    here
                  </a>{" "}
                  for AirDC++ installation instructions for various platforms.
                </p>
              </div>
            </article>
            <span className="flex items-center mt-6">
              <span className="text-xl text-slate-500 dark:text-slate-200 pr-5">
                Configure Connection
              </span>
              <span className="h-px flex-1 bg-slate-200 dark:bg-slate-400"></span>
            </span>
            <div className="flex flex-row mt-4">
              <div className="relative">
                {/* protocol */}
                <label className="block py-1">Protocol</label>
                <Field
                  name="protocol"
                  component="select"
                  className="appearance-none dark:bg-slate-400 bg-slate-100 h-10 rounded-md border-none text-gray-700 dark:text-slate-200 py-1 pr-7 pl-3 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
                >
                  <option>Protocol</option>
                  <option value="http">http://</option>
                  <option value="https">https://</option>
                </Field>
                <div className="absolute h-7 w-7 right-0 px-1 top-11 pointer-events-none">
                  <i className="icon-[solar--alt-arrow-down-bold]" />
                </div>
              </div>
              {/* hostname */}
              <Field name="hostname" validate={hostNameValidator}>
                {({ input, meta }) => (
                  <div className="flex flex-col">
                    <label className="block px-2 py-1">Hostname</label>
                    <input
                      {...input}
                      type="text"
                      placeholder="Hostname"
                      className="ml-2 dark:bg-slate-400 bg-slate-100 py-2 px-2 rounded-md border-gray-300 h-10 dark:text-slate-200 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
                    />
                    <div>
                      <input
                        {...input}
                        type="text"
                        placeholder="hostname"
                        className="input"
                      />
                      {meta.error && meta.touched && (
-                        <span className="is-size-7 has-text-danger">
+                        <span className="text-sm text-red-400 px-2">
                          {meta.error}
                        </span>
                      )}
                    </div>
-                  )}
+                  </div>
-                </Field>
+                )}
-              </div>
+              </Field>
-              <p className="control">
+
              {/* port */}
              <div className="flex flex-col">
                <label className="block px-2 py-1">Port</label>
                <Field
                  name="port"
                  component="input"
-                  className="input"
+                  className="ml-2 dark:bg-slate-400 bg-slate-100 px-2 block h-10 rounded-md sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
-                  placeholder="port"
+                  placeholder="Port"
                />
-              </p>
+              </div>
            </div>
-            <div className="field">
+
-              <label className="label">Credentials</label>
+            <div className="flex flex-row mt-5">
-              <div className="field-body">
+              <div>
-                <div className="field">
+                <label className="block py-1">Username</label>
-                  <p className="control is-expanded has-icons-left">
+                <div className="relative">
-                    <Field
+                  <Field
-                      name="username"
+                    name="username"
-                      component="input"
+                    component="input"
-                      className="input"
+                    className="h-10 dark:bg-slate-500 bg-slate-200 rounded-md text-gray-700 dark:text-slate-200 py-1 px-10 mr-5 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
-                      placeholder="Username"
+                    placeholder="Username"
-                    />
+                  />
-                    <span className="icon is-small is-left">
+                  <span className="absolute h-6 w-6 left-2 top-2 inset-y-0 flex items-center px-0 pointer-events-none">
-                      <i className="fa-solid fa-user-ninja"></i>
+                    <i className="icon-[solar--user-bold-duotone] h-6 w-6 dark:text-slate-200" />
-                    </span>
+                  </span>
                  </p>
                </div>
-                <div className="field">
+              </div>
-                  <p className="control is-expanded has-icons-left has-icons-right">
+              <div>
                <div>
                  <label className="block py-1">Password</label>
                  <div className="relative">
                    <Field
                      name="password"
                      component="input"
                      type="password"
-                      className="input"
+                      className="h-10 dark:bg-slate-500 bg-slate-200 rounded-md text-gray-700 dark:text-slate-200 py-1 px-10 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
                      placeholder="Password"
                    />
-                    <span className="icon is-small is-left">
+                    <span className="absolute left-2 top-2 inset-y-0 flex items-center px-0 pointer-events-none h-6 w-6">
-                      <i className="fa-solid fa-lock"></i>
+                      <i className="icon-[solar--lock-password-bold-duotone] h-6 w-6 dark:text-slate-200" />
                    </span>
-                  </p>
+                  </div>
                </div>
              </div>
            </div>
-            <div className="field is-grouped">
+            <div className="flex flex-row gap-2">
-              <p className="control">
+              <button
-                <button type="submit" className="button is-primary">
+                className="flex space-x-1 sm:mt-5 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-4 py-2 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
                type="submit"
              >
                <span className="text-md">
                  {!isEmpty(initialData) ? "Update" : "Save"}
-                </button>
+                </span>
-              </p>
+                <span className="w-6 h-6">
                  <i className="h-6 w-6 icon-[solar--diskette-bold-duotone]"></i>
                </span>
              </button>
-              <p className="control">
+              <button
-                <button type="submit" className="button is-danger">
+                type="submit"
-                  {!isEmpty(initialData) && "Delete"}
+                className="flex space-x-1 sm:mt-5 sm:flex-row sm:items-center rounded-lg border border-red-400 dark:border-red-200 bg-red-200 px-4 py-2 text-gray-500 hover:bg-transparent hover:text-red-600 focus:outline-none focus:ring active:text-indigo-500"
-                </button>
+              >
-              </p>
+                {!isEmpty(initialData) && "Delete"}
              </button>
            </div>
          </form>
        )}
--- a/src/client/components/shared/DatePicker.tsx
+++ b/src/client/components/shared/DatePicker.tsx
@@ -0,0 +1,127 @@
 import React, { ChangeEventHandler, useRef, useState } from "react";
 import { format, isValid, parse, parseISO } from "date-fns";
 import FocusTrap from "focus-trap-react";
 import { DayPicker, SelectSingleEventHandler } from "react-day-picker";
 import { usePopper } from "react-popper";
 export const DatePickerDialog = (props) => {
  const { setter, apiAction } = props;
  const [selected, setSelected] = useState<Date>();
  const [isPopperOpen, setIsPopperOpen] = useState(false);
  const popperRef = useRef<HTMLDivElement>(null);
  const buttonRef = useRef<HTMLButtonElement>(null);
  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
    null,
  );
  const customStyles = {
    container: {
      // Style for the entire container
      border: "1px solid #ccc",
      borderRadius: "4px",
      padding: "10px",
      width: "300px",
    },
    day: {
      // Style for individual days
      padding: "5px",
      margin: "2px",
    },
    selected: {
      // Style for selected days
      backgroundColor: "#007bff",
      color: "#fff",
    },
    disabled: {
      // Style for disabled days
      color: "#ccc",
    },
    today: {
      // Style for today's date
      backgroundColor: "#f0f0f0",
    },
    dayWrapper: {
      // Style for the wrapper around each day
      display: "inline-block",
    },
  };
  const popper = usePopper(popperRef.current, popperElement, {
    placement: "bottom-start",
  });
  const closePopper = () => {
    setIsPopperOpen(false);
    buttonRef?.current?.focus();
  };
  const handleButtonClick = () => {
    setIsPopperOpen(true);
  };
  const handleDaySelect: SelectSingleEventHandler = (date) => {
    setSelected(date);
    if (date) {
      setter(format(date, "M-dd-yyyy"));
      apiAction();
      closePopper();
    } else {
      setter("");
    }
  };
  return (
    <div>
      <div ref={popperRef}>
        <button
          ref={buttonRef}
          type="button"
          aria-label="Pick a date"
          onClick={handleButtonClick}
          className="flex space-x-1 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-2 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
        >
          <span className="pr-1 pt-0.5 h-8">
            <span className="icon-[solar--calendar-date-bold-duotone] w-6 h-6"></span>
          </span>
          Pick a date
        </button>
      </div>
      {isPopperOpen && (
        <FocusTrap
          active
          focusTrapOptions={{
            initialFocus: false,
            allowOutsideClick: true,
            clickOutsideDeactivates: true,
            onDeactivate: closePopper,
            fallbackFocus: buttonRef.current || undefined,
          }}
        >
          <div
            tabIndex={-1}
            style={popper.styles.popper}
            className="bg-slate-200 mt-3 p-2 rounded-lg z-50"
            {...popper.attributes.popper}
            ref={setPopperElement}
            role="dialog"
            aria-label="DayPicker calendar"
          >
            <DayPicker
              initialFocus={isPopperOpen}
              mode="single"
              defaultMonth={selected}
              selected={selected}
              onSelect={handleDaySelect}
              styles={customStyles}
            />
          </div>
        </FocusTrap>
      )}
    </div>
  );
 };
 export default DatePickerDialog;
--- a/src/client/components/shared/Draggable/DnD.tsx
+++ b/src/client/components/shared/Draggable/DnD.tsx
@@ -64,7 +64,7 @@ export const DnD = (data) => {
                  className="mt-2 mb-2"
                  onClick={(e) => data.onClickHandler(url)}
                >
-                  <div className="box p-2 pl-3 control-palette">
+                  <div className="box p-2 control-palette">
                    <span className="tag is-warning mr-2">{index}</span>
                    <span className="icon is-small mr-2">
                      <i className="fa-solid fa-vial"></i>
--- a/src/client/components/shared/Draggable/Grid.tsx
+++ b/src/client/components/shared/Draggable/Grid.tsx
@@ -8,7 +8,6 @@ export function Grid({ children, columns }) {
        gridTemplateColumns: `repeat(${columns}, 200px)`,
        columnGap: 1,
        gridGap: 10,
        padding: 10,
      }}
    >
      {children}
--- a/src/client/components/shared/ErrorPage.tsx
+++ b/src/client/components/shared/ErrorPage.tsx
@@ -0,0 +1,5 @@
 import React from "react";
 export const ErrorPage = () => {
  return <>Error has been encountered.</>;
 };
--- a/src/client/components/shared/Header.tsx
+++ b/src/client/components/shared/Header.tsx
@@ -1,19 +1,32 @@
 import React, { ReactElement } from "react";
 import { Link } from "react-router-dom";
 type IHeaderProps = {
  headerContent: string;
-  subHeaderContent: string;
+  subHeaderContent: ReactElement;
  iconClassNames: string;
  link?: string;
 };
 export const Header = (props: IHeaderProps): ReactElement => {
  return (
-    <>
+    <div className="mt-7">
-      <h4 className="title is-4">
+      <div className="">
-        <i className={props.iconClassNames}></i> {props.headerContent}
+        {props.link ? (
-      </h4>
+          <Link to={props.link}>
-      <p className="subtitle is-7">{props.subHeaderContent}</p>
+            <span className="text-xl">
-    </>
+              <span className="underline">
                {props.headerContent}{" "}
                <i className="icon-[solar--arrow-right-up-outline] w-4 h-4" />
              </span>
            </span>
          </Link>
        ) : (
          <div className="text-xl">{props.headerContent}</div>
        )}
        <p className="">{props.subHeaderContent}</p>
      </div>
    </div>
  );
 };
--- a/src/client/components/shared/MetadataPanel.tsx
+++ b/src/client/components/shared/MetadataPanel.tsx
@@ -31,61 +31,62 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
    {
      name: "rawFileDetails",
      content: () => (
-        <dl>
+        <dl className="dark:bg-[#647587] bg-slate-200 p-3 rounded-lg">
          <dt>
-            <h6
+            <p className="text-lg">{issueName}</p>
              className="name has-text-weight-medium mb-1"
              style={props.titleStyle}
            >
              {issueName}
            </h6>
          </dt>
-          <dd className="is-size-7">
+          <dd className="text-sm">
-            Is a part of{" "}
+            is a part of{" "}
-            <span className="has-text-weight-semibold">
+            <span className="underline">
              {inferredMetadata.issue.name}
              <i className="icon-[solar--arrow-right-up-outline] w-4 h-4" />
            </span>
          </dd>
-          <dd className="is-size-7 mt-2">
+          {/* Issue number */}
-            <div className="field is-grouped is-grouped-multiline">
+          {inferredMetadata.issue.number && (
-              <div className="control">
+            <dd className="my-2">
-                <span className="tags">
+              <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
+                <span className="pr-1 pt-1">
-                    className="tag is-success is-light has-text-weight-semibold"
+                  <i className="icon-[solar--hashtag-outline] w-3.5 h-3.5"></i>
                    style={props.tagsStyle}
                  >
                    {rawFileDetails.extension}
                  </span>
                  <span
                    className="tag is-success is-light has-text-weight-semibold"
                    style={props.tagsStyle}
                  >
                    {rawFileDetails.mimeType}
                  </span>
                  <span
                    className="tag is-success is-light"
                    style={props.tagsStyle}
                  >
                    {prettyBytes(rawFileDetails.fileSize)}
                  </span>
                </span>
-              </div>
+                <span className="text-md text-slate-900 dark:text-slate-900">
-              <div className="control">
+                  {inferredMetadata.issue.number}
-                {inferredMetadata.issue.number && (
+                </span>
-                  <div className="tags has-addons">
+              </span>
-                    <span className="tag is-light" style={props.tagsStyle}>
+            </dd>
-                      Issue #
+          )}
-                    </span>
+          <dd className="flex flex-row gap-2 w-max">
-                    <span className="tag is-warning" style={props.tagsStyle}>
+            {/* File extension */}
-                      {inferredMetadata.issue.number}
+            <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>
+              <span className="pr-1 pt-1">
-                  </div>
+                <i className="icon-[solar--zip-file-bold-duotone] w-5 h-5"></i>
-                )}
+              </span>
              </div>
-            </div>
+              <span className="text-md text-slate-500 dark:text-slate-900">
-            
+                {rawFileDetails.mimeType}
              </span>
            </span>
            {/* size */}
            <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--mirror-right-bold-duotone] w-5 h-5"></i>
              </span>
              <span className="text-md text-slate-500 dark:text-slate-900">
                {prettyBytes(rawFileDetails.fileSize)}
              </span>
            </span>
            {/* Uncompressed version available? */}
            {rawFileDetails.archive?.uncompressed && (
              <span className="inline-flex 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--bookmark-bold-duotone] w-3.5 h-3.5"></i>
                </span>
              </span>
            )}
          </dd>
        </dl>
      ),
@@ -113,7 +114,6 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
                </span>
              </span>
            </dd>
            <dd className="is-size-7">
              <span>
                {ellipsize(
@@ -126,42 +126,13 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
                )}
              </span>
            </dd>
            <dd className="is-size-7 mt-2">
-              <div className="field is-grouped is-grouped-multiline">
+              <span className="my-3 mx-2">
-                <div className="control">
+                {comicvine.volumeInformation.start_year}
-                  <span className="tags">
+              </span>
-                    <span
+              {comicvine.volumeInformation.count_of_issues}
-                      className="tag is-success is-light has-text-weight-semibold"
+              ComicVine ID
-                      style={props.tagsStyle}
+              {comicvine.id}
                    >
                      {comicvine.volumeInformation.start_year}
                    </span>
                    <span
                      className="tag is-success is-light"
                      style={props.tagsStyle}
                    >
                      {comicvine.volumeInformation.count_of_issues}
                    </span>
                  </span>
                </div>
                <div className="control">
                  <div className="tags has-addons">
                    <span
                      className="tag is-primary is-light"
                      style={props.tagsStyle}
                    >
                      ComicVine ID
                    </span>
                    <span
                      className="tag is-info is-light"
                      style={props.tagsStyle}
                    >
                      {comicvine.id}
                    </span>
                  </div>
                </div>
              </div>
            </dd>
          </dl>
        ),
@@ -208,25 +179,14 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
  });
  return (
-    <div className="column" style={props.containerStyle}>
+    <div className="flex gap-5 my-3">
-      <div className="comic-detail issue-metadata">
+      <Card
-        <dl>
+        imageUrl={url}
-          <dd>
+        orientation={"cover-only"}
-            <div className="columns mt-2">
+        hasDetails={false}
-              <div className="column is-3">
+        imageStyle={props.imageStyle}
-                <Card
+      />
-                  imageUrl={url}
+      <div>{metadataPanel.content()}</div>
                  orientation={"vertical"}
                  hasDetails={false}
                  imageStyle={props.imageStyle}
                // cardContainerStyle={{ maxWidth: 200 }}
                />
              </div>
              <div className="column">{metadataPanel.content()}</div>
            </div>
          </dd>
        </dl>
      </div>
    </div>
  );
 };
--- a/src/client/components/shared/Navbar.tsx
+++ b/src/client/components/shared/Navbar.tsx
@@ -1,15 +1,46 @@
-import React, { useContext } from "react";
+import React from "react";
 import { SearchBar } from "../GlobalSearchBar/SearchBar";
 import { DownloadProgressTick } from "../ComicDetail/DownloadProgressTick";
 import { Link } from "react-router-dom";
-import { isUndefined } from "lodash";
+import { isEmpty, isNil, isUndefined } from "lodash";
 import { format, fromUnixTime } from "date-fns";
 import { useStore } from "../../store/index";
 import { useShallow } from "zustand/react/shallow";
 const Navbar: React.FunctionComponent = (props) => {
  const {
    airDCPPSocketConnected,
    airDCPPDisconnectionInfo,
    airDCPPSessionInformation,
    airDCPPDownloadTick,
    importJobQueue,
  } = useStore(
    useShallow((state) => ({
      airDCPPSocketConnected: state.airDCPPSocketConnected,
      airDCPPDisconnectionInfo: state.airDCPPDisconnectionInfo,
      airDCPPSessionInformation: state.airDCPPSessionInformation,
      airDCPPDownloadTick: state.airDCPPDownloadTick,
      importJobQueue: state.importJobQueue,
    })),
  );
  //   const downloadProgressTick = useSelector(
  //     (state: RootState) => state.airdcpp.downloadProgressData,
  //   );
  //
  //   const airDCPPSocketConnectionStatus = useSelector(
  //     (state: RootState) => state.airdcpp.isAirDCPPSocketConnected,
  //   );
  //   const airDCPPSessionInfo = useSelector(
  //     (state: RootState) => state.airdcpp.airDCPPSessionInfo,
  //   );
  //   const socketDisconnectionReason = useSelector(
  //     (state: RootState) => state.airdcpp.socketDisconnectionReason,
  //   );
  return (
    <nav className="navbar is-fixed-top">
      <div className="navbar-brand">
-        <Link to="/" className="navbar-item">
+        <Link to="/dashboard" className="navbar-item">
          <img
            src="/src/client/assets/img/threetwo.svg"
            alt="ThreeTwo! A comic book curator"
@@ -55,6 +86,8 @@ const Navbar: React.FunctionComponent = (props) => {
            Downloads
          </Link>
          {/* <SearchBar /> */}
          <Link to="/search" className="navbar-item">
            Search ComicVine
          </Link>
@@ -63,7 +96,102 @@ const Navbar: React.FunctionComponent = (props) => {
        <div className="navbar-end">
          <a className="navbar-item is-hidden-desktop-only"></a>
          <div className="navbar-item has-dropdown is-hoverable">
            <a className="navbar-link is-arrowless">
              <i className="fa-solid fa-download"></i>
              {!isEmpty(airDCPPDownloadTick) && (
                <div className="pulsating-circle"></div>
              )}
            </a>
            {!isEmpty(airDCPPDownloadTick) ? (
              <div className="navbar-dropdown is-right is-boxed">
                <a className="navbar-item">
                  <DownloadProgressTick data={airDCPPDownloadTick} />
                </a>
              </div>
            ) : null}
          </div>
          {!isUndefined(importJobQueue.status) &&
          location.hash !== "#/import" ? (
            <div className="navbar-item has-dropdown is-hoverable">
              <a className="navbar-link is-arrowless">
                <i className="fa-solid fa-file-import has-text-warning-dark"></i>
              </a>
              <div className="navbar-dropdown is-right is-boxed">
                <a className="navbar-item">
                  <ul>
                    {importJobQueue.successfulJobCount > 0 ? (
                      <li className="mb-2">
                        <span className="tag is-success mr-2">
                          {importJobQueue.successfulJobCount}
                        </span>
                        imported.
                      </li>
                    ) : null}
                    {importJobQueue.failedJobCount > 0 ? (
                      <li>
                        <span className="tag is-danger mr-2">
                          {importJobQueue.failedJobCount}
                        </span>
                        failed to import.
                      </li>
                    ) : null}
                  </ul>
                </a>
              </div>
            </div>
          ) : null}
          {/* AirDC++ socket connection status */}
          <div className="navbar-item has-dropdown is-hoverable">
            {!isUndefined(airDCPPSessionInformation.user) ? (
              <>
                <a className="navbar-link is-arrowless has-text-success">
                  <i className="fa-solid fa-bolt"></i>
                </a>
                <div className="navbar-dropdown pr-2 pl-2 is-right airdcpp-status is-boxed">
                  {/* AirDC++ Session Information */}
                  <p>
                    Last login was{" "}
                    <span className="tag">
                      {format(
                        fromUnixTime(
                          airDCPPSessionInformation?.user.last_login,
                        ),
                        "dd MMMM, yyyy",
                      )}
                    </span>
                  </p>
                  <hr className="navbar-divider" />
                  <p>
                    <span className="tag has-text-success">
                      {airDCPPSessionInformation.user.username}
                    </span>
                    connected to{" "}
                    <span className="tag has-text-success">
                      {airDCPPSessionInformation.system_info.client_version}
                    </span>{" "}
                    with session ID{" "}
                    <span className="tag has-text-success">
                      {airDCPPSessionInformation.session_id}
                    </span>
                  </p>
                </div>
              </>
            ) : (
              <>
                <a className="navbar-link is-arrowless has-text-danger">
                  <i className="fa-solid fa-bolt"></i>
                </a>
                <div className="navbar-dropdown pr-2 pl-2 is-right is-boxed">
                  <pre>{JSON.stringify(airDCPPDisconnectionInfo, null, 2)}</pre>
                </div>
              </>
            )}
          </div>
          <div className="navbar-item has-dropdown is-hoverable is-mega">
            <div className="navbar-link flex">Blog</div>
--- a/src/client/components/shared/Navbar2.tsx
+++ b/src/client/components/shared/Navbar2.tsx
@@ -0,0 +1,129 @@
 import React, { ReactElement, useState } from "react";
 import { Link } from "react-router-dom";
 import { useDarkMode } from "../../hooks/useDarkMode";
 export const Navbar2 = (): ReactElement => {
  const [colorTheme, setTheme] = useDarkMode();
  const [darkMode, setDarkMode] = useState(false);
  const toggleDarkMode = (checked) => {
    setTheme(colorTheme);
    setDarkMode(!darkMode);
  };
  return (
    <header className="bg-white dark:bg-gray-900 gap-8 px-5 py-5 h-18 border-b-2 border-gray-300 dark:border-slate-200">
      {/* Logo */}
      <div className="mx-auto flex">
        <img src="/src/client/assets/img/threetwo.png" alt="ThreeTwo!" />
        {/* Main Navigation */}
        <div className="flex flex-1 items-center justify-end md:justify-between">
          <nav
            aria-label="ThreeTwo Main Navigation"
            className="hidden md:block"
          >
            <ul className="flex items-center gap-6 text-md">
              <li>
                <Link
                  to="/dashboard"
                  className="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
                >
                  Dashboard
                </Link>
              </li>
              <li>
                <Link
                  to="/import"
                  className="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
                >
                  Import
                </Link>
              </li>
              <li>
                <Link
                  to="/library"
                  className="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
                >
                  Library
                </Link>
              </li>
              <li>
                <Link
                  to="/volumes"
                  className="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
                >
                  Volumes
                </Link>
              </li>
              <li>
                <a
                  className="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
                  href="/"
                >
                  Downloads
                </a>
              </li>
              <li>
                <Link
                  className="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
                  to="/search"
                >
                  Comicvine Search
                </Link>
              </li>
            </ul>
          </nav>
          {/* Right-most Nav */}
          <div className="flex items-center gap-4">
            <ul className="flex items-center gap-6 text-md">
              {/* Settings Icon and text */}
              <li>
                <Link
                  to="/settings"
                  className="flex items-center space-x-1 text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
                >
                  <span className="w-5 h-5">
                    <i className="icon-[solar--settings-outline] h-5 w-5"></i>
                  </span>
                  <span>Settings</span>
                </Link>
              </li>
              <li>
                {/* Light/Dark Mode toggle */}
                <div className="flex items-center space-x-2">
                  <span className="text-gray-600 dark:text-white">Light</span>
                  <label
                    htmlFor="toggle"
                    className="relative inline-flex items-center"
                  >
                    <input
                      type="checkbox"
                      id="toggle"
                      className="sr-only"
                      checked={darkMode}
                      onChange={toggleDarkMode}
                    />
                    <span className="bg-gray-300 w-10 h-6 rounded-full"></span>
                    <span
                      className={`bg-white w-4 h-4 rounded-full absolute left-1 top-1 transition-transform duration-300 ease-in-out ${
                        darkMode ? "translate-x-4" : ""
                      }`}
                    ></span>
                  </label>
                  <span className="text-gray-600 dark:text-white">Dark</span>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </header>
  );
 };
--- a/src/client/components/shared/T2Table.tsx
+++ b/src/client/components/shared/T2Table.tsx
@@ -1,7 +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,
  flexRender,
@@ -12,26 +10,30 @@ import {
 } from "@tanstack/react-table";
 export const T2Table = (tableOptions): ReactElement => {
-  const { sourceData, columns, paginationHandlers: { nextPage, previousPage }, totalPages, rowClickHandler } =
+  const {
-    tableOptions;
+    sourceData,
    columns,
    paginationHandlers: { nextPage, previousPage },
    totalPages,
    rowClickHandler,
  } = tableOptions;
-  const [{ pageIndex, pageSize }, setPagination] =
+  const [{ pageIndex, pageSize }, setPagination] = useState<PaginationState>({
-    useState<PaginationState>({
+    pageIndex: 1,
-      pageIndex: 1,
+    pageSize: 15,
-      pageSize: 15,
+  });
    });
  const pagination = useMemo(
    () => ({
      pageIndex,
      pageSize,
    }),
-    [pageIndex, pageSize]
+    [pageIndex, pageSize],
  );
  /**
-   * Pagination control to move forward one page 
+   * Pagination control to move forward one page
-   * @returns void 
+   * @returns void
   */
  const goToNextPage = () => {
    setPagination({
@@ -39,10 +41,10 @@ export const T2Table = (tableOptions): ReactElement => {
      pageSize,
    });
    nextPage(pageIndex, pageSize);
-  }
+  };
  /**
-   * Pagination control to move backward one page 
+   * Pagination control to move backward one page
   * @returns void
   **/
  const goToPreviousPage = () => {
@@ -51,7 +53,7 @@ export const T2Table = (tableOptions): ReactElement => {
      pageSize,
    });
    previousPage(pageIndex, pageSize);
-  }
+  };
  const table = useReactTable({
    data: sourceData,
@@ -66,62 +68,51 @@ export const T2Table = (tableOptions): ReactElement => {
  });
  return (
-    <>
+    <div className="container max-w-fit mx-14">
-      <div className="columns table-controls">
+      <div>
-        {/* Search bar */}
+        <div className="flex flex-row gap-2 justify-between mt-7">
-        <div className="column is-half">
+          {/* Search bar */}
-          <SearchBar />
+          {tableOptions.children}
          {/* pagination controls */}
          <div>
            Page {pageIndex} of {Math.ceil(totalPages / pageSize)}
            <p>{totalPages} comics in all</p>
            {/* Prev/Next buttons */}
            <div className="inline-flex flex-row mt-4 mb-4">
              <button
                onClick={() => goToPreviousPage()}
                disabled={pageIndex === 1}
                className="dark:bg-slate-500 bg-slate-400 rounded-l border-slate-600 border-r pt-2 px-2"
              >
                <i className="icon-[solar--arrow-left-linear] h-6 w-6"></i>
              </button>
              <button
                className="dark:bg-slate-500 bg-slate-400 rounded-r pt-2 px-2"
                onClick={() => goToNextPage()}
                disabled={pageIndex > Math.floor(totalPages / pageSize)}
              >
                <i className="icon-[solar--arrow-right-linear] h-6 w-6"></i>
              </button>
            </div>
          </div>
        </div>
        {/* pagination controls */}
        <nav className="pagination columns">
          <div className="mr-4 has-text-weight-semibold has-text-left">
            <p className="is-size-5">Page {pageIndex} of {Math.ceil(totalPages / pageSize)}</p>
            {/* <p>{totalPages} comics in all</p> */}
          </div>
          <div className="field has-addons">
            <div className="control">
              <div className="button" onClick={() => goToPreviousPage()}> <i className="fas fa-chevron-left"></i></div>
            </div>
            <div className="control">
              <div className="button" onClick={() => goToNextPage()}> <i className="fas fa-chevron-right"></i> </div>
            </div>
            <div className="field has-addons ml-5">
              <p className="control">
                <button className="button">
                  <span className="icon is-small">
                    <i className="fa-solid fa-list"></i>
                  </span>
                </button>
              </p>
              <p className="control">
                <button className="button">
                  <Link to="/library-grid">
                    <span className="icon is-small">
                      <i className="fa-solid fa-image"></i>
                    </span>
                  </Link>
                </button>
              </p>
            </div>
          </div>
        </nav>
      </div>
-      <table className="table is-hoverable">
+      <table className="table-auto overflow-auto">
-        <thead>
+        <thead className="sticky top-0 bg-slate-200 dark:bg-slate-500">
          {table.getHeaderGroups().map((headerGroup, idx) => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map((header, idx) => (
                <th
                  key={header.id}
                  colSpan={header.colSpan}
                  className="px-3 py-3"
                >
                  {header.isPlaceholder
                    ? null
                    : flexRender(
-                      header.column.columnDef.header,
+                        header.column.columnDef.header,
-                      header.getContext()
+                        header.getContext(),
-                    )}
+                      )}
                </th>
              ))}
            </tr>
@@ -131,21 +122,23 @@ export const T2Table = (tableOptions): ReactElement => {
        <tbody>
          {table.getRowModel().rows.map((row, idx) => {
            return (
-              <tr
+              <tr key={row.id} onClick={() => rowClickHandler(row)}>
-                key={row.id}
+                {row.getVisibleCells().map((cell) => {
-                onClick={() => rowClickHandler(row)}
+                  return (
-              >
+                    <td key={cell.id} className="align-top">
-                {row.getVisibleCells().map(cell => (
+                      {flexRender(
-                  <td key={cell.id}>
+                        cell.column.columnDef.cell,
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                        cell.getContext(),
-                  </td>
+                      )}
-                ))}
+                    </td>
                  );
                })}
              </tr>
            );
          })}
        </tbody>
      </table>
-    </>
+    </div>
  );
 };
@@ -158,5 +151,6 @@ T2Table.propTypes = {
    previousPage: PropTypes.func,
  }),
  rowClickHandler: PropTypes.func,
  children: PropTypes.any,
 };
 export default T2Table;
--- a/src/client/constants/comic.model.js
+++ b/src/client/constants/comic.model.js
@@ -1,48 +0,0 @@
 export const comicModel = {
  name: "",
  type: "",
  import: {
    isImported: false,
  },
  userAddedMetadata: {
    tags: [],
  },
  comicStructure: {
    cover: {
      thumb: "http://thumb",
      medium: "http://medium",
      large: "http://large",
    },
    collection: {
      publishDate: "",
      type: "", // issue, series, trade paperback
      metadata: {
        publisher: "",
        issueNumber: "",
        description: "",
        synopsis: "",
        team: {},
      },
    },
  },
  sourcedMetadata: {
    comicvine: {},
    shortboxed: {},
    gcd: {},
  },
  rawFileDetails: {
    fileName: "",
    path: "",
    extension: "",
  },
  acquisition: {
    release: {},
    torrent: {
      magnet: "",
      tracker: "",
      status: "",
    },
    usenet: {},
  },
 };
--- a/src/client/constants/endpoints.ts
+++ b/src/client/constants/endpoints.ts
@@ -8,7 +8,6 @@ export const hostURIBuilder = (options: Record<string, string>): string => {
    options.apiPath
  );
 };
 console.log(import.meta);
 export const CORS_PROXY_SERVER_URI = hostURIBuilder({
  protocol: "http",
@@ -91,3 +90,17 @@ export const QBITTORRENT_SERVICE_BASE_URI = hostURIBuilder({
  port: "3060",
  apiPath: `/api/qbittorrent`,
 });
 export const PROWLARR_SERVICE_BASE_URI = hostURIBuilder({
  protocol: "http",
  host: import.meta.env.UNDERLYING_HOSTNAME || "localhost",
  port: "3060",
  apiPath: `/api/prowlarr`,
 });
 export const TORRENT_JOB_SERVICE_BASE_URI = hostURIBuilder({
  protocol: "http",
  host: import.meta.env.UNDERLYING_HOSTNAME || "localhost",
  port: "3000",
  apiPath: `/api/torrentjobs`,
 });
--- a/src/client/constants/importer.config.ts
+++ b/src/client/constants/importer.config.ts
@@ -1 +0,0 @@
 export const SUPPORTED_COMIC_ARCHIVES = [".cbz", ".cbr"];
--- a/src/client/constants/settings/settingsMenu.json
+++ b/src/client/constants/settings/settingsMenu.json
@@ -57,7 +57,7 @@
        "displayName": "Prowlarr",
        "children": [
          {
-            "id": "prowlarr-connection",
+            "id": "prwlr-connection",
            "displayName": "Connection"
          },
          {
--- a/src/client/context/AirDCPPSocket.tsx
+++ b/src/client/context/AirDCPPSocket.tsx
@@ -1,108 +0,0 @@
 import { isEmpty, isUndefined } from "lodash";
 import React, { createContext, useEffect, useState } from "react";
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { useStore } from "../store/index";
 import AirDCPPSocket from "../services/DcppSearchService";
 import axios from "axios";
 const AirDCPPSocketContextProvider = ({ children }) => {
  const { getState, setState } = useStore;
  // setter for settings for use in the context consumer
  const setSettings = (settingsObject) => {
    persistSettings({
      ...airDCPPState,
      airDCPPState: {
        settings: settingsObject,
        socket: {},
        socketConnectionInformation: {},
      },
    });
  };
  // Initial state for AirDC++ configuration
  const initState = {
    airDCPPState: {
      settings: {},
      socket: {},
      socketConnectionInformation: {},
    },
    setSettings: setSettings,
  };
  const [airDCPPState, persistSettings] = useState(initState);
  // 1. get settings from mongo
  const { data, isLoading, isError } = useQuery({
    queryKey: ["settings"],
    queryFn: async () =>
      await axios({
        url: "http://localhost:3000/api/settings/getAllSettings",
        method: "GET",
      }),
  });
  const directConnectConfiguration = data?.data.directConnect.client.host;
  // 2. If available, init AirDC++ Socket with those settings
  useEffect(() => {
    if (!isEmpty(directConnectConfiguration)) {
      initializeAirDCPPSocket(directConnectConfiguration);
    }
  }, [directConnectConfiguration]);
  // Method to init AirDC++ Socket with supplied settings
  const initializeAirDCPPSocket = async (configuration) => {
    console.log("[AirDCPP]: Initializing socket...");
    const initializedAirDCPPSocket = new AirDCPPSocket({
      protocol: `${configuration.protocol}`,
      hostname: `${configuration.hostname}:${configuration.port}`,
      username: `${configuration.username}`,
      password: `${configuration.password}`,
    });
    // Set up connect and disconnect handlers
    initializedAirDCPPSocket.onConnected = (sessionInfo) => {
      // update global state with socket connection status
      setState({
        airDCPPSocketConnected: true,
      });
    };
    initializedAirDCPPSocket.onDisconnected = async (
      reason,
      code,
      wasClean,
    ) => {
      // update global state with socket connection status
      setState({
        disconnectionInfo: { reason, code, wasClean },
        airDCPPSocketConnected: false,
      });
    };
    // Attempt connection
    const socketConnectionInformation =
      await initializedAirDCPPSocket.connect();
    // update the state with the new socket connection information
    persistSettings({
      ...airDCPPState,
      airDCPPState: {
        settings: configuration,
        socket: initializedAirDCPPSocket,
        socketConnectionInformation,
      },
    });
  };
  console.log("connected?", getState());
  // the Provider gives access to the context to its children
  return (
    <AirDCPPSocketContext.Provider value={airDCPPState}>
      {children}
    </AirDCPPSocketContext.Provider>
  );
 };
 const AirDCPPSocketContext = createContext({
  airDCPPState: {},
  saveSettings: () => {},
 });
 export { AirDCPPSocketContext, AirDCPPSocketContextProvider };
--- a/src/client/hooks/useBlazeSlider.tsx
+++ b/src/client/hooks/useBlazeSlider.tsx
@@ -0,0 +1,16 @@
 import React, { useEffect } from "react";
 import BlazeSlider from "blaze-slider";
 export const useBlazeSlider = (config) => {
  const sliderRef = React.useRef();
  const elRef = React.useRef();
  useEffect(() => {
    // if not already initialized
    if (!sliderRef.current) {
      sliderRef.current = new BlazeSlider(elRef.current, config);
    }
  }, []);
  return elRef;
 };
--- a/src/client/hooks/useDarkMode.tsx
+++ b/src/client/hooks/useDarkMode.tsx
@@ -0,0 +1,17 @@
 import React, { useEffect, useState } from "react";
 export const useDarkMode = () => {
  const [theme, setTheme] = useState(localStorage.theme);
  const colorTheme = theme === "dark" ? "light" : "dark";
  useEffect(() => {
    const root = window.document.documentElement;
    root.classList.remove(colorTheme);
    root.classList.add(theme);
    // save theme to local storage
    localStorage.setItem("theme", theme);
  }, [theme, colorTheme]);
  return [colorTheme, setTheme];
 };
--- a/src/client/index.tsx
+++ b/src/client/index.tsx
@@ -4,10 +4,17 @@ import { createRoot } from "react-dom/client";
 import App from "./components/App";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import Settings from "./components/Settings/Settings";
 import { ErrorPage } from "./components/shared/ErrorPage";
 const rootEl = document.getElementById("root");
 const root = createRoot(rootEl);
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import Import from "./components/Import/Import";
 import Dashboard from "./components/Dashboard/Dashboard";
 import Search from "./components/Search/Search";
 import TabulatedContentContainer from "./components/Library/TabulatedContentContainer";
 import { ComicDetailContainer } from "./components/ComicDetail/ComicDetailContainer";
 import Volumes from "./components/Volumes/Volumes";
 import WantedComics from "./components/WantedComics/WantedComics";
 const queryClient = new QueryClient();
@@ -15,16 +22,29 @@ const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
-  },
+    errorElement: <ErrorPage />,
-  {
+    children: [
-    path: "/settings",
+      { path: "/", element: <Dashboard /> },
-    element: <Settings />,
+      { path: "dashboard", element: <Dashboard /> },
      { path: "settings", element: <Settings /> },
      {
        path: "library",
        element: <TabulatedContentContainer category="library" />,
      },
      {
        path: "comic/details/:comicObjectId",
        element: <ComicDetailContainer />,
      },
      { path: "import", element: <Import path={"./comics"} /> },
      { path: "search", element: <Search /> },
      { path: "volumes", element: <Volumes /> },
      { path: "wanted", element: <WantedComics /> },
    ],
  },
 ]);
 root.render(
  <QueryClientProvider client={queryClient}>
    <RouterProvider router={router} />
    <ReactQueryDevtools initialIsOpen={true} />
  </QueryClientProvider>,
 );
--- a/src/client/store/index.ts
+++ b/src/client/store/index.ts
@@ -1,90 +1,252 @@
 import { create } from "zustand";
-import { isEmpty } from "lodash";
+import { isNil } from "lodash";
 import io from "socket.io-client";
 import { SOCKET_BASE_URI } from "../constants/endpoints";
 import { produce } from "immer";
 import AirDCPPSocket from "../services/DcppSearchService";
 import axios from "axios";
 import { QueryClient } from "@tanstack/react-query";
 /*  Broadly, this file sets up:
 *    1. The zustand-based global client state
 *    2. socket.io client
 *    3. AirDC++ websocket connection
 */
 export const useStore = create((set, get) => ({
  // AirDC++ state
  airDCPPSocketInstance: {},
  airDCPPSocketConnected: false,
  airDCPPDisconnectionInfo: {},
  airDCPPClientConfiguration: {},
-  airDCPPSocketConnectionInformation: {},
+  airDCPPSessionInformation: {},
  setAirDCPPSocketConnectionStatus: () =>
    set((value) => ({
      airDCPPSocketConnected: value,
    })),
-  getAirDCPPConnectionStatus: () => {
+  airDCPPDownloadTick: {},
-    const airDCPPSocketConnectionStatus = get().airDCPPSocketConnected;
+  airDCPPTransfers: {},
  },
  // Socket.io state
  socketIOInstance: {},
  // ComicVine Scraping status
  comicvine: {
    scrapingStatus: "",
  },
  // Import job queue and associated statuses
  importJobQueue: {
    successfulJobCount: 0,
    failedJobCount: 0,
    status: undefined,
    setStatus: (status: string) =>
      set(
        produce((draftState) => {
          draftState.importJobQueue.status = status;
        }),
      ),
    setJobCount: (jobType: string, count: Number) => {
      switch (jobType) {
        case "successful":
          set(
            produce((draftState) => {
              draftState.importJobQueue.successfulJobCount = count;
            }),
          );
          break;
        case "failed":
          set(
            produce((draftState) => {
              draftState.importJobQueue.failedJobCount = count;
            }),
          );
          break;
      }
    },
    mostRecentImport: null,
    setMostRecentImport: (fileName: string) => {
      set(
        produce((state) => {
          state.importJobQueue.mostRecentImport = fileName;
        }),
      );
    },
  },
 }));
 const { getState, setState } = useStore;
 const queryClient = new QueryClient();
-// Method to init AirDC++ Socket with supplied settings
+/** Socket.IO initialization **/
-const initializeAirDCPPSocket = async (configuration) => {
+// 1. Fetch sessionId from localStorage
-  console.log("[AirDCPP]: Initializing socket...");
+const sessionId = localStorage.getItem("sessionId");
 // 2. socket.io instantiation
 const socketIOInstance = io(SOCKET_BASE_URI, {
  transports: ["websocket"],
  withCredentials: true,
  query: { sessionId },
 });
 // 3. Set the instance in global state
 setState({
  socketIOInstance,
 });
-  const initializedAirDCPPSocket = new AirDCPPSocket({
+// Socket.io-based session restoration
-    protocol: `${configuration.protocol}`,
+if (!isNil(sessionId)) {
-    hostname: `${configuration.hostname}:${configuration.port}`,
+  // 1. Resume the session
-    username: `${configuration.username}`,
+  socketIOInstance.emit(
-    password: `${configuration.password}`,
+    "call",
-  });
+    "socket.resumeSession",
-
+    {
-  // Set up connect and disconnect handlers
+      sessionId,
  initializedAirDCPPSocket.onConnected = (sessionInfo) => {
    // update global state with socket connection status
    setState({
      airDCPPSocketConnected: true,
    });
  };
  initializedAirDCPPSocket.onDisconnected = async (reason, code, wasClean) => {
    // update global state with socket connection status
    setState({
      disconnectionInfo: { reason, code, wasClean },
      airDCPPSocketConnected: false,
    });
  };
  // AirDC++ Socket-related connection and post-connection
  // Attempt connection
  const airDCPPSocketConnectionInformation =
    await initializedAirDCPPSocket.connect();
  setState({
    airDCPPSocketConnectionInformation,
  });
  // Set up event listeners
  initializedAirDCPPSocket.addListener(
    `queue`,
    "queue_bundle_tick",
    async (downloadProgressData) => {
      console.log(downloadProgressData);
    },
    (data) => console.log(data),
  );
-  initializedAirDCPPSocket.addListener(
+} else {
-    "queue",
+  // 1. Inititalize the session and persist the sessionId to localStorage
-    "queue_bundle_added",
+  socketIOInstance.on("sessionInitialized", (sessionId) => {
-    async (data) => {
+    localStorage.setItem("sessionId", sessionId);
-      console.log("JEMEN:", data);
+  });
 }
 // 2. If a job is in progress, restore the job counts and persist those to global state
 socketIOInstance.on("RESTORE_JOB_COUNTS_AFTER_SESSION_RESTORATION", (data) => {
  console.log("Active import in progress detected; restoring counts...");
  const { completedJobCount, failedJobCount, queueStatus } = data;
  setState((state) => ({
    importJobQueue: {
      ...state.importJobQueue,
      successfulJobCount: completedJobCount,
      failedJobCount,
      status: queueStatus,
    },
-  );
+  }));
 });
-  initializedAirDCPPSocket.addListener(
+// 1a.  Act on each comic issue successfully imported/failed, as indicated
-    `queue`,
+//      by the LS_COVER_EXTRACTED/LS_COVER_EXTRACTION_FAILED events
-    "queue_bundle_status",
+socketIOInstance.on("LS_COVER_EXTRACTED", (data) => {
-    async (bundleData) => {
+  const { completedJobCount, importResult } = data;
-      let count = 0;
+  setState((state) => ({
-      if (bundleData.status.completed && bundleData.status.downloaded) {
+    importJobQueue: {
-        // dispatch the action for raw import, with the metadata
+      ...state.importJobQueue,
-        if (count < 1) {
+      successfulJobCount: completedJobCount,
-          console.log(`[AirDCPP]: Download complete.`);
+      mostRecentImport: importResult.rawFileDetails.name,
    },
  }));
 });
 socketIOInstance.on("LS_COVER_EXTRACTION_FAILED", (data) => {
  const { failedJobCount } = data;
  setState((state) => ({
    importJobQueue: {
      ...state.importJobQueue,
      failedJobCount,
    },
  }));
 });
-          count += 1;
+// 1b.  Clear the localStorage sessionId upon receiving the
 //      LS_IMPORT_QUEUE_DRAINED event
 socketIOInstance.on("LS_IMPORT_QUEUE_DRAINED", (data) => {
  localStorage.removeItem("sessionId");
  setState((state) => ({
    importJobQueue: {
      ...state.importJobQueue,
      status: "drained",
    },
  }));
  console.log("a", queryClient);
  queryClient.invalidateQueries({ queryKey: ["allImportJobResults"] });
 });
 // ComicVine Scraping status
 socketIOInstance.on("CV_SCRAPING_STATUS", (data) => {
  setState((state) => ({
    comicvine: {
      ...state.comicvine,
      scrapingStatus: data.message,
    },
  }));
 });
 /**
 * Method to init AirDC++ Socket with supplied settings
 * @param configuration - credentials, and hostname details to init AirDC++ connection
 * @returns Initialized AirDC++ connection socket instance
 */
 export const initializeAirDCPPSocket = async (configuration): Promise<any> => {
  try {
    console.log("[AirDCPP]: Initializing socket...");
    const initializedAirDCPPSocket = new AirDCPPSocket({
      protocol: `${configuration.protocol}`,
      hostname: `${configuration.hostname}:${configuration.port}`,
      username: `${configuration.username}`,
      password: `${configuration.password}`,
    });
    // Set up connect and disconnect handlers
    initializedAirDCPPSocket.onConnected = (sessionInfo) => {
      // update global state with socket connection status
      setState({
        airDCPPSocketConnected: true,
      });
    };
    initializedAirDCPPSocket.onDisconnected = async (
      reason,
      code,
      wasClean,
    ) => {
      // update global state with socket connection status
      setState({
        disconnectionInfo: { reason, code, wasClean },
        airDCPPSocketConnected: false,
      });
    };
    // AirDC++ Socket-related connection and post-connection
    // Attempt connection
    const airDCPPSessionInformation = await initializedAirDCPPSocket.connect();
    setState({
      airDCPPSessionInformation,
    });
    // Set up event listeners
    initializedAirDCPPSocket.addListener(
      `queue`,
      "queue_bundle_tick",
      async (downloadProgressData) => {
        console.log(downloadProgressData);
        setState({
          airDCPPDownloadTick: downloadProgressData,
        });
      },
    );
    initializedAirDCPPSocket.addListener(
      "queue",
      "queue_bundle_added",
      async (data) => {
        console.log("JEMEN:", data);
      },
    );
    initializedAirDCPPSocket.addListener(
      `queue`,
      "queue_bundle_status",
      async (bundleData) => {
        let count = 0;
        if (bundleData.status.completed && bundleData.status.downloaded) {
          // dispatch the action for raw import, with the metadata
          if (count < 1) {
            console.log(`[AirDCPP]: Download complete.`);
            count += 1;
          }
        }
-      }
+      },
-    },
+    );
-  );
+    return initializedAirDCPPSocket;
  } catch (error) {
    console.error(error);
  }
 };
 // 1. get settings from mongo
@@ -93,14 +255,17 @@ const { data } = await axios({
  method: "GET",
 });
-const directConnectConfiguration = data?.directConnect.client.host;
+const directConnectConfiguration = data?.directConnect?.client.host;
 // 2. If available, init AirDC++ Socket with those settings
-if (!isEmpty(directConnectConfiguration)) {
+if (!isNil(directConnectConfiguration)) {
-  initializeAirDCPPSocket(directConnectConfiguration);
+  const airDCPPSocketInstance = await initializeAirDCPPSocket(
    directConnectConfiguration,
  );
  setState({
    airDCPPSocketInstance,
    airDCPPClientConfiguration: directConnectConfiguration,
  });
 } else {
  console.log("problem");
 }
 console.log("connected?", getState());
--- a/src/client/workers/test.worker.ts
+++ b/src/client/workers/test.worker.ts
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -0,0 +1,25 @@
 import { addDynamicIconSelectors } from "@iconify/tailwind";
 /** @type {import('tailwindcss').Config} */
 module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  darkMode: "class",
  theme: {
    fontFamily: {
      sans: ["PP Object Sans Regular", "sans-serif"],
      hasklig: ["Hasklig Regular", "monospace"],
    },
    container: {
      center: true,
      padding: {
        DEFAULT: "1rem",
        sm: "2rem",
        lg: "4rem",
        xl: "5rem",
        "2xl": "6rem",
      },
    },
  },
  plugins: [addDynamicIconSelectors()],
 };
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
Rishi Ghan	c6f719e78b	💅🏼 Formatting tweaks to tabs	2024-03-30 21:28:48 -04:00
Rishi Ghan	b4d1b678b1	💅🏼 Formatting improvements	2024-03-29 23:26:43 -04:00
Rishi Ghan	aa3192bc1a	🧲 Added visual indicators of torrent progress	2024-03-29 19:35:57 -04:00
Rishi Ghan	56ddfbd16e	🧲 Surfacing torrent progress in UI via scheduled job	2024-03-27 22:23:24 -05:00
Rishi Ghan	173735da45	🧲 Added downloads panel	2024-03-24 17:30:51 -04:00
Rishi Ghan	f4408cd493	🧲 Fixed the auto-population of search box	2024-03-16 18:34:41 -04:00
Rishi Ghan	41a9428729	🧲 Added a torrent download sub-panel	2024-03-07 05:50:49 -06:00
Rishi Ghan	e1da6ddcef	🪢 Wiring up to addTorrent endpoint	2024-02-27 22:15:32 -05:00
Rishi Ghan	df4cecedf0	📝 Added captions to screenshots	2024-02-23 16:59:31 -05:00
Rishi Ghan	3dee53f33f	📝 Updated README	2024-02-23 16:52:45 -05:00
Rishi Ghan	ef05dee600	❌ Removed pngs	2024-02-23 16:42:37 -05:00
Rishi Ghan	2b6bce4731	Merge branch 'main' of https://github.com/rishighan/threetwo	2024-02-23 16:41:21 -05:00
Rishi Ghan	fc4c5c61e2	🌇 Updated screenshots	2024-02-23 16:41:14 -05:00
Rishi Ghan	ae04260f69	❌ Updated .gitignore to ignore storybook static assets (#102 ) * ❌ Updated .gitignore to ignore storybook static assets * 🏗️ Fixed cover-only config for CV detail panel * 🏗️ Added stats to dashboard * 🐯 Prowlarr integration WIP * 🐯 Prowlarr settings form scaffold * 🧲 Added a form for torrent search * 🐯 Mocked a prowlarr call	2024-02-23 16:29:13 -05:00
dependabot[bot]	ad5fc0b8b3	Bump ip from 2.0.0 to 2.0.1 (#103 ) Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1. - [Commits](https://github.com/indutny/node-ip/compare/v2.0.0...v2.0.1) --- updated-dependencies: - dependency-name: ip dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2024-02-22 09:07:19 -06:00
Rishi Ghan	c03f706e9d	Dark mode 2 (#100 ) * 🗂️ Added tab icons and styles * 🪑 Styled download panel table * 🪑 Cleaned up the DC++ search results table * 🪑 Many changes to DC++ downloads table * 🏗️ Wired up search with RQ * 🏗️ Changes to ComicDetail section * 🔧 Fixing table styes * 🏗 Fixed the archive ops panel * 🔧 Tweaked Archive ops further * 🃏 Styling the action menu * 🧩 CV Match panel refactor WIP * 🏗️ Refactored the action menu * 🤼 Cleaning up CV match panel * 🏗️ Refactored the scored matches * 🤼 Revamped CV match panel UX * 🖌️ Styling tweaks to the side panel * 🖌️ Cleaned up the form * 🏗️ Refactored the search form * 🤐 Added a uncompress indicator * 🏗️ Fix for encoding # in URIs * 🔧 Fixed # symbol handling in URLs * 🔧 Started work on Edit Metadata panel * 🔎 Added a check for existing uncompressed archives * 🏗️ Settings styling tweaks * 🏗️ Fixed invalidation of archiveOps * 🏗️ Fixed an invalidation query on DC++ download panel * 🏗️ Fixed CV-sourced Volume info panel * 🏗️ Fixed volume group card stacks on Dashboard * 🔍 Fixing CV search page * 🏗️ Refactoring Volume groups and wanted panel * 🏗️ Cleaning up useless files * 🛝 Added keen-slider for pull list * 🏗️ Abstracted heading/subheading into Header * 🏗️ Continued refactoring of PullList, Volumes etc. * 📆 Wired up the datepicker to LoCG pull list	2024-02-06 05:58:56 -05:00
Rishi Ghan	4f49e538a8	Dark mode refactor (#98 ) * 🏗️ Acquisition Panel refactor WIP * 🔧 Formatted the search query box * 🔧 Implementing download method * 🏗️ Refactored the AirDC++ download panel * 🌜 Initial Dark Mode support * 🌜 Trying dark mode on the react-select * Update App.scss * 🏗️ Migrating Navbar to TailwindCSS * 🖼️ Added solar icons * 🔧 Added solar icons * 🔧 Added code for dark mode toggle * 🏗️ Wiring up the dark mode toggle * 🌜 Added Dark mode to the body * 🏗️ Building out the import page * 🪑 Cleaning up the table styles * 🏗️ Cleaned up past imports table * 🏗️ Refactored Import socket events * 🏗️ Refactored the card grid on dashboard * 🏗️ Building variants for Cards * 🏗️ Added a horizontal medium variant * 🏗️ Cleaning up forms and cards * 🔧 Styling form inputs * 🏗️ Form refactor * 🔠 Added a monospace font * 🪑 Refactoring the table * 🧹 Formatting in connection confirmation panels * 🏗️ Refactoring table for library * 🏗️ Added icons and details to metadata * 🏗️ Cleaned the table further * 🏗️ Fixed fonts, and comic detail page first draft * ❌ Removing yarn.lockfile	2023-12-21 16:23:29 -05:00
dependabot[bot]	68442894d0	Bump vite from 5.0.2 to 5.0.5 (#99 ) Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 5.0.2 to 5.0.5. - [Release notes](https://github.com/vitejs/vite/releases) - [Changelog](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md) - [Commits](https://github.com/vitejs/vite/commits/v5.0.5/packages/vite) --- updated-dependencies: - dependency-name: vite dependency-type: direct:production ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2023-12-06 22:41:14 -06:00
Rishi Ghan	dba520b4c1	🧸 Zustand and Tanstack Query (#96 ) * ↪️ Removed node-sass, added sass * 🏗️ Refactoring Navbar to read from zustand store * ⬆️ Bumped deps * 🏗️ Refactored AirDC++ session status indicator * 🏗️ Refactored Import page to read from global state * 🏗 Wired up the event emit correctly * 🏗️ Added import queue related state * 🏗 Implemented setQueueAction * 🏗️ Wired up job queue control methods * 🏗️ Added null check and removed useless deps * 🏗️ Refactored the Import page * ↪️ Added cache invalidation to job statistics query * 🏗️ Refactoring the Library page * 🏗️ Fixed pagination and disabled states * ✏️ Changed page to offset To better reflect what we are doing with the pagination controls * 🏗️ Refactoring ComicDetail page and its children * 🏗️ Refactored ComicDetailContainer with useQuery * 🔧 Fixed the error check on Library page * 🏗️ Refactoring AcquisitionPanel * 🏗️ Refactoring the AirDC++ Forms * 🦃 Thanksgiving Day bug fixes * ⬆️ Bumped up Vite to 5.0 * 🔧 Refactoring AcquisitionPanel * 🏗️ Wiring up the DC++ search method * 🏗️ Refactoring AirDC++ search method * 🔎 Added some validation to ADC++ Hubs settings form * 🏗️ Fixed the ADC++ search results * 🏗️ Cleanup of the search results pane	2023-11-28 22:54:45 -05:00
Rishi Ghan	ef75dad4e2	Adding zustand and react-query (Settings Page) (#95 ) * 🌊 qBittorrent settings scaffold * 🔧 Added scaffold for the qBittorrent connection form * 🔧 Some refactoring * 🔧 Cleaned up folder structure * 🔧 Fixed broken paths * 🔧 Cleaned up Search and Import component hierarchy * 🔧 More path fixes * 🔧 Tooling changes * 📝 Qbittorrent form scaffold * ⬆️ Bumped @dnd-kit deps * 🧑🏼‍🔧 Fixed the hostname regex * 🏗️ Adding fields to the settings form * 🔧 Formatting and more layout changes * 🔧 Added Prowlarr settings items in JSON * 📝 Purified Card Component * 📝 Abstracted connection form into a component * 🏗️ Reorganized tabs * Migrating from Redux to RTK-query * ⬇️ Fetched qBittorrent settings * 🏗️ Trying out react-query * 🧩 Added react-query query to qBittorrentSettings page * 📝 qbittorrent form RU actions first draft * 🏗️ Added loading state check * 🏗 Added error check state * 🏗️ Refactored AirDCPP context using react-query * 🏗️ Refactoring AirDCPP Settings Form with react-query * 🔧 Removed context * 🔧 Removing context from AirDCPP settings page * 🔧 Fixed early init error on the store * 🐛 Debugging AirDCPP Settings Form page * 🧸 Zustand-ified AirDCPP Form * ❌ AirDCPP code cleaned up from App.tsx * ➕ Re-added yarn.lock	2023-11-07 11:56:29 -06:00
Rishi Ghan	8bebffd95e	🌊 qBittorrent Settings Scaffold (#90 ) * 🌊 qBittorrent settings scaffold * 🔧 Added scaffold for the qBittorrent connection form * 🔧 Some refactoring * 🔧 Cleaned up folder structure * 🔧 Fixed broken paths * 🔧 Cleaned up Search and Import component hierarchy * 🔧 More path fixes * 🔧 Tooling changes * 📝 Qbittorrent form scaffold * ⬆️ Bumped @dnd-kit deps * 🧑🏼‍🔧 Fixed the hostname regex * 🏗️ Adding fields to the settings form * 🔧 Formatting and more layout changes * 🔧 Added Prowlarr settings items in JSON * 📝 Purified Card Component * 📝 Abstracted connection form into a component * 🏗️ Reorganized tabs * Migrating from Redux to RTK-query * ⬇️ Fetched qBittorrent settings * 🏗️ Trying out react-query * 🧩 Added react-query query to qBittorrentSettings page * 📝 qbittorrent form RU actions first draft * 🏗️ Added loading state check * 🏗 Added error check state * 🏗️ Refactored AirDCPP context using react-query * 🏗️ Refactoring AirDCPP Settings Form with react-query * 🔧 Removed context * 🔧 Removing context from AirDCPP settings page * 🔧 Fixed early init error on the store * 🐛 Debugging AirDCPP Settings Form page * 🧸 Zustand-ified AirDCPP Form * ❌ AirDCPP code cleaned up from App.tsx * ➕ Re-added yarn.lock	2023-11-07 11:46:08 -06:00
		`@@ -1 +0,0 @@`
			`export const SUPPORTED_COMIC_ARCHIVES = [".cbz", ".cbr"];`