diff --git a/.git-blame-ignore-revs b/.git-blame-ignore-revs
index aa8417c..1ea241d 100644
--- a/.git-blame-ignore-revs
+++ b/.git-blame-ignore-revs
@@ -1,3 +1,7 @@
 # Prettier formatting errors
 32743cbd2f5dead77fd6ef7be25105f33c370f29
 be76190dd8ca29e9e7b63a3cd1126386b2fe5917
+# Tailwind formatting
+be06788c7b4a1041e2f13d2262eeccde74294c7f
+# Eslint warning
+e0721bc1c231d0eb9f3d5fe1dcbce6a0256a2879
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 39e4674..877f29c 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -25,6 +25,13 @@ repos:
       language: system
       types: [python]
       pass_filenames: false
+    - id: npm-lint
+      name: npm-lint
+      entry: npm --prefix server run lint
+      language: system
+      files: ^server/
+      types_or: [javascript, jsx, ts, tsx]
+      pass_filenames: false
     - id: npm-build
       name: npm-build
       entry: npm --prefix server run build
@@ -37,7 +44,7 @@ repos:
       entry: npx --prefix server prettier --config=server/.prettierrc --ignore-path=server/.prettierignore --check server
       language: system
       files: ^server/
-      types_or: [javascript, jsx, ts, tsx]
+      types_or: [javascript, jsx, ts, tsx, json]
     - id: jest-tests
       name: jest-tests
       entry: npm --prefix server run test
diff --git a/server/.eslintrc.json b/server/.eslintrc.json
index bffb357..aa05915 100644
--- a/server/.eslintrc.json
+++ b/server/.eslintrc.json
@@ -1,3 +1,3 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": ["next/core-web-vitals", "plugin:tailwindcss/recommended"]
 }
