diff --git a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/shared/AddPipelineButton.tsx b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/shared/AddPipelineButton.tsx
index a38a81f08..88908506d 100644
--- a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/shared/AddPipelineButton.tsx
+++ b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/shared/AddPipelineButton.tsx
@@ -204,7 +204,7 @@ const AddPipelineButton = () => {
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <button className="w-full h-full min-h-[200px] border-2 border-dashed border-gray-300 dark:border-gray-700 hover:border-classic-blue hover:bg-blue-50 dark:hover:bg-blue-950/20 transition-all flex flex-col items-center justify-center gap-3 text-carbon-tint-1 dark:text-gray-400 hover:text-classic-blue dark:hover:text-blue-400">
+        <button className="w-full h-full min-h-[200px] border-2 border-dashed border-gray-300 dark:border-gray-700 hover:border-classic-blue dark:hover:border-energy-blue hover:bg-blue-50 dark:hover:bg-energy-blue/5 transition-all flex flex-col items-center justify-center gap-3 text-carbon-tint-1 dark:text-gray-400 hover:text-classic-blue  dark:hover:text-energy-blue">
           <Plus className="w-12 h-12" />
           <span className="text-lg font-medium">Add New Pipeline</span>
         </button>
diff --git a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/shared/CopyPipelineButton.tsx b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/shared/CopyPipelineButton.tsx
index 86ccb2b26..47c124e21 100644
--- a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/shared/CopyPipelineButton.tsx
+++ b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/shared/CopyPipelineButton.tsx
@@ -130,7 +130,7 @@ const CopyPipelineButton = ({
                     setName(`Copy of ${baseName} [${e.target.value}]`);
                   }
                 }}
