diff --git a/app/page.tsx b/app/page.tsx
index db398b8..7440654 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -73,10 +73,6 @@ export default function Lightning() {
       },
       logs: true,
       onQueueUpdate: (update) => {
-        if (update.status === "IN_PROGRESS" && update.logs) {
-          // update.logs.map((log) => log.message).forEach(console.log);
-          console.log(update.logs.slice(-1)[0]?.message);
-        }
         if (update.status === "COMPLETED") {
           inferenceTime = update.metrics.inference_time as number;
         }
@@ -118,7 +114,7 @@ export default function Lightning() {
           <div className="container px-3 md:px-0 flex flex-col mt-10">
             <div className="flex flex-row items-center justify-center space-x-3">
               <div className="w-80 flex flex-col justify-center items-center space-y-2">
-                <label className="text-neutral-400 ml-4 uppercase text-xs">
+                <label className="text-neutral-500 dark:text-neutral-400 ml-4 uppercase text-xs">
                   Image
                 </label>
                 <Input
@@ -133,14 +129,15 @@ export default function Lightning() {
                 />
               </div>
               <div className="flex flex-col space-y-2 text-sm items-center justify-center">
-                <label className="text-neutral-400 uppercase text-xs">
+                <label className="text-neutral-500 dark:text-neutral-400 uppercase text-xs">
                   Compare Mode
                 </label>
-                <div className="w-fit bg-neutral-900 p-1 rounded-full flex items-center justify-between space-x-2">
+                <div className="w-fit select-none text-neutral-600 dark:text-neutral-300 bg-neutral-200 dark:bg-neutral-900 p-1 rounded-full flex items-center justify-between space-x-2">
                   <span
                     onClick={() => setMode("original")}
                     className={cn(
-                      mode === "original" && "bg-neutral-200 text-black",
+                      mode === "original" &&
+                        "bg-neutral-900 text-white dark:bg-neutral-200 dark:text-black",
                       "w-1/2 cursor-pointer text-sm  rounded-full h-8 px-3 flex items-center"
                     )}
                   >
@@ -149,7 +146,8 @@ export default function Lightning() {
                   <span
                     onClick={() => setMode("model")}
                     className={cn(
-                      mode === "model" && "bg-neutral-200 text-black",
+                      mode === "model" &&
+                        "bg-neutral-900 text-white dark:bg-neutral-200 dark:text-black",
                       "w-1/2 cursor-pointer text-sm  rounded-full h-8 px-3 flex items-center"
                     )}
                   >
diff --git a/components/compare-image-label.tsx b/components/compare-image-label.tsx
new file mode 100644
index 0000000..488badc
--- /dev/null
+++ b/components/compare-image-label.tsx
@@ -0,0 +1,32 @@
+import { cn, formatTime } from "@/lib/utils";
+import { LoaderIcon } from "lucide-react";
+
+interface CompareImageLabelProps {
+  modelData: any;
+  name: string;
+  position?: "left" | "right";
+}
+
+const CompareImageLabel = ({
+  modelData,
+  name,
+  position = "left",
+}: CompareImageLabelProps) => (
+  <div
+    className={cn(
+      "absolute flex items-center space-x-2 top-[50%] text-black dark:text-white bg-white/40 dark:bg-black/50 text-xs py-1 rounded-full px-2",
+      position === "right" ? "right-4" : "left-4"
+    )}
+  >
+    <span>{name}</span>
+    {modelData ? (
+      <span className={!modelData ? "text-neutral-500" : "text-green-400"}>
+        {modelData ? formatTime(modelData.inferenceTime * 1000) : `n/a`}
+      </span>
+    ) : (
+      <LoaderIcon className="animate-spin w-4 h-4 text-green-400" />
+    )}
+  </div>
+);
+
+export default CompareImageLabel;
diff --git a/components/model-compare.tsx b/components/model-compare.tsx
index 2330031..b83e8ed 100644
--- a/components/model-compare.tsx
+++ b/components/model-compare.tsx
@@ -1,9 +1,18 @@
-import { cn, formatTime } from "@/lib/utils";
+import { formatTime } from "@/lib/utils";
 import Image from "next/image";
 import {
   ReactCompareSlider,
   ReactCompareSliderImage,
 } from "react-compare-slider";
+import CompareImageLabel from "./compare-image-label";
+
+interface ModelCompareProps {
+  originalImage: string;
+  position: number;
+  setPosition: (position: number) => void;
+  modelOne: any;
+  modelTwo: any;
+}
 
 const ModelCompare = ({
   originalImage,
@@ -11,7 +20,7 @@ const ModelCompare = ({
   setPosition,
   modelOne,
   modelTwo,
-}) => {
+}: ModelCompareProps) => {
   return (
     <div className="container flex flex-col space-y-6 lg:flex-row lg:space-y-0 p-3 md:px-0 pt-7 space-x-6">
       <div className="flex-1 flex-col flex w-full items-center justify-center">
@@ -55,20 +64,7 @@ const ModelCompare = ({
               onPositionChange={(position) => setPosition(position)}
               itemOne={
                 <>
-                  <div className="absolute space-x-2 top-[50%] left-4 bg-black/50 text-xs py-1 rounded-full px-2">
-                    <span>CCSR</span>
-                    {modelOne && (
-                      <span
-                        className={
-                          !modelOne ? "text-neutral-500" : "text-green-400"
-                        }
-                      >
-                        {modelOne
-                          ? formatTime(modelOne.inferenceTime * 1000)
-                          : `n/a`}
-                      </span>
-                    )}
-                  </div>
+                  <CompareImageLabel modelData={modelOne} name="CCSR" />
                   <ReactCompareSliderImage
                     src={(modelOne?.image || originalImage) as string}
                     srcSet={(modelOne?.image || originalImage) as string}
@@ -78,20 +74,12 @@ const ModelCompare = ({
               }
               itemTwo={
                 <>
-                  <div className="absolute space-x-2 top-[50%] right-4 bg-black/50 text-xs py-1 rounded-full px-2">
-                    {modelTwo && (
-                      <span
-                        className={
-                          !modelTwo ? "text-neutral-500" : "text-green-400"
-                        }
-                      >
-                        {modelTwo
-                          ? formatTime(modelTwo.inferenceTime * 1000)
-                          : `n/a`}
-                      </span>
-                    )}
-                    <span>SUPIR</span>
-                  </div>
+                  <CompareImageLabel
+                    modelData={modelTwo}
+                    name="SUPIR"
+                    position="right"
+                  />
+
                   <ReactCompareSliderImage
                     src={(modelTwo?.image || originalImage) as string}
                     srcSet={(modelTwo?.image || originalImage) as string}
diff --git a/components/original-compare.tsx b/components/original-compare.tsx
index 2a4f210..c8e1d7d 100644
--- a/components/original-compare.tsx
+++ b/components/original-compare.tsx
@@ -1,10 +1,17 @@
-import { formatTime } from "@/lib/utils";
-import { LoaderIcon } from "lucide-react";
 import Image from "next/image";
 import {
   ReactCompareSlider,
   ReactCompareSliderImage,
 } from "react-compare-slider";
+import CompareImageLabel from "./compare-image-label";
+
+interface OriginalCompareProps {
+  originalImage: string;
+  position: number;
+  setPosition: (position: number) => void;
+  modelOne: any;
+  modelTwo: any;
+}
 
 const OriginalCompare = ({
   originalImage,
@@ -12,7 +19,7 @@ const OriginalCompare = ({
   setPosition,
   modelOne,
   modelTwo,
-}) => {
+}: OriginalCompareProps) => {
   return (
     <div className="container flex flex-col space-y-6 lg:flex-row lg:space-y-0 p-3 md:px-0 pt-7 lg:space-x-6">
       <div className="flex-1">
@@ -25,7 +32,7 @@ const OriginalCompare = ({
           />
           <a
             href="https://fal.ai/models/ccsr"
-            className="text-indigo-400 font-medium text-sm"
+            className="text-indigo-500 dark:text-indigo-400 font-medium text-sm"
             target="_blank"
           >
             fal-ai/ccsr
@@ -39,7 +46,7 @@ const OriginalCompare = ({
               onPositionChange={(position) => setPosition(position)}
               itemOne={
                 <>
-                  <div className="absolute top-[50%] left-4 bg-black/50 text-xs py-1 rounded-full px-2">
+                  <div className="absolute top-[50%] left-4 text-black dark:text-white bg-white/40 dark:bg-black/50 text-xs py-1 rounded-full px-2">
                     Original
                   </div>
                   <ReactCompareSliderImage
@@ -51,22 +58,11 @@ const OriginalCompare = ({
               }
               itemTwo={
                 <>
-                  <div className="absolute flex items-center space-x-2 top-[50%] right-4 bg-black/50 text-xs py-1 rounded-full px-2">
-                    <span>CCSR</span>
-                    {modelOne ? (
-                      <span
-                        className={
-                          !modelOne ? "text-neutral-500" : "text-green-400"
-                        }
-                      >
-                        {modelOne
-                          ? formatTime(modelOne.inferenceTime * 1000)
-                          : `n/a`}
-                      </span>
-                    ) : (
-                      <LoaderIcon className="animate-spin w-4 h-4 text-green-400" />
-                    )}
-                  </div>
+                  <CompareImageLabel
+                    modelData={modelOne}
+                    name="CCSR"
+                    position="right"
+                  />
                   <ReactCompareSliderImage
                     src={modelOne?.image as string}
                     srcSet={modelOne?.image as string}
@@ -103,7 +99,7 @@ const OriginalCompare = ({
           />
           <a
             href="https://fal.ai/models/supir"
-            className="text-indigo-400 font-medium text-sm"
+            className="text-indigo-500 dark:text-indigo-400 font-medium text-sm"
             target="_blank"
           >
             fal-ai/supir
@@ -117,7 +113,7 @@ const OriginalCompare = ({
               onPositionChange={(position) => setPosition(position)}
               itemOne={
                 <>
-                  <div className="absolute top-[50%] left-4 bg-black/50 text-xs py-1 rounded-full px-2">
+                  <div className="absolute top-[50%] left-4 text-black dark:text-white bg-white/40 dark:bg-black/50 text-xs py-1 rounded-full px-2">
                     Original
                   </div>
                   <ReactCompareSliderImage
@@ -134,22 +130,11 @@ const OriginalCompare = ({
                     srcSet={modelTwo?.image as string}
                     alt="Image one"
                   />
-                  <div className="absolute flex items-center space-x-2 top-[50%] right-4 bg-black/50 text-xs py-1 rounded-full px-2">
-                    <span>SUPIR</span>
-                    {modelTwo ? (
-                      <span
-                        className={
-                          !modelTwo ? "text-neutral-500" : "text-green-400"
-                        }
-                      >
-                        {modelTwo
-                          ? formatTime(modelTwo.inferenceTime * 1000)
-                          : `n/a`}
-                      </span>
-                    ) : (
-                      <LoaderIcon className="animate-spin w-4 h-4 text-green-400" />
-                    )}
-                  </div>
+                  <CompareImageLabel
+                    position="right"
+                    modelData={modelTwo}
+                    name="SUPIR"
+                  />
                 </>
               }
             />