diff --git a/app/src/components/Dashboard/DashboardCard.tsx b/app/src/components/Dashboard/DashboardCard.tsx
index a653110..1a532b9 100644
--- a/app/src/components/Dashboard/DashboardCard.tsx
+++ b/app/src/components/Dashboard/DashboardCard.tsx
@@ -183,6 +183,7 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
             className="dashboard-card-container"
             onClick={navigateToProject}
             title={projectName}
+            onMouseLeave={() => setIsKebabOpen(false)}
         >
             <div className="dashboard-card-wrapper">
                 <div className="preview-container">
diff --git a/app/src/components/layout/scenes/MainScene.tsx b/app/src/components/layout/scenes/MainScene.tsx
index 10894eb..d299dc9 100644
--- a/app/src/components/layout/scenes/MainScene.tsx
+++ b/app/src/components/layout/scenes/MainScene.tsx
@@ -48,12 +48,12 @@ function MainScene() {
   const { setFloatingWidget } = useFloatingWidget();
   const { comparisonProduct } = useComparisonProduct();
 
-    const handleSelectLayout = (option: string) => {
-        const product = products.find((product) => product.productName === option);
-        if (product) {
-            setMainProduct(product.productUuid, product.productName);
-        }
-    };
+  const handleSelectLayout = (option: string) => {
+    const product = products.find((product) => product.productName === option);
+    if (product) {
+      setMainProduct(product.productUuid, product.productName);
+    }
+  };
 
   return (
     <>
@@ -108,7 +108,7 @@ function MainScene() {
         <Scene layout="Main Layout" />
       </div>
 
-      {selectedProduct && isVersionSaved && !isPlaying && (
+      {selectedProduct && isVersionSaved && !isPlaying && activeModule === "simulation" && (
         <div className="selectLayout-wrapper">
           <RegularDropDown
             header={selectedProduct.productName}
diff --git a/app/src/components/layout/sidebarLeft/Header.tsx b/app/src/components/layout/sidebarLeft/Header.tsx
index 46888ef..cc803ef 100644
--- a/app/src/components/layout/sidebarLeft/Header.tsx
+++ b/app/src/components/layout/sidebarLeft/Header.tsx
@@ -14,7 +14,7 @@ const Header: React.FC = () => {
   return (
     <div className="header-container">
       <div className="header-content">
-        <button className="logo-container" onClick={()=>navigate("/dashboard")}>
+        <button className="logo-container" onClick={()=>navigate("/Dashboard")}>
           <LogoIcon />
         </button>
         <div className="header-title">
diff --git a/app/src/components/layout/sidebarLeft/SideBarLeft.tsx b/app/src/components/layout/sidebarLeft/SideBarLeft.tsx
index e983f9a..30f4778 100644
--- a/app/src/components/layout/sidebarLeft/SideBarLeft.tsx
+++ b/app/src/components/layout/sidebarLeft/SideBarLeft.tsx
@@ -33,11 +33,13 @@ const SideBarLeft: React.FC = () => {
     console.log(value);
   };
 
+  console.log('isVersionSaved: ', isVersionSaved);
+  console.log('toggleUILeft: ', toggleUILeft);
+
   return (
     <div
-      className={`sidebar-left-wrapper ${
-        toggleUILeft && !isVersionSaved ? "open" : "closed"
-      }`}
+      className={`sidebar-left-wrapper ${toggleUILeft && (!isVersionSaved || activeModule !== "simulation") ? "open" : "closed"
+        }`}
     >
       <Header />
       {toggleUILeft && (
diff --git a/app/src/components/layout/sidebarRight/SideBarRight.tsx b/app/src/components/layout/sidebarRight/SideBarRight.tsx
index ddb27a0..86c98cb 100644
--- a/app/src/components/layout/sidebarRight/SideBarRight.tsx
+++ b/app/src/components/layout/sidebarRight/SideBarRight.tsx
@@ -66,7 +66,7 @@ const SideBarRight: React.FC = () => {
 
   return (
     <div
-      className={`sidebar-right-wrapper ${toggleUIRight && !isVersionSaved ? "open" : "closed"
+      className={`sidebar-right-wrapper ${toggleUIRight && (!isVersionSaved || activeModule !== "simulation") ? "open" : "closed"
         }`}
     >
       <Header />
diff --git a/app/src/components/ui/compareVersion/ComparisonResult.tsx b/app/src/components/ui/compareVersion/ComparisonResult.tsx
index 85d1c6c..0f91a36 100644
--- a/app/src/components/ui/compareVersion/ComparisonResult.tsx
+++ b/app/src/components/ui/compareVersion/ComparisonResult.tsx
@@ -1,57 +1,89 @@
 import React, { useMemo } from "react";
 import PerformanceResult from "./result-card/PerformanceResult";
 import EnergyUsage from "./result-card/EnergyUsage";
-import { Bar } from "react-chartjs-2";
+import { Bar, Line } from "react-chartjs-2";
 
 const ComparisonResult = () => {
-  const defaultData = {
-    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
-    datasets: [
-      {
-        label: "Dataset",
-        data: [12, 19, 3, 5, 2, 3],
-        backgroundColor: ["#6f42c1"],
-        borderColor: "#b392f0",
-        borderWidth: 1,
-      },
-    ],
-  };
-
-  // Memoize Chart Options
   const options = useMemo(
     () => ({
       responsive: true,
       maintainAspectRatio: false,
       plugins: {
-        title: {
-          display: true,
-        },
-        legend: {
-          display: false,
-        },
+        title: { display: false },
+        legend: { display: false },
       },
       scales: {
-        x: {
-          display: false, // Hide x-axis
-          grid: {
-            display: false,
-          },
-        },
-        y: {
-          display: false, // Hide y-axis
-          grid: {
-            display: false,
-          },
-        },
+        x: { display: false, grid: { display: false } },
+        y: { display: false, grid: { display: false } },
       },
     }),
     []
   );
+
+  // Color palette
+  const purpleDark = "#6a0dad";
+  const purpleLight = "#b19cd9";
+
+  const throughputData = {
+    labels: ["Layout 1", "Layout 2"],
+    datasets: [
+      {
+        label: "Throughput (units/hr)",
+        data: [500, 550],
+        backgroundColor: [purpleDark, purpleLight],
+        borderColor: [purpleDark, purpleLight],
+        borderWidth: 1,
+      },
+    ],
+  };
+
+  const cycleTimeData = {
+    labels: ["Layout 1", "Layout 2"],
+    datasets: [
+      {
+        label: "Cycle Time (sec)",
+        data: [110, 110],
+        backgroundColor: [purpleLight],
+        borderColor: purpleDark,
+        borderWidth: 2,
+        tension: 0.4,
+        fill: false,
+      },
+    ],
+  };
+
+  const downtimeData = {
+    labels: ["Layout 1", "Layout 2"],
+    datasets: [
+      {
+        label: "Downtime (mins)",
+        data: [17, 12],
+        backgroundColor: [purpleDark, purpleLight],
+        borderColor: [purpleDark, purpleLight],
+        borderWidth: 1,
+      },
+    ],
+  };
+
+  const scrapRateData = {
+    labels: ["Layout 1", "Layout 2"],
+    datasets: [
+      {
+        label: "Scrap Rate (tons)",
+        data: [2.7, 1.9],
+        backgroundColor: [purpleDark, purpleLight],
+        borderColor: [purpleDark, purpleLight],
+        borderWidth: 1,
+      },
+    ],
+  };
+
   return (
     <div className="compare-result-container">
       <div className="header">Performance Comparison</div>
       <div className="compare-result-wrapper">
         <EnergyUsage />
+
         <div className="throughPutCard-container comparisionCard">
           <h4>Throughput (units/hr)</h4>
           <div className="layers-wrapper">
@@ -64,8 +96,11 @@ const ComparisonResult = () => {
               <div className="value">550/ hr</div>
             </div>
           </div>
-          <div className="chart"></div>
+          <div className="chart">
+            <Bar data={throughputData} options={options} />
+          </div>
         </div>
+
         <div className="cycle-time-container comparisionCard">
           <div className="cycle-main">
             <div className="cycle-header">Cycle Time</div>
@@ -81,12 +116,16 @@ const ComparisonResult = () => {
                 <div className="layer-name">Layout 2</div>
                 <div className="layer-time">110 Sec</div>
                 <div className="layer-profit">
-                  <span>↑</span>19.6%1.6%
+                  <span>↑</span>1.6%
                 </div>
               </div>
             </div>
           </div>
+          <div className="chart">
+            <Line data={cycleTimeData} options={options} />
+          </div>
         </div>
+
         <div className="overallDowntime-container comparisionCard">
           <div className="overallDowntime-header">Overall Downtime</div>
           <div className="totalDownTime-wrapper">
@@ -101,10 +140,7 @@ const ComparisonResult = () => {
               </div>
             </div>
             <div className="chart">
-              <div className="vertical-chart">
-                <div className="layout1"></div>
-                <div className="layout2"></div>
-              </div>
+              <Bar data={downtimeData} options={options} />
             </div>
           </div>
         </div>
@@ -114,16 +150,15 @@ const ComparisonResult = () => {
           <div className="overallScrapRate-wrapper">
             <div className="overallScrapRate-value">
               <div className="overallScrapRate-label">Layout 1</div>
-              <div className="overallScrapRate-key">
-                Total scrap produced by
-              </div>
+              <div className="overallScrapRate-key">Total scrap produced by</div>
               <div className="overallScrapRateKey-value">2.7 ton</div>
             </div>
             <div className="chart">
-              <Bar data={defaultData} options={options} />
+              <Bar data={scrapRateData} options={options} />
             </div>
           </div>
         </div>
+
         <PerformanceResult />
       </div>
     </div>
diff --git a/app/src/components/ui/simulation/simulationPlayer.tsx b/app/src/components/ui/simulation/simulationPlayer.tsx
index a3ef252..1cff053 100644
--- a/app/src/components/ui/simulation/simulationPlayer.tsx
+++ b/app/src/components/ui/simulation/simulationPlayer.tsx
@@ -120,7 +120,7 @@ const SimulationPlayer: React.FC = () => {
   // UI-Part
   const hourlySimulation = 25;
   const dailyProduction = 75;
-  const monthlyROI = 50;
+  const monthlyROI = 10;
   const { processBar } = useProcessBar();
 
   useEffect(() => { }, [processBar]);
@@ -219,7 +219,7 @@ const SimulationPlayer: React.FC = () => {
                   <div className="progress-wrapper">
                     <div
                       className="progress"
-                      style={{ width: monthlyROI }}
+                      style={{ width: `${monthlyROI}%` }}
                     ></div>
                   </div>{" "}
                 </div>
@@ -315,8 +315,8 @@ const SimulationPlayer: React.FC = () => {
                           {index < intervals.length - 1 && (
                             <div
                               className={`line ${progress >= ((index + 1) / totalSegments) * 100
-                                  ? "filled"
-                                  : ""
+                                ? "filled"
+                                : ""
                                 }`}
                             ></div>
                           )}
diff --git a/app/src/styles/layout/compareLayout.scss b/app/src/styles/layout/compareLayout.scss
index cd0d1e3..07b5ad2 100644
--- a/app/src/styles/layout/compareLayout.scss
+++ b/app/src/styles/layout/compareLayout.scss
@@ -475,6 +475,7 @@
     }
 
     .chart {
+        width: 80%;
         height: 90%;
         position: absolute;
         bottom: 0;
diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss
index dd7336f..b043e29 100644
--- a/app/src/styles/layout/sidebar.scss
+++ b/app/src/styles/layout/sidebar.scss
@@ -874,8 +874,6 @@
               .input-range-container {
                 width: 100%;
                 padding: 0;
-
-                .input-container {}
               }
             }
 
@@ -1529,7 +1527,6 @@
       .header {
         @include flex-space-between;
         border: none;
-
         .eyedrop-button {
           @include flex-center;
         }
@@ -1537,9 +1534,8 @@
 
       .inputs-container {
         @include flex-space-between;
-
         .input-container {
-          padding: 0 12px;
+          padding: 0 4px;
           gap: 6px;
         }
       }
diff --git a/app/src/styles/pages/dashboard.scss b/app/src/styles/pages/dashboard.scss
index eba133d..a136974 100644
--- a/app/src/styles/pages/dashboard.scss
+++ b/app/src/styles/pages/dashboard.scss
@@ -84,6 +84,12 @@
           font-weight: var(--font-weight-medium);
           background: var(--background-color-button);
 
+          svg {
+            path {
+              stroke: var(--background-color-selected);
+            }
+          }
+
           &:hover {
             background: var(--background-color-button);
           }
@@ -202,6 +208,10 @@
     transition: transform 0.25s linear;
 
     .project-details {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+
       .project-name {
         margin-bottom: 7px;
       }
@@ -222,7 +232,7 @@
         line-height: 26px;
         text-align: center;
         background: var(--accent-color);
-        color: var(--primary-color);
+        color: var(--text-color);
         border-radius: #{$border-radius-circle};
       }
 
@@ -243,6 +253,7 @@
     border-radius: 8px;
     z-index: 100;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(20px);
     flex-direction: column;
     transform: translate(100%, 100%);
     overflow: hidden;
@@ -260,16 +271,18 @@
       text-transform: capitalize;
 
       &:hover {
-        background-color: var(--background-color-secondary);
+        background-color: var(--background-color-selected);
       }
     }
   }
 
   &:hover {
     overflow: visible;
+
     .kebab-options-wrapper {
       display: flex;
     }
+
     .project-details-container {
       transform: translateY(0);
     }
diff --git a/app/src/types/analysis.d.ts b/app/src/types/analysis.d.ts
index 02ce1c1..151afb4 100644
--- a/app/src/types/analysis.d.ts
+++ b/app/src/types/analysis.d.ts
@@ -3,6 +3,8 @@ type Preset = {
     inputs: {
         label: string;
         activeOption: string;
+        min?: number;
+        max?: number;
     };
 };