-                className="w-full px-3 py-2 border"
+                className="w-full px-3 py-2 border bg-background"
               >
                 {tags.map((tag) => (
                   <option key={tag} value={tag}>
@@ -179,13 +179,13 @@ const CopyPipelineButton = ({
 
           <div className="flex justify-end gap-2">
             <button
-              className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 transition-colors"
+              className="w-fit px-4 py-2 bg-background hover:bg-classic-blue dark:hover:bg-energy-blue border-2 border-classic-blue dark:border-energy-blue text-primary dark:text-energy-blue hover:text-white dark:hover:text-[#242528] transition-colors flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed font-medium"
               onClick={() => setOpen(false)}
             >
               Cancel
             </button>
             <button
-              className="px-4 py-2 text-sm font-medium text-white bg-classic-blue hover:bg-classic-blue-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              className="w-fit px-4 py-2 bg-primary font-medium text-primary-foreground hover:bg-classic-blue-hover disabled:opacity-50 disabled:cursor-not-allowed dark:bg-energy-blue dark:hover:bg-energy-blue-tint-1 transition-colors"
               onClick={handleCopy}
               disabled={isLoading || !name.trim() || !selectedPipeline}
             >
diff --git a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/shared/Navigation.tsx b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/shared/Navigation.tsx
index d6efaf954..395a6e5a5 100644
--- a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/shared/Navigation.tsx
+++ b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/shared/Navigation.tsx
@@ -7,14 +7,18 @@ import {
   Grid3x3,
   Home,
   ListTodo,
+  Moon,
+  Sun,
 } from "lucide-react";
 import logo from "@/assets/digital-unboxed-energyblue-white.svg";
 import { PipelineNameEdit } from "@/components/shared/PipelineNameEdit.tsx";
+import { useTheme } from "next-themes";
 
 const Navigation = () => {
   const location = useLocation();
   const navigate = useNavigate();
   const params = useParams();
+  const { theme, setTheme } = useTheme();
 
   // Check if we're on the pipeline editor page
   const isPipelineEditorPage = location.pathname.startsWith("/pipelines/");
@@ -31,48 +35,72 @@ const Navigation = () => {
 
   if (isPipelineEditorPage && pipelineId) {
     return (
-      <nav className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
-        <div className="flex items-center gap-4 px-4 h-[60px]">
+      <nav className="bg-white dark:bg-[#313236] border-b border-gray-200 dark:border-gray-800">
+        <div className="flex items-center justify-between px-4 h-[60px]">
+          <div className="flex items-center gap-4">
+            <button
+              onClick={() => navigate("/")}
+              className="flex items-center gap-2 text-gray-700 dark:text-gray-300 hover:text-classic-blue dark:hover:text-energy-blue transition-colors cursor-pointer"
+            >
+              <ArrowLeft className="w-5 h-5" />
+              <span className="text-sm font-medium">Back</span>
+            </button>
+            <div className="h-7 w-px bg-gray-300 dark:bg-gray-700" />
+            <span className="text-gray-900 dark:text-white font-medium text-lg">
+              <PipelineNameEdit pipelineId={pipelineId} />
+            </span>
+          </div>
           <button
-            onClick={() => navigate("/")}
-            className="flex items-center gap-2 text-gray-700 dark:text-gray-300 hover:text-classic-blue dark:hover:text-energy-blue transition-colors cursor-pointer"
+            onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+            aria-label="Toggle theme"
           >
-            <ArrowLeft className="w-5 h-5" />
-            <span className="text-sm font-medium">Back</span>
+            {theme === "dark" ? (
+              <Sun className="w-5 h-5 text-white hover:text-energy-blue" />
+            ) : (
+              <Moon className="w-5 h-5 hover:text-cyan-300 text-gray-700" />
+            )}
           </button>
-          <div className="h-7 w-px bg-gray-300 dark:bg-gray-700" />
-          <span className="text-gray-900 dark:text-white font-medium text-lg">
-            <PipelineNameEdit pipelineId={pipelineId} />
-          </span>
         </div>
       </nav>
     );
   }
 
   return (
-    <nav className="bg-classic-blue dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
-      <div className="flex items-center gap-6 px-4 h-[60px]">
-        <img src={logo} alt="Intel" className="h-7" />
-        <span className="text-white font-medium text-lg pt-1.5">ViPPET</span>
-        <div className="flex items-center gap-1">
-          {navItems.map((item) => (
-            <NavLink
-              key={item.to}
-              to={item.to}
-              end={item.to === "/"}
-              className={({ isActive }) =>
-                `flex items-center gap-2 px-4 pt-5 pb-3 text-md font-medium transition-colors ${
-                  isActive
-                    ? "text-energy-blue dark:text-energy-blue border-b-2 border-white dark:border-blue-400"
-                    : "text-white dark:text-gray-400 hover:text-energy-blue dark:hover:text-gray-100 border-b-2 border-transparent"
-                }`
-              }
-            >
-              <item.icon className="w-4 h-4" />
-              {item.label}
-            </NavLink>
-          ))}
+    <nav className="bg-classic-blue dark:bg-[#313236] border-b border-gray-200 dark:border-gray-800">
+      <div className="flex items-center justify-between px-4 h-[60px]">
+        <div className="flex items-center gap-6">
+          <img src={logo} alt="Intel" className="h-7" />
+          <span className="text-white font-medium text-lg pt-1.5">ViPPET</span>
+          <div className="flex items-center gap-1">
+            {navItems.map((item) => (
+              <NavLink
+                key={item.to}
+                to={item.to}
+                end={item.to === "/"}
+                className={({ isActive }) =>
+                  `flex items-center gap-2 px-4 pt-5 pb-3 text-md font-medium transition-colors ${
+                    isActive
+                      ? "text-white border-b-2 border-white dark:border-blue-400 dark:hover:bg-[#242528] hover:bg-classic-blue-hover"
+                      : "text-white dark:text-[#ffffff] dark:hover:bg-[#242528] border-b-2 border-transparent hover:bg-classic-blue-hover"
+                  }`
+                }
+              >
+                <item.icon className="w-4 h-4" />
+                {item.label}
+              </NavLink>
+            ))}
+          </div>
         </div>
+        <button
+          onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+          aria-label="Toggle theme"
+        >
+          {theme === "dark" ? (
+            <Sun className="w-5 h-5 text-white hover:text-energy-blue" />
+          ) : (
+            <Moon className="w-5 h-5 text-white hover:text-cyan-300" />
+          )}
+        </button>
       </div>
     </nav>
   );
diff --git a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/shared/ParticipationSlider.tsx b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/shared/ParticipationSlider.tsx
index 00676a3e6..5ce24f873 100644
--- a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/shared/ParticipationSlider.tsx
+++ b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/shared/ParticipationSlider.tsx
@@ -15,7 +15,7 @@ export const ParticipationSlider = ({
 }: ParticipationSliderProps) => {
   return (
     <div className="flex items-center gap-3">
-      <span className="text-sm text-gray-600 min-w-[2ch] text-center">
+      <span className="text-sm text-muted-foreground min-w-[2ch] text-center">
         {min}
       </span>
       <Slider
@@ -26,7 +26,7 @@ export const ParticipationSlider = ({
         step={1}
         className="flex-1"
       />
-      <span className="text-sm text-gray-600 min-w-[3ch] text-center">
+      <span className="text-sm text-muted-foreground min-w-[3ch] text-center">
         {max}
       </span>
       <input
@@ -40,10 +40,11 @@ export const ParticipationSlider = ({
         }}
         min={min}
         max={max}
-        className="w-[4rem] px-2 py-1 text-sm font-medium text-center border"
+        className="w-[4rem] px-2 py-1 text-sm font-medium border bg-background [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+        style={{ textAlign: 'center' }}
         disabled={true}
       />
-      <span className="text-sm text-gray-600">%</span>
+      <span className="text-sm text-muted-foreground">%</span>
     </div>
   );
 };
diff --git a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/shared/SaveOutputWarning.tsx b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/shared/SaveOutputWarning.tsx
index c8b13bd19..66458eb64 100644
--- a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/shared/SaveOutputWarning.tsx
+++ b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/shared/SaveOutputWarning.tsx
@@ -1,6 +1,6 @@
 const SaveOutputWarning = () => {
   return (
-    <div className="text-muted-foreground border border-amber-400 my-2 p-2 bg-amber-200/50 w-1/2">
+    <div className="text-muted-foreground dark:text-foreground/80 border border-amber-400 my-2 p-2 bg-amber-200/50 w-1/2">
       <b>Note 1</b>: The current implementation does not automatically infer the
       best encoding device from the existing pipeline. Select the same device
       that is already used by other blocks in your pipeline. To learn more,
diff --git a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/shared/StreamsSlider.tsx b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/shared/StreamsSlider.tsx
index 5ee4e5705..43fa675d8 100644
--- a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/shared/StreamsSlider.tsx
+++ b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/shared/StreamsSlider.tsx
@@ -15,7 +15,7 @@ export const StreamsSlider = ({
 }: StreamsSliderProps) => {
   return (
     <div className="flex items-center gap-3">
-      <span className="text-sm text-gray-600 min-w-[2ch] text-center">
+      <span className="text-sm text-muted-foreground min-w-[2ch] text-center">
         {min}
       </span>
       <Slider
@@ -26,7 +26,7 @@ export const StreamsSlider = ({
         step={1}
         className="flex-1"
       />
-      <span className="text-sm text-gray-600 min-w-[3ch] text-center">
+      <span className="text-sm text-muted-foreground min-w-[3ch] text-center">
         {max}
       </span>
       <input
@@ -40,7 +40,8 @@ export const StreamsSlider = ({
         }}
         min={min}
         max={max}
-        className="w-[4rem] px-2 py-1 text-sm font-medium text-center border"
+        className="w-[4rem] px-2 py-1 text-sm font-medium border bg-background [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+        style={{ textAlign: 'center' }}
         disabled={true}
       />
     </div>
diff --git a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/ui/card.tsx b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/ui/card.tsx
index a60ee6f54..29ef1ec3e 100644
--- a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/ui/card.tsx
+++ b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/ui/card.tsx
@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card"
       className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 border py-6 shadow-sm",
+        "bg-card text-card-foreground flex flex-col gap-6 border py-6 shadow-sm hover:shadow-md dark:shadow-[2px_2px_8px_0_rgba(255,255,255,0.08)] dark:hover:shadow-[4px_4px_12px_0_rgba(255,255,255,0.12)] transition-shadow",
         className,
       )}
       {...props}
diff --git a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/ui/checkbox.tsx b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/ui/checkbox.tsx
index 768b7d412..a24acb4c0 100644
--- a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/ui/checkbox.tsx
+++ b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/ui/checkbox.tsx
@@ -12,7 +12,7 @@ function Checkbox({
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-classic-blue data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-energy-blue data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}
diff --git a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/ui/progress.tsx b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/ui/progress.tsx
index 5f6dbba4b..59839ee35 100644
--- a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/ui/progress.tsx
+++ b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/ui/progress.tsx
@@ -55,7 +55,7 @@ function ProgressIndicator({
 }: ProgressPrimitive.Indicator.Props) {
   return (
     <ProgressPrimitive.Indicator
-      className={cn("bg-primary transition-all duration-500", className)}
+      className={cn("bg-primary dark:bg-energy-blue transition-all duration-500", className)}
       data-slot="progress-indicator"
       {...props}
     />
diff --git a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/ui/slider.tsx b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/ui/slider.tsx
index 74e41490c..4141c9791 100644
--- a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/ui/slider.tsx
+++ b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/ui/slider.tsx
@@ -37,13 +37,13 @@ function Slider({
       <SliderPrimitive.Track
         data-slot="slider-track"
         className={cn(
-          "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5",
+          "bg-input relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5",
         )}
       >
         <SliderPrimitive.Range
           data-slot="slider-range"
           className={cn(
-            "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
+            "bg-primary dark:bg-energy-blue absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
           )}
         />
       </SliderPrimitive.Track>
diff --git a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/ui/table.tsx b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/ui/table.tsx
index 2ad27ce89..cdb8fb208 100644
--- a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/ui/table.tsx
+++ b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/ui/table.tsx
@@ -55,7 +55,7 @@ function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
     <tr
       data-slot="table-row"
       className={cn(
-        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        "hover:bg-muted/70 data-[state=selected]:bg-muted border-b transition-colors",
         className,
       )}
       {...props}
diff --git a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/pipeline-editor/DeletePipelineButton.tsx b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/pipeline-editor/DeletePipelineButton.tsx
index 1df793a61..385e8695f 100644
--- a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/pipeline-editor/DeletePipelineButton.tsx
+++ b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/pipeline-editor/DeletePipelineButton.tsx
@@ -39,7 +39,7 @@ const DeletePipelineButton = ({
     <button
       onClick={handleDelete}
       disabled={isLoading}
-      className="bg-red-600 hover:bg-red-700 disabled:bg-red-300 text-white p-2 flex items-center gap-2 transition-colors"
+      className="bg-red-600 dark:bg-[#f88f8f] dark:text-[#242528] dark:hover:bg-red-400 hover:bg-red-700 font-medium disabled:bg-red-300 text-white p-2 flex items-center gap-2 transition-colors"
     >
       <Trash2 className="w-5 h-5" />
       <span>{isLoading ? "Deleting..." : "Delete"}</span>
diff --git a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/pipeline-editor/ExportPipelineButton.tsx b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/pipeline-editor/ExportPipelineButton.tsx
index 489ce52e1..bd006d864 100644
--- a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/pipeline-editor/ExportPipelineButton.tsx
+++ b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/pipeline-editor/ExportPipelineButton.tsx
@@ -84,7 +84,7 @@ const ExportPipelineButton = ({
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
         <button
-          className="bg-white hover:bg-carbon border border-classic-blue text-primary hover:text-white px-3 py-2 transition-colors flex items-center gap-2"
+          className="bg-background hover:bg-classic-blue dark:text-energy-blue font-medium dark:hover:text-[#242528] dark:border-energy-blue dark:hover:bg-energy-blue border-2 border-classic-blue text-primary hover:text-white px-3 py-2 transition-colors flex items-center gap-2"
           title="Export Pipeline"
         >
           <Download className="w-5 h-5" />
diff --git a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/pipeline-editor/FpsDisplay.tsx b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/pipeline-editor/FpsDisplay.tsx
index eb232ba2f..09a139586 100644
--- a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/pipeline-editor/FpsDisplay.tsx
+++ b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/pipeline-editor/FpsDisplay.tsx
@@ -12,7 +12,7 @@ const FpsDisplay = ({ className = "" }: FpsDisplayProps) => {
 
   return (
     <div
-      className={`bg-white text-black/80 p-2 shadow-lg text-sm ${className}`}
+      className={`bg-background dark:text-white/80 text-black/80 p-2 shadow-lg dark:shadow-[2px_2px_8px_0_rgba(255,255,255,0.08)] text-sm ${className}`}
     >
       <div className="flex flex-row gap-2 font-mono justify-center items-center">
         <span className={statusColor}>{statusIcon}</span>
diff --git a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/pipeline-editor/ImportPipelineButton.tsx b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/pipeline-editor/ImportPipelineButton.tsx
index 9458fc536..3afe51234 100644
--- a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/pipeline-editor/ImportPipelineButton.tsx
+++ b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/pipeline-editor/ImportPipelineButton.tsx
@@ -153,7 +153,7 @@ const ImportPipelineButton = ({ onImport }: ImportPipelineButtonProps) => {
       <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
         <PopoverTrigger asChild>
           <button
-            className="bg-white hover:bg-carbon border border-classic-blue text-primary hover:text-white px-3 py-2 transition-colors flex items-center gap-2"
+            className="bg-background hover:bg-classic-blue dark:text-energy-blue font-medium dark:hover:text-[#242528] dark:border-energy-blue dark:hover:bg-energy-blue border-2 border-classic-blue text-primary hover:text-white px-3 py-2 transition-colors flex items-center gap-2"
             title="Import Pipeline"
           >
             <Upload className="w-5 h-5" />
diff --git a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/pipeline-editor/NodeDataPanel.tsx b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/pipeline-editor/NodeDataPanel.tsx
index 598b7313f..bb3d114d7 100644
--- a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/pipeline-editor/NodeDataPanel.tsx
+++ b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/pipeline-editor/NodeDataPanel.tsx
@@ -47,9 +47,9 @@ const NodeDataPanel = ({
 
   if (!selectedNode) {
     return (
-      <div className="absolute bottom-8 right-4 w-80 bg-white border border-gray-300 shadow-lg p-4 z-10">
-        <h3 className="text-sm font-semibold text-gray-700 mb-2">Node Data</h3>
-        <p className="text-xs text-gray-500">Select a node to view its data</p>
+      <div className="absolute bottom-8 right-4 w-80 bg-background border border-gray-300 shadow-lg p-4 z-10 dark:shadow-[2px_2px_8px_0_rgba(255,255,255,0.08)]">
+        <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2">Node Data</h3>
+        <p className="text-xs text-gray-500 dark:text-gray-300">Select a node to view its data</p>
       </div>
     );
   }
@@ -94,17 +94,17 @@ const NodeDataPanel = ({
   const hasAdditionalParams = dataEntries.length > 0;
 
   return (
-    <div className="absolute bottom-4 right-4 w-80 bg-white border border-gray-300 shadow-lg p-4 z-10 max-h-96 overflow-y-auto">
+    <div className="absolute bottom-4 right-4 w-80 bg-background border border-gray-300 shadow-lg p-4 z-10 max-h-96 overflow-y-auto">
       <div className="flex items-center justify-between mb-3">
-        <h3 className="text-sm font-semibold text-gray-700">Node Data</h3>
-        <span className="text-xs text-gray-500 bg-gray-100 px-2 py-1">
+        <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-200">Node Data</h3>
+        <span className="text-xs text-gray-500 bg-gray-100 dark:text-gray-300 dark:bg-gray-700 px-2 py-1">
           {selectedNode.type}
         </span>
       </div>
 
       {hasAdditionalParams ? (
         <div className="space-y-3">
-          <h4 className="text-xs font-medium text-gray-600 border-b pb-1">
+          <h4 className="text-xs font-medium text-gray-600 dark:text-gray-300 border-b pb-1">
             Additional Parameters:
           </h4>
           {dataEntries.map(([key, value]) => {
@@ -119,7 +119,7 @@ const NodeDataPanel = ({
 
             return (
               <div key={keyStr} className="border-l-2 border-blue-200 pl-3">
-                <label className="text-xs font-medium text-gray-600 block mb-1">
+                <label className="text-xs font-medium text-gray-600 dark:text-gray-300 block mb-1">
                   {propConfig?.label ?? keyStr}:
                   {propConfig?.required && (
                     <span className="text-red-500 ml-1">*</span>
@@ -127,7 +127,7 @@ const NodeDataPanel = ({
                 </label>
 
                 {propConfig?.description && (
-                  <div className="text-xs text-gray-500 mb-1 italic">
+                  <div className="text-xs text-gray-500 dark:text-gray-400 mb-1 italic">
                     {propConfig.description}
                   </div>
                 )}
@@ -136,7 +136,7 @@ const NodeDataPanel = ({
                   <select
                     value={String(value ?? "")}
                     onChange={(e) => handleInputChange(keyStr, e.target.value)}
-                    className="w-full text-xs border border-gray-300 px-2 py-1"
+                    className="w-full dark:bg-background text-xs border border-gray-300 px-2 py-1"
                   >
                     <option value="">Select {propConfig?.label}</option>
                     {models
@@ -157,13 +157,13 @@ const NodeDataPanel = ({
                   <DeviceSelect
                     value={String(value ?? "")}
                     onChange={(val) => handleInputChange(keyStr, val)}
-                    className="w-full text-xs border border-gray-300 px-2 py-1"
+                    className="w-full bg-background text-xs border border-gray-300 px-2 py-1"
                   />
                 ) : inputType === "select" && propConfig?.options ? (
                   <select
                     value={String(value ?? "")}
                     onChange={(e) => handleInputChange(keyStr, e.target.value)}
-                    className="w-full text-xs border border-gray-300 px-2 py-1"
+                    className="w-full bg-background text-xs border border-gray-300 px-2 py-1"
                   >
                     <option value="">Select {propConfig?.label}</option>
                     {propConfig?.options?.map((option) => (
diff --git a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/pipeline-editor/PipelineEditor.tsx b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/pipeline-editor/PipelineEditor.tsx
index fb05d0130..f427dec0f 100644
--- a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/pipeline-editor/PipelineEditor.tsx
+++ b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/pipeline-editor/PipelineEditor.tsx
@@ -21,6 +21,7 @@ import {
   createGraphLayout,
   LayoutDirection,
 } from "@/features/pipeline-editor/utils/graphLayout";
+import { useTheme } from "next-themes";
 
 interface PipelineEditorProps {
   pipelineData?: Pipeline;
@@ -71,6 +72,8 @@ const PipelineEditorContent = ({
     });
   };
 
+  const { theme } = useTheme();
+
   useEffect(() => {
     onNodesChangeCallback?.(nodes);
   }, [nodes, onNodesChangeCallback]);
@@ -145,6 +148,7 @@ const PipelineEditorContent = ({
         }}
         nodesDraggable={true}
         fitView
+        colorMode={theme === "dark" ? "dark" : "light"}
         className="h-full w-full"
       >
         <Controls />
diff --git a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/pipeline-editor/RunPerformanceTestButton.tsx b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/pipeline-editor/RunPerformanceTestButton.tsx
index 80be2fdee..563b5a237 100644
--- a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/pipeline-editor/RunPerformanceTestButton.tsx
+++ b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/pipeline-editor/RunPerformanceTestButton.tsx
@@ -12,7 +12,7 @@ const RunPerformanceTestButton = ({
   <button
     onClick={onRun}
     disabled={isRunning}
-    className="w-[160px] bg-primary hover:bg-green-700 disabled:bg-gray-400 text-white px-3 py-2 shadow-lg transition-colors flex items-center gap-2"
+    className="w-[160px] bg-classic-blue dark:text-[#242528] font-medium dark:bg-energy-blue dark:hover:bg-energy-blue-tint-1 hover:bg-classic-blue-hover disabled:bg-gray-400 text-white px-3 py-2 shadow-lg transition-colors flex items-center gap-2"
     title="Run Pipeline"
   >
     <Play className="w-5 h-5" />
diff --git a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/pipeline-editor/StopPerformanceTestButton.tsx b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/pipeline-editor/StopPerformanceTestButton.tsx
index 234fbb23e..83ecfea2a 100644
--- a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/pipeline-editor/StopPerformanceTestButton.tsx
+++ b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/pipeline-editor/StopPerformanceTestButton.tsx
@@ -12,7 +12,7 @@ const StopPerformanceTestButton = ({
   <button
     onClick={onStop}
     disabled={isStopping}
-    className="w-[160px] bg-red-600 hover:bg-red-700 disabled:bg-gray-400 text-white px-3 py-2 shadow-lg transition-colors flex items-center gap-2"
+    className="w-[160px] bg-red-600 dark:bg-[#f88f8f] dark:text-[#242528] dark:hover:bg-red-400 font-medium hover:bg-red-700 disabled:bg-gray-400 text-white px-3 py-2 shadow-lg transition-colors flex items-center gap-2"
     title="Stop Pipeline"
   >
     <Square className="w-5 h-5" />
diff --git a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/index.css b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/index.css
index 7b156883b..b93602dfa 100644
--- a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/index.css
+++ b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/index.css
@@ -72,7 +72,7 @@
   --radius: 0.625rem;
   --background: oklch(1 0 0);
   --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
+  --card: #F9F9F9;
   --card-foreground: oklch(0.145 0 0);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.145 0 0);
@@ -81,7 +81,7 @@
   --secondary: oklch(0.97 0 0);
   --secondary-foreground: oklch(0.205 0 0);
   --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
+  --muted-foreground: oklch(0.500 0 0);
   --accent: oklch(0.97 0 0);
   --accent-foreground: oklch(0.205 0 0);
   --destructive: oklch(0.577 0.245 27.325);
@@ -123,9 +123,9 @@
 }
 
 .dark {
-  --background: oklch(0.145 0 0);
+  --background: oklch(30.53% 0.0055 271.23);
   --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
+  --card: oklch(34.9% 0.0067 271.6);
   --card-foreground: oklch(0.985 0 0);
   --popover: oklch(0.205 0 0);
   --popover-foreground: oklch(0.985 0 0);
@@ -134,7 +134,7 @@
   --secondary: oklch(0.269 0 0);
   --secondary-foreground: oklch(0.985 0 0);
   --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
+  --muted-foreground: oklch(0.788 0 0);
   --accent: oklch(0.269 0 0);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
diff --git a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/main.tsx b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/main.tsx
index b66f48fe8..51de5c650 100644
--- a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/main.tsx
+++ b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/main.tsx
@@ -6,13 +6,16 @@ import "./index.css";
 import { Provider } from "react-redux";
 import { store } from "@/store";
 import { MetricsProvider } from "@/features/metrics/MetricsProvider.tsx";
+import { ThemeProvider } from "next-themes";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <Provider store={store}>
-      <MetricsProvider>
-        <RouterProvider router={router} />
-      </MetricsProvider>
+      <ThemeProvider attribute="class" defaultTheme="light">
+        <MetricsProvider>
+          <RouterProvider router={router} />
+        </MetricsProvider>
+      </ThemeProvider>
     </Provider>
   </StrictMode>,
 );
diff --git a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/pages/DensityTests.tsx b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/pages/DensityTests.tsx
index fd14c0968..b89ca0da2 100644
--- a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/pages/DensityTests.tsx
+++ b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/pages/DensityTests.tsx
@@ -209,7 +209,7 @@ const DensityTests = () => {
           {pipelineSelections.map((selection) => (
             <div
               key={selection.pipelineId}
-              className={`flex items-center gap-3 p-2 border bg-white transition-all duration-300 ${
+              className={`flex items-center gap-3 p-2 border bg-card transition-all duration-300 ${
                 selection.isRemoving
                   ? "opacity-0 -translate-y-2"
                   : selection.isNew
@@ -227,7 +227,7 @@ const DensityTests = () => {
                     onChange={(e) =>
                       handlePipelineChange(selection.pipelineId, e.target.value)
                     }
-                    className="w-full px-3 py-2 border text-sm cursor-pointer"
+                    className="w-full px-3 py-2 border text-sm cursor-pointer bg-white dark:bg-background"
                   >
                     {pipelines
                       .filter(
@@ -274,7 +274,7 @@ const DensityTests = () => {
           <button
             onClick={handleAddPipeline}
             disabled={pipelineSelections.length >= pipelines.length}
-            className="w-fit px-4 py-2 bg-white hover:bg-carbon border border-classic-blue text-primary hover:text-white transition-colors flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
+            className="w-fit px-4 py-2 bg-background hover:bg-classic-blue dark:hover:bg-energy-blue border-2 border-classic-blue dark:border-energy-blue text-primary dark:text-energy-blue hover:text-white dark:hover:text-[#242528] transition-colors flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed font-medium"
           >
             <Plus className="w-5 h-5" />
             <span>Add Pipeline</span>
@@ -325,7 +325,7 @@ const DensityTests = () => {
                 <DeviceSelect
                   value={encoderDevice}
                   onChange={setEncoderDevice}
-                  className="w-fit px-3 py-2 border text-sm cursor-pointer"
+                  className="w-fit px-3 py-2 border text-sm cursor-pointer bg-background"
                 />
               </div>
             )}
@@ -335,7 +335,7 @@ const DensityTests = () => {
           <button
             onClick={handleRunTest}
             disabled={isRunning || pipelineSelections.length === 0 || !!jobId}
-            className="w-fit px-4 py-2 bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed"
+            className="w-fit px-4 py-2 bg-primary font-medium text-primary-foreground hover:bg-classic-blue-hover disabled:opacity-50 disabled:cursor-not-allowed dark:bg-energy-blue dark:hover:bg-energy-blue-tint-1 transition-colors"
           >
             {jobId
               ? "Running..."
diff --git a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/pages/Home.tsx b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/pages/Home.tsx
index c18ccabda..3a5fd8fda 100644
--- a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/pages/Home.tsx
+++ b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/pages/Home.tsx
@@ -98,7 +98,7 @@ const Home = () => {
                         baseName={group.baseName}
                         description={group.description}
                       >
-                        <button className="text-white bg-classic-blue hover:bg-classic-blue-hover px-4 py-2 transition-colors">
+                        <button className="cursor-pointer font-medium text-white dark:text-[#242528] bg-classic-blue dark:bg-energy-blue hover:bg-classic-blue-hover dark:hover:bg-energy-blue-tint-1 px-4 py-2 transition-colors">
                           Copy pipeline
                         </button>
                       </CopyPipelineButton>
@@ -128,7 +128,7 @@ const Home = () => {
                     <CardFooter>
                       <Link
                         to={`/pipelines/${pipeline.id}`}
-                        className="text-white bg-classic-blue hover:bg-classic-blue-hover px-4 py-2 transition-colors"
+                        className="text-white dark:text-[#242528] font-medium bg-classic-blue dark:bg-energy-blue hover:bg-classic-blue-hover dark:hover:bg-energy-blue-tint-1 px-4 py-2 transition-colors"
                       >
                         Open in Builder
                       </Link>
@@ -139,7 +139,7 @@ const Home = () => {
             </div>
           </div>
         </div>
-        <div className="w-[25%] border-l p-4 flex flex-col gap-4 bg-[#F9F9F9]">
+        <div className="w-[25%] border-l p-4 flex flex-col gap-4 bg-[#F9F9F9] dark:bg-[#3c3e42]">
           <h1 className="font-medium text-2xl">Resource utilization</h1>
           <CpuUsageProgress />
           <GpuUsageProgress />
@@ -149,12 +149,12 @@ const Home = () => {
           <h1 className="font-medium text-2xl mt-4">Learning and support</h1>
 
           <div className="flex gap-3">
-            <BookOpen className="w-6 h-6 text-classic-blue shrink-0" />
+            <BookOpen className="w-6 h-6 text-classic-blue dark:text-energy-blue shrink-0" />
             <a
               href="https://docs.openedgeplatform.intel.com/2025.2/edge-ai-libraries/visual-pipeline-and-platform-evaluation-tool/index.html"
               target="_blank"
               rel="noopener noreferrer"
-              className="hover:text-classic-blue transition-colors"
+              className="hover:text-classic-blue dark:hover:text-energy-blue transition-colors"
             >
               <h3 className="font-semibold text-base mb-1">Getting Started</h3>
               <p className="text-sm text-muted-foreground">
@@ -164,12 +164,12 @@ const Home = () => {
           </div>
 
           <div className="flex gap-3">
-            <Sparkles className="w-6 h-6 text-classic-blue shrink-0" />
+            <Sparkles className="w-6 h-6 text-classic-blue dark:text-energy-blue shrink-0" />
             <a
               href="https://docs.openedgeplatform.intel.com/2025.2/edge-ai-libraries/visual-pipeline-and-platform-evaluation-tool/index.html"
               target="_blank"
               rel="noopener noreferrer"
-              className="hover:text-classic-blue transition-colors"
+              className="hover:text-classic-blue dark:hover:text-energy-blue transition-colors"
             >
               <h3 className="font-semibold text-base mb-1">What's new?</h3>
               <p className="text-sm text-muted-foreground">
@@ -179,12 +179,12 @@ const Home = () => {
           </div>
 
           <div className="flex gap-3">
-            <Code className="w-6 h-6 text-classic-blue shrink-0" />
+            <Code className="w-6 h-6 text-classic-blue dark:text-energy-blue shrink-0" />
             <a
               href="/api/v1/redoc"
               target="_blank"
               rel="noopener noreferrer"
-              className="hover:text-classic-blue transition-colors"
+              className="hover:text-classic-blue dark:hover:text-energy-blue transition-colors"
             >
               <h3 className="font-semibold text-base mb-1">REST API</h3>
               <p className="text-sm text-muted-foreground">
diff --git a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/pages/Jobs.tsx b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/pages/Jobs.tsx
index 099df1f68..dbbd25fc7 100644
--- a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/pages/Jobs.tsx
+++ b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/pages/Jobs.tsx
@@ -69,8 +69,8 @@ const Jobs = () => {
                   py-4 px-1 border-b-2 font-medium text-sm transition-colors
                   ${
                     currentTab === tab.id
-                      ? "border-primary text-primary"
-                      : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300"
+                      ? "border-foreground text-foreground"
+                      : "border-transparent text-foreground/50 hover:text-foreground hover:border-foreground dark:text-foreground/50 dark:hover:text-foreground"
                   }
                 `}
               >
@@ -112,7 +112,7 @@ const Jobs = () => {
                           <TableCell className="font-mono text-xs">
                             <Link
                               to={`/jobs/performance/${job.id}`}
-                              className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 hover:underline"
+                              className="text-classic-blue hover:text-classic-blue-hover dark:text-energy-blue dark:hover:text-energy-blue-shade-1 hover:underline"
                             >
                               {job.id}
                             </Link>
diff --git a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/pages/PerformanceTests.tsx b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/pages/PerformanceTests.tsx
index f35b83e84..2c4f57d36 100644
--- a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/pages/PerformanceTests.tsx
+++ b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/pages/PerformanceTests.tsx
@@ -203,7 +203,7 @@ const PerformanceTests = () => {
           {pipelineSelections.map((selection) => (
             <div
               key={selection.pipelineId}
-              className={`flex items-center gap-3 p-2 border bg-white transition-all duration-300 ${
+              className={`flex items-center gap-3 p-2 border bg-card transition-all duration-300 ${
                 selection.isRemoving
                   ? "opacity-0 -translate-y-2"
                   : selection.isNew
@@ -221,7 +221,7 @@ const PerformanceTests = () => {
                     onChange={(e) =>
                       handlePipelineChange(selection.pipelineId, e.target.value)
                     }
-                    className="w-full px-3 py-2 border text-sm cursor-pointer"
+                    className="w-full px-3 py-2 border text-sm cursor-pointer bg-white dark:bg-background"
                   >
                     {pipelines
                       .filter(
@@ -268,7 +268,7 @@ const PerformanceTests = () => {
           <button
             onClick={handleAddPipeline}
             disabled={pipelineSelections.length >= pipelines.length}
-            className="w-fit px-4 py-2 bg-white hover:bg-carbon border border-classic-blue text-primary hover:text-white transition-colors flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
+            className="w-fit px-4 py-2 bg-background hover:bg-classic-blue dark:hover:bg-energy-blue border-2 border-classic-blue dark:border-energy-blue text-primary dark:text-energy-blue hover:text-white dark:hover:text-[#242528] transition-colors flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed font-medium"
           >
             <Plus className="w-5 h-5" />
             <span>Add Pipeline</span>
@@ -303,7 +303,7 @@ const PerformanceTests = () => {
               <DeviceSelect
                 value={encoderDevice}
                 onChange={setEncoderDevice}
-                className="w-fit px-3 py-2 border text-sm cursor-pointer"
+                className="w-fit px-3 py-2 border text-sm cursor-pointer bg-background"
               />
             </div>
           )}
@@ -313,7 +313,7 @@ const PerformanceTests = () => {
         <button
           onClick={handleRunTest}
           disabled={isRunning || pipelineSelections.length === 0 || !!jobId}
-          className="w-fit px-4 py-2 bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed"
+          className="w-fit px-4 py-2 bg-classic-blue font-medium text-primary-foreground hover:bg-classic-blue-hover disabled:opacity-50 disabled:cursor-not-allowed dark:bg-energy-blue dark:hover:bg-energy-blue-tint-1 transition-colors"
         >
           {jobId
             ? "Running..."
diff --git a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/pages/Pipelines.tsx b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/pages/Pipelines.tsx
index 621c77c49..be4d2e2f5 100644
--- a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/pages/Pipelines.tsx
+++ b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/pages/Pipelines.tsx
@@ -574,7 +574,7 @@ const Pipelines = () => {
             )}
 
             <button
-              className="bg-white hover:bg-carbon border border-classic-blue text-primary hover:text-white px-3 py-2 transition-colors disabled:opacity-50 disabled:hover:bg-orange-600 flex items-center gap-2"
+              className="bg-background hover:bg-classic-blue dark:text-energy-blue font-medium dark:hover:text-[#242528] dark:border-energy-blue dark:hover:bg-energy-blue border-2 border-classic-blue text-primary hover:text-white px-3 py-2 transition-colors flex items-center gap-2"
               title="Optimize Pipeline"
               disabled={isOptimizing || !!performanceTestJobId}
               onClick={handleOptimizePipeline}
@@ -600,7 +600,7 @@ const Pipelines = () => {
           <div className="flex gap-2">
             <Tooltip>
               <TooltipTrigger asChild>
-                <label className="bg-white p-2 flex items-center gap-2 cursor-pointer">
+                <label className="bg-background p-2 flex items-center gap-2 cursor-pointer">
                   <Checkbox
                     checked={videoOutputEnabled}
                     onCheckedChange={(checked) =>
@@ -621,12 +621,12 @@ const Pipelines = () => {
               <DeviceSelect
                 value={encoderDevice}
                 onChange={setEncoderDevice}
-                className="bg-white p-2 text-sm font-medium cursor-pointer border-none outline-none"
+                className="bg-background p-2 text-sm font-medium cursor-pointer border-none outline-none"
               />
             )}
           </div>
           {videoOutputEnabled && (
-            <div className="text-muted-foreground border border-amber-400 my-2 p-2 bg-amber-200/50 w-[634px]">
+            <div className="text-muted-foreground dark:text-foreground/80 border border-amber-400 my-2 p-2 bg-amber-200/50 w-[634px]">
               <b>Note</b>: The current implementation does not automatically
               infer the best encoding device from the existing pipeline. Select
               the same device that is already used by other blocks in your