diff --git a/app/src/components/layout/scenes/MainScene.tsx b/app/src/components/layout/scenes/MainScene.tsx
index 67dc35a..4139b5a 100644
--- a/app/src/components/layout/scenes/MainScene.tsx
+++ b/app/src/components/layout/scenes/MainScene.tsx
@@ -52,7 +52,7 @@ function MainScene() {
   const { visualizationSocket } = useSocketStore();
   const { selectedZone } = useSelectedZoneStore();
   const { setFloatingWidget } = useFloatingWidget();
-  const { clearComparisonProduct } = useComparisonProduct();
+  const { comparisonProduct, clearComparisonProduct } = useComparisonProduct();
   const { selectedFloorItem, setSelectedFloorItem } = useSelectedFloorItem();
   const { setName } = useAssetsStore();
   const { projectId } = useParams()
@@ -120,7 +120,9 @@ function MainScene() {
         </>
       )}
       <div
-        className="scene-container"
+        className={`scene-container${
+          comparisonProduct?.productUuid ? " half-view" : ""
+        }`}
         id="work-space-three-d-canvas"
         style={{
           height: isPlaying || activeModule !== "visualization" ? "100vh" : "",
diff --git a/app/src/styles/base/global.scss b/app/src/styles/base/global.scss
index 3b12635..56dc3cc 100644
--- a/app/src/styles/base/global.scss
+++ b/app/src/styles/base/global.scss
@@ -28,6 +28,9 @@ section,
     border: none;
   }
 }
