diff --git a/src/client/components/ComicDetail/ComicDetail.tsx b/src/client/components/ComicDetail/ComicDetail.tsx
index d2db27c..765d805 100644
--- a/src/client/components/ComicDetail/ComicDetail.tsx
+++ b/src/client/components/ComicDetail/ComicDetail.tsx
@@ -115,14 +115,16 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
           <div>
             <ComicVineSearchForm data={rawFileDetails} />
           </div>
-          <p className="is-size-5 mt-3 mb-2 ml-3">Searching for:</p>
-          {inferredMetadata.issue ? (
-            <div className="ml-3">
-              <span className="tag mr-3">{inferredMetadata.issue.name} </span>
-              <span className="tag"> # {inferredMetadata.issue.number} </span>
-            </div>
-          ) : null}
 
+          <div className="border-slate-500 border rounded-lg p-2 mt-3">
+            <p className="">Searching for:</p>
+            {inferredMetadata.issue ? (
+              <>
+                <span className="">{inferredMetadata.issue.name} </span>
+                <span className=""> # {inferredMetadata.issue.number} </span>
+              </>
+            ) : null}
+          </div>
           <ComicVineMatchPanel
             props={{
               comicVineMatches,
diff --git a/src/client/components/ComicDetail/ComicVineMatchPanel.tsx b/src/client/components/ComicDetail/ComicVineMatchPanel.tsx
index 2b204d9..e65f20a 100644
--- a/src/client/components/ComicDetail/ComicVineMatchPanel.tsx
+++ b/src/client/components/ComicDetail/ComicVineMatchPanel.tsx
@@ -21,7 +21,7 @@ export const ComicVineMatchPanel = (comicVineData): ReactElement => {
             comicObjectId={comicObjectId}
           />
         ) : (
-          <>{comicvine.scrapingStatus}</>
+          <div className="text-md my-5">{comicvine.scrapingStatus}</div>
         )}
       </div>
     </>
diff --git a/src/client/components/ComicDetail/ComicVineSearchForm.tsx b/src/client/components/ComicDetail/ComicVineSearchForm.tsx
index 7c08a01..d1c3ae9 100644
--- a/src/client/components/ComicDetail/ComicVineSearchForm.tsx
+++ b/src/client/components/ComicDetail/ComicVineSearchForm.tsx
@@ -34,84 +34,55 @@ export const ComicVineSearchForm = (data) => {
       validate={validate}
       render={({ handleSubmit }) => (
         <form onSubmit={handleSubmit}>
-          <span className="field is-normal">
-            <label className="label mb-2 is-size-5">Search Manually</label>
+          <span className="flex items-center">
+            <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">
-            <div className="field-body">
-              <div className="field">
-                <Field name="issueName">
-                  {(props) => (
-                    <p className="control is-expanded has-icons-left">
-                      <input
-                        {...props.input}
-                        className="input is-normal"
-                        placeholder="Type the issue name"
-                      />
-                      <span className="icon is-small is-left">
-                        <i className="fas fa-journal-whills"></i>
-                      </span>
-                    </p>
-                  )}
-                </Field>
-              </div>
+          <label className="block py-1">Issue Name</label>
+          <Field name="issueName">
+            {(props) => (
+              <input
+                {...props.input}
+                className="appearance-none dark:bg-slate-400 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"
+                placeholder="Type the issue name"
+              />
+            )}
+          </Field>
+          <div className="flex flex-row gap-4">
+            <div>
+              <label className="block py-1">Number</label>
+              <Field name="issueNumber">
+                {(props) => (
+                  <input
+                    {...props.input}
+                    className="appearance-none dark:bg-slate-400 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="Type the issue number"
+                  />
+                )}
+              </Field>
+            </div>
+            <div>
+              <label className="block py-1">Issue Number</label>
+              <Field name="issueYear">
+                {(props) => (
+                  <input
+                    {...props.input}
+                    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"
+                    placeholder="Type the issue year"
+                  />
+                )}
+              </Field>
             </div>
           </div>
-
-          <div className="field is-horizontal">
-            <div className="field-body">
-              <div className="field">
-                <Field name="issueNumber">
-                  {(props) => (
-                    <p className="control has-icons-left">
-                      <input
-                        {...props.input}
-                        className="input is-normal"
-                        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="field-body">
-              <div className="field">
-                <div className="control">
-                  <button
-                    type="submit"
-                    className="button is-success is-light is-outlined is-small"
-                  >
-                    <span className="icon">
-                      <i className="fas fa-search"></i>
-                    </span>
-                    <span>Search</span>
-                  </button>
-                </div>
-              </div>
-            </div>
+          <div className="flex justify-end">
+            <button
+              type="submit"
+              className="flex space-x-1 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"
+            >
+              Search
+            </button>
           </div>
         </form>
       )}
diff --git a/src/client/components/ComicDetail/MatchResult.tsx b/src/client/components/ComicDetail/MatchResult.tsx
index e8dfdf9..8c3f689 100644
--- a/src/client/components/ComicDetail/MatchResult.tsx
+++ b/src/client/components/ComicDetail/MatchResult.tsx
@@ -27,6 +27,12 @@ export const MatchResult = (props: MatchResultProps) => {
   };
   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)) {
@@ -36,8 +42,9 @@ export const MatchResult = (props: MatchResultProps) => {
             },
           });
         }
+        const bestMatchCSSClass = idx === 0 ? "bg-green-100" : "bg-slate-300";
         return (
-          <div className="mb-4" key={idx}>
+          <div className={`${bestMatchCSSClass} my-5 p-4 rounded-lg`} key={idx}>
             <div className="flex flex-row gap-4">
               <div className="min-w-fit">
                 <img
@@ -52,17 +59,15 @@ export const MatchResult = (props: MatchResultProps) => {
                     <p className="text-md w-full">{match.name}</p>
                   ) : null}
 
-                  <div className="flex">
-                    {/* score */}
-                    <span className="inline-flex 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">
-                        <i className="icon-[solar--course-up-line-duotone] w-4 h-4"></i>
-                      </span>
-                      <span className="text-slate-900 dark:text-slate-900">
-                        {parseInt(match.score, 10)}
-                      </span>
+                  {/* score */}
+                  <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">
+                      <i className="icon-[solar--course-up-line-duotone] w-4 h-4"></i>
                     </span>
-                  </div>
+                    <span className="text-slate-900 dark:text-slate-900">
+                      {parseInt(match.score, 10)}
+                    </span>
+                  </span>
                 </div>
                 <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">
@@ -111,15 +116,17 @@ export const MatchResult = (props: MatchResultProps) => {
                 </div>
               </div>
             </div>
-            <button
-              className="button is-normal is-outlined is-primary is-light is-pulled-right"
-              onClick={() => applyCVMatch(match, props.comicObjectId)}
-            >
-              <span className="icon is-size-5">
-                <i className="fas fa-clipboard-check"></i>
-              </span>
-              <span>Apply Match</span>
-            </button>
+            <div className="flex justify-end">
+              <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={() => applyCVMatch(match, props.comicObjectId)}
+              >
+                <span className="text-md">Apply Match</span>
+                <span className="w-5 h-5">
+                  <i className="h-5 w-5 icon-[solar--magic-stick-3-bold-duotone]"></i>
+                </span>
+              </button>
+            </div>
           </div>
         );
       })}