diff --git a/server/app/alert.tsx b/server/app/alert.tsx
index be49468..37434a5 100644
--- a/server/app/alert.tsx
+++ b/server/app/alert.tsx
@@ -5,9 +5,9 @@ export default function QueryStartedAlert({ queryId }: { queryId: string }) {
   return (
     <div className="rounded-md bg-green-50 p-4">
       <div className="flex">
-        <div className="flex-shrink-0">
+        <div className="shrink-0">
           <CheckCircleIcon
-            className="h-5 w-5 text-green-400"
+            className="size-5 text-green-400"
             aria-hidden="true"
           />
         </div>
@@ -20,13 +20,13 @@ export default function QueryStartedAlert({ queryId }: { queryId: string }) {
           </p>
         </div>
         <div className="ml-auto pl-3">
-          <div className="-mx-1.5 -my-1.5">
+          <div className="-m-1.5">
             <button
               type="button"
               className="inline-flex rounded-md bg-green-50 p-1.5 text-green-500 hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-green-600 focus:ring-offset-2 focus:ring-offset-green-50"
             >
               <span className="sr-only">Dismiss</span>
-              <XMarkIcon className="h-5 w-5" aria-hidden="true" />
+              <XMarkIcon className="size-5" aria-hidden="true" />
             </button>
           </div>
         </div>
diff --git a/server/app/footer.tsx b/server/app/footer.tsx
index b713b0c..d672af1 100644
--- a/server/app/footer.tsx
+++ b/server/app/footer.tsx
@@ -1,19 +1,19 @@
 export default function Example() {
   return (
-    <footer className="bg-white dark:bg-slate-950 h-full sticky top-[100vh]">
+    <footer className="sticky top-[100vh] h-full bg-white dark:bg-slate-950">
       <div className="mx-auto max-w-7xl overflow-hidden px-6 py-4">
         <p className="text-center text-xs leading-5 text-gray-500">
           &copy; 2023. All rights reserved.{" "}
           <a
             href="https://github.com/eriktaubeneck/draft"
-            className="text-gray-800 dark:text-gray-200 hover:text-gray-600 hover:dark:text-gray-400"
+            className="text-gray-800 hover:text-gray-600 dark:text-gray-200 hover:dark:text-gray-400"
           >
             draft
           </a>{" "}
           is an open source project issued under the{" "}
           <a
             href="https://github.com/eriktaubeneck/draft/blob/main/LICENSE.md"
-            className="text-gray-800 dark:text-gray-200 hover:text-gray-600 hover:dark:text-gray-400"
+            className="text-gray-800 hover:text-gray-600 dark:text-gray-200 hover:dark:text-gray-400"
           >
             MIT License.
           </a>
@@ -22,7 +22,7 @@ export default function Example() {
           <a
             href="https://www.flaticon.com/free-icons/beer-tap"
             title="beer tap icons"
-            className="text-gray-800 dark:text-gray-200 hover:text-gray-600 hover:dark:text-gray-400"
+            className="text-gray-800 hover:text-gray-600 dark:text-gray-200 hover:dark:text-gray-400"
           >
             Beer tap icons created by wanicon - Flaticon.
           </a>
diff --git a/server/app/header.tsx b/server/app/header.tsx
index a4aac12..33dc5b4 100644
--- a/server/app/header.tsx
+++ b/server/app/header.tsx
@@ -18,14 +18,14 @@ export default function Header({ user }: { user: any }) {
   return (
     <Disclosure
       as="nav"
-      className="border-b border-gray-200 dark:border-slate-800 bg-white dark:bg-slate-950"
+      className="border-b border-gray-200 bg-white dark:border-slate-800 dark:bg-slate-950"
     >
       {({ open }) => (
         <>
           <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
             <div className="flex h-16 justify-between">
               <div className="flex">
-                <div className="flex flex-shrink-0 items-center">
+                <div className="flex shrink-0 items-center">
                   <Link href="/">
                     <Image
                       src={beerTap}
@@ -67,12 +67,12 @@ export default function Header({ user }: { user: any }) {
                 <div className="hidden sm:ml-6 sm:flex sm:items-center">
                   <button
                     type="button"
-                    className="relative rounded-full bg-white dark:bg-slate-950 p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-700 focus:ring-offset-2"
+                    className="relative rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:bg-slate-950 dark:focus:ring-indigo-700"
                   >
                     <span className="absolute -inset-1.5" />
                     <span className="sr-only">View notifications</span>
                     <BellIcon
-                      className="h-6 w-6 fill-white dark:fill-slate-900"
+                      className="size-6 fill-white dark:fill-slate-900"
                       aria-hidden="true"
                     />
                   </button>
@@ -80,11 +80,12 @@ export default function Header({ user }: { user: any }) {
                   {/* Profile dropdown */}
                   <Menu as="div" className="relative ml-3">
                     <div>
-                      <Menu.Button className="relative flex max-w-xs items-center rounded-full bg-white dark:bg-slate-950 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-700 focus:ring-offset-2">
+                      <Menu.Button className="relative flex max-w-xs items-center rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:bg-slate-950 dark:focus:ring-indigo-700">
                         <span className="absolute -inset-1.5" />
                         <span className="sr-only">Open user menu</span>
-                        <img
-                          className="h-8 w-8 rounded-full"
+                        <img // eslint-disable-line @next/next/no-img-element
+                          // loaded from github, so no need for next/Image
+                          className="size-8 rounded-full"
                           src={user.user_metadata.avatar_url}
                           alt=""
                         />
@@ -99,7 +100,7 @@ export default function Header({ user }: { user: any }) {
                       leaveFrom="transform opacity-100 scale-100"
                       leaveTo="transform opacity-0 scale-95"
                     >
-                      <Menu.Items className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                      <Menu.Items className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 focus:outline-none">
                         {userNavigation.map((item) => (
                           <Menu.Item key={item.name}>
                             {({ active }) => (
@@ -125,9 +126,9 @@ export default function Header({ user }: { user: any }) {
                     <span className="absolute -inset-0.5" />
                     <span className="sr-only">Open main menu</span>
                     {open ? (
-                      <XMarkIcon className="block h-6 w-6" aria-hidden="true" />
+                      <XMarkIcon className="block size-6" aria-hidden="true" />
                     ) : (
-                      <Bars3Icon className="block h-6 w-6" aria-hidden="true" />
+                      <Bars3Icon className="block size-6" aria-hidden="true" />
                     )}
                   </Disclosure.Button>
                 </div>
@@ -156,9 +157,10 @@ export default function Header({ user }: { user: any }) {
             </div>
             <div className="border-t border-gray-200 pb-3 pt-4">
               <div className="flex items-center px-4">
-                <div className="flex-shrink-0">
-                  <img
-                    className="h-10 w-10 rounded-full"
+                <div className="shrink-0">
+                  <img // eslint-disable-line @next/next/no-img-element
+                    // loaded from github, so no need for next/Image
+                    className="size-10 rounded-full"
                     src={user.user_metadata.avatar_url}
                     alt=""
                   />
@@ -173,11 +175,11 @@ export default function Header({ user }: { user: any }) {
                 </div>
                 <button
                   type="button"
-                  className="relative ml-auto flex-shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                  className="relative ml-auto shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
                 >
                   <span className="absolute -inset-1.5" />
                   <span className="sr-only">View notifications</span>
-                  <BellIcon className="h-6 w-6" aria-hidden="true" />
+                  <BellIcon className="size-6" aria-hidden="true" />
                 </button>
               </div>
               <div className="mt-3 space-y-1">
diff --git a/server/app/login/GitHubOAuthComponent.tsx b/server/app/login/GitHubOAuthComponent.tsx
index 7edc30c..a2593c5 100644
--- a/server/app/login/GitHubOAuthComponent.tsx
+++ b/server/app/login/GitHubOAuthComponent.tsx
@@ -37,7 +37,7 @@ export default function GitHubOAuthComponent() {
       className="flex w-full items-center justify-center gap-3 rounded-md bg-[#24292F] px-3 py-2 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#24292F]"
     >
       <GitHubIcon className="flex h-6 w-auto fill-white pr-1 align-[-1px]" />
-      <span className="text-md font-semibold leading-6">GitHub</span>
+      <span className="text-base font-semibold leading-6">GitHub</span>
     </button>
   );
 }
diff --git a/server/app/login/page.tsx b/server/app/login/page.tsx
index 4a9f204..4bfd112 100644
--- a/server/app/login/page.tsx
+++ b/server/app/login/page.tsx
@@ -30,12 +30,12 @@ export default async function LoginPage() {
 
   return (
     <>
-      <div className="px-6 py-12 shadow sm:rounded-lg sm:px-12 h-screen">
+      <div className="h-screen px-6 py-12 shadow sm:rounded-lg sm:px-12">
         <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-[480px]">
           <div className="bg-white px-6 py-12 shadow sm:rounded-lg sm:px-12">
             <div className="flex min-h-full flex-1 flex-col justify-center py-6 sm:px-6 lg:px-8">
               <Link href="/" className="-m-1.5 pb-8">
-                <GlobeAltIcon className="h-12 w-12 stroke-indigo-500 mx-auto" />
+                <GlobeAltIcon className="mx-auto size-12 stroke-indigo-500" />
               </Link>
               <h2 className="text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
                 Sign in with GitHub
diff --git a/server/app/page.tsx b/server/app/page.tsx
index 29369ba..a006c5e 100644
--- a/server/app/page.tsx
+++ b/server/app/page.tsx
@@ -26,24 +26,24 @@ export default async function Example() {
   const isLoggedIn = Boolean(session?.user);
 
   return (
-    <div className="bg-gradient-to-b from-zinc-500 to-zinc-900 h-screen">
+    <div className="h-screen bg-gradient-to-b from-zinc-500 to-zinc-900">
       <main>
         {/* Hero section */}
         <div className="relative isolate h-screen overflow-hidden bg-gray-900 pb-16 pt-14 sm:pb-20">
           <Image
             src={background_img}
             alt=""
-            className="absolute inset-0 -z-10 h-full w-full object-cover blur brightness-50"
+            className="absolute inset-0 -z-10 size-full object-cover blur brightness-50"
           />
 
           <div className="mx-auto max-w-7xl px-6 lg:px-8">
             <div className="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
               <div className="hidden sm:mb-8 sm:flex sm:justify-center">
                 <a href="https://github.com/private-attribution/draft/">
-                  <div className="relative rounded-full px-2 py-1 text-md text-white font-semibold leading-6 atext-gray-400 ring-1 ring-white/10 hover:ring-white/20">
+                  <div className="relative rounded-full px-2 py-1 text-base font-semibold leading-6 text-gray-300 ring-1 ring-white/10 hover:ring-white/20">
                     Check out <span className="font-mono font-thin">draft</span>{" "}
                     on Github
-                    <GitHubIcon className="inline-flex h-4 w-auto fill-white pl-1 mb-1" />
+                    <GitHubIcon className="mb-1 inline-flex h-4 w-auto fill-gray-300 pl-1" />
                   </div>
                 </a>
               </div>
diff --git a/server/app/query/create/page.tsx b/server/app/query/create/page.tsx
index 486f04e..6ddc293 100644
--- a/server/app/query/create/page.tsx
+++ b/server/app/query/create/page.tsx
@@ -84,9 +84,9 @@ function DemoLogsForm({
   return (
     <form
       onSubmit={handleDemoLogsFormSubmit}
-      className="rounded-md bg-slate-50 px-8 py-6 w-96"
+      className="w-96 rounded-md bg-slate-50 px-8 py-6"
     >
-      <h2 className="text-2xl mb-2 font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight">
+      <h2 className="mb-2 text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight">
         Demo Logger Query
       </h2>
       <SelectMenu
@@ -183,6 +183,7 @@ function IPAForm({
     CommitSpecifier.BRANCH,
     branches,
     commitHashes,
+    filteredCommitHashes.length,
   ]);
 
   useEffect(() => {
@@ -208,14 +209,14 @@ function IPAForm({
   return (
     <form
       onSubmit={handleIPAFormSubmit}
-      className="rounded-md bg-slate-50 px-8 py-6 w-96"
+      className="w-96 rounded-md bg-slate-50 px-8 py-6"
     >
-      <h2 className="text-2xl mb-2 font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight">
+      <h2 className="mb-2 text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight">
         IPA Query
       </h2>
       <div className="flex items-end">
         <div
-          className="flex-grow"
+          className="grow"
           onClick={() => {
             setCommitSpecifier(CommitSpecifier.BRANCH);
           }}
@@ -230,13 +231,13 @@ function IPAForm({
           />
         </div>
         <button
-          className="relative cursor-default rounded-md bg-white py-2.5 px-3 ml-1 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6"
+          className="relative ml-1 cursor-default rounded-md bg-white px-3 py-2.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6"
           onClick={(e) => {
             e.preventDefault();
             refreshBranches(selectedCommitHash);
           }}
         >
-          <ArrowPathIcon className="h-4 w-4" />
+          <ArrowPathIcon className="size-4" />
         </button>
       </div>
       <div
@@ -251,7 +252,7 @@ function IPAForm({
         <label
           htmlFor="commit_hash"
           className={clsx(
-            "block text-sm font-medium leading-6 text-gray-900 pt-4 pl-[-30px]",
+            "block pl-[-30px] pt-4 text-sm font-medium leading-6 text-gray-900",
             disableCommitHash && "opacity-25",
           )}
         >
@@ -271,13 +272,13 @@ function IPAForm({
               disableCommitHash && "opacity-25",
             )}
           />
-          <Combobox.Options className="absolute z-10 w-full mt-1 overflow-auto max-h-60 text-gray-900 bg-white shadow-lg rounded-md border border-gray-300 divide-y divide-gray-200 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+          <Combobox.Options className="absolute z-10 mt-1 max-h-60 w-full divide-y divide-gray-200 overflow-auto rounded-md border border-gray-300 bg-white text-gray-900 shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm">
             {filteredCommitHashes.map((commit) => (
               <Combobox.Option key={commit} value={commit} as={Fragment}>
                 {({ active, selected }) => (
                   <li
                     className={clsx(
-                      "py-2 px-2.5",
+                      "px-2.5 py-2",
                       active ? "bg-blue-500 text-white" : "text-black",
                     )}
                   >
@@ -292,7 +293,7 @@ function IPAForm({
         {!validCommitHash && (
           <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 pt-10">
             <ExclamationCircleIcon
-              className="h-5 w-5 text-red-500"
+              className="size-5 text-red-500"
               aria-hidden="true"
             />
           </div>
@@ -313,7 +314,7 @@ function IPAForm({
           type="number"
           name="size"
           defaultValue="1000"
-          className="relative w-full border-0 cursor-default rounded-md bg-white py-1.5 pl-3 pr-10 text-left text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6"
+          className="relative w-full cursor-default rounded-md border-0 bg-white py-1.5 pl-3 pr-10 text-left text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6"
         />
       </div>
 
@@ -351,12 +352,12 @@ function IPAForm({
             onChange={setStallDetectionEnabled}
             className={`${
               stallDetectionEnabled ? "bg-blue-600" : "bg-gray-200"
-            } relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2`}
+            } relative inline-flex size-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2`}
           >
             <span
               className={`${
                 stallDetectionEnabled ? "translate-x-6" : "translate-x-1"
-              } inline-block h-4 w-4 transform rounded-full bg-white transition-transform`}
+              } inline-block size-4 rounded-full bg-white transition-transform`}
             />
           </Switch>
           {/* Hidden input to ensure the field is always included in the form data */}
@@ -378,12 +379,12 @@ function IPAForm({
             onChange={setMultiThreadingEnabled}
             className={`${
               multiThreadingEnabled ? "bg-blue-600" : "bg-gray-200"
-            } relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2`}
+            } relative inline-flex size-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2`}
           >
             <span
               className={`${
                 multiThreadingEnabled ? "translate-x-6" : "translate-x-1"
-              } inline-block h-4 w-4 transform rounded-full bg-white transition-transform`}
+              } inline-block size-4 rounded-full bg-white transition-transform`}
             />
           </Switch>
           <input
@@ -404,12 +405,12 @@ function IPAForm({
             onChange={setDisableMetricsEnabled}
             className={`${
               disableMetricsEnabled ? "bg-blue-600" : "bg-gray-200"
-            } relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2`}
+            } relative inline-flex size-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2`}
           >
             <span
               className={`${
                 disableMetricsEnabled ? "translate-x-6" : "translate-x-1"
-              } inline-block h-4 w-4 transform rounded-full bg-white transition-transform`}
+              } inline-block size-4 rounded-full bg-white transition-transform`}
             />
           </Switch>
           <input
@@ -515,7 +516,7 @@ function PassedStateSelectMenu({
                 <span className="block truncate">{selected}</span>
                 <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
                   <ChevronUpDownIcon
-                    className="h-5 w-5 text-gray-400"
+                    className="size-5 text-gray-400"
                     aria-hidden="true"
                   />
                 </span>
@@ -525,7 +526,7 @@ function PassedStateSelectMenu({
                 <span className="block truncate">{selected}</span>
                 <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
                   <ChevronUpDownIcon
-                    className="h-5 w-5 text-gray-400"
+                    className="size-5 text-gray-400"
                     aria-hidden="true"
                   />
                 </span>
@@ -541,7 +542,7 @@ function PassedStateSelectMenu({
             >
               <Listbox.Options
                 className={clsx(
-                  "absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm",
+                  "absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm",
                 )}
               >
                 {options.map((value) => (
@@ -573,7 +574,7 @@ function PassedStateSelectMenu({
                               "absolute inset-y-0 right-0 flex items-center pr-4",
                             )}
                           >
-                            <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                            <CheckIcon className="size-5" aria-hidden="true" />
                           </span>
                         ) : null}
                       </>
diff --git a/server/app/query/layout.tsx b/server/app/query/layout.tsx
index 0e2e19e..dbea5ae 100644
--- a/server/app/query/layout.tsx
+++ b/server/app/query/layout.tsx
@@ -7,7 +7,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <div className="min-h-full bg-slate-100 dark:bg-slate-900 py-10 mx-auto max-w-7xl sm:px-6 lg:px-8">
+    <div className="mx-auto min-h-full max-w-7xl bg-slate-100 py-10 sm:px-6 lg:px-8 dark:bg-slate-900">
       {children}
     </div>
   );
diff --git a/server/app/query/view/[id]/charts.tsx b/server/app/query/view/[id]/charts.tsx
index 9ea1928..fe7c654 100644
--- a/server/app/query/view/[id]/charts.tsx
+++ b/server/app/query/view/[id]/charts.tsx
@@ -117,18 +117,18 @@ export function StatsComponent({
   };
 
   return (
-    <div className={clsx(`w-full pt-2 bg-white dark:bg-slate-950`, className)}>
-      <h2 className="w-full px-2 text-md font-bold leading-7 text-gray-900 dark:text-gray-100 sm:truncate sm:text-md sm:tracking-tight">
+    <div className={clsx(`w-full bg-white pt-2 dark:bg-slate-950`, className)}>
+      <h2 className="w-full px-2 text-base font-bold leading-7 text-gray-900 sm:truncate sm:text-base sm:tracking-tight dark:text-gray-100">
         {remoteServer.toString()} Server
       </h2>
 
       <div className="md:flex">
-        <div className="w-full md:w-1/2 mb-4 md:mb-0 px-2">
+        <div className="mb-4 w-full px-2 md:mb-0 md:w-1/2">
           {memoryChartData && (
             <Line data={memoryChartData} options={memoryChartOptions} />
           )}
         </div>
-        <div className="w-full md:w-1/2 mb-4 md:mb-0 px-2">
+        <div className="mb-4 w-full px-2 md:mb-0 md:w-1/2">
           {cpuChartData && (
             <Line data={cpuChartData} options={cpuChartOptions} />
           )}
diff --git a/server/app/query/view/[id]/components.tsx b/server/app/query/view/[id]/components.tsx
index c9e7c72..73c6927 100644
--- a/server/app/query/view/[id]/components.tsx
+++ b/server/app/query/view/[id]/components.tsx
@@ -11,9 +11,9 @@ export function HiddenSectionChevron({
   sectionHidden: boolean;
 }) {
   return sectionHidden ? (
-    <ChevronRightIcon className="h-4 mt-1" />
+    <ChevronRightIcon className="mt-1 h-4" />
   ) : (
-    <ChevronDownIcon className="h-4 mt-1" />
+    <ChevronDownIcon className="mt-1 h-4" />
   );
 }
 
@@ -88,7 +88,7 @@ export function LogViewer({
   return (
     <div
       className={clsx(
-        "w-full bg-white dark:bg-slate-950 overflow-y-scroll max-h-96 text-start text-wrap",
+        "max-h-96 w-full overflow-y-scroll text-wrap bg-white text-start dark:bg-slate-950",
         className,
       )}
     >
@@ -100,7 +100,7 @@ export function LogViewer({
               <div className="flex" key={index}>
                 <dt
                   className={clsx(
-                    "flex-none w-80 text-slate-900 dark:text-slate-100 text-xs",
+                    "w-80 flex-none text-xs text-slate-900 dark:text-slate-100",
                     sourceCodePro.className,
                   )}
                 >
@@ -108,7 +108,7 @@ export function LogViewer({
                 </dt>
                 <dd
                   className={clsx(
-                    "text-slate-900 dark:text-slate-100 text-xs",
+                    "text-xs text-slate-900 dark:text-slate-100",
                     sourceCodePro.className,
                   )}
                 >
@@ -120,7 +120,7 @@ export function LogViewer({
           <div
             key="last"
             className={clsx(
-              "text-slate-900 dark:text-slate-100 text-xs whitespace-pre-line animate-pulse",
+              "animate-pulse whitespace-pre-line text-xs text-slate-900 dark:text-slate-100",
               sourceCodePro.className,
             )}
           >
diff --git a/server/app/query/view/[id]/page.tsx b/server/app/query/view/[id]/page.tsx
index f34bc09..745f233 100644
--- a/server/app/query/view/[id]/page.tsx
+++ b/server/app/query/view/[id]/page.tsx
@@ -127,9 +127,9 @@ export default function QueryPage({ params }: { params: { id: string } }) {
 
   return (
     <>
-      <div className="flex justify-between items-center">
+      <div className="flex items-center justify-between">
         <div>
-          <h2 className="text-2xl font-bold leading-7 text-gray-900 dark:text-gray-100 sm:truncate sm:text-3xl sm:tracking-tight">
+          <h2 className="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight dark:text-gray-100">
             Query Details
           </h2>
         </div>
@@ -144,7 +144,7 @@ export default function QueryPage({ params }: { params: { id: string } }) {
         </div>
       </div>
 
-      <div className="mt-6 border-t border-b border-gray-300 dark:border-gray-700">
+      <div className="mt-6 border-y border-gray-300 dark:border-gray-700">
         <dl className="divide-y divide-gray-200 dark:divide-gray-800">
           {[
             ["Display name", params.id],
@@ -160,7 +160,7 @@ export default function QueryPage({ params }: { params: { id: string } }) {
                 <dt className="text-sm font-medium leading-6 text-gray-900 dark:text-gray-100">
                   {name}:
                 </dt>
-                <dd className="mt-1 text-sm leading-6 text-gray-700 dark:text-gray-300 sm:col-span-2 sm:mt-0">
+                <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0 dark:text-gray-300">
                   {value}
                 </dd>
               </div>
@@ -184,7 +184,7 @@ export default function QueryPage({ params }: { params: { id: string } }) {
                           <span className="truncate font-medium"> {key}</span>
                         </div>
                       </div>
-                      <div className="ml-4 flex-shrink-0 font-medium text-sky-700">
+                      <div className="ml-4 shrink-0 font-medium text-sky-700">
                         {value as string}
                       </div>
                     </li>
@@ -196,15 +196,15 @@ export default function QueryPage({ params }: { params: { id: string } }) {
         </dl>
       </div>
 
-      <div className="w-full text-left mx-auto max-w-7xl overflow-hidden rounded-lg bg-slate-50 dark:bg-slate-950 shadow mt-10">
+      <div className="mx-auto mt-10 w-full max-w-7xl overflow-hidden rounded-lg bg-slate-50 text-left shadow dark:bg-slate-950">
         <button
           onClick={flipStatsHidden}
-          className="w-full h-full border-b border-gray-300 dark:border-gray-700"
+          className="size-full border-b border-gray-300 dark:border-gray-700"
         >
-          <div className="flex justify-between px-4 py-5 sm:p-6 font-bold text-slate-900 dark:text-slate-100">
+          <div className="flex justify-between px-4 py-5 font-bold text-slate-900 sm:p-6 dark:text-slate-100">
             <div className="flex">
               <HiddenSectionChevron sectionHidden={statsHidden} />
-              <h3 className="text-base pl-2 font-semibold leading-6 text-gray-900 dark:text-gray-100">
+              <h3 className="pl-2 text-base font-semibold leading-6 text-gray-900 dark:text-gray-100">
                 Stats
               </h3>
             </div>
@@ -220,7 +220,7 @@ export default function QueryPage({ params }: { params: { id: string } }) {
                   return (
                     <div
                       key={remoteServer.remoteServerName}
-                      className="w-48 overflow-hidden rounded-lg bg-white dark:bg-slate-900 px-4 py-2 shadow"
+                      className="w-48 overflow-hidden rounded-lg bg-white px-4 py-2 shadow dark:bg-slate-900"
                     >
                       <dt className="truncate text-sm font-medium text-gray-500 dark:text-gray-300">
                         {remoteServer.toString()} Run Time
@@ -247,12 +247,12 @@ export default function QueryPage({ params }: { params: { id: string } }) {
 
         <button
           onClick={flipLogsHidden}
-          className="w-full h-full border-b border-gray-300 dark:border-gray-700"
+          className="size-full border-b border-gray-300 dark:border-gray-700"
         >
-          <div className="flex justify-between px-4 py-5 sm:p-6 font-bold text-slate-900 dark:text-slate-100">
+          <div className="flex justify-between px-4 py-5 font-bold text-slate-900 sm:p-6 dark:text-slate-100">
             <div className="flex">
               <HiddenSectionChevron sectionHidden={logsHidden} />
-              <h3 className="text-base pl-2 font-semibold leading-6 text-gray-900 dark:text-gray-100">
+              <h3 className="pl-2 text-base font-semibold leading-6 text-gray-900 dark:text-gray-100">
                 Logs
               </h3>
             </div>
@@ -266,7 +266,7 @@ export default function QueryPage({ params }: { params: { id: string } }) {
                   return (
                     <div
                       key={remoteServer.remoteServerName}
-                      className="w-48 overflow-hidden rounded-lg bg-white dark:bg-slate-900 px-4 py-2 shadow"
+                      className="w-48 overflow-hidden rounded-lg bg-white px-4 py-2 shadow dark:bg-slate-900"
                     >
                       <dt className="truncate text-sm font-medium text-gray-500 dark:text-gray-300">
                         {remoteServer.remoteServerNameStr} Status
@@ -287,7 +287,7 @@ export default function QueryPage({ params }: { params: { id: string } }) {
               <div>
                 <ul
                   role="list"
-                  className="divide-y divide-gray-100 dark:divide-gray-900 border-b border-gray-200 dark:border-gray-800"
+                  className="divide-y divide-gray-100 border-b border-gray-200 dark:divide-gray-900 dark:border-gray-800"
                 >
                   {Object.values(IPARemoteServers).map(
                     (remoteServer: RemoteServer) => {
@@ -299,7 +299,7 @@ export default function QueryPage({ params }: { params: { id: string } }) {
                               type="checkbox"
                               defaultChecked={true}
                               onChange={handleCheckbox}
-                              className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                              className="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                             />
                             <div className="flex w-0 flex-1 items-center">
                               <div className="ml-4 flex min-w-0 flex-1 gap-2">
@@ -311,7 +311,7 @@ export default function QueryPage({ params }: { params: { id: string } }) {
                               </div>
                             </div>
                             {query && (
-                              <div className="ml-4 flex-shrink-0">
+                              <div className="ml-4 shrink-0">
                                 <a
                                   href={remoteServer
                                     .logURL(query.uuid)
diff --git a/server/package-lock.json b/server/package-lock.json
index cd99c0c..908a5f5 100644
--- a/server/package-lock.json
+++ b/server/package-lock.json
@@ -39,12 +39,13 @@
         "dotenv": "^16.4.5",
         "eslint": "^8",
         "eslint-config-next": "14.0.3",
+        "eslint-plugin-tailwindcss": "^3.17.4",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
         "next-test-api-route-handler": "^4.0.8",
         "postcss": "^8",
         "prettier": "3.3.1",
-        "tailwindcss": "^3.3.0",
+        "tailwindcss": "^3.4.4",
         "typescript": "^5"
       }
     },
@@ -5814,6 +5815,22 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/eslint-plugin-tailwindcss": {
+      "version": "3.17.4",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-tailwindcss/-/eslint-plugin-tailwindcss-3.17.4.tgz",
+      "integrity": "sha512-gJAEHmCq2XFfUP/+vwEfEJ9igrPeZFg+skeMtsxquSQdxba9XRk5bn0Bp9jxG1VV9/wwPKi1g3ZjItu6MIjhNg==",
+      "dev": true,
+      "dependencies": {
+        "fast-glob": "^3.2.5",
+        "postcss": "^8.4.4"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "peerDependencies": {
+        "tailwindcss": "^3.4.0"
+      }
+    },
     "node_modules/eslint-scope": {
       "version": "7.2.2",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
@@ -10441,9 +10458,9 @@
       "dev": true
     },
     "node_modules/tailwindcss": {
-      "version": "3.3.5",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.5.tgz",
-      "integrity": "sha512-5SEZU4J7pxZgSkv7FP1zY8i2TIAOooNZ1e/OGtxIEv6GltpoiXUqWvLy89+a10qYTB1N5Ifkuw9lqQkN9sscvA==",
+      "version": "3.4.4",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.4.tgz",
+      "integrity": "sha512-ZoyXOdJjISB7/BcLTR6SEsLgKtDStYyYZVLsUtWChO4Ps20CBad7lfJKVDiejocV4ME1hLmyY0WJE3hSDcmQ2A==",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -10453,7 +10470,7 @@
         "fast-glob": "^3.3.0",
         "glob-parent": "^6.0.2",
         "is-glob": "^4.0.3",
-        "jiti": "^1.19.1",
+        "jiti": "^1.21.0",
         "lilconfig": "^2.1.0",
         "micromatch": "^4.0.5",
         "normalize-path": "^3.0.0",
diff --git a/server/package.json b/server/package.json
index e7aaad0..60e74c1 100644
--- a/server/package.json
+++ b/server/package.json
@@ -6,7 +6,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
+    "lint": "next lint --max-warnings 0",
+    "lint:fix": "next lint --fix",
     "//": "run in band to avoid db overlap. not ideal but works for now",
     "test": "jest --runInBand"
   },
@@ -42,12 +43,13 @@
     "dotenv": "^16.4.5",
     "eslint": "^8",
     "eslint-config-next": "14.0.3",
+    "eslint-plugin-tailwindcss": "^3.17.4",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "next-test-api-route-handler": "^4.0.8",
     "postcss": "^8",
     "prettier": "3.3.1",
-    "tailwindcss": "^3.3.0",
+    "tailwindcss": "^3.4.4",
     "typescript": "^5"
   }
 }