+.scene-container.half-view{
+  width: 50vw !important;
+}
 
 .tooltip {
   position: absolute;
diff --git a/app/src/styles/layout/compareLayout.scss b/app/src/styles/layout/compareLayout.scss
index f5bba52..15c0a6b 100644
--- a/app/src/styles/layout/compareLayout.scss
+++ b/app/src/styles/layout/compareLayout.scss
@@ -2,616 +2,613 @@
 @use "../abstracts/mixins" as *;
 
 .initial-selectLayout-wrapper {
-    position: fixed;
-    top: 100px;
-    right: 40px;
-    z-index: 10;
+  position: fixed;
+  top: 100px;
+  right: 40px;
+  z-index: 10;
 
-    .regularDropdown-container {
-        background: var(--background-color);
-    }
+  .regularDropdown-container {
+    background: var(--background-color);
+  }
 }
 
 .selectLayout-wrapper {
-    position: fixed;
-    left: 40px;
-    top: 100px;
-    z-index: 10;
+  position: fixed;
+  left: 40px;
+  top: 100px;
+  z-index: 10;
 
-    .regularDropdown-container {
-        background: var(--background-color);
-    }
+  .regularDropdown-container {
+    background: var(--background-color);
+  }
 }
 
 .compareLayOut-wrapper {
-    position: fixed;
-    top: 0;
-    right: 0;
-    z-index: 2;
-    height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 2;
+  height: 100vh;
+  background: var(--background-color);
+  backdrop-filter: blur(20px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  animation: slideInFromRight 0.4s ease-out forwards;
+  user-select: none;
+  border-left: 2px solid var(--border-color);
+  pointer-events: none;
+
+  .resizer {
+    width: 32px;
+    height: 32px;
+    @include flex-center;
+    padding: 6px;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translate(-50%, -50%);
     background: var(--background-color);
     backdrop-filter: blur(20px);
+    box-shadow: $box-shadow-heavy;
+    border-radius: 50%;
+    cursor: ew-resize;
+    transition: transform 0.1s ease;
+    z-index: 100;
+    // pointer-events: all;
+    opacity: 0;
+  }
+
+  .chooseLayout-container {
+    width: 100%;
+    height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
-    animation: slideInFromRight 0.4s ease-out forwards;
-    user-select: none;
-    border-left: 2px solid var(--border-color);
-    pointer-events: none;
+    position: relative;
+    overflow: hidden;
 
-    .resizer {
-        width: 32px;
-        height: 32px;
-        @include flex-center;
-        padding: 6px;
-        position: absolute;
-        top: 50%;
-        left: 0;
-        transform: translate(-50%, -50%);
+    .compare-layout-canvas-container {
+      position: absolute;
+      height: 100vh;
+      width: 50vw;
+      top: 0;
+      right: 0;
+    }
+
+    .chooseLayout-wrapper {
+      background: var(--background-color);
+      backdrop-filter: blur(20px);
+      padding: 20px;
+      border-radius: 8px;
+      box-shadow: $box-shadow-medium;
+      max-width: 80%;
+      text-align: center;
+      position: relative;
+      pointer-events: all;
+
+      .icon {
+        width: 100%;
+        margin-bottom: 15px;
+        text-align: center;
+
+        svg {
+          width: 100%;
+        }
+      }
+
+      .value {
+        margin-bottom: 15px;
+        font-size: var(--font-size-small);
+        font-weight: 500;
+        color: var(--text-primary);
+      }
+
+      button {
+        display: block;
+        margin: 0 auto;
+        padding: 8px 16px;
+        background: var(--background-color-button);
+        color: var(--icon-default-color-active);
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+
+        &:hover {
+          transform: translateY(-1px);
+        }
+      }
+
+      .displayLayouts-container {
+        max-width: 170px;
+        height: auto;
         background: var(--background-color);
         backdrop-filter: blur(20px);
-        box-shadow: $box-shadow-heavy;
-        border-radius: 50%;
-        cursor: ew-resize;
-        transition: transform 0.1s ease;
-        z-index: 100;
-        pointer-events: all;
-    }
-
-    .chooseLayout-container {
-        width: 100%;
-        height: 100%;
+        padding: 6px;
+        border-radius: 8px;
+        box-shadow: $box-shadow-medium;
+        position: absolute;
+        right: 0;
+        top: 100%;
+        transform: translate(50%, -10px);
         display: flex;
-        justify-content: center;
-        align-items: center;
-        position: relative;
-        overflow: hidden;
+        flex-direction: column;
+        gap: 6px;
 
-        .compare-layout-canvas-container {
-            position: absolute;
-            height: 100vh;
-            width: 100vw;
-            top: 0;
-            right: 0;
+        .header {
+          text-align: left;
+          padding-top: 6px;
+          padding-left: 6px;
         }
 
-        .chooseLayout-wrapper {
-            background: var(--background-color);
-            backdrop-filter: blur(20px);
-            padding: 20px;
-            border-radius: 8px;
-            box-shadow: $box-shadow-medium;
-            max-width: 80%;
-            text-align: center;
-            position: relative;
-            pointer-events: all;
+        .search-wrapper {
+          padding: 6px 0;
 
-            .icon {
-                width: 100%;
-                margin-bottom: 15px;
-                text-align: center;
-
-                svg {
-                    width: 100%;
-                }
-            }
-
-            .value {
-                margin-bottom: 15px;
-                font-size: var(--font-size-small);
-                font-weight: 500;
-                color: var(--text-primary);
-            }
-
-            button {
-                display: block;
-                margin: 0 auto;
-                padding: 8px 16px;
-                background: var(--background-color-button);
-                color: var(--icon-default-color-active);
-                border: none;
-                border-radius: 4px;
-                cursor: pointer;
-                transition: all 0.2s ease;
-
-                &:hover {
-                    transform: translateY(-1px);
-                }
-            }
-
-            .displayLayouts-container {
-                max-width: 170px;
-                height: auto;
-                background: var(--background-color);
-                backdrop-filter: blur(20px);
-                padding: 6px;
-                border-radius: 8px;
-                box-shadow: $box-shadow-medium;
-                position: absolute;
-                right: 0;
-                top: 100%;
-                transform: translate(50%, -10px);
-                display: flex;
-                flex-direction: column;
-                gap: 6px;
-
-                .header {
-                    text-align: left;
-                    padding-top: 6px;
-                    padding-left: 6px;
-                }
-
-                .search-wrapper {
-                    padding: 6px 0;
-
-                    .search-container {
-                        padding: 0;
-                        border-radius: 6px;
-                    }
-                }
-
-                .layouts-container {
-                    .layout {
-                        padding: 6px 0;
-                    }
-
-                    .layout-wrapper {
-                        display: flex;
-                        align-items: center;
-                        gap: 6px;
-                        cursor: pointer;
-                        padding: 0 10px;
-                        background: none;
-                        width: 100%;
-
-                        &:hover {
-                            background-color: var(
-                                --highlight-text-color
-                            ) !important;
-                            border-radius: 4px;
-
-                            .layout {
-                                color: var(--text-button-color) !important;
-                            }
-
-                            svg {
-                                path {
-                                    fill: var(--text-button-color) !important;
-                                }
-                            }
-                        }
-                    }
-                }
-            }
+          .search-container {
+            padding: 0;
+            border-radius: 6px;
+          }
         }
+
+        .layouts-container {
+          .layout {
+            padding: 6px 0;
+          }
+
+          .layout-wrapper {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            cursor: pointer;
+            padding: 0 10px;
+            background: none;
+            width: 100%;
+
+            &:hover {
+              background-color: var(--highlight-text-color) !important;
+              border-radius: 4px;
+
+              .layout {
+                color: var(--text-button-color) !important;
+              }
+
+              svg {
+                path {
+                  fill: var(--text-button-color) !important;
+                }
+              }
+            }
+          }
+        }
+      }
     }
+  }
 }
 
 .compare-result-container {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    position: fixed;
-    bottom: 40px;
-    width: 100%;
-    min-height: 200px;
-    z-index: 10;
-    background: var(--background-color-secondary);
-    backdrop-filter: blur(20px);
-    padding: 18px 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  position: fixed;
+  bottom: 40px;
+  width: 100%;
+  min-height: 200px;
+  z-index: 10;
+  background: var(--background-color-secondary);
+  backdrop-filter: blur(20px);
+  padding: 18px 8px;
 
-    .header {
-        width: fit-content;
-        background-color: var(--background-color-solid);
-        color: var(--background-color-accent);
-        padding: 6px 10px;
-        border-radius: 6px;
+  .header {
+    width: fit-content;
+    background-color: var(--background-color-solid);
+    color: var(--background-color-accent);
+    padding: 6px 10px;
+    border-radius: 6px;
+  }
+
+  .compare-result-wrapper {
+    display: flex;
+    gap: 12px;
+
+    h4 {
+      font-weight: 600;
     }
 
-    .compare-result-wrapper {
+    .comparisionCard {
+      position: relative;
+      flex: 1;
+      width: auto;
+      max-height: 200px;
+      background: var(--background-color);
+      outline: 1px solid var(--border-color);
+      outline-offset: -1px;
+      border-radius: 12px;
+      padding: 8px 12px;
+      overflow: hidden;
+    }
+
+    .performanceResult-wrapper {
+      min-width: 328px;
+      flex: 0;
+      position: relative;
+      padding-right: 65px;
+
+      .header {
         display: flex;
         gap: 12px;
+        align-items: center;
+      }
 
-        h4 {
-            font-weight: 600;
-        }
+      .metrics-container {
+        display: flex;
+        gap: 12px;
+        height: 100%;
 
-        .comparisionCard {
-            position: relative;
-            flex: 1;
-            width: auto;
-            max-height: 200px;
-            background: var(--background-color);
-            outline: 1px solid var(--border-color);
-            outline-offset: -1px;
-            border-radius: 12px;
-            padding: 8px 12px;
-            overflow: hidden;
-        }
+        .metrics-left {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+          height: 100%;
 
-        .performanceResult-wrapper {
-            min-width: 328px;
-            flex: 0;
-            position: relative;
-            padding-right: 65px;
+          .metric {
+            .metric-label {
+              display: flex;
+              align-items: center;
+              gap: 6px;
 
-            .header {
+              span {
                 display: flex;
-                gap: 12px;
-                align-items: center;
+              }
             }
 
-            .metrics-container {
-                display: flex;
-                gap: 12px;
-                height: 100%;
-
-                .metrics-left {
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: space-around;
-                    height: 100%;
-
-                    .metric {
-                        .metric-label {
-                            display: flex;
-                            align-items: center;
-                            gap: 6px;
-
-                            span {
-                                display: flex;
-                            }
-                        }
-
-                        .metric-value {
-                            padding-top: 6px;
-                            font-size: var(--font-size-xlarge);
-                            color: var(--background-color-accent);
-                            font-weight: 600;
-                        }
-                    }
-
-                    .label {
-                        padding-bottom: 68px;
-                    }
-                }
-
-                .metrics-right {
-                    height: fit-content;
-                    display: grid;
-                    grid-template-columns: repeat(2, 1fr);
-                    grid-template-rows: repeat(2, 1fr);
-
-                    gap: 2px;
-                    overflow: visible;
-
-                    margin: auto 0;
-
-                    .metric-wrapper {
-                        position: relative;
-                        width: 64px;
-                        height: 50px;
-                        overflow: visible; // allow content like labels to overflow
-
-                        &:nth-child(1) {
-                            .metric-label {
-                                top: -57%;
-                                left: 220%;
-                            }
-
-                            &::after {
-                                content: "";
-                                position: absolute;
-
-                                top: -100%;
-                                left: 50%;
-                                width: 100%; // Required for visible shape
-                                height: 40px;
-                                background-color: #b7b7c6;
-
-                                // Custom polygon shape (adjust if needed)
-                                clip-path: polygon(
-                                    96% 52%,
-                                    96% 54%,
-                                    45% 53%,
-                                    3% 100%,
-                                    0 100%,
-                                    42% 52%
-                                );
-
-                                z-index: 0; // Behind any inner content
-                            }
-                        }
-
-                        // Optional: content above the shape
-                        > * {
-                            position: relative;
-                            z-index: 1;
-                        }
-
-                        &:nth-child(2) {
-                            grid-column-start: 1;
-                            grid-row-start: 2;
-
-                            .metric-label {
-                                white-space: normal;
-                                width: 50px;
-                                left: 230%;
-                            }
-                        }
-
-                        &:nth-child(3) {
-                            grid-row: span 2 / span 2;
-                            grid-column-start: 2;
-                            grid-row-start: 1;
-                            margin-top: 40%;
-                            left: -16px;
-                            position: relative;
-                        }
-                    }
-
-                    .metric-label {
-                        position: absolute;
-                        top: 0px;
-                        left: 0%;
-                        white-space: nowrap;
-
-                        transform: translate(-50%, -50%);
-
-                        font-size: 10px;
-                        z-index: 1;
-                    }
-
-                    .metric {
-                        width: 100%;
-                        height: 100%;
-                        position: relative;
-                        display: flex;
-                        justify-content: center;
-                        align-items: center;
-
-                        &::after {
-                            content: "";
-                            position: absolute;
-                            top: 0;
-                            left: 0;
-                            width: 100%;
-                            height: 100%;
-
-                            background: var(--background-color, wheat);
-                            clip-path: polygon(
-                                25% 0%,
-                                75% 0%,
-                                100% 50%,
-                                75% 100%,
-                                25% 100%,
-                                0% 50%
-                            );
-                            filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
-
-                            z-index: 0;
-                        }
-
-                        // Content stays above the shape
-                        > * {
-                            position: relative;
-                            z-index: 1;
-                        }
-                    }
-                }
+            .metric-value {
+              padding-top: 6px;
+              font-size: var(--font-size-xlarge);
+              color: var(--background-color-accent);
+              font-weight: 600;
             }
+          }
 
-            .simulation-tag {
-                background: var(--background-color-button);
+          .label {
+            padding-bottom: 68px;
+          }
+        }
 
-                color: var(--icon-default-color-active);
+        .metrics-right {
+          height: fit-content;
+          display: grid;
+          grid-template-columns: repeat(2, 1fr);
+          grid-template-rows: repeat(2, 1fr);
+
+          gap: 2px;
+          overflow: visible;
+
+          margin: auto 0;
+
+          .metric-wrapper {
+            position: relative;
+            width: 64px;
+            height: 50px;
+            overflow: visible; // allow content like labels to overflow
+
+            &:nth-child(1) {
+              .metric-label {
+                top: -57%;
+                left: 220%;
+              }
+
+              &::after {
+                content: "";
                 position: absolute;
-                bottom: 0;
-                right: 0;
-                padding: 10px 5px;
-                border-radius: 12px 0 0 0;
+
+                top: -100%;
+                left: 50%;
+                width: 100%; // Required for visible shape
+                height: 40px;
+                background-color: #b7b7c6;
+
+                // Custom polygon shape (adjust if needed)
+                clip-path: polygon(
+                  96% 52%,
+                  96% 54%,
+                  45% 53%,
+                  3% 100%,
+                  0 100%,
+                  42% 52%
+                );
+
+                z-index: 0; // Behind any inner content
+              }
             }
+
+            // Optional: content above the shape
+            > * {
+              position: relative;
+              z-index: 1;
+            }
+
+            &:nth-child(2) {
+              grid-column-start: 1;
+              grid-row-start: 2;
+
+              .metric-label {
+                white-space: normal;
+                width: 50px;
+                left: 230%;
+              }
+            }
+
+            &:nth-child(3) {
+              grid-row: span 2 / span 2;
+              grid-column-start: 2;
+              grid-row-start: 1;
+              margin-top: 40%;
+              left: -16px;
+              position: relative;
+            }
+          }
+
+          .metric-label {
+            position: absolute;
+            top: 0px;
+            left: 0%;
+            white-space: nowrap;
+
+            transform: translate(-50%, -50%);
+
+            font-size: 10px;
+            z-index: 1;
+          }
+
+          .metric {
+            width: 100%;
+            height: 100%;
+            position: relative;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            &::after {
+              content: "";
+              position: absolute;
+              top: 0;
+              left: 0;
+              width: 100%;
+              height: 100%;
+
+              background: var(--background-color, wheat);
+              clip-path: polygon(
+                25% 0%,
+                75% 0%,
+                100% 50%,
+                75% 100%,
+                25% 100%,
+                0% 50%
+              );
+              filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
+
+              z-index: 0;
+            }
+
+            // Content stays above the shape
+            > * {
+              position: relative;
+              z-index: 1;
+            }
+          }
         }
+      }
+
+      .simulation-tag {
+        background: var(--background-color-button);
+
+        color: var(--icon-default-color-active);
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        padding: 10px 5px;
+        border-radius: 12px 0 0 0;
+      }
     }
+  }
 }
 
 @keyframes slideInFromRight {
-    from {
-        transform: translateX(100%);
-        opacity: 0;
-    }
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
 
-    to {
-        transform: translateX(0);
-        opacity: 1;
-    }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
 }
 
 .energy-usage {
-    position: relative;
+  position: relative;
 
-    .energy-usage-wrapper {
-
-
-        .value {
-            padding-top: 25px;
-            font-size: var(--font-size-xxxlarge);
-            color: var(--background-color-accent);
-        }
+  .energy-usage-wrapper {
+    .value {
+      padding-top: 25px;
+      font-size: var(--font-size-xxxlarge);
+      color: var(--background-color-accent);
     }
+  }
 
-    .simulation-details {
-        position: absolute;
-        bottom: 12px;
-        right: 12px;
+  .simulation-details {
+    position: absolute;
+    bottom: 12px;
+    right: 12px;
 
-        .simulation-wrapper {
-            display: flex;
-            align-items: center;
-            gap: 6px;
+    .simulation-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 6px;
 
-            .icon {
-                width: 20px;
-                height: 20px;
-                border-radius: 50%;
-                background-color: var(--background-color-accent);
-            }
-        }
+      .icon {
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        background-color: var(--background-color-accent);
+      }
     }
+  }
 
-    .chart {
-        width: 90%;
-        position: absolute;
-        top: 10px;
-        left: 0;
-    }
+  .chart {
+    width: 90%;
+    position: absolute;
+    top: 10px;
+    left: 0;
+  }
 }
 
 .throughPutCard-container {
-    .layers-wrapper {
-        padding: 20px 10px;
-        height: 100%;
-        width: 100%;
-        display: flex;
-        justify-content: space-between;
-        position: relative;
+  .layers-wrapper {
+    padding: 20px 10px;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    position: relative;
 
-        .layer-wrapper {
-            display: flex;
-            flex-direction: column;
+    .layer-wrapper {
+      display: flex;
+      flex-direction: column;
 
-            &:last-child {
-                justify-content: end;
-            }
-        }
-
-        .chart {
-            width: 60%;
-            height: 70%;
-            position: absolute;
-        }
+      &:last-child {
+        justify-content: end;
+      }
     }
 
     .chart {
-        width: 80%;
-        height: 90%;
-        position: absolute;
-        bottom: 0;
-        left: 0;
+      width: 60%;
+      height: 70%;
+      position: absolute;
     }
+  }
+
+  .chart {
+    width: 80%;
+    height: 90%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+  }
 }
 
 .cycle-time-container {
-    position: relative;
+  position: relative;
 
-    .cycle-main {
+  .cycle-main {
+    display: flex;
+    justify-content: space-between;
+    height: 100%;
+
+    .layers-wrapper {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      .layers {
         display: flex;
-        justify-content: space-between;
-        height: 100%;
+        flex-direction: column;
+        gap: 4px;
 
-        .layers-wrapper {
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-
-            .layers {
-                display: flex;
-                flex-direction: column;
-                gap: 4px;
-
-                .layer-name {
-                    color: var(--background-color-accent);
-                }
-
-                .layer-time {
-                    font-size: var(--font-size-large);
-                }
-
-                .layer-profit {
-                    color: #14ca44;
-                    text-align: end;
-
-                    span {
-                        color: #14ca44;
-                    }
-                }
-            }
+        .layer-name {
+          color: var(--background-color-accent);
         }
-    }
 
-    .chart {
-        position: absolute;
-        bottom: 0;
-        left: 10px;
-        width: 60%;
-        height: 80%;
+        .layer-time {
+          font-size: var(--font-size-large);
+        }
+
+        .layer-profit {
+          color: #14ca44;
+          text-align: end;
+
+          span {
+            color: #14ca44;
+          }
+        }
+      }
     }
+  }
+
+  .chart {
+    position: absolute;
+    bottom: 0;
+    left: 10px;
+    width: 60%;
+    height: 80%;
+  }
 }
 
 .overallDowntime-container {
-    .totalDownTime-wrapper {
+  .totalDownTime-wrapper {
+    display: flex;
+
+    .totalDownTime {
+      width: 70%;
+      background: var(--background-color-secondary);
+      backdrop-filter: blur(20px);
+      border-radius: 12px;
+
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      // gap: 20px;
+      padding: 8px 10px;
+      margin: 44px 0;
+
+      .totalDownTime-right {
         display: flex;
+        flex-direction: column;
+        gap: 6px;
+      }
 
-        .totalDownTime {
-            width: 70%;
-            background: var(--background-color-secondary);
-            backdrop-filter: blur(20px);
-            border-radius: 12px;
+      .totalDownTime-left {
+        display: flex;
+        align-items: center;
+        gap: 6px;
 
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            // gap: 20px;
-            padding: 8px 10px;
-            margin: 44px 0;
-
-            .totalDownTime-right {
-                display: flex;
-                flex-direction: column;
-                gap: 6px;
-            }
-
-            .totalDownTime-left {
-                display: flex;
-                align-items: center;
-                gap: 6px;
-
-                .value {
-                    font-size: var(--font-size-xlarge);
-                    color: var(--background-color-button);
-                }
-            }
-        }
-
-        .chart {
-            width: 30%;
-            position: relative;
+        .value {
+          font-size: var(--font-size-xlarge);
+          color: var(--background-color-button);
         }
+      }
     }
+
+    .chart {
+      width: 30%;
+      position: relative;
+    }
+  }
 }
 
 .overallScrapRate {
-    .overallScrapRate-wrapper {
-        display: flex;
+  .overallScrapRate-wrapper {
+    display: flex;
 
-        .overallScrapRate-value {
-            width: 50%;
-            display: flex;
-            flex-direction: column;
-            gap: 6px;
-            margin: 40px 0;
+    .overallScrapRate-value {
+      width: 50%;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      margin: 40px 0;
 
-            .overallScrapRate-key {
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-        }
-
-        .chart {
-            width: 50%;
-            position: relative;
-        }
+      .overallScrapRate-key {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
     }
+
+    .chart {
+      width: 50%;
+      position: relative;
+    }
+  }
 }