diff --git a/web/src/components/dynamic/NewReviewData.tsx b/web/src/components/dynamic/NewReviewData.tsx
index f600a85e9..d77e64203 100644
--- a/web/src/components/dynamic/NewReviewData.tsx
+++ b/web/src/components/dynamic/NewReviewData.tsx
@@ -2,6 +2,7 @@ import { ReviewSegment } from "@/types/review";
 import { Button } from "../ui/button";
 import { LuRefreshCcw } from "react-icons/lu";
 import { MutableRefObject, useMemo } from "react";
+import { cn } from "@/lib/utils";
 
 type NewReviewDataProps = {
   className: string;
@@ -29,11 +30,12 @@ export default function NewReviewData({
     <div className={className}>
       <div className="pointer-events-auto mr-[65px] flex items-center justify-center md:mr-[115px]">
         <Button
-          className={`${
+          className={cn(
             hasUpdate
               ? "duration-500 animate-in slide-in-from-top"
-              : "invisible"
-          }  mx-auto mt-5 bg-gray-400 text-center text-white`}
+              : "invisible",
+            "mx-auto mt-5 bg-gray-400 text-center text-white",
+          )}
           onClick={() => {
             pullLatestData();
             if (contentRef.current) {
diff --git a/web/src/components/overlay/SaveExportOverlay.tsx b/web/src/components/overlay/SaveExportOverlay.tsx
index 5b95f4da9..db8e73c5b 100644
--- a/web/src/components/overlay/SaveExportOverlay.tsx
+++ b/web/src/components/overlay/SaveExportOverlay.tsx
@@ -1,6 +1,7 @@
 import { LuX } from "react-icons/lu";
 import { Button } from "../ui/button";
 import { FaCompactDisc } from "react-icons/fa";
+import { cn } from "@/lib/utils";
 
 type SaveExportOverlayProps = {
   className: string;
@@ -17,9 +18,11 @@ export default function SaveExportOverlay({
   return (
     <div className={className}>
       <div
-        className={`pointer-events-auto flex items-center justify-center gap-2 rounded-lg px-2 ${
-          show ? "duration-500 animate-in slide-in-from-top" : "invisible"
-        }  mx-auto mt-5 text-center`}
+        className={cn(
+          "pointer-events-auto flex items-center justify-center gap-2 rounded-lg px-2",
+          show ? "duration-500 animate-in slide-in-from-top" : "invisible",
+          "mx-auto mt-5 text-center",
+        )}
       >
         <Button
           className="flex items-center gap-1"
diff --git a/web/src/views/system/GeneralMetrics.tsx b/web/src/views/system/GeneralMetrics.tsx
index be083af5c..585187ed9 100644
--- a/web/src/views/system/GeneralMetrics.tsx
+++ b/web/src/views/system/GeneralMetrics.tsx
@@ -445,7 +445,7 @@ export default function GeneralMetrics({
                 </Button>
               )}
             </div>
-            <div className=" mt-4 grid grid-cols-1 gap-2 sm:grid-cols-2">
+            <div className="mt-4 grid grid-cols-1 gap-2 sm:grid-cols-2">
               {statsHistory.length != 0 ? (
                 <div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
                   <div className="mb-5">GPU Usage</div>