first commit

app/src/styles/abstracts/functions.scss

@@ -0,0 +1,5 @@
+// get rem from pixels
+
+@function get_rem($px) {
+  @return calc($px / 16 * 1rem);
+}

app/src/styles/abstracts/mixins.scss

@@ -0,0 +1,33 @@
+@mixin flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@mixin flex-space-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+// Array of base colors
+$colors: (
+  #f5550b,
+  #1bac1b,
+  #0099ff,
+  #d4c927,
+  #8400ff, 
+  #13e9b3, 
+  #df1dcf 
+);
+
+@mixin gradient-by-child($index) {
+  // Get the color based on the index passed
+  $base-color: nth($colors, $index);
+  // Apply gradient using the same color with different alpha values
+  background: linear-gradient(
+    144.19deg,
+    rgba($base-color, 0.2) 16.62%,  // 20% opacity
+    rgba($base-color, 0.08) 85.81%   // 80% opacity
+  );
+}

app/src/styles/abstracts/variables.scss

@@ -0,0 +1,195 @@
+@use "functions";
+
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
+
+// new variables
+
+// text colors
+// ---------- light mode ----------
+$text-color: #2b3344;
+$text-disabled: #b7b7c6;
+$input-text-color: #595965;
+$highlight-text-color: #6f42c1;
+$text-button-color: #f3f3fd;
+
+// ---------- dark mode ----------
+$text-color-dark: #f3f3fd;
+$text-disabled-dark: #6f6f7a;
+$input-text-color-dark: #b5b5c8;
+$highlight-text-color-dark: #d2baff;
+$text-button-color-dark: #f3f3fd;
+
+// background colors
+// ---------- light mode ----------
+$background-color: linear-gradient(-45deg, #fcfdfd71 0%, #fcfdfd79 100%);
+$background-color-solid-gradient: linear-gradient(
+  -45deg,
+  #fcfdfd 0%,
+  #fcfdfd 100%
+);
+$background-color-solid: #fcfdfd;
+$background-color-secondary: #fcfdfd4d;
+$background-color-accent: #6f42c1;
+$background-color-button: #6f42c1;
+$background-color-drop-down: #6f42c14d;
+$background-color-input: #ffffff4d;
+$background-color-input-focus: #f2f2f7;
+$background-color-drop-down-gradient: linear-gradient(
+  -45deg,
+  #75649366 0%,
+  #40257266 100%
+);
+$background-color-selected: #e0dfff;
+$background-radial-gray-gradient: radial-gradient(
+  circle,
+  #bfe0f8 0%,
+  #e9ebff 46%,
+  #e2acff 100%
+);
+
+// ---------- dark mode ----------
+$background-color-dark: linear-gradient(-45deg, #333333b3 0%, #2d2437b3 100%);
+$background-color-solid-gradient-dark: linear-gradient(
+  -45deg,
+  #333333 0%,
+  #2d2437 100%
+);
+$background-color-solid-dark: #19191d;
+$background-color-secondary-dark: #19191d99;
+$background-color-accent-dark: #6f42c1;
+$background-color-button-dark: #6f42c1;
+$background-color-drop-down-dark: #50505080;
+$background-color-input-dark: #ffffff33;
+$background-color-input-focus-dark: #333333;
+$background-color-drop-down-gradient-dark: linear-gradient(
+  -45deg,
+  #8973b166 0%,
+  #53427366 100%
+);
+$background-color-selected-dark: #403e66;
+$background-radial-gray-gradient-dark: radial-gradient(
+  circle,
+  #31373b 0%,
+  #48494b 46%,
+  #52415c 100%
+);
+
+// border colors
+// ---------- light mode ----------
+$border-color: #e0dfff;
+$input-border-color: #d5dddd80;
+$border-color-accent: #6f42c1;
+
+// ---------- dark mode ----------
+$border-color-dark: #564b69;
+$input-border-color-dark: #d5dddd80;
+$border-color-accent-dark: #6f42c1;
+
+// highlight colors
+// ---------- light mode ----------
+$highlight-accent-color: #e0dfff;
+$highlight-secondary-color: #6f42c1;
+
+// ---------- dark mode ----------
+$highlight-accent-color-dark: #403e6a;
+$highlight-secondary-color-dark: #c4abf1;
+
+// icon colors
+// ---------- light mode ----------
+$icon-default-color: #6f42c1;
+$icon-default-color-hover: #7f4ddb;
+$icon-default-color-active: #f2f2f7;
+
+// ---------- dark mode ----------
+$icon-default-color-dark: #6f42c1;
+$icon-default-color-hover-dark: #7f4ddb;
+$icon-default-color-active-dark: #f2f2f7;
+
+// colors
+$color1: #a392cd;
+$color2: #7b4cd3;
+$color3: #b186ff;
+$color4: #8752e8;
+$color5: #c7a8ff;
+
+// log indication colors
+// ------------ text -------------
+$log-default-text-color: #6f42c1;
+$log-info-text-color: #1773fd;
+$log-warn-text-color: #f3a50c;
+$log-error-text-color: #fc230f;
+$log-success-text-color: #23a84f;
+// ----------- dark ---------------
+$log-default-text-color-dark: #b18ef1;
+$log-info-text-color-dark: #7eb0fa;
+$log-warn-text-color-dark: #ffaa00;
+$log-error-text-color-dark: #ff887d;
+$log-success-text-color-dark: #43ff81;
+
+// ------------ background -------------
+$log-default-backgroung-color: #6e42c133;
+$log-info-background-color: #1773fd5d;
+$log-warn-background-color: #f3a50c33;
+$log-error-background-color: #fc230f33;
+$log-success-background-color: #0ef75b33;
+
+// old variables
+$accent-color: #6f42c1;
+$accent-color-dark: #c4abf1;
+
+$background-color-gray: #f3f3f3;
+$background-color-gray-dark: #232323;
+
+$shadow-color: #3c3c431a;
+$shadow-color-dark: #8f8f8f1a;
+
+$acent-gradient-dark: linear-gradient(90deg, #b392f0 0%, #a676ff 100%);
+$acent-gradient: linear-gradient(90deg, #6f42c1 0%, #925df3 100%);
+
+$faint-gradient: radial-gradient(circle, #bfe0f8 0%, #e9ebff 46%, #e2acff 100%);
+$faint-gradient-dark: radial-gradient(
+  circle,
+  #31373b 0%,
+  #48494b 46%,
+  #52415c 100%
+);
+
+$font-inter: "Inter", sans-serif;
+$font-josefin-sans: "Josefin Sans", sans-serif;
+$font-poppins: "Poppins", sans-serif;
+$font-roboto: "Roboto", sans-serif;
+
+$tiny: 0.625rem;
+$small: 0.75rem;
+$regular: 0.8rem;
+$large: 1rem;
+$xlarge: 1.125rem;
+$xxlarge: 1.5rem;
+$xxxlarge: 2rem;
+
+$thin-weight: 300;
+$regular-weight: 400;
+$medium-weight: 500;
+$bold-weight: 600;
+
+$z-index-drei-html: 1;
+$z-index-default: 1;
+$z-index-marketplace: 2;
+$z-index-tools: 3;
+$z-index-negative: -1;
+$z-index-ui-base: 10;
+$z-index-ui-overlay: 20;
+$z-index-ui-popup: 30;
+$z-index-ui-highest: 50;
+
+$box-shadow-light: 0px 2px 4px $shadow-color;
+$box-shadow-medium: 0px 4px 8px $shadow-color;
+$box-shadow-heavy: 0px 8px 16px $shadow-color;
+
+$border-radius-small: 4px;
+$border-radius-medium: 6px;
+$border-radius-large: 12px;
+$border-radius-circle: 50%;
+$border-radius-xlarge: 16px;
+$border-radius-extra-large: 20px;
+$border-radius-xxx: 30px;

app/src/styles/base/base.scss

@@ -0,0 +1,182 @@
+@use "../abstracts/variables" as *;
+
+[data-theme="light"] {
+  // text colors
+  --text-color: #{$text-color};
+  --text-disabled: #{$text-disabled};
+  --text-button-color: #{$text-button-color};
+  --input-text-color: #{$input-text-color};
+  --highlight-text-color: #{$highlight-text-color};
+
+  // background colors
+  --background-color: #{$background-color};
+  --background-color-solid: #{$background-color-solid};
+  --background-color-solid-gradient: #{$background-color-solid-gradient};
+  --background-color-secondary: #{$background-color-secondary};
+  --background-color-accent: #{$background-color-accent};
+  --background-color-button: #{$background-color-button};
+  --background-color-drop-down: #{$background-color-drop-down};
+  --background-color-input: #{$background-color-input};
+  --background-color-input-focus: #{$background-color-input-focus};
+  --background-color-drop-down-gradient: #{$background-color-drop-down-gradient};
+  --background-color-selected: #{$background-color-selected};
+  --background-radial-gray-gradient: #{$background-radial-gray-gradient};
+
+  // border colors
+  --border-color: #{$border-color};
+  --input-border-color: #{$input-border-color};
+  --border-color-accent: #{$border-color-accent};
+
+  // highlight colors
+  --highlight-accent-color: #{$highlight-accent-color};
+  --highlight-secondary-color: #{$highlight-secondary-color};
+
+  // icon colors
+  --icon-default-color: #{$icon-default-color};
+  --icon-default-color-active: #{$icon-default-color-active};
+
+  // log colors
+  --default-text-color: #{$log-default-text-color};
+  --log-info-text-color: #{$log-info-text-color};
+  --log-warn-text-color: #{$log-warn-text-color};
+  --log-error-text-color: #{$log-error-text-color};
+  --log-success-text-color: #{$log-success-text-color};
+  --log-default-background-color: #{$log-default-backgroung-color};
+  --log-info-background-color: #{$log-info-background-color};
+  --log-warn-background-color: #{$log-warn-background-color};
+  --log-error-background-color: #{$log-error-background-color};
+  --log-success-background-color: #{$log-success-background-color};
+
+  // old colors
+  --accent-color: #{$accent-color};
+  --accent-gradient-color: #{$acent-gradient};
+  --faint-gradient-color: #{$faint-gradient};
+  --background-color-gray: #{$background-color-gray};
+  --shadow-main-light: #{$shadow-color};
+  --box-shadow-light: 0px 2px 4px var(--shadow-main-light);
+  --box-shadow-medium: 0px 4px 8px var(--shadow-main-light);
+  --box-shadow-heavy: 0px 8px 16px var(--shadow-main-light);
+  --font-inter: #{$font-inter};
+  --font-josefin-sans: #{$font-josefin-sans};
+  --font-poppins: #{$font-poppins};
+  --font-roboto: #{$font-roboto};
+}
+
+[data-theme="dark"] {
+  // text colors
+  --text-color: #{$text-color-dark};
+  --text-disabled: #{$text-disabled-dark};
+  --text-button-color: #{$text-button-color-dark};
+  --input-text-color: #{$input-text-color-dark};
+  --highlight-text-color: #{$highlight-text-color-dark};
+
+  // background colors
+  --background-color: #{$background-color-dark};
+  --background-color-solid-gradient: #{$background-color-solid-gradient-dark};
+  --background-color-solid: #{$background-color-solid-dark};
+  --background-color-secondary: #{$background-color-secondary-dark};
+  --background-color-accent: #{$background-color-accent-dark};
+  --background-color-button: #{$background-color-button-dark};
+  --background-color-drop-down: #{$background-color-drop-down-dark};
+  --background-color-input: #{$background-color-input-dark};
+  --background-color-input-focus: #{$background-color-input-focus-dark};
+  --background-color-drop-down-gradient: #{$background-color-drop-down-gradient-dark};
+  --background-color-selected: #{$background-color-selected-dark};
+  --background-radial-gray-gradient: #{$background-radial-gray-gradient-dark};
+
+  // border colors
+  --border-color: #{$border-color-dark};
+  --input-border-color: #{$input-border-color-dark};
+  --border-color-accent: #{$border-color-accent-dark};
+
+  // highlight colors
+  --highlight-accent-color: #{$highlight-accent-color-dark};
+  --highlight-secondary-color: #{$highlight-secondary-color-dark};
+
+  // icon colors
+  --icon-default-color: #{$icon-default-color-dark};
+  --icon-default-color-active: #{$icon-default-color-active-dark};
+
+  // log colors
+  --default-text-color: #{$log-default-text-color-dark};
+  --log-info-text-color: #{$log-info-text-color-dark};
+  --log-warn-text-color: #{$log-warn-text-color-dark};
+  --log-error-text-color: #{$log-error-text-color-dark};
+  --log-success-text-color: #{$log-success-text-color-dark};
+  --log-default-background-color: #{$log-default-backgroung-color};
+  --log-info-background-color: #{$log-info-background-color};
+  --log-warn-background-color: #{$log-warn-background-color};
+  --log-error-background-color: #{$log-error-background-color};
+  --log-success-background-color: #{$log-success-background-color};
+
+  // old colors
+  --accent-color: #{$accent-color-dark};
+  --accent-gradient-color: #{$acent-gradient-dark};
+  --faint-gradient-color: #{$faint-gradient-dark};
+  --background-color-gray: #{$background-color-gray-dark};
+  --shadow-main-dark: #{$shadow-color};
+  --box-shadow-light: 0px 2px 4px var(--shadow-main-dark);
+  --box-shadow-medium: 0px 4px 8px var(--shadow-main-dark);
+  --box-shadow-heavy: 0px 8px 16px var(--shadow-main-dark);
+  --font-inter: #{$font-inter};
+  --font-josefin-sans: #{$font-josefin-sans};
+  --font-poppins: #{$font-poppins};
+  --font-roboto: #{$font-roboto};
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+  background: var(--background-color-gray);
+}
+
+#root-over {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 99;
+}
+
+body {
+  --font-size-tiny: #{$tiny};
+  --font-size-small: #{$small};
+  --font-size-regular: #{$regular};
+  --font-size-large: #{$large};
+  --font-size-xlarge: #{$xlarge};
+  --font-size-xxlarge: #{$xxlarge};
+  --font-size-xxxlarge: #{$xxxlarge};
+  --font-weight-regular: #{$regular-weight};
+  --font-weight-medium: #{$medium-weight};
+  --font-weight-bold: #{$bold-weight};
+
+  // colors
+  --color1: #{$color1};
+  --color2: #{$color2};
+  --color3: #{$color3};
+  --color4: #{$color4};
+  --color5: #{$color5};
+}
+
+::-webkit-scrollbar {
+  width: 0px;
+  height: 0px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: #{$border-radius-small};
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--background-color-button);
+  border-radius: #{$border-radius-small};
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--background-color-button);
+}
+
+::-webkit-scrollbar-corner {
+  background: transparent;
+}

app/src/styles/base/global.scss

@@ -0,0 +1,56 @@
+@use "../abstracts/variables" as *;
+@use "../abstracts/mixins" as *;
+
+section,
+.section {
+  padding: 4px;
+  outline: 1px solid var(--border-color);
+  outline-offset: -1px;
+  border-radius: #{$border-radius-large};
+  background: var(--background-color);
+  margin: 4px 0;
+}
+
+.scene-container {
+  width: calc(100% - (320px + 270px + 90px));
+  height: calc(100% - (250px));
+  position: absolute;
+  top: 50%;
+  left: calc(270px + 45px);
+  overflow: hidden;
+  z-index: 1;
+  transform: translate(0, -50%);
+  transition: all 0.2s;
+  box-shadow: $box-shadow-medium;
+  background: var(--background-color-solid);
+  canvas {
+    outline: none;
+    border: none;
+  }
+}
+
+.tooltip {
+  position: absolute;
+  top: calc(-100% - 8px);
+  background: var(--background-color-solid);
+  padding: 4px 10px;
+  border-radius: #{$border-radius-medium};
+  color: var(--text-color);
+  pointer-events: none;
+  user-select: none;
+  transition: all 0.3s;
+  opacity: 0;
+  text-transform: capitalize;
+  white-space: nowrap;
+  &::after {
+    content: "";
+    position: absolute;
+    height: 6px;
+    width: 6px;
+    background: var(--background-color-solid);
+    z-index: -1;
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, 50%) rotate(45deg);
+  }
+}

app/src/styles/base/reset.scss

@@ -0,0 +1,14 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  user-select: none;
+  font-size: var(--font-size-regular);
+}
+
+input[type="password"]::-ms-reveal, /* For Microsoft Edge */
+input[type="password"]::-ms-clear,   /* For Edge clear button */
+input[type="password"]::-webkit-clear-button, /* For Chrome/Safari clear button */
+input[type="password"]::-webkit-inner-spin-button {  /* Just in case */
+  display: none;
+}

app/src/styles/base/typography.scss

@@ -0,0 +1,8 @@
+// Global Typography Styles
+* {
+  // Setting default font family
+  font-family: var(--font-inter), sans-serif;
+  font-weight: var(--font-weight-regular); // Default font weight
+  font-size: var(--font-size-regular); // Default font size
+  color: var(--text-color); // Default text color
+}

app/src/styles/components/button.scss

@@ -0,0 +1,24 @@
+@use "../abstracts/variables" as *;
+@use "../abstracts/mixins" as *;
+
+.labeled-button-container {
+  @include flex-space-between;
+  padding: 6px 12px;
+
+  button {
+    padding: 2px 32px;
+    border: none;
+    border-radius: #{$border-radius-large};
+    color: var(--text-button-color);
+    background: var(--background-color-button);
+    transition: all 0.2s;
+    cursor: pointer;
+  }
+}
+
+button {
+  border: none;
+  outline: none;
+  background: none;
+  cursor: pointer;
+}

app/src/styles/components/confirmationPopUp.scss

@@ -0,0 +1,45 @@
+@use "../abstracts/variables.scss" as *;
+
+.confirmation-overlay {
+    width: 100vw;
+    height: 100vh;
+    background: var(--background-color-secondary);
+    backdrop-filter: blur(2px);
+
+    .confirmation-modal {
+        min-width: 35%;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        z-index: 5;
+        background: var(--background-color);
+        padding: 14px 12px;
+        border-radius: #{$border-radius-medium};
+
+        .buttton-wrapper {
+            padding-top: 12px;
+            display: flex;
+            justify-content: end;
+            align-items: end;
+            gap: 12px;
+
+            .confirmation-button {
+                padding: 6px 10px;
+                border-radius: #{$border-radius-medium};
+                cursor: pointer;
+
+                &:first-child {
+                    color: var(--accent-color);
+                }
+
+                &:last-child {
+                    background: #ffe3e0;
+                    color: #f65648;
+                }
+
+            }
+
+        }
+    }
+}

app/src/styles/components/footer/footer.scss

@@ -0,0 +1,329 @@
+@use "../../abstracts/variables" as *;
+@use "../../abstracts/mixins" as *;
+
+.footer-container {
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 3;
+  padding: 2px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  pointer-events: none;
+
+  .footer-wrapper {
+    display: flex;
+    justify-content: space-between;
+
+    .selection-wrapper {
+      display: flex;
+      gap: 6px;
+
+      .selector-wrapper {
+        display: flex;
+        gap: 6px;
+        align-items: center;
+        background: var(--background-color);
+        padding: 3px 6px;
+        border-radius: #{$border-radius-large};
+        color: var(--text-color);
+        backdrop-filter: blur(14px);
+
+        .selector {
+          color: var(--text-color);
+          font-size: var(--font-size-small);
+        }
+
+        .icon {
+          height: 17px;
+        }
+      }
+    }
+
+    .logs-wrapper {
+      display: flex;
+      gap: 6px;
+      position: relative;
+      pointer-events: all;
+      // dummy
+      .bg-dummy {
+        background: var(--background-color-solid);
+        position: absolute;
+        z-index: -1;
+      }
+
+      .bg-dummy.left-top {
+        top: 1px;
+        left: 4px;
+        width: 60%;
+        height: 16px;
+        border-radius: #{$border-radius-extra-large};
+      }
+
+      .bg-dummy.right-bottom {
+        right: 68px;
+        bottom: 0;
+        width: 20%;
+        height: 100%;
+        border-radius: #{$border-radius-circle};
+      }
+
+      .log-container {
+        background: var(--background-color);
+        backdrop-filter: blur(20px);
+        border-radius: #{$border-radius-large};
+        @include flex-center;
+        overflow: hidden;
+      }
+
+      .logs-detail,
+      .version {
+        @include flex-center;
+        border-radius: #{$border-radius-extra-large};
+        padding: 3px 6px;
+        height: 100%;
+        color: var(--text-color);
+        gap: 6px;
+      }
+
+      .logs-detail {
+        padding: 2px 12px;
+        cursor: pointer;
+        outline: 0 solid var(--border-color);
+        outline-offset: -1px;
+
+        .log-icon {
+          @include flex-center;
+        }
+
+        .log-message {
+          max-width: 40vw;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+
+      .version {
+        background: var(--background-color);
+        font-size: var(--font-size-tiny);
+
+        .icon {
+          @include flex-center;
+        }
+      }
+
+      .log {
+        background: var(--log-default-background-color);
+        outline-color: var(--default-text-color);
+
+        .log-message {
+          color: var(--default-text-color);
+        }
+      }
+
+      .info {
+        background: var(--log-info-background-color);
+        outline-color: var(--log-info-text-color);
+
+        .log-message {
+          color: var(--log-info-text-color);
+        }
+      }
+
+      .error {
+        background: var(--log-error-background-color);
+        outline-color: var(--log-error-text-color);
+
+        .log-message {
+          color: var(--log-error-text-color);
+        }
+      }
+
+      .warning {
+        background: var(--log-warn-background-color);
+        outline-color: var(--log-warn-text-color);
+
+        .log-message {
+          color: var(--log-warn-text-color);
+        }
+      }
+
+      .success {
+        background: var(--log-success-background-color);
+
+        .log-message {
+          color: var(--log-success-text-color);
+        }
+      }
+    }
+  }
+
+  .shortcut-helper-container {
+    min-height: 320px;
+    height: 320px;
+    border-radius: 18px;
+    pointer-events: all;
+    background: var(--background-color);
+    backdrop-filter: blur(20px);
+    .close-button {
+      position: absolute;
+      @include flex-center;
+      height: 26px;
+      width: 26px;
+      right: 12px;
+      top: 10px;
+      background: var(--background-color);
+      border-radius: #{$border-radius-medium};
+      outline: 1px solid var(--border-color);
+      &:hover{
+        background: var(--background-color-solid);
+      }
+    }
+    .header {
+      display: flex;
+      justify-content: center;
+      flex-wrap: wrap;
+      gap: 10px;
+      padding: 12px 0;
+
+      .header-wrapper {
+        display: flex;
+        align-items: center;
+
+        button,
+        .type {
+          font-size: var(--font-size-small);
+        }
+
+        .type {
+          position: relative;
+          padding-left: 10px;
+
+          &::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 1px;
+            height: 100%;
+            background: var(--text-color);
+          }
+        }
+      }
+
+      button {
+        padding: 4px 12px;
+        cursor: pointer;
+        border-radius: 4px;
+        background-color: transparent;
+        border: 1px solid transparent;
+        transition: background 0.2s;
+
+        &.active {
+          background: var(--background-color-button);
+          color: var(--icon-default-color-active);
+          border-radius: 18px;
+        }
+      }
+    }
+
+    .shortcut-wrapper {
+      padding: 16px 0;
+      margin: 0 12px;
+      height: calc(100% - 60px);
+      display: grid;
+      grid-template-columns: repeat(2, 350px);
+      justify-content: center;
+      align-content: start; // Align content to top
+      gap: 16px;
+      overflow-y: auto; // Allow scrolling if content is too tall
+      border-radius: 18px;
+      background: var(--background-color);
+
+      .shortcut-item {
+        min-width: 330px;
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        padding: 0px 16px;
+        border-radius: 6px;
+        box-sizing: border-box;
+        gap: 12px;
+
+        .shortcut-intro {
+          display: flex;
+          gap: 6px;
+
+          .value-wrapper {
+            .name {
+              font-size: var(--font-size-small);
+            }
+
+            .description {
+              font-size: var(--font-size-tiny);
+            }
+          }
+        }
+
+        .keys {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          flex-wrap: wrap;
+
+          .key {
+            background: linear-gradient(
+              135.11deg,
+              #656dc2 3.48%,
+              #9526e5 91.33%
+            );
+            @include flex-center;
+            padding: 4px 10px;
+            height: 25px;
+            border-radius: 4px;
+            font-family: monospace;
+            font-size: var(--font-size-tiny);
+            color: var(--icon-default-color-active);
+            &:last-child{
+              background: var(--background-color-button);
+            }
+          }
+
+          .key.add {
+            background: none;
+            padding: 0;
+          }
+        }
+
+        .description {
+          font-size: 14px;
+          color: var(--input-text-color);
+          line-height: 1.4;
+        }
+      }
+    }
+
+    .shortcut-wrapper.single-item {
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+      /* or center if vertical centering is desired */
+    }
+  }
+}
+
+.shortcut-helper-overlay {
+  max-height: 0;
+  overflow: hidden;
+  transform: translateY(20px);
+  transition: all 0.3s ease-in-out;
+
+  &.visible {
+    max-height: 1000px; // adjust as needed
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

app/src/styles/components/form.scss

@@ -0,0 +1,26 @@
+@use "../abstracts/variables" as *;
+@use "../abstracts/mixins" as *;
+
+.rename-tool-tip {
+  position: absolute;
+  background: var(--background-color);
+  padding: 10px 16px;
+  width: 260px;
+  border-radius: #{$border-radius-large};
+  outline: 1px solid var(--border-color);
+  z-index: 100;
+  .header {
+    @include flex-center;
+    gap: 8px;
+    .icon {
+      @include flex-center;
+    }
+    .name {
+      color: var(--text-color);
+    }
+    input {
+      width: 100%;
+      margin-top: 6px;
+    }
+  }
+}

app/src/styles/components/input.scss

@@ -0,0 +1,767 @@
+@use "../abstracts/variables" as *;
+@use "../abstracts/mixins" as *;
+
+// global input style
+
+input,
+textarea {
+  width: 100%;
+  padding: 4px 8px;
+  border-radius: #{$border-radius-large};
+  outline: 1px solid var(--input-border-color);
+  outline-offset: -1px;
+  border: none;
+  background: var(--background-color-input);
+  color: var(--input-text-color);
+
+  &:focus,
+  &:active {
+    outline: 1px solid var(--border-color-accent);
+    background: var(--background-color-input-focus);
+  }
+
+  &:-webkit-autofill,
+  &:-webkit-autofill:hover,
+  &:-webkit-autofill:focus,
+  &:-webkit-autofill:active {
+    // Text styles
+    -webkit-text-fill-color: var(--input-text-color) !important;
+    caret-color: var(--input-text-color);
+
+    // Background styles
+    background: var(--background-color-solid) !important;
+    -webkit-box-shadow: 0 0 0px 1000px var(--background-color-solid) inset !important;
+  }
+
+  // File input specific style adjustments
+  &::file-selector-button {
+    font-size: 14px;
+    background: var(--background-color-secondary);
+    border: none;
+    outline: none;
+    border-radius: #{$border-radius-small};
+    padding: 2px;
+    cursor: pointer;
+  }
+}
+
+input[type="number"] {
+
+  // Chrome, Safari, Edge, Opera
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+}
+
+.input-value {
+  color: var(--input-text-color);
+  font-size: var(--font-size-regular);
+  font-weight: var(--font-weight-regular);
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rename-input {
+  width: 100%;
+  color: var(--input-text-color);
+  font-size: var(--font-size-regular);
+  font-weight: var(--font-weight-regular);
+  outline: none;
+  line-height: 26px;
+  padding: 0 8px;
+}
+
+.input-error {
+  border: 1px solid #f65648 !important;
+  outline: none !important;
+  color: #f65648;
+}
+
+.toggle-header-container {
+  @include flex-center;
+  padding: 6px 12px;
+  margin: 6px 0;
+
+  .toggle-header-item {
+    width: 100%;
+    text-align: center;
+    padding: 4px 12px;
+    border-radius: #{$border-radius-large};
+  }
+
+  .active {
+    background: var(--background-color-button);
+    color: var(--text-button-color);
+  }
+}
+
+.search-wrapper {
+  position: sticky;
+  top: 0;
+  padding: 0px 10px;
+  width: 100%;
+  z-index: 1;
+
+  .search-container {
+    @include flex-center;
+    width: 100%;
+    border-radius: #{$border-radius-extra-large};
+    padding: 3px 2px;
+    position: relative;
+    border: 1px solid var(--border-color);
+    background: var(--background-color-input-focus);
+
+    .icon-container {
+      @include flex-center;
+      padding: 0 8px;
+      position: absolute;
+      width: fit-content;
+      left: 0;
+    }
+
+    .search-input {
+      width: 100%;
+      color: var(--input-text-color);
+      font-size: var(--font-size-regular);
+      font-weight: var(--font-weight-regular);
+      border: none;
+      outline: none;
+      background: transparent;
+      padding-left: 36px;
+    }
+
+    .clear-button {
+      @include flex-center;
+      position: absolute;
+      top: 4px;
+      right: 4px;
+      width: 21px;
+      height: 21px;
+      border: none;
+      border-radius: #{$border-radius-large};
+      cursor: pointer;
+      background: transparent;
+
+      &:hover {
+        background: var(--background-color-secondary);
+      }
+    }
+  }
+
+  .active {
+    border: 1px solid var(--accent-color);
+    background: var(--background-color-input-focus);
+  }
+}
+
+.kebab-menu-container {
+  position: relative;
+  @include flex-center;
+
+  .kebab-icon {
+    @include flex-center;
+  }
+
+  .menu-list {
+    position: absolute;
+    left: 10px;
+    top: 12px;
+    background: var(--background-color);
+    border-radius: #{$border-radius-small};
+    box-shadow: var(--box-shadow-medium);
+    z-index: 1;
+    padding: 8px 4px;
+    width: 170px;
+
+    .menu-item {
+      margin: 2px 0;
+      padding: 2px 4px;
+      cursor: pointer;
+      border-radius: #{$border-radius-small};
+      display: flex;
+      gap: 2px;
+
+      &:hover {
+        background: var(--background-color-secondary);
+      }
+
+      .icon-container {
+        @include flex-center;
+        height: 18px;
+        width: 18px;
+
+        path {
+          stroke: var(--accent-color);
+        }
+      }
+    }
+
+    .selected {
+      background: var(--highlight-accent-color);
+      color: var(--accent-color);
+
+      &:hover {
+        background: var(--highlight-accent-color);
+      }
+    }
+
+    input {
+      display: none;
+    }
+  }
+}
+
+.regularDropdown-container {
+  width: 100%;
+  min-width: 80px;
+  padding: 4px 8px;
+  border: 1px solid var(--border-color);
+  border-radius: #{$border-radius-large};
+  position: relative;
+  cursor: pointer;
+
+  .dropdown-header {
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    cursor: pointer;
+    border-radius: #{$border-radius-large};
+  }
+
+  .dropdown-options {
+    position: absolute;
+    width: 100%;
+    background: var(--background-color);
+    border: 1px solid var(--border-color);
+    border-radius: #{$border-radius-large};
+    z-index: 10;
+    max-height: 200px;
+    overflow-y: auto;
+    left: 0;
+    top: 110%;
+    padding: 4px;
+    backdrop-filter: blur(8px);
+
+    .dropdown-search {
+      margin-bottom: 4px;
+    }
+
+    .option {
+      padding: 2px 4px;
+      cursor: pointer;
+      flex-direction: row !important;
+      border-radius: #{$border-radius-medium};
+
+      &:hover {
+        color: var(--highlight-text-color);
+        background: var(--highlight-accent-color);
+      }
+    }
+  }
+
+  .icon {
+    height: auto;
+  }
+}
+
+.input.default {
+  width: 100%;
+  position: relative;
+  @include flex-center;
+  gap: 6px;
+
+  .dropdown {
+    height: 100%;
+    background: var(--background-color-drop-down-gradient);
+    border-radius: #{$border-radius-extra-large};
+    padding: 1px 8px;
+    outline: 1px solid var(--border-color);
+
+    .active-option {
+      line-height: 22px;
+      color: var(--text-color);
+      font-size: var(--font-size-small);
+    }
+  }
+}
+
+.eye-dropper-input-container {
+  display: flex;
+  align-items: center;
+
+  .label {
+    width: 40%;
+  }
+
+  .input-container {
+    width: 60%;
+    position: relative;
+    @include flex-center;
+    gap: 4px;
+
+    .eye-picker-button {
+      height: 24px;
+      min-width: 36px;
+      @include flex-center;
+      border-radius: #{$border-radius-large};
+      background: var(--background-color-drop-down-gradient);
+      cursor: pointer;
+    }
+
+    .active {
+      background: var(--accent-color);
+    }
+  }
+}
+
+.multi-level-dropdown {
+  position: relative;
+  display: inline-block;
+
+  .dropdown-button {
+    width: 100%;
+    background: var(--background-color) !important;
+    border: 1px solid var(--border-color) !important;
+    padding: 5px 10px;
+    cursor: pointer;
+    border-radius: #{$border-radius-extra-large};
+    transition: background-color 0.3s ease;
+
+    .label {
+      white-space: nowrap;
+      overflow: hidden;
+      max-width: 80%;
+      text-overflow: ellipsis;
+    }
+
+    &:hover {
+      background: #333333;
+    }
+
+    &.open {
+      background: #333333;
+    }
+  }
+
+  .dropdown-menu {
+    position: absolute;
+    top: 110%;
+    right: -16px;
+    background: var(--background-color);
+    border: 1px solid var(--border-color);
+    border-radius: #{$border-radius-large};
+    backdrop-filter: blur(18px);
+    box-shadow: #{$box-shadow-medium};
+    z-index: 1000;
+    min-width: 200px;
+    overflow: auto;
+    max-height: 400px;
+
+    .dropdown-content {
+      display: flex;
+      flex-direction: column;
+      padding: 2px;
+
+      .nested-dropdown {
+        margin-left: 0;
+      }
+    }
+
+    .loading {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      height: 2px;
+      /* slim progress bar */
+      width: 100%;
+      overflow: hidden;
+      background: rgba(0, 0, 0, 0.05);
+      /* optional track background */
+    }
+
+    .loading::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: -50%;
+      height: 100%;
+      width: 50%;
+      background: linear-gradient(to right, var(--accent-color), transparent);
+      animation: loadingAnimation 1.2s linear infinite;
+      border-radius: #{$border-radius-small};
+    }
+
+    @keyframes loadingAnimation {
+      0% {
+        left: -50%;
+      }
+
+      100% {
+        left: 100%;
+      }
+    }
+
+    .dropdown-item {
+      display: block;
+      padding: 4px 10px;
+      text-decoration: none;
+      color: var(--text-color);
+      font-size: var(--font-size-regular);
+      cursor: pointer;
+      transition: background-color 0.3s ease;
+      border-radius: #{$border-radius-large};
+
+      &:hover {
+        color: var(--accent-color);
+        background: var(--highlight-accent-color);
+      }
+    }
+
+    .nested-dropdown {
+      margin-left: 20px;
+
+      .dropdown-trigger {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 4px 10px;
+        cursor: pointer;
+        font-size: var(--font-size-regular);
+        color: var(--text-color);
+        transition: background-color 0.3s ease;
+        border-radius: #{$border-radius-large};
+
+        .arrow-container {
+          @include flex-center;
+        }
+
+        &:hover {
+          color: var(--accent-color);
+          background: var(--highlight-accent-color);
+        }
+
+        &.open {
+          color: var(--text-button-color);
+          background: var(--background-color-accent);
+        }
+
+        .icon {
+          font-size: var(--font-size-small);
+          margin-left: 5px;
+        }
+      }
+
+      .submenu {
+        margin-top: 5px;
+        padding-left: 20px;
+        border-left: 2px solid var(--border-color);
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+      }
+    }
+  }
+}
+
+.input-toggle-container {
+  padding: 8px 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .label {
+    white-space: nowrap;
+  }
+
+  .check-box {
+    height: 24px;
+    width: 38px;
+    background: var(--background-color);
+    border-radius: #{$border-radius-large};
+    position: relative;
+    cursor: pointer;
+
+
+    .check-box-style {
+      position: absolute;
+      height: 20px;
+      width: 20px;
+      top: 2px;
+      left: 2px;
+      background: var(--text-button-color);
+      border-radius: #{$border-radius-circle};
+      transition: left 0.3s ease;
+    }
+
+    input {
+      display: none;
+    }
+  }
+}
+
+.input-range-container {
+  @include flex-center;
+  padding: 6px 12px;
+
+  .label {
+    width: 45%;
+    white-space: nowrap;
+  }
+
+  .input-container {
+    @include flex-center;
+    width: 100%;
+
+    input[type="range"] {
+      -webkit-appearance: none;
+      width: 100%;
+      height: 6px;
+      border-radius: #{$border-radius-medium};
+      outline: none;
+      margin: 12px 8px;
+      cursor: pointer;
+
+      &::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        width: 16px;
+        height: 16px;
+        background: var(--background-color-accent);
+        border-radius: #{$border-radius-circle};
+        box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
+        cursor: pointer;
+        transition: transform 0.2s ease;
+        outline: 3px solid var(--accent-color);
+        outline-offset: -3px;
+        transform: translateY(-5px);
+
+        &:hover {
+          transform: scale(1.1) translateY(-5px);
+        }
+      }
+
+      &::-moz-range-thumb {
+        width: 16px;
+        height: 16px;
+        background: var(--accent-color);
+        border: none;
+        border-radius: #{$border-radius-circle};
+        box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
+        cursor: pointer;
+        transition: transform 0.2s ease;
+
+        &:hover {
+          transform: scale(1.2);
+        }
+      }
+
+      &::-ms-thumb {
+        width: 16px;
+        height: 16px;
+        background: var(--accent-color);
+        border: none;
+        border-radius: #{$border-radius-circle};
+        box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
+        cursor: pointer;
+        transition: transform 0.2s ease;
+
+        &:hover {
+          transform: scale(1.2);
+        }
+      }
+
+      &::-webkit-slider-runnable-track {
+        height: 6px;
+        background: var(--background-color-secondary);
+        border-radius: #{$border-radius-medium};
+      }
+
+      &::-moz-range-track {
+        height: 6px;
+        background: var(--background-color-secondary);
+        border-radius: #{$border-radius-medium};
+      }
+
+      &::-ms-track {
+        height: 6px;
+        background: var(--background-color-secondary);
+        border-radius: #{$border-radius-medium};
+        border: none;
+      }
+
+      &::-ms-fill-lower,
+      &::-ms-fill-upper {
+        background: var(--background-color-secondary);
+        border-radius: #{$border-radius-medium};
+      }
+
+      &:disabled {
+        background: var(--text-disabled);
+        cursor: not-allowed;
+
+        &::-webkit-slider-thumb {
+          background: var(--background-color-accent);
+          box-shadow: none;
+          outline: 4px solid var(--text-disabled);
+          outline: -4px;
+        }
+
+        &::-moz-range-thumb {
+          background: var(--background-color-accent);
+          box-shadow: none;
+        }
+
+        &::-ms-thumb {
+          background: var(--background-color-accent);
+          box-shadow: none;
+        }
+
+        &::-webkit-slider-runnable-track,
+        &::-moz-range-track,
+        &::-ms-track,
+        &::-ms-fill-lower,
+        &::-ms-fill-upper {
+          background: var(--text-disabled);
+        }
+      }
+    }
+
+    .input-value {
+      width: 42px;
+      text-align: center;
+
+      &::-webkit-inner-spin-button,
+      &::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+    }
+  }
+}
+
+.value-field-container {
+  margin-bottom: 6px;
+  padding: 6px 12px;
+  @include flex-space-between;
+
+  .label {
+    width: 40%;
+  }
+
+  .regularDropdown-container {
+    width: 60%;
+  }
+
+  .default {
+    width: 60%;
+  }
+}
+
+.multi-email-invite-input-container {
+  @include flex-space-between;
+  gap: 20px;
+
+  .multi-email-invite-input {
+    width: 100%;
+    display: flex;
+    border: 1px solid var(--border-color);
+    padding: 2px 8px;
+    border-radius: #{$border-radius-large};
+    flex-wrap: wrap;
+    overflow: auto;
+
+    input {
+      border: none;
+      outline: none;
+      background: transparent;
+      width: 100%;
+
+      &::placeholder {
+        color: var(--text-disabled);
+      }
+    }
+
+    .entered-emails {
+      @include flex-center;
+      gap: 2px;
+      background: var(--background-color-gray);
+      padding: 0 4px;
+      border-radius: #{$border-radius-large};
+
+      span {
+        height: 14px;
+        width: 14px;
+        line-height: 12px;
+        text-align: center;
+        border-radius: #{$border-radius-small};
+      }
+    }
+  }
+
+  .invite-button {
+    padding: 4px 12px;
+    border-radius: #{$border-radius-large};
+    background: var(--background-color-accent);
+    color: var(--text-button-color);
+  }
+
+  .multi-email-invite-input.active {
+    border: 1px solid var(--accent-color);
+  }
+}
+
+.preview-selection-with-upload-wrapper {
+  .input-header-container {
+    padding: 6px 12px;
+    @include flex-space-between;
+
+    .arrow-container {
+      transition: all 0.2s;
+      @include flex-center;
+    }
+  }
+
+  .upload-custom-asset-button {
+    padding: 6px 12px;
+    @include flex-space-between;
+
+    .title {
+      white-space: nowrap;
+      width: 40%;
+    }
+
+    input {
+      display: none;
+    }
+
+    .upload-button {
+      width: 60%;
+      background: var(--highlight-accent-color);
+      color: var(--accent-color);
+      padding: 3px 6px;
+      border-radius: #{$border-radius-small};
+      text-align: center;
+    }
+  }
+
+  .canvas-wrapper {
+    height: 150px;
+    width: 100%;
+    padding: 8px;
+    padding-right: 4px;
+    overflow: hidden;
+    position: relative;
+
+    .canvas-container {
+      width: 100%;
+      height: 100%;
+      border-radius: #{$border-radius-small};
+      background: var(--background-color-gray);
+    }
+  }
+}

app/src/styles/components/lists.scss

@@ -0,0 +1,96 @@
+@use "../abstracts/variables" as *;
+@use "../abstracts/mixins" as *;
+
+.dropdown-list-container {
+  .lists-container {
+    margin-bottom: 6px;
+  }
+
+  &:last-child {
+    border: none;
+  }
+
+  .head {
+    @include flex-space-between;
+    padding: 6px 12px;
+
+    .options {
+      @include flex-center;
+      gap: 6px;
+
+      .option {
+        @include flex-center;
+        cursor: pointer;
+        transition: all 0.2s;
+      }
+    }
+  }
+}
+
+.list-wrapper {
+  .no-item {
+    padding: 12px;
+  }
+
+  li.list-container {
+    padding: 2px;
+    overflow: hidden;
+
+    .list-item {
+      @include flex-space-between;
+      width: 100%;
+      text-align: center;
+      padding: 4px 8px;
+      border-radius: #{$border-radius-large};
+      .value {
+        width: 100%;
+        max-width: 180px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        text-align: start;
+      }
+      .zone-header {
+        @include flex-center;
+      }
+      .options-container {
+        @include flex-center;
+        gap: 6px;
+
+        .option {
+          @include flex-center;
+          cursor: pointer;
+        }
+      }
+    }
+
+    .active {
+      background: var(--highlight-accent-color);
+
+      .input-value {
+        color: var(--highlight-text-color);
+      }
+    }
+
+    &:hover {
+      cursor: pointer;
+      .list-item {
+        background: var(--highlight-accent-color);
+      }
+    }
+  }
+
+  .asset-list {
+    border-left: 2px solid var(--border-color);
+
+    margin-left: 20px;
+  }
+}
+
+.list-container.active {
+  .list-item {
+    background: var(--highlight-accent-color);
+    .input-value {
+      color: var(--highlight-text-color);
+    }
+  }
+}

app/src/styles/components/logs/logs.scss

@@ -0,0 +1,131 @@
+@use "../../abstracts/variables.scss" as *;
+@use "../../abstracts/mixins.scss" as *;
+
+.log-list-container {
+  width: 100vw;
+  height: 100vh;
+  background: var(--background-color-secondary);
+  @include flex-center;
+
+  .log-list-wrapper {
+    height: 60%;
+    min-width: 55%;
+    z-index: 5;
+    background: var(--background-color);
+    padding: 14px 12px;
+    border-radius: #{$border-radius-xlarge};
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    backdrop-filter: blur(50px);
+    outline: 1px solid var(--border-color);
+
+    .log-header {
+      display: flex;
+      justify-content: space-between;
+
+      .log-header-wrapper {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        .icon {
+          @include flex-center;
+          scale: 0.8;
+        }
+      }
+
+      .close {
+        @include flex-center;
+        height: 28px;
+        width: 28px;
+        cursor: pointer;
+        border-radius: #{$border-radius-medium};
+        svg {
+          scale: 1.6;
+        }
+        &:hover {
+          background: var(--background-color);
+        }
+      }
+    }
+    .log-nav-container {
+      @include flex-space-between;
+      align-items: flex-end;
+      .log-nav-wrapper {
+        display: flex;
+        gap: 6px;
+
+        .log-nav {
+          padding: 8px 16px;
+          border-radius: #{$border-radius-extra-large};
+        }
+
+        .log-nav.active {
+          background-color: var(--background-color-accent);
+          color: var(--text-button-color);
+        }
+      }
+      .clear-button{
+        margin: 0 6px;
+        padding: 4px 12px;
+        color: var(--text-disabled);
+        border-radius: #{$border-radius-large};
+        &:hover{
+          font-weight: 300;
+          color: var(--text-color);
+          background: var(--background-color-solid-gradient);
+        }
+      }
+    }
+
+    .log-entry-wrapper {
+      height: calc(100% - 80px);
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      background: var(--background-color);
+      padding: 10px;
+      border-radius: #{$border-radius-xlarge};
+      outline: 1px solid var(--border-color);
+      outline-offset: -1px;
+      overflow: auto;
+
+      .log-entry {
+        padding: 4px;
+        border-radius: #{$border-radius-small};
+        font-size: var(--font-size-small);
+        display: flex;
+
+        .log-icon {
+          height: 24px;
+          width: 24px;
+          @include flex-center;
+        }
+        .log-entry-message-container {
+          @include flex-space-between;
+          gap: 12px;
+          width: 100%;
+          .message-time {
+            font-size: var(--font-size-tiny);
+            font-weight: 300;
+            opacity: 0.8;
+            text-wrap: nowrap;
+            // height: 100%;
+          }
+          .log-entry-message {
+            width: 100%;
+          }
+        }
+
+        &:nth-child(odd) {
+          background: var(--background-color);
+        }
+      }
+    }
+    .no-log{
+      padding: 20px;
+      text-align: center;
+      color: var(--text-color);
+    }
+  }
+}

app/src/styles/components/marketPlace/marketPlace.scss

@@ -0,0 +1,458 @@
+@use "../../abstracts/variables" as *;
+@use "../../abstracts/mixins.scss" as *;
+
+.marketplace-wrapper {
+  height: 100vh;
+  width: 100vw;
+  z-index: #{$z-index-marketplace};
+  background: var(--background-color-secondary);
+  position: absolute;
+  left: 0;
+  top: 0;
+  padding: 10px;
+  padding-top: 100px;
+
+  .marketplace-container {
+    position: relative;
+    padding: 20px 2px;
+    height: 100%;
+    background: var(--background-color);
+    box-shadow: #{$box-shadow-medium};
+    border-radius: #{$border-radius-xxx};
+    outline: 1px solid var(--border-color);
+    backdrop-filter: blur(16px);
+  }
+
+  .marketPlace {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+
+    .skeleton-wrapper {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 18px;
+      margin: 0;
+      width: 100%;
+
+      .skeleton-content {
+        width: calc(25% - 14px) !important;
+        height: 100%;
+        border-radius: #{$border-radius-xlarge};
+        padding: 12px;
+        box-shadow: 0px 2px 10.5px 0px #0000000d;
+        background: var(--background-color-solid-gradient);
+        border: 1px solid var(--border-color);
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 6px;
+
+        .asset-image {
+          width: 100%;
+          height: 100%;
+        }
+
+        .asset-details {
+          width: 100%;
+          height: 33px;
+        }
+
+        .organization {
+          width: 40%;
+          height: 15px;
+        }
+
+        .asset-review {
+          width: 100%;
+          height: 20px;
+        }
+
+        .button {
+          width: 100%;
+          height: 35px;
+          border-radius: 20px;
+        }
+      }
+    }
+
+    .filter-search-container {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-top: 2px;
+      padding: 0 24px;
+
+      .search-wrapper {
+        min-width: 60%;
+        max-width: 684px;
+        padding: 0;
+        border-radius: $border-radius-large;
+
+        .search-container {
+          border-radius: $border-radius-large;
+          outline: 1px solid var(--border-color);
+          border: none;
+
+          input {
+            border: none !important;
+            outline: none;
+          }
+        }
+      }
+
+      .regularDropdown-container {
+        max-width: 159px;
+        height: 100%;
+        border-radius: #{$border-radius-extra-large};
+        border: 1px solid var(--border-color);
+        padding: 0 10px;
+
+        .dropdown-header {
+          align-items: center;
+        }
+      }
+
+      .button {
+        padding: 5px 20px;
+        border-radius: #{$border-radius-large};
+        background: var(--background-color-button);
+        color: var(--text-button-color);
+      }
+
+      .rating-container {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+
+        .stars {
+          display: flex;
+          align-items: center;
+
+          .star-wrapper.filled {
+            svg {
+              fill: #f3a50c;
+            }
+          }
+        }
+      }
+    }
+
+    .cards-container-wrapper {
+      position: relative;
+      height: calc(100% - 60px);
+      padding: 0px 10px;
+    }
+
+    .cards-container-container {
+      display: flex;
+      padding: 0 10px;
+      flex-direction: column;
+      gap: 6px;
+      height: 100%;
+      overflow: auto;
+
+      .header {
+        color: var(--text-color);
+        font-weight: $medium-weight;
+        font-size: $xlarge;
+        margin-bottom: 12px;
+      }
+
+      .cards-wrapper-container {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 18px;
+
+        .card-container {
+          width: calc(25% - 14px);
+          border-radius: #{$border-radius-xlarge};
+          padding: 12px;
+          box-shadow: 0px 2px 10.5px 0px #0000000d;
+          background: var(--background-color-solid-gradient);
+          border: 1px solid var(--border-color);
+          position: relative;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          gap: 6px;
+
+          .icon {
+            position: absolute;
+            top: 12px;
+            left: 12px;
+            width: 30px;
+            height: 30px;
+            border-radius: #{$border-radius-large};
+            padding: 5px;
+            background: var(--accent-color);
+          }
+
+          .image-container {
+            width: 100%;
+            display: flex;
+            height: 180px;
+            justify-content: center;
+            border-radius: #{$border-radius-medium};
+            overflow: hidden;
+
+            img {
+              height: inherit;
+              width: 100%;
+              object-fit: cover;
+            }
+          }
+
+          .assets-container {
+            height: auto;
+            display: flex;
+            justify-content: space-between;
+            padding: 0;
+            height: auto;
+            .name-container {
+              display: flex;
+              flex-direction: column;
+              gap: 3px;
+
+              .assets-name {
+                text-transform: capitalize;
+              }
+
+              .asstes-container {
+                font-weight: #{$bold-weight};
+                font-size: $regular;
+              }
+
+              .assets-date {
+                color: var(--accent-color);
+                font-size: $small;
+              }
+            }
+
+            .details {
+              display: flex;
+              align-items: center;
+              gap: 10px;
+
+              .content {
+                display: flex;
+                align-items: center;
+                gap: 6px;
+              }
+            }
+          }
+
+          .vendor-icon {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            font-weight: #{$bold-weight};
+            font-size: $regular;
+          }
+
+          .stars-container {
+            display: flex;
+            justify-content: space-between;
+          }
+
+          .buy-now-button {
+            width: 100%;
+            background: var(--background-color-button);
+            border-radius: $border-radius-extra-large;
+            padding: 8px 0;
+            @include flex-center;
+            color: var(--text-button-color);
+            transition: all 0.1s linear;
+
+            &:hover {
+              cursor: pointer;
+              transform: translateY(-2px);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@keyframes growWidth {
+  from {
+    transform: scale(0.65);
+  }
+
+  to {
+    transform: scale(1);
+  }
+}
+
+.assetPreview-wrapper {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 3;
+  padding: 0 10px;
+
+  .assetPreview {
+    width: 100%;
+    height: 100%;
+    background: var(--background-color);
+    backdrop-filter: blur(18px);
+    display: flex;
+    gap: 12px;
+    overflow: hidden;
+    border-radius: #{$border-radius-extra-large};
+    outline: 1px solid var(--border-color);
+  }
+
+  // Image Preview Section
+  .image-preview {
+    width: 50%;
+    height: 100%;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  // Asset Details Section
+  .asset-details-preview {
+    width: 50%;
+    padding: 50px 20px;
+    overflow-y: auto;
+  }
+
+  // Organization Section (Top part with image and details)
+  .organization {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+    gap: 10px;
+
+    .image {
+      @include flex-center;
+      height: 30px;
+      width: 30px;
+      min-height: 26px;
+      min-width: 26px;
+      border-radius: #{$border-radius-circle};
+      font-weight: var(--font-weight-bold);
+      color: var(--text-button-color);
+      background: var(--background-color-button);
+    }
+
+    .organization-details {
+      display: flex;
+      flex-direction: column;
+
+      .organization-name {
+        margin-bottom: 5px;
+        font-weight: #{$bold-weight};
+        font-size: $regular;
+      }
+
+      .follow {
+        color: var(--accent-color);
+        cursor: pointer;
+      }
+    }
+  }
+
+  // Asset Details
+  .asset-details {
+    margin-top: 20px;
+
+    .asset-name {
+      margin-bottom: 10px;
+      font-weight: #{$bold-weight};
+      font-size: var(--font-size-large);
+    }
+
+    .asset-description {
+      margin-bottom: 20px;
+      color: var(--input-text-color);
+    }
+
+    .asset-review {
+      width: fit-content;
+      padding: 5px 14px;
+      display: flex;
+      align-items: center;
+      margin-bottom: 20px;
+      outline: 1px solid var(--border-color);
+      border-radius: #{$border-radius-large};
+
+      .asset-rating {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        margin-right: 10px;
+        position: relative;
+        font-weight: #{$bold-weight};
+        font-size: $regular;
+
+        &::after {
+          margin-left: 5px;
+          content: "";
+          display: block;
+          width: 2px;
+          height: 12px;
+          background: #ccc;
+        }
+      }
+
+      .asset-view {
+        font-weight: #{$bold-weight};
+        font-size: $regular;
+      }
+    }
+
+    .asset-price {
+      font-size: $xxlarge;
+      font-weight: bold;
+      margin-bottom: 20px;
+    }
+  }
+
+  // Button Container and Button Styles
+  .button-container {
+    display: flex;
+    gap: 10px;
+  }
+
+  .button {
+    color: var(--text-button-color);
+    padding: 8px 26px;
+    border-radius: #{$border-radius-extra-large};
+    cursor: pointer;
+    text-align: center;
+
+    &:first-child {
+      outline: 1px solid var(--background-color-button);
+      color: var(--highlight-text-color);
+    }
+
+    &:last-child {
+      background: var(--background-color-button);
+      color: var(--text-button-color);
+    }
+  }
+
+  .closeButton {
+    color: var(--highlight-text-color);
+    position: absolute;
+    top: 18px;
+    left: 18px;
+    @include flex-center;
+    cursor: pointer;
+    font-size: var(--font-size-large);
+  }
+}

app/src/styles/components/menu/menu.scss

@@ -0,0 +1,192 @@
+@use "../../abstracts/variables" as *;
+@use "../../abstracts/mixins" as *;
+
+.project-dropdowm-container {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  position: relative;
+  border-radius: #{$border-radius-extra-large};
+  background: var(--background-color-drop-down-gradient);
+  padding: 3px 8px;
+  width: fit-content;
+  max-width: 100%;
+  .project-name {
+    @include flex-center;
+    height: 100%;
+    line-height: 26px;
+    .icon{
+      @include flex-center;
+      height: 20px;
+      width: 20px;
+    }
+    .input-value{
+      max-width: 120px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: var(--text-color);
+    }
+  }
+  .more-options-button {
+    @include flex-center;
+    border-radius: #{$border-radius-medium};
+    height: 22px;
+    position: relative;
+    &:hover {
+      background: var(--highlight-accent-color);
+      path {
+        fill: var(--accent-color);
+      }
+    }
+  }
+  .more-options-button.active {
+    background: var(--highlight-accent-color);
+    path {
+      fill: var(--accent-color);
+    }
+  }
+}
+
+.menu-bar {
+  position: absolute;
+  top: 32px;
+  left: 0;
+  z-index: 5;
+  background: var(--background-color-solid);
+  color: var(--text-color);
+  box-shadow: var(--box-shadow-light);
+  border-radius: #{$border-radius-medium};
+  border: 1px solid var(--border-color);
+  backdrop-filter: blur(10px);
+  .menu-buttons {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 4px;
+    min-width: 178px;
+
+    .menu-button-container {
+      position: relative;
+      height: 100%;
+      padding: 4px 8px 4px 12px;
+      border-radius: #{$border-radius-medium};
+      .menu-button {
+        width: 100%;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        position: relative;
+
+        .dropdown-icon {
+          margin-left: 5px;
+          font-size: var(--font-size-small);
+          rotate: -90deg;
+        }
+      }
+
+      .dropdown-menu {
+        position: absolute;
+        top: 0;
+        left: 100%;
+        background: var(--background-color-solid);
+        min-width: 220px;
+        border-radius: #{$border-radius-medium};
+        box-shadow: var(--box-shadow-light);
+        outline: 1px solid var(--border-color);
+        backdrop-filter: blur(20px);
+        outline-offset: -1px;
+        z-index: 100;
+        padding: 4px;
+        .menu-item-container {
+          position: relative;
+          width: 100%;
+          .menu-item {
+            padding: 4px 8px 4px 12px;
+            border-radius: #{$border-radius-medium};
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            cursor: pointer;
+            white-space: nowrap;
+            color: var(--text-color);
+            .dropdown-icon {
+              rotate: -90deg;
+            }
+            &:hover {
+              background: var(--highlight-accent-color);
+              span,
+              .menu-item-right span {
+                color: var(--accent-color);
+              }
+            }
+
+            .menu-item-right {
+              display: flex;
+              align-items: center;
+              gap: 15px;
+
+              .shortcut {
+                color: var(--text-color);
+                font-size: var(--font-size-small);
+              }
+
+              .icon {
+                font-size: var(--font-size-small);
+                color: var(--text-color);
+              }
+            }
+          }
+
+          .submenu {
+            position: absolute;
+            left: 100%;
+            top: 0;
+            background: var(--background-color-solid);
+            min-width: 200px;
+            border-radius: #{$border-radius-medium};
+            box-shadow: var(--box-shadow-light);
+            outline: 1px solid var(--border-color);
+            outline-offset: -1px;
+            z-index: 101;
+            padding: 4px;
+            .submenu-item {
+              padding: 4px 8px 4px 12px;
+              border-radius: #{$border-radius-medium};
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              cursor: pointer;
+              white-space: nowrap;
+              color: var(--text-color);
+              &:hover {
+                background: var(--highlight-accent-color);
+                span {
+                  color: var(--accent-color);
+                }
+              }
+              .shortcut {
+                color: var(--text-color);
+              }
+            }
+          }
+        }
+      }
+
+      &:hover {
+        background: var(--highlight-accent-color);
+        .menu-button {
+          color: var(--accent-color);
+        }
+      }
+    }
+  }
+  .split {
+    width: 100%;
+    height: 1px;
+    background: var(--highlight-accent-color);
+    margin: 2px 0;
+  }
+}

app/src/styles/components/moduleToggle.scss

@@ -0,0 +1,64 @@
+@use "../abstracts/variables" as *;
+@use "../abstracts/mixins" as *;
+
+.module-toggle-container {
+  display: flex;
+  justify-content: space-between;
+  width: fit-content;
+  gap: 8px;
+  position: fixed;
+  left: 50%;
+  top: 22px;
+  transform: translateX(-50%);
+  z-index: #{$z-index-tools};
+  .module-list {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 12px;
+    border-radius: #{$border-radius-extra-large};
+    box-shadow: var(--box-shadow-medium);
+    background: var(--background-color);
+    backdrop-filter: blur(8px);
+    cursor: pointer;
+    overflow: hidden;
+    position: relative;
+    .module {
+      font-size: var(--font-size-small);
+      z-index: 1;
+    }
+    .icon{
+        @include flex-center;
+        z-index: 1;
+    }
+    &::after{
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 0%;
+        height: 100%;
+        background: var(--background-color-solid-gradient);
+        transition: width 0.2s;
+        border-radius: #{$border-radius-extra-large};
+    }
+    &:hover{
+        &::after {
+            width: 100%;
+        }
+    }
+  }
+  .active {
+    cursor: default;
+    background: var(--background-color-button);
+    &::after{
+        display: none;
+    }
+    &:hover {
+      background: var(--background-color-button);
+    }
+    .module {
+      color: var(--icon-default-color-active);
+    }
+  }
+}

app/src/styles/components/simulation/analysis.scss

@@ -0,0 +1,585 @@
+@use "../../abstracts/variables" as *;
+@use "../../abstracts/mixins" as *;
+
+.analysis {
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: start;
+  width: 100%;
+  height: 100vh;
+  pointer-events: none;
+  z-index: 2;
+
+  .analysis-card {
+    min-width: 333px;
+    border-radius: #{$border-radius-extra-large};
+    margin: 8px;
+    pointer-events: all;
+
+    .analysis-card-wrapper {
+      width: 100%;
+      background: var(--background-color);
+      border-radius: #{$border-radius-large};
+      padding: 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 14px;
+      backdrop-filter: blur(10px);
+      outline: 1px solid var(--border-color);
+      outline-offset: -1px;
+
+      .card-header {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .main-header {
+          line-height: 20px;
+          font-size: var(--font-size-regular);
+        }
+
+        .sub-header {
+          font-weight: 300;
+          font-size: var(--font-size-tiny);
+          color: var(--text-color);
+          opacity: 0.8;
+        }
+      }
+
+      .process-container {
+        display: flex;
+        flex-direction: column;
+
+        .throughput-value {
+          font-size: 1rem;
+
+          .value {
+            font-weight: bold;
+            font-size: 1.5rem;
+          }
+        }
+
+        .progress-bar-wrapper {
+          display: flex;
+          gap: 8px;
+          margin-top: 6px;
+        }
+
+        .progress-bar {
+          position: relative;
+          width: 100%;
+          height: 4px;
+          border-radius: #{$border-radius-large};
+          overflow: hidden;
+          background: #fbebd7;
+
+          .bar-fill {
+            position: absolute;
+            height: 100%;
+            top: 0;
+            left: 0;
+            background: #fc9d2f;
+            border-radius: #{$border-radius-large};
+          }
+
+          .bar-fill.full {
+            width: 100%;
+          }
+
+          .bar-fill.partial {
+            width: 0; // inline style will override this
+          }
+        }
+      }
+
+      .metrics-section {
+        padding-top: 16px;
+        border-top: 1px solid var(--border-color);
+
+        .metric {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          font-size: 14px;
+          margin-bottom: 8px;
+
+          .label {
+            color: var(--text-color);
+          }
+
+          .value {
+            font-weight: bold;
+          }
+        }
+      }
+    }
+
+    .production-wrapper {
+      .process-container {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 16px;
+        width: 100%;
+
+        .throughput-value {
+          font-size: var(--font-size-small);
+          flex: 0.8;
+          display: flex;
+          flex-direction: column;
+
+          .value {
+            color: var(--accent-color);
+          }
+
+          /* Let the text take available space */
+        }
+
+        .lineChart {
+          flex: 1.2;
+          max-width: 200px;
+          height: 100px;
+          position: relative;
+          background-image: radial-gradient(#8d8d8da4 1px, transparent 1px);
+          background-size: 10px 10px;
+          border-radius: #{$border-radius-medium};
+
+          .assetUsage {
+            text-align: right;
+            position: absolute;
+            right: 0;
+            top: 0;
+
+            .key,
+            .value {
+              font-size: var(--font-size-regular);
+            }
+          }
+
+          canvas {
+            background: transparent;
+          }
+        }
+      }
+
+      .footer {
+        display: flex;
+        gap: 16px; // Space between cards
+        margin-top: 24px;
+
+        .footer-card {
+          width: 100%;
+          background: var(--background-color);
+          border-radius: #{$border-radius-large};
+          padding: 12px;
+          display: flex;
+          flex-direction: column;
+          gap: 12px;
+          outline: 1px solid var(--border-color);
+
+          &:first-child {
+            width: 85%;
+          }
+
+          .header {
+            font-size: var(--font-size-regular);
+          }
+
+          .value-container {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: end;
+            gap: 6px;
+          }
+        }
+
+        .shiftUtilization {
+          .value-container {
+            flex-direction: column;
+            align-items: flex-start;
+            justify-content: flex-start;
+
+            .value {
+              font-size: var(--font-size-xlarge);
+            }
+
+            .progress-wrapper {
+              width: 100%;
+              display: flex;
+              gap: 6px;
+
+              .progress {
+                border-radius: #{$border-radius-medium};
+                height: 5px;
+
+                &:nth-child(1) {
+                  background: #f3c64d;
+                }
+
+                &:nth-child(2) {
+                  background: #67b3f4;
+                }
+
+                &:nth-child(3) {
+                  background: #7981f5;
+                }
+              }
+            }
+
+            .progress-indicator {
+              display: flex;
+              justify-content: space-between;
+              width: 100%;
+              gap: 6px;
+              padding-top: 3px;
+
+              .shift-wrapper {
+                display: flex;
+                align-items: center;
+                gap: 5px;
+
+                /* Align items vertically */
+                &:nth-child(1) {
+                  .indicator {
+                    background: #f3c64d;
+                  }
+                }
+
+                &:nth-child(2) {
+                  .indicator {
+                    background: #67b3f4;
+                  }
+                }
+
+                &:nth-child(3) {
+                  .indicator {
+                    background: #7981f5;
+                  }
+                }
+
+                label {
+                  font-weight: 200;
+                  font-size: var(--font-size-tiny);
+                  position: relative;
+                }
+
+                .indicator {
+                  display: inline-block;
+                  width: 5px;
+                  height: 5px;
+                  border-radius: #{$border-radius-circle};
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .roiSummary-wrapper {
+    max-width: 470px;
+    background-color: var(--background-color);
+
+    .product-info {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .playBack {
+      display: flex;
+      align-items: center;
+      gap: 2px;
+      border-radius: 66px;
+      background: var(--background-color);
+      padding: 6px 12px;
+      border: 1px solid var(--border-color);
+
+      svg {
+        scale: 0.8;
+      }
+
+      .info {
+        span {
+          font-size: var(--font-size-xlarge);
+
+          &:first-child {
+            color: #31c756;
+          }
+
+          &:last-child {
+            color: var(--text-color);
+          }
+        }
+      }
+    }
+
+    .roi-details {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+
+      .progress-wrapper {
+        width: 250px;
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+
+        .content {
+          display: flex;
+          flex-direction: column;
+          gap: 3px;
+          align-items: center;
+          font-weight: 300;
+
+          .key {
+            font-weight: 500;
+            font-size: var(--font-size-large);
+            color: #28b9f3;
+          }
+        }
+      }
+
+      .roi-progress {
+        width: 100%;
+      }
+
+      .metrics {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+
+        .metric-item {
+          width: 100%;
+          border-radius: #{$border-radius-xxx};
+          border: 1px solid #00ff56;
+          background: #17eb5e42;
+          display: flex;
+          flex-direction: column;
+          padding: 4px 8px;
+
+          &:last-child {
+            align-items: center;
+          }
+
+          .metric-label {
+            opacity: 0.8;
+            font-size: 10px;
+            font-weight: 300;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            span{
+              margin-right: 4px;
+            }
+          }
+
+          .metric-value {
+            text-align: center;
+            line-height: 20px;
+          }
+        }
+
+        .metric-item.loss {
+          background: #ff301d48;
+          border: 1px solid #FF301D;
+          .metric-label {
+            span {
+              color: #ff7a6e;
+              display: inline-block;
+              transform: rotate(180deg);
+            }
+          }
+        }
+
+        .metric-wrapper {
+          display: flex;
+          gap: 6px;
+
+          .metric-item {
+            padding: 8px;
+            border-radius: #{$border-radius-large};
+            background: var(--background-color);
+            border: 1px solid var(--border-color);
+          }
+        }
+      }
+    }
+
+    .cost-breakdown {
+      background: var(--background-color);
+      border: 1px solid var(--border-color);
+      border-radius: #{$border-radius-extra-large};
+      max-height: 20vh;
+      padding: 16px;
+      overflow: auto;
+
+      .breakdown-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 8px;
+
+        .section-wrapper {
+          display: flex;
+          gap: 6px;
+          align-items: center;
+        }
+
+        .section-number {
+          color: #00aaff;
+        }
+
+        .section-title {
+          font-size: var(--font-size-regular);
+          color: var(--text-color);
+        }
+
+        .expand-icon {
+          font-size: 16px;
+          color: var(--text-color);
+          cursor: pointer;
+          transform: rotate(90deg);
+          transition: transform 0.2s linear;
+        }
+
+        .expand-icon.open {
+          transform: rotate(0deg);
+        }
+      }
+
+      .breakdown-table {
+        width: 100%;
+        border-collapse: collapse;
+        border-radius: #{$border-radius-medium};
+        overflow: hidden;
+        outline: 1px solid var(--border-color);
+        outline-offset: -1px;
+        margin-top: 12px;
+
+        th,
+        td {
+          color: var(--text-color);
+          padding: 8px;
+          text-align: left;
+          border: 1px solid var(--border-color);
+        }
+
+        th {
+          background-color: var(--background-color);
+        }
+      }
+    }
+
+    .tips-section {
+      background: var(--background-color);
+      border-radius: #{$border-radius-extra-large};
+      outline: 1px solid var(--border-color);
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      padding: 12px;
+
+      .tip-header {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+
+        .lightbulb-icon {
+          @include flex-center;
+        }
+
+        .tip-title {
+          color: var(--text-color);
+          font-weight: 600;
+        }
+      }
+
+      .tip-description {
+        span {
+          font-size: var(--font-size-xlarge);
+          color: #34c759;
+
+          &:first-child {
+            color: #34c759;
+          }
+
+          &:nth-child(2) {
+            color: #488ef6;
+          }
+        }
+      }
+    }
+
+    .get-tips-button {
+      border: none;
+      border-radius: #{$border-radius-small};
+      cursor: pointer;
+      font-size: 14px;
+      margin-top: 8px;
+      display: inline-block;
+      display: flex;
+      justify-content: flex-end;
+      background: none;
+
+      .btn {
+        color: var(--text-button-color);
+        background: var(--background-color-button);
+        padding: 4px 12px;
+        border-radius: #{$border-radius-large};
+        display: inline-block;
+        text-align: center;
+      }
+    }
+  }
+
+  .svg-half-donut {
+    position: relative;
+
+    .label-wrapper {
+      width: 100%;
+      position: absolute;
+      bottom: 2px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
+      .label {
+        font-size: var(--font-size-xxlarge);
+      }
+    }
+  }
+}
+
+.breakdown-table-wrapper {
+  &.closed {
+    max-height: 0;
+    padding: 0;
+  }
+
+  &.open {
+    max-height: 500px;
+  }
+
+  .breakdown-table {
+    width: 100%;
+    border-collapse: collapse;
+
+    th,
+    td {
+      padding: 10px;
+      border: 1px solid #ddd;
+      text-align: left;
+    }
+  }
+}
+
+// Breakdown Table Open/Close Logic

app/src/styles/components/simulation/simulation.scss

@@ -0,0 +1,662 @@
+@use "../../abstracts/variables" as *;
+@use "../../abstracts/mixins" as *;
+
+.simulation-player-wrapper {
+  position: fixed;
+  bottom: 32px;
+  left: 50%;
+  z-index: 2;
+  transform: translate(-50%, 0);
+  width: 70vw;
+  transition: all 0.3s;
+  &.hide {
+    width: fit-content;
+    .simulation-player-container
+      .controls-container
+      .simulation-button-container {
+      width: 32px;
+      height: 24px;
+    }
+  }
+  .simulation-player-container {
+    background: var(--background-color);
+    padding: 7px;
+    border-radius: #{$border-radius-xlarge};
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    backdrop-filter: blur(10px);
+    outline: 1px solid var(--border-color);
+
+    .progresser-wrapper {
+      outline: 1px solid var(--border-color);
+      background: var(--background-color);
+      border-radius: #{$border-radius-large};
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      padding: 12px 5px;
+      padding-top: 38px;
+      transition: height 0.2s linear;
+    }
+
+    .controls-container {
+      @include flex-space-between;
+      gap: 12px;
+      justify-content: space-between;
+
+      .header {
+        @include flex-center;
+        gap: 6px;
+        padding: 0 8px;
+
+        svg {
+          scale: 1.3;
+        }
+      }
+
+      .production-details,
+      .controls-wrapper {
+        @include flex-center;
+        gap: 6px;
+      }
+
+      .production-details {
+        .production-wrapper {
+          display: flex;
+          align-items: center;
+          flex-direction: column;
+          gap: 6px;
+
+          .header {
+            display: flex;
+            flex-direction: row;
+            gap: 6px;
+          }
+
+          .progress-wrapper {
+            width: 164px;
+            height: 8px;
+            border-radius: #{$border-radius-small};
+            background: var(--background-color-solid);
+
+            .progress {
+              border-radius: #{$border-radius-small};
+              height: 100%;
+              background-color: var(--background-color-accent);
+            }
+          }
+        }
+      }
+
+      .expand-icon-container {
+        @include flex-center;
+        padding: 0 8px;
+        cursor: pointer;
+      }
+
+      .simulation-button-container {
+        @include flex-center;
+        gap: 2px;
+        padding: 4px 8px;
+        width: 64px;
+        background: var(--background-color);
+        border-radius: #{$border-radius-extra-large};
+        height: fit-content;
+        cursor: pointer;
+        transition: all 0.2s;
+        outline: 1px solid transparent;
+
+        &:hover {
+          outline: 1px solid var(--border-color);
+          background: var(--background-color);
+          color: var(--accent-color);
+
+          path {
+            stroke: var(--accent-color);
+          }
+        }
+      }
+    }
+
+    .speed-control-container {
+      @include flex-center;
+      gap: 32px;
+      padding: 5px 16px;
+      border-radius: #{$border-radius-medium};
+      box-sizing: #{$box-shadow-medium};
+      position: relative;
+
+      .min-value,
+      .max-value {
+        display: flex;
+        align-items: center;
+        font-weight: var(--font-weight-bold);
+      }
+
+      .slider-container {
+        width: 100%;
+        max-width: 80vw;
+        height: 28px;
+        border-radius: #{$border-radius-small};
+        position: relative;
+
+        .speed-label {
+          font-size: var(--font-size-tiny);
+          position: absolute;
+          bottom: -7px;
+          transform: translate(-50%, -0%);
+
+          &:first-child {
+            left: 0;
+          }
+
+          &:last-child {
+            right: -10px;
+          }
+        }
+
+        &::after {
+          content: "";
+          background: var(--background-color-solid);
+          opacity: 0.4;
+          position: absolute;
+          top: 50%;
+          transform: translate(0, -50%);
+          width: 100%;
+          height: 3px;
+        }
+
+        .custom-slider-wrapper {
+          height: 100%;
+          width: 100%;
+          padding: 0 26px;
+          background: transparent;
+          border-radius: #{$border-radius-large};
+        }
+
+        .custom-slider {
+          height: 100%;
+          width: 100%;
+          position: relative;
+
+          .slider-input {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+            z-index: 3;
+            cursor: pointer;
+          }
+
+          .slider-handle {
+            position: absolute;
+            top: 50%;
+            min-width: 44px;
+            padding: 0 8px;
+            line-height: 20px;
+            text-align: center;
+            background: var(--background-color-button);
+            color: var(--text-button-color);
+            border-radius: #{$border-radius-large};
+            transform: translate(-50%, -50%);
+            font-size: var(--font-size-small);
+            cursor: pointer;
+            z-index: 2;
+          }
+        }
+
+        .marker {
+          position: absolute;
+          background: var(--background-color-solid);
+          opacity: 0.6;
+          width: 2px;
+          height: 12px;
+          top: 8px;
+          z-index: 1;
+        }
+
+        .marker.marker-10 {
+          left: 10%;
+        }
+
+        .marker.marker-20 {
+          left: 20%;
+        }
+
+        .marker.marker-30 {
+          left: 30%;
+        }
+
+        .marker.marker-40 {
+          left: 40%;
+        }
+
+        .marker.marker-50 {
+          left: 50%;
+        }
+
+        .marker.marker-60 {
+          left: 60%;
+        }
+
+        .marker.marker-70 {
+          left: 70%;
+        }
+
+        .marker.marker-80 {
+          left: 80%;
+        }
+
+        .marker.marker-90 {
+          left: 90%;
+        }
+      }
+    }
+
+    .time-displayer {
+      @include flex-space-between;
+      gap: 24px;
+      height: auto;
+      opacity: 1;
+      transition: all 0.5s ease;
+
+      .start-time-wrappper,
+      .end-time-wrappper {
+        @include flex-center;
+        gap: 4px;
+
+        .icon {
+          @include flex-center;
+        }
+      }
+
+      .time-progresser {
+        flex: 1;
+
+        .timeline {
+          padding: 16px;
+          outline: 1px solid var(--border-color);
+          background: var(--background-color);
+          border-radius: #{$border-radius-xxx};
+          display: flex;
+          align-items: center;
+          width: 100%;
+          height: 33px;
+
+          .label-dot-wrapper {
+            @include flex-center;
+            position: relative;
+
+            .label {
+              position: absolute;
+              top: -36px;
+              transform: translate(0, -0);
+              font-size: 12px;
+              color: var(--text-color);
+              white-space: nowrap;
+            }
+
+            .dot {
+              width: 14px;
+              height: 14px;
+              border-radius: #{$border-radius-circle};
+              background-color: #d3d3e2;
+
+              &.filled {
+                background-color: var(--accent-color);
+                border: 4px solid #8f5cf2;
+              }
+            }
+          }
+
+          .line {
+            flex-grow: 1;
+            height: 4px;
+            background-color: #d3d3e2;
+            margin: 0 4px;
+
+            &.filled {
+              background-color: #8f5cf2;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .open {
+    .start-displayer,
+    .end-displayer {
+      display: none;
+    }
+
+    .timmer {
+      display: none;
+    }
+
+    .progresser-wrapper {
+      padding-top: 4px;
+    }
+
+    .time-displayer {
+      height: 0;
+      opacity: 0;
+      pointer-events: none;
+      display: none;
+    }
+
+    .processDisplayer {
+      padding: 0 8px;
+      background: transparent;
+
+      .process-player {
+        width: 0;
+        display: none !important;
+      }
+    }
+  }
+}
+
+.controls-player-container {
+  min-width: 26vw;
+  max-width: 80vw;
+  border-radius: 15px;
+  gap: 40px;
+  background: var(--background-color);
+  backdrop-filter: blur(20px);
+  cursor: pointer;
+  @include flex-center;
+  justify-content: space-between;
+  position: fixed;
+  bottom: 32px;
+  left: 50%;
+  transform: translate(-50%, 0);
+  color: var(--accent-color);
+  z-index: 2;
+  isolation: isolate;
+  font-weight: 700;
+  padding: 8px;
+  transition: all 0.2s;
+
+  &.hide {
+    min-width: auto;
+    width: 92px;
+  }
+
+  .controls-left,
+  .controls-right {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: var(--font-size-small);
+
+    .label {
+      text-transform: capitalize;
+      font-size: var(--font-size-small);
+    }
+
+    .walkMode-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+
+      .input-toggle-container {
+        padding: 0;
+        gap: 4px;
+
+        .label {
+          font-size: var(--font-size-small);
+        }
+      }
+    }
+
+    .btn-wrapper {
+      @include flex-center;
+      gap: 2px;
+      padding: 4px 8px;
+      width: 64px;
+      background: var(--background-color);
+      border-radius: 20px;
+      height: fit-content;
+      cursor: pointer;
+      transition: all 0.2s;
+      outline: 1px solid transparent;
+      &:hover {
+        outline: 1px solid var(--border-color);
+        color: var(--accent-color);
+      }
+      &.hide {
+        width: 32px;
+      }
+      .icon {
+        width: 16px;
+        height: 16px;
+        @include flex-center;
+      }
+    }
+  }
+}
+
+.processDisplayer {
+  border-radius: #{$border-radius-large};
+  outline: 1px solid var(--border-color);
+  background: var(--background-color);
+  padding: 20px 6px;
+  position: relative;
+
+  .timmer {
+    width: auto;
+    position: absolute;
+    bottom: 0;
+    font-size: var(--font-size-tiny);
+  }
+
+  .start-displayer {
+    bottom: 4px;
+    left: 16px;
+  }
+
+  .end-displayer {
+    bottom: 4px;
+    width: auto;
+    right: 16px;
+  }
+
+  .process-player {
+    position: absolute;
+    top: 50%;
+    transform: translate(0, -50%);
+    width: 3.946108102798462px;
+    height: 26px;
+    left: 86.81px;
+    border-radius: #{$border-radius-large};
+    border-width: 1px;
+    background: var(--background-color-accent, #6f42c1);
+  }
+
+  .process-wrapper {
+    .process-container {
+      position: relative;
+      display: flex;
+      width: 100%;
+
+      .process {
+        height: 5px;
+        border-radius: #{$border-radius-small};
+        color: white;
+        text-align: center;
+        line-height: 30px;
+        transition: width 0.3s ease;
+      }
+    }
+  }
+}
+
+.asset-details-card-wrapper {
+  pointer-events: none;
+  .asset-details-card-container {
+    position: relative;
+    padding: 8px;
+    background: var(--background-color);
+    backdrop-filter: blur(6px);
+    border-radius: #{$border-radius-large};
+    transform: translate(0, -100%);
+    z-index: 0;
+    box-shadow: inset 0px 10px 50px #80808075;
+    min-width: 124px;
+
+    &::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      background: linear-gradient(135deg, var(--accent-color), #ff00f000);
+      background-size: 400% 400%;
+      animation: borderAnimation 5s linear infinite;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box,
+        linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor;
+      mask-composite: exclude;
+      z-index: -1;
+      padding: 1px;
+    }
+
+    .asset-details-header {
+      @include flex-space-between;
+      gap: 12px;
+      .content {
+        .name {
+          text-wrap: nowrap;
+          max-width: 140px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          margin-bottom: 4px;
+          text-transform: capitalize;
+        }
+        .status-container {
+          .status {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            .icon {
+              @include flex-center;
+            }
+          }
+        }
+        .storage-container {
+          font-size: var(--font-size-tiny);
+          color: var(--highlight-text-color);
+        }
+      }
+    }
+
+    .process-running-container {
+      width: 100%;
+      height: 8px;
+      background: var(--background-color-solid);
+      margin-top: 12px;
+      border-radius: #{$border-radius-small};
+      overflow: hidden;
+      position: relative;
+      .process-running {
+        height: 100%;
+        width: 35%;
+        border-radius: #{$border-radius-small};
+        background: var(--process-color);
+        animation: playing-process 1s ease-in-out infinite;
+      }
+    }
+
+    .indication-arrow {
+      position: absolute;
+      left: 50%;
+      bottom: 0;
+      transform: translate(-50%, 10px);
+      filter: drop-shadow(0px 0px 4px #ffffff);
+    }
+
+    .count-ui-wrapper {
+      position: absolute;
+      right: -16px;
+      top: -2px;
+      padding: 4px;
+      padding-right: 8px;
+      .count-ui-container {
+        background: var(--background-color-solid);
+        padding: 8px;
+        outline: 1px solid var(--border-color);
+        border-radius: #{$border-radius-large};
+        box-shadow: inset 0px 10px 50px #8080803a;
+        max-width: 80px;
+        position: absolute;
+        left: 0;
+        .content {
+          @include flex-center;
+          gap: 2px;
+          .icon {
+            @include flex-center;
+          }
+          .display {
+            font-size: var(--font-size-small);
+          }
+        }
+        .value-container {
+          @include flex-center;
+          gap: 4px;
+          .progress-bar {
+            display: flex;
+            align-items: center;
+            gap: 1px;
+            height: 10px;
+          }
+
+          .block {
+            width: 5px;
+            height: 100%;
+            border-radius: 2px;
+            transition: background-color 0.3s;
+            background: var(--background-color);
+            overflow: hidden;
+            position: relative;
+            .fill {
+              height: 100%;
+              background: linear-gradient(
+                to top,
+                var(--background-color-accent) var(--process-fill-percentage),
+                transparent var(--process-fill-percentage)
+              );
+            }
+          }
+
+          .value {
+            font-size: var(--font-size-tiny);
+            color: var(--input-text-color);
+          }
+        }
+      }
+    }
+  }
+}
+
+@keyframes playing-process {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(300%);
+  }
+}
+
+@keyframes borderAnimation {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}

app/src/styles/components/templates.scss

@@ -0,0 +1,25 @@
+@use "../abstracts/variables.scss" as *;
+
+.follow-person-container {
+    height: 100vh;
+    width: 100vw;
+    position: fixed;
+    top: 0;
+    left: 0;
+    outline: 8px solid var(--user-color);
+    outline-offset: -4px;
+    border-radius: #{$border-radius-xlarge};
+
+    .follower-name {
+        background: var(--user-color);
+        color: #FFFFFF;
+        padding: 4px 8px;
+        padding-top: 16px;
+        text-align: center;
+        position: absolute;
+        top: -10px;
+        left: 50%;
+        transform: translate(-50%, 0);
+        border-radius: #{$border-radius-medium};
+    }
+}

app/src/styles/components/tools.scss

@@ -0,0 +1,215 @@
+@use "../abstracts/variables" as *;
+@use "../abstracts/mixins" as *;
+
+.tools-container {
+  @include flex-center;
+  position: fixed;
+  bottom: 32px;
+  left: 50%;
+  transform: translate(-50%, 0);
+  padding: 8px;
+  gap: 10px;
+  box-shadow: #{$box-shadow-medium};
+  border-radius: #{$border-radius-large};
+  width: fit-content;
+  background: var(--background-color);
+  backdrop-filter: blur(20px);
+  z-index: 2;
+  outline: 1px solid var(--border-color);
+  outline-offset: -1px;
+  transition: transform 0.4s ease-in-out 0.01s;
+
+  &.visible {
+    transform: translate(-50%, -310px);
+  }
+
+  .split {
+    height: 20px;
+    width: 2px;
+    border-radius: #{$border-radius-small};
+    background: var(--text-disabled);
+  }
+
+  .draw-tools,
+  .general-options,
+  .activeDropicon {
+    @include flex-center;
+    gap: 2px;
+    // stylelint-disable-next-line
+    interpolate-size: allow-keywords;
+    width: 0;
+    opacity: 0;
+    animation: expandWidth 0.2s ease-in-out forwards;
+    will-change: width;
+
+    .tool-button {
+      @include flex-center;
+      height: 28px;
+      width: 28px;
+      cursor: pointer;
+      border-radius: #{$border-radius-medium};
+      position: relative;
+
+      &:hover {
+        background: color-mix(
+          in srgb,
+          var(--highlight-accent-color) 60%,
+          transparent
+        );
+
+        .tooltip {
+          opacity: 1;
+          transform: translateY(-2px);
+        }
+      }
+    }
+
+    .active {
+      background: var(--background-color-accent);
+
+      &:hover {
+        background: var(--background-color-accent);
+      }
+    }
+  }
+
+  .activeDropicon {
+    gap: 2px;
+
+    .drop-down-option-button {
+      @include flex-center;
+      height: 28px;
+      cursor: pointer;
+      border-radius: #{$border-radius-small};
+      position: relative;
+
+      &:hover {
+        background: color-mix(
+          in srgb,
+          var(--highlight-accent-color) 60%,
+          transparent
+        );
+      }
+
+      .drop-down-container {
+        position: absolute;
+        bottom: 40px;
+        left: 0;
+        padding: 2px 4px;
+        border-radius: #{$border-radius-medium};
+        background: var(--background-color);
+        backdrop-filter: blur(8px);
+        contain: layout paint;
+        will-change: backdrop-filter;
+
+        .option-list {
+          display: flex;
+          align-items: center;
+          white-space: nowrap;
+          border-radius: #{$border-radius-medium};
+          gap: 6px;
+          padding: 2px;
+          padding-right: 12px;
+          margin: 2px 0;
+
+          &:hover {
+            background: var(--highlight-accent-color);
+            color: var(--accent-color);
+
+            path {
+              stroke: var(--accent-color);
+            }
+          }
+
+          .active-option {
+            height: 12px;
+            width: 12px;
+            @include flex-center;
+          }
+
+          .option {
+            color: inherit;
+          }
+        }
+      }
+    }
+  }
+
+  .toggle-threed-button {
+    @include flex-center;
+    padding: 4px;
+    border-radius: #{$border-radius-medium};
+    background: var(--background-color);
+    outline: 1px solid var(--border-color);
+    outline-offset: -1px;
+    gap: 5px;
+    position: relative;
+
+    &:hover {
+      .tooltip {
+        opacity: 1;
+        transform: translateY(-4px);
+      }
+    }
+
+    .toggle-option {
+      font-size: var(--font-size-small);
+      padding: 2px;
+      z-index: 1;
+      transition: all 0.2s;
+      pointer-events: none;
+    }
+
+    &::after {
+      content: "";
+      position: absolute;
+      background: var(--background-color-accent);
+      left: 2px;
+      top: 2px;
+      height: 23px;
+      width: 23px;
+      border-radius: #{$border-radius-medium};
+      transition: all 0.2s;
+      pointer-events: none;
+    }
+
+    .active {
+      color: var(--text-button-color);
+    }
+  }
+
+  .toggled {
+    &::after {
+      left: 25px;
+    }
+  }
+}
+
+
+@keyframes pulse {
+  0% {
+    opacity: 0;
+    scale: 0.5;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    scale: 2;
+  }
+}
+
+@keyframes expandWidth {
+  from {
+    width: 0;
+    opacity: 0;
+  }
+
+  to {
+    width: fit-content;
+    opacity: 1;
+  }
+}

app/src/styles/components/visualization/floating/common.scss

@@ -0,0 +1,484 @@
+@use "../../../abstracts/variables.scss" as *;
+@use "../../../abstracts/mixins.scss" as *;
+
+.throughput-wrapper,
+.card {
+  background: var(--background-color);
+  box-shadow: var(--box-shadow-heavy);
+  @include flex-center;
+  flex-direction: column;
+  gap: 6px;
+  border-radius: #{$border-radius-xlarge};
+  max-width: 341px;
+
+  padding: 14px;
+
+  .header {
+    @include flex-center;
+    align-items: start;
+    font-weight: $medium-weight;
+    font-size: $large;
+  }
+
+  .display-value {
+    @include flex-center;
+
+    .left {
+      @include flex-center;
+      gap: 6px;
+
+      .icon {
+        width: 27px !important;
+        height: 27px !important;
+        background: var(--background-color);
+        border-radius: #{$border-radius-circle};
+
+        @include flex-center;
+      }
+
+      .value-container {
+        display: flex;
+        flex-direction: column;
+
+        .value-wrapper {
+          display: flex;
+          gap: 6px;
+
+          .value {
+            font-size: $small;
+            color: var(--accent-color);
+            font-weight: $bold-weight;
+          }
+        }
+
+        .total-sales {
+          display: flex;
+          gap: 6px;
+        }
+      }
+    }
+
+    .right {
+      .percent-increase {
+        width: 80px;
+        height: 24px;
+        border-radius: #{$border-radius-medium};
+        background: var(--background-color);
+        color: #34c759;
+        @include flex-center;
+      }
+    }
+  }
+
+  .footer {
+    text-align: center;
+  }
+}
+
+.returnOfInvestment {
+  gap: 10px;
+  min-width: 150px;
+
+  .charts {
+    width: 100%;
+    height: 200px;
+    min-width: 150px;
+  }
+
+  .returns-wrapper {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+
+    .value {
+      font-size: var(--font-size-xxxlarge);
+      color: var(--accent-color);
+    }
+  }
+
+  .footer {
+    text-align: start;
+
+    span {
+      font-weight: $bold-weight;
+    }
+  }
+}
+
+.productionCapacity-wrapper {
+  background: var(--background-color);
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 313px;
+  padding: 4.5px;
+  border-radius: #{$border-radius-medium};
+
+  .headeproductionCapacityr-wrapper,
+  .bar-chart {
+    padding: 14px;
+    background: var(--background-color);
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    border-radius: #{$border-radius-medium};
+    width: 100%;
+    height: 150px;
+    justify-content: center;
+    align-items: center;
+
+    .header {
+      font-size: $small;
+      text-align: start;
+      justify-content: start;
+    }
+
+    .production-capacity {
+      display: flex;
+      gap: 6px;
+
+      .current,
+      .target {
+        display: flex;
+        gap: 6px;
+        align-items: center;
+
+        .key,
+        .value {
+          font-size: $tiny;
+        }
+      }
+
+      .current {
+        .value {
+          background: var(--background-color-secondary);
+          color: #5783f2;
+          border-radius: #{$border-radius-large};
+          padding: 3px 4px;
+        }
+      }
+
+      .target {
+        .value {
+          background: var(--background-color-secondary);
+          color: #9641a7;
+          border-radius: #{$border-radius-large};
+          padding: 3px 4px;
+        }
+      }
+    }
+  }
+
+  .bar-chart {
+    padding: 14px 0;
+  }
+}
+
+.stateWorking-wrapper {
+  min-width: 445px;
+  font-size: var(--font-size-small);
+  backdrop-filter: blur(40px);
+  background: var(--background-color-secondary);
+  border-radius: #{$border-radius-extra-large};
+  color: var(--text-color);
+
+  .header-wrapper {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+
+    .header {
+      display: flex;
+      flex-direction: column;
+
+      span {
+        font-size: var(--font-size-xxlarge);
+
+        &:first-child {
+          color: #fcfdfd;
+        }
+
+        &:last-child {
+          color: #34c759;
+        }
+      }
+    }
+
+    .img {
+      border-radius: #{$border-radius-small};
+
+      img {
+        border-radius: #{$border-radius-small};
+      }
+    }
+  }
+
+  .data-wrapper {
+    width: 100%;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 10px;
+    padding: 10px;
+
+    .data-table {
+      display: flex;
+      justify-content: space-between;
+      padding: 5px;
+      border-bottom: 1px dotted #ccc;
+
+      .data {
+        color: #fcfdfd;
+        font-weight: bold;
+      }
+
+      .key {
+        color: #fcfdfd;
+        text-align: right;
+      }
+    }
+  }
+}
+
+.total-card {
+  min-height: 83px !important;
+  background: var(--background-color);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 18px !important;
+
+  .header-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+
+    .header {
+      color: var(--text-color);
+      opacity: 0.8;
+    }
+
+    .data-values {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+
+      .value {
+        color: var(--text-color);
+      }
+
+      .per {
+        color: #01b574;
+      }
+    }
+  }
+
+  .icon {
+    width: 45px;
+    height: 45px;
+    background: var(--background-color-accent);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: #{$border-radius-large};
+  }
+}
+
+.warehouseThroughput {
+  min-height: 250px !important;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  background: var(--background-color);
+  padding: 14px;
+
+  .header {
+    p {
+      span {
+        color: var(--accent-color);
+      }
+    }
+
+    h2 {
+      color: var(--text-color);
+    }
+  }
+}
+
+.productivity-dashboard {
+  width: 100%;
+  background: var(--background-color);
+  color: white;
+  padding: 20px;
+  border-radius: #{$border-radius-medium};
+
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+
+  header {
+    @include flex-space-between;
+    margin-bottom: 20px;
+
+    h2 {
+      font-size: $regular;
+      margin: 0;
+      font-weight: 600;
+    }
+
+    .options {
+      background: #343b47;
+      width: 30px;
+      height: 30px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: #{$border-radius-small};
+
+      cursor: pointer;
+
+      &:hover {
+        background: #49505a;
+      }
+    }
+  }
+
+  main {
+    display: flex;
+    gap: 20px;
+
+    .metrics {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+
+      .metric {
+        background: #2c3e50;
+        padding: 15px;
+        border-radius: #{$border-radius-small};
+
+
+        .label {
+          font-size: var(--font-size-regular);
+          margin: 0;
+          opacity: 0.7;
+        }
+
+        .value {
+          font-size: var(--font-size-xlarge);
+          font-weight: bold;
+          margin: 0;
+        }
+      }
+    }
+
+    .chart-section {
+      position: relative;
+      flex: 1;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .progress-circle {
+        transform: rotate(-90deg);
+        /* Adjust rotation for SVG */
+        width: 150px;
+        height: 150px;
+
+        circle {
+          transition: stroke-dashoffset 0.5s ease-in-out; // Smooth animation
+        }
+      }
+
+      .chart-details {
+        position: absolute;
+        text-align: center;
+
+        .title {
+          font-size: var(--font-size-large);
+          margin: 0;
+          opacity: 0.7;
+        }
+
+        .time {
+          font-size: var(--font-size-xxxlarge);
+          font-weight: bold;
+          margin: 0;
+        }
+
+        .subtitle {
+          font-size: var(--font-size-regular);
+          margin: 0;
+          opacity: 0.7;
+        }
+      }
+    }
+  }
+}
+
+/* FleetEfficiency.module.css */
+.fleetEfficiency {
+  min-height: 240px !important;
+  padding: 20px;
+  background: var(--background-color);
+  border-radius: #{$border-radius-medium};
+
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  font-family: Arial, sans-serif;
+  width: 240px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  .progressContainer {
+    position: relative;
+    width: 100%;
+    height: 120px;
+    overflow: auto !important;
+
+    .progress {
+      width: 100%;
+      height: 100%;
+
+      .barOverflow {
+        width: 100%;
+      }
+    }
+  }
+}
+
+.scaleLabels {
+  background: var(--background-color);
+  box-shadow: var(--box-shadow-heavy);
+  display: flex;
+  justify-content: space-between;
+  color: #718096;
+  font-size: var(--font-size-small);
+  padding: 18px 10px;
+  position: relative;
+  z-index: 1;
+  // top: -32px;
+}
+
+.barOverflow {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100px;
+  margin-bottom: -14px;
+}
+
+.bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 200px;
+  border-radius: #{$border-radius-circle};
+
+  box-sizing: border-box;
+  border: 25px solid #eee;
+  border-bottom-color: var(--accent-color);
+  border-right-color: var(--accent-color);
+  transition: transform 0.5s ease;
+}
+

app/src/styles/components/visualization/floating/energyConsumed.scss

@@ -0,0 +1,101 @@
+@use "../../../abstracts/variables" as *;
+@use "../../../abstracts/mixins" as *;
+
+.floatingWidgets-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 6px;
+  padding-top: 12px;
+
+  .floating {
+    min-height: 170px;
+    background: var(--background-color);
+    border: 1.23px solid var(--border-color);
+    box-shadow: 0px 4.91px 4.91px 0px #0000001c;
+    border-radius: $border-radius-medium;
+    padding: 18px;
+  }
+
+  .working-state {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+
+    .state-working-top {
+      display: flex;
+    }
+  }
+}
+
+.floating.working-state {
+  width: 100%;
+  height: 283px;
+  background: #f5f5f5;
+  border-radius: #{$border-radius-medium};
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+  box-sizing: border-box;
+
+}
+
+.state-working-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.state {
+  font-size: var(--font-size-xxlarge);
+  font-weight: bold;
+}
+
+.working-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.working {
+  font-size: var(--font-size-xxlarge);
+  color: #4CAF50;
+}
+
+.dot {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  background: #4CAF50;
+  border-radius: #{$border-radius-circle};
+}
+
+.img img {
+  width: 150px;
+  height: 100px;
+  border-radius: #{$border-radius-small};
+  object-fit: cover;
+}
+
+.state-working-data {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 15px;
+}
+
+.data-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: var(--font-size-large);
+  padding: 4px 0;
+}
+
+.data-key {
+  color: #666;
+}
+
+.data-value {
+  font-weight: bold;
+  color: #333;
+}

app/src/styles/components/visualization/ui/styledWidgets.scss

@@ -0,0 +1,56 @@
+@use "../../../abstracts/variables" as *;
+@use "../../../abstracts/mixins" as *;
+
+.progressBar {
+  height: auto !important;
+  padding: 12px 10px 41px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+
+  // min-width: 1450px;
+  .header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-bottom: none;
+  }
+
+  .stock {
+    padding: 13px 5px;
+    border-radius: #{$border-radius-medium};
+    display: flex;
+    justify-content: space-between;
+    background: color-mix(in srgb,
+        var(--highlight-accent-color) 60%,
+        transparent);
+    font-size: var(--font-size-large);
+    align-items: center;
+  }
+
+  .stock-item {
+    .stockValues {
+      display: flex;
+      gap: 3px;
+
+      .value {
+        color: var(--accent-color);
+      }
+
+      .stock-description {
+        font-size: var(--font-size-small);
+      }
+    }
+  }
+
+  .icon {
+    width: 16.95305824279785px;
+    height: 16.95305824279785px;
+    background: var(--accent-color);
+    border-radius: #{$border-radius-circle};
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}

app/src/styles/layout/compareLayout.scss

@@ -0,0 +1,589 @@
+@use "../abstracts/variables" as *;
+@use "../abstracts/mixins" as *;
+
+.initial-selectLayout-wrapper {
+    position: fixed;
+    top: 100px;
+    right: 40px;
+    z-index: 10;
+
+    .regularDropdown-container {
+        background: var(--background-color);
+    }
+}
+
+.selectLayout-wrapper {
+    position: fixed;
+    left: 40px;
+    top: 100px;
+    z-index: 10;
+
+    .regularDropdown-container {
+        background: var(--background-color);
+    }
+}
+
+.compareLayOut-wrapper {
+    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);
+
+    .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;
+    }
+
+    .chooseLayout-container {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        overflow: hidden;
+
+        .compare-layout-canvas-container {
+            position: absolute;
+            height: 100vh;
+            width: 100vw;
+            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;
+
+            .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;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+.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;
+
+    .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;
+
+        .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;
+            }
+
+            .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;
+                        }
+                    }
+                }
+            }
+
+            .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;
+    }
+
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+.energy-usage {
+    position: relative;
+
+    .energy-usage-wrapper {
+        h4 {
+            font-weight: 600;
+        }
+
+        .value {
+            padding-top: 25px;
+            font-size: var(--font-size-xxxlarge);
+            color: var(--background-color-accent);
+        }
+    }
+
+    .simulation-details {
+        position: absolute;
+        bottom: 12px;
+        right: 12px;
+
+        .simulation-wrapper {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+
+            .icon {
+                width: 20px;
+                height: 20px;
+                border-radius: 50%;
+                background-color: var(--background-color-accent);
+            }
+        }
+    }
+
+    .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;
+
+        .layer-wrapper {
+            display: flex;
+            flex-direction: column;
+
+            &:last-child {
+                justify-content: end;
+            }
+        }
+    }
+
+    .chart {
+        width: 80%;
+        height: 90%;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+    }
+}
+
+.cycle-time-container {
+    .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;
+                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;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.overallDowntime-container {
+    .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-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;
+        }
+    }
+}
+
+.overallScrapRate {
+    .overallScrapRate-wrapper {
+        display: flex;
+
+        .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;
+        }
+    }
+}

app/src/styles/layout/compareLayoutPopUp.scss

@@ -0,0 +1,265 @@
+.compare-container {
+    width: 100vw;
+    height: 100vh;
+
+    background: var(--background-color-secondary);
+    backdrop-filter: blur(2px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .compare-wrapper {
+        min-width: 312px;
+        min-height: 363px;
+        background: var(--background-color);
+        padding: 20px;
+        border-radius: 24px;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        backdrop-filter: blur(50px);
+        outline: 1px solid var(--border-color);
+        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
+        position: relative;
+
+        .grid-wrapper {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            height: 100%;
+            border-radius: 20px;
+            position: relative;
+
+            background-size: 52px 52px;
+            background-repeat: repeat;
+
+
+
+            >* {
+                position: relative;
+                z-index: 2;
+            }
+
+            .header {
+                text-align: center;
+                font-size: var(--font-size-small);
+                margin-bottom: 8px;
+            }
+
+            .cards-container {
+                margin-top: 30px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                .card {
+                    background: var(--background-color);
+                    backdrop-filter: blur(20px);
+                    width: 100px;
+                    height: 100px;
+                    margin: 10px;
+                    border-radius: 10px;
+                    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+                    position: absolute;
+
+
+                }
+
+
+            }
+
+            .card-layout-wrapper {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                padding: 10px;
+
+                background: var(--background-color);
+                backdrop-filter: blur(20px);
+                border-radius: 20px;
+                outline: 1px solid var(--border-color);
+            }
+
+            .card-layout-container {
+                width: 130px;
+                height: 130px;
+                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+                display: flex;
+                flex-direction: column;
+                justify-content: space-around;
+
+                align-items: center;
+                padding: 10px;
+
+                outline: 1px solid var(--border-color);
+                outline-offset: -1px;
+                border-radius: 12px;
+                background: var(--background-color);
+
+                .tab-header {
+                    display: flex;
+                    justify-content: space-between;
+                    width: 100%;
+
+                    .label-tab {
+                        font-size: var(--font-size-small);
+                    }
+
+                    .status {
+                        width: 10px;
+                        height: 10px;
+                        border-radius: 50%;
+                        background-color: #5a33a3;
+                    }
+
+                }
+
+
+
+                .skeleton-wrapper {
+
+                    width: 100%;
+                    display: flex;
+                    flex-direction: column;
+                    gap: 6px;
+                    justify-content: center;
+                    align-items: center;
+
+                    .skeleton {
+                        height: 2.662480115890503px;
+
+                        &:nth-child(1) {
+                            width: 40%;
+                        }
+
+                        &:nth-child(2) {
+                            width: 70%;
+                        }
+
+                        &:nth-child(3) {
+                            width: 40%;
+                        }
+                    }
+
+                }
+            }
+
+            .button-wrapper {
+                margin-top: 20px;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: 12px;
+
+                .button-group {
+                    display: flex;
+                    gap: 8px;
+
+                    .btn {
+                        padding: 10px 16px;
+                        font-size: var(--font-size-small);
+                        border-radius: 30px;
+                        cursor: pointer;
+                        transition: all 0.3s ease;
+                        user-select: none;
+                    }
+
+                    .save {
+                        background-color: #6f42c1;
+                        color: white;
+                        box-shadow: 0px 2px 8px rgba(111, 66, 193, 0.4);
+
+                        &:hover {
+                            background-color: #5a33a3;
+                        }
+                    }
+
+                    .replace {
+                        border: 1px solid #6f42c1;
+                        color: #6f42c1;
+                        background: transparent;
+
+                        &:hover {
+                            background-color: rgba(111, 66, 193, 0.08);
+                        }
+                    }
+                }
+
+                .cancel {
+                    color: red;
+                    font-size: var(--font-size-small);
+                    cursor: pointer;
+                }
+            }
+        }
+
+        .footer {
+            font-size: var(--font-size-small);
+            opacity: 0.7;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 6px;
+        }
+    }
+
+
+}
+
+
+
+
+.cards-container {
+    margin-top: 30px;
+    position: relative;
+    width: 100%;
+    height: 150px;
+
+    .card {
+        position: absolute;
+        width: 100px;
+        height: 100px;
+        background: white;
+        border-radius: 10px;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        z-index: 1;
+
+        &:nth-child(1) {
+            left: -10px;
+            transform: scale(0.8);
+        }
+
+        &:nth-child(2) {
+            right: -10px;
+            transform: scale(0.8);
+        }
+
+        &:nth-child(4) {
+            left: 20px;
+            transform: scale(1);
+        }
+
+        &:nth-child(5) {
+            right: 20px;
+            transform: scale(1);
+        }
+    }
+
+    .card-layout-wrapper {
+        position: absolute;
+        left: 50%;
+        top: 0;
+        transform: translateX(-50%);
+        z-index: 2;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 10px;
+
+        background: var(--background-color);
+        backdrop-filter: blur(20px);
+        border-radius: 20px;
+        outline: 1px solid var(--border-color);
+    }
+}

app/src/styles/layout/loading.scss

@@ -0,0 +1,102 @@
+@use "../abstracts/variables" as *;
+@use "../abstracts/mixins" as *;
+
+.loading-wrapper {
+  height: 100vh;
+  width: 100vw;
+  background: var(--background-color-solid);
+
+  &.comparisionLoading {
+
+    position: fixed;
+    top: 0;
+    right: 0;
+
+    height: 100vh;
+    width: 50vw;
+  }
+
+  .loading-container {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    padding: 28px;
+    z-index: 5;
+
+    &::after {
+      content: "";
+      position: absolute;
+      background: var(--faint-gradient-color);
+      height: 50vh;
+      width: 50vw;
+      top: 0;
+      left: 0;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      border-radius: #{$border-radius-circle};
+      filter: blur(200px);
+      z-index: -1;
+    }
+
+    .project-name {
+      font-size: var(--font-size-regular);
+    }
+
+    .loading-hero-container {
+      .logo {
+        @include flex-center;
+        width: 100%;
+        margin-bottom: 35px;
+
+        circle {
+          fill: transparent;
+        }
+      }
+
+      .content {
+        font-family: #{$font-josefin-sans};
+        font-size: #{$xxlarge};
+        font-weight: #{$thin-weight};
+        max-width: 250px;
+        text-align: center;
+        line-height: 2rem;
+      }
+    }
+
+    .progress-container {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
+      .progress-value {
+        font-family: #{$font-josefin-sans};
+        font-weight: #{$thin-weight};
+        font-size: 96px;
+        margin-bottom: 22px;
+        text-align: center;
+      }
+
+      .progress-indicator-container {
+        height: 6px;
+        width: 60%;
+        background: var(--highlight-accent-color);
+        border-radius: #{$border-radius-small};
+        position: relative;
+
+        .progress-bar {
+          height: 6px;
+          background: var(--accent-color);
+          border-radius: #{$border-radius-small};
+          transition: width 0.2 ease;
+        }
+      }
+    }
+  }
+}

app/src/styles/layout/popup.scss

@@ -0,0 +1,150 @@
+@use "../abstracts/variables" as *;
+@use "../abstracts/mixins" as *;
+
+.collaboration-popup-wrapper {
+  height: 100vh;
+  width: 100vw;
+  background: var(--background-color-secondary);
+  @include flex-center;
+  .collaboration-popup-container {
+    max-width: 50vw;
+    width: 520px;
+    background: var(--background-color);
+    border-radius: #{$border-radius-large};
+    backdrop-filter: blur(15px);
+    outline: 1px solid var(--border-color);
+    padding: 6px;
+    section{
+      margin: 0;
+    }
+    .header {
+      @include flex-space-between;
+      padding: 12px;
+      .content {
+        @include flex-center;
+        gap: 8px;
+        .copy-link-button {
+          font-size: var(--font-size-small);
+          &:hover {
+            color: var(--accent-color);
+            text-decoration: underline;
+          }
+        }
+        .close-button {
+          @include flex-center;
+          height: 20px;
+          width: 20px;
+          border-radius: #{$border-radius-small};
+          &:hover {
+            background: var(--background-color-secondary);
+          }
+          svg {
+            scale: 1.5;
+          }
+        }
+      }
+    }
+    .invite-input-container {
+      padding: 12px;
+    }
+    .access-and-user-control-container {
+      padding: 12px;
+      max-height: 50vh;
+      overflow: auto;
+      .user-header {
+        margin-bottom: 12px;
+      }
+      .general-access-container,
+      .users-list-container {
+        .user-list-container,
+        .team-container,
+        .you-container {
+          @include flex-space-between;
+          padding: 8px;
+          .user-details {
+            @include flex-center;
+            gap: 8px;
+            .profile-image {
+              height: 24px;
+              width: 24px;
+              line-height: 24px;
+              text-align: center;
+              border-radius: #{$border-radius-circle};
+              overflow: hidden;
+              color: var(--primary-color);
+              img {
+                height: 100%;
+                width: 100%;
+                object-fit: cover;
+              }
+              .no-profile-container {
+                font-size: var(--font-size-small);
+                color: inherit;
+              }
+            }
+            .user-name {
+              font-size: var(--font-size-regulaar);
+            }
+          }
+          .project-name,
+          .your-name {
+            @include flex-center;
+            gap: 6px;
+            color: var(--text-color);
+            .user-profile{
+              height: 24px;
+              width: 24px;
+              text-align: center;
+              line-height: 25px;
+              background: var(--background-color-accent);
+              color: var(--text-color);
+              border-radius: #{$border-radius-circle};
+            }
+          }
+          .number-of-peoples-have-access {
+            padding: 4px 12px;
+            border-radius: #{$border-radius-small};
+          }
+          .indicater {
+            padding: 2px 12px;
+            line-height: 22px;
+            border-radius: #{$border-radius-extra-large};
+            background: var(--highlight-accent-color);
+            color: var(--accent-color);
+            outline: 1px dashed var(--accent-color);
+            outline-offset: -1px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.collab-user-live-container{
+  @include flex-center;
+  flex-direction: column;
+  gap: 6px;
+  transform: translateY(15px);
+  .user-image-container{
+    height: 30px;
+    width: 30px;
+    border-radius: #{$border-radius-circle};
+    overflow: hidden;
+    .user-image{
+      height: 100%;
+      width: 100%;
+      object-fit: cover;
+      vertical-align: top;
+      pointer-events: none;
+    }
+  }
+  .user-name{
+    padding: 4px 6px;
+    border-radius: #{$border-radius-small};
+    color: white;
+    font-size: var(--font-size-regulaar);
+    font-weight: var(--font-size-regulaar);
+    text-transform: capitalize;
+    white-space: nowrap;
+  }
+}

app/src/styles/layout/skeleton.scss

@@ -0,0 +1,90 @@
+.skeleton-wrapper {
+  margin: 0 auto;
+  width: 100%;
+
+  .skeleton {
+    background: var(--background-color-gray);
+
+    border-radius: 8px;
+    position: relative;
+    overflow: hidden;
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-image: linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0) 0%,
+        rgba(255, 255, 255, 0.2) 20%,
+        rgba(255, 255, 255, 0.39) 60%,
+        rgba(255, 255, 255, 0) 100%
+      );
+      transform: translateX(-100%);
+      animation: shimmer 1.5s infinite;
+    }
+  }
+
+  .skeleton-header {
+    margin-bottom: 20px;
+
+    .skeleton-title {
+      width: 100%;
+      height: 25px;
+      margin-bottom: 12px;
+    }
+
+    .skeleton-subtitle {
+      width: 100%;
+      height: 4px;
+    }
+  }
+
+  .skeleton-content {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    .skeleton-card {
+      width: 100%;
+      height: 15px;
+    }
+  }
+}
+
+.asset-category-title{
+  width: 60%;
+  height: 12px;
+  margin-bottom: 12px;
+  margin-top: 4px;
+}
+.skeleton-content-asset{
+  display: flex;
+  height: calc(95px * 2 + 10px);
+  gap: 10px;
+  flex-wrap: wrap;
+  .skeleton-content {
+    gap: 8px;
+    flex-direction: column;
+    min-width: 122px;
+    min-height: 95px;
+    .asset-name {
+      width: 40%;
+      height: 10px;
+    }
+    .asset {
+      flex: 1;
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+@keyframes shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}

app/src/styles/layout/toast.scss

@@ -0,0 +1,89 @@
+@use "../abstracts/variables" as *;
+@use "../abstracts/mixins" as *;
+
+.toast-container {
+  position: fixed;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  z-index: #{$z-index-ui-highest};
+}
+
+.toast-container.bottom-center {
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.toast-container.bottom-left {
+  bottom: 20px;
+  left: 20px;
+}
+
+.toast-container.bottom-right {
+  bottom: 20px;
+  right: 20px;
+}
+
+.toast-container.top-center {
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.toast-container.top-left {
+  top: 20px;
+  left: 20px;
+}
+
+.toast-container.top-right {
+  top: 20px;
+  right: 20px;
+}
+
+.toast {
+  padding: 10px 20px;
+  border-radius: #{$border-radius-medium};
+  color: var(--primary-color);
+  cursor: pointer;
+  animation: fadeIn 0.3s, fadeOut 0.5s 2.5s;
+}
+
+.toast.success {
+  background: #4caf50;
+}
+
+.toast.error {
+  background: #f44336;
+}
+
+.toast.info {
+  background: #2196f3;
+}
+
+.toast.warning {
+  background: #ff9800;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}

app/src/styles/main.scss

@@ -0,0 +1,48 @@
+// abstracts
+@use "abstracts/variables";
+@use "abstracts/mixins";
+@use "abstracts/functions";
+
+// base
+@use "base/reset";
+@use "base/typography";
+@use "base/global";
+@use "base/base";
+
+// components
+@use "components/button";
+@use "components/form";
+@use "components/input";
+@use "components/lists";
+@use "components/moduleToggle";
+@use "components/templates";
+@use "components/tools";
+@use "components/visualization/floating/energyConsumed";
+@use "components/visualization/ui/styledWidgets";
+@use "components/visualization/floating/common";
+@use "components/marketPlace/marketPlace";
+@use "components/menu/menu";
+@use "components/confirmationPopUp";
+@use "components/simulation/simulation";
+@use "components/simulation/analysis";
+@use "components/logs/logs";
+@use "components/footer/footer.scss";
+
+// layout
+@use "layout/loading";
+@use "layout/sidebar";
+@use "layout/popup";
+@use "layout/toast";
+@use "layout/skeleton";
+@use "layout/compareLayoutPopUp";
+@use "layout/compareLayout";
+
+// pages
+@use "pages/dashboard";
+@use "pages/home";
+@use "pages/realTimeViz";
+@use "pages/userAuth";
+
+//
+@use "./scene/scene";
+@use "./scene/comments";

app/src/styles/pages/dashboard.scss

@@ -0,0 +1,345 @@
+@use "../abstracts/variables.scss" as *;
+@use "../abstracts/mixins.scss" as *;
+
+.dashboard-main {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  padding: 27px 17px;
+
+  .side-pannel-container {
+    padding: 32px;
+    min-width: 280px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    background: var(--background-color);
+    backdrop-filter: blur(20px);
+    border-radius: 30px;
+    box-shadow: var(--box-shadow-medium);
+
+    .side-pannel-header {
+      @include flex-space-between;
+
+      .user-container {
+        @include flex-center;
+        gap: 6px;
+
+        .user-profile {
+          height: 32px;
+          width: 32px;
+          line-height: 32px;
+          text-align: center;
+          font-weight: var(--font-weight-medium);
+          background: var(--background-color-accent);
+          color: var(--text-button-color);
+          border-radius: #{$border-radius-circle};
+        }
+
+        .user-name {
+          color: var(--accent-color);
+        }
+      }
+
+      .notifications-container {
+        @include flex-center;
+        height: 24px;
+        width: 24px;
+        cursor: pointer;
+      }
+    }
+
+    .new-project-button {
+      padding: 12px 16px;
+      cursor: not-allowed;
+      color: var(--text-color);
+      background: var(--background-color-secondary);
+      border-radius: #{$border-radius-xxx};
+    }
+
+    .side-bar-content-container {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      height: 100%;
+
+      .side-bar-options-container {
+        .option-list {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          padding: 8px 10px;
+          margin: 4px 0;
+          border-radius: #{$border-radius-extra-large};
+          cursor: pointer;
+
+          &:hover {
+            background: var(--background-color-secondary);
+          }
+        }
+
+        .active {
+          color: var(--text-button-color);
+          font-weight: var(--font-weight-medium);
+          background: var(--background-color-button);
+
+          svg {
+            path {
+              stroke: var(--background-color-selected);
+            }
+          }
+
+          &:hover {
+            background: var(--background-color-button);
+          }
+        }
+      }
+    }
+  }
+
+  .dashboard-home-container {
+    width: 100%;
+    padding-left: 18px;
+
+    .dashboard-navbar-container {
+      margin-top: 28px;
+      margin-bottom: 22px;
+      @include flex-center;
+
+      .title {
+        text-transform: capitalize;
+        font-size: var(--font-size-large);
+        width: 100%;
+      }
+
+      .market-place-button {
+        @include flex-center;
+        gap: 6px;
+        padding: 8px 14px;
+        background: var(--background-color-button);
+        white-space: nowrap;
+        border-radius: #{$border-radius-extra-large};
+
+        color: var(--text-button-color);
+      }
+
+      .search-wrapper {
+        width: 400px;
+      }
+    }
+
+    .container {
+      margin: 22px 0;
+      width: 100%;
+      height: calc(100% - 357px);
+
+      .header-wrapper {
+        font-size: var(--font-size-large);
+
+        .header {
+          color: var(--input-text-color);
+          padding: 6px 8px;
+          border-radius: #{$border-radius-extra-large};
+
+          &.active {
+            background: var(--background-color-button);
+            color: var(--text-color);
+          }
+        }
+      }
+
+      .cards-container {
+        height: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        position: relative;
+        width: 100%;
+        padding-top: 18px;
+        gap: 18px;
+        overflow: auto;
+      }
+    }
+  }
+}
+
+.dashboard-card-container {
+  height: 242px;
+  width: calc((100% / 5) - 23px);
+  min-width: 260px;
+  position: relative;
+  border: 1px solid var(--border-color);
+  border-radius: #{$border-radius-extra-large};
+  cursor: pointer;
+  overflow: visible;
+
+  .dashboard-card-wrapper {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .preview-container {
+    height: 100%;
+    width: 100%;
+
+    img {
+      height: 100%;
+      width: 100%;
+      object-fit: cover;
+      vertical-align: top;
+      border: none;
+      outline: none;
+      border-radius: #{$border-radius-extra-large};
+    }
+  }
+
+  .project-details-container {
+    @include flex-space-between;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    padding: 13px 16px;
+    background: var(--background-color);
+
+    border-radius: #{$border-radius-xlarge};
+    // transform: translateY(100%);///////hovered
+    transition: transform 0.25s linear;
+
+    .project-details {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+
+      .project-name {
+        margin-bottom: 7px;
+      }
+
+      .project-data {
+        color: var(--input-text-color);
+      }
+    }
+
+    .users-list-container {
+      @include flex-center;
+      gap: 6px;
+      position: relative; // Needed for absolute positioning of kebab-options-wrapper
+
+      .user-profile {
+        height: 26px;
+        width: 26px;
+        line-height: 26px;
+        text-align: center;
+        background: var(--accent-color);
+        color: var(--text-color);
+        border-radius: #{$border-radius-circle};
+      }
+
+      .kebab {
+        padding: 10px;
+        @include flex-center;
+        transform: rotate(90deg);
+      }
+    }
+  }
+
+  .kebab-options-wrapper {
+    position: absolute;
+    bottom: 40px;
+    right: 40px;
+    background: var(--background-color);
+    border: 1px solid var(--border-color);
+    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;
+    display: none;
+
+    .option {
+      padding: 8px 12px;
+      font-size: 14px;
+      text-align: left;
+      background: transparent;
+      border: none;
+      color: var(--text-color);
+      cursor: pointer;
+      transition: background 0.2s ease;
+      text-transform: capitalize;
+
+      &:hover {
+        background-color: var(--background-color-selected);
+      }
+    }
+  }
+
+  &:hover {
+    overflow: visible;
+
+    .kebab-options-wrapper {
+      display: flex;
+    }
+
+    .project-details-container {
+      transform: translateY(0);
+    }
+  }
+}
+
+.market-place-banner-container {
+  width: 100%;
+  height: 230px;
+  overflow: hidden;
+  position: relative;
+
+  img {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+    border-radius: #{$border-radius-xxx};
+  }
+
+  .hero-text {
+    position: absolute;
+    left: 52px;
+    bottom: 25px;
+    font-size: 48px;
+    font-family: #{$font-roboto};
+    font-weight: 800;
+    color: #ffffff;
+    text-transform: uppercase;
+  }
+
+  .context {
+    position: absolute;
+    top: 20px;
+    right: 58px;
+    text-transform: uppercase;
+    font-size: 22px;
+    width: 300px;
+    color: #ffffff;
+    font-family: #{$font-roboto};
+  }
+
+  .arrow-context {
+    position: absolute;
+    bottom: 27px;
+    right: 300px;
+  }
+
+  .explore-button {
+    position: absolute;
+    top: 95px;
+    right: 52px;
+    padding: 10px 20px;
+    text-transform: uppercase;
+    font-size: 24px;
+    border: 1px solid #ffffff;
+    color: #ffffff;
+    font-family: #{$font-roboto};
+    cursor: pointer;
+  }
+}

app/src/styles/pages/home.scss

@@ -0,0 +1,9 @@
+.navbar{
+  position: absolute;
+  top: 0;
+  width: 100%;
+  padding: 32px 60px;
+  li{
+    display: block;
+  }
+}

app/src/styles/pages/realTimeViz.scss

@@ -0,0 +1,983 @@
+@use "../abstracts/variables.scss" as *;
+@use "../abstracts/mixins.scss" as *;
+
+// Main Container
+.realTime-viz {
+  width: calc(100% - (320px + 270px + 90px));
+  height: calc(100% - (250px));
+  position: absolute;
+  top: 50%;
+  left: calc(270px + 45px);
+  transform: translate(0, -50%);
+  border-radius: #{$border-radius-medium};
+  z-index: 2;
+  pointer-events: none;
+
+  .realTime-viz-wrapper {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    z-index: -1;
+  }
+
+  .floating {
+    // width: calc(var(--realTimeViz-container-width) * 0.2px);
+    // transform: scale(min(1, calc(var(--realTimeViz-container-width) / 1000)));
+
+    min-width: 230px;
+    max-width: 300px;
+
+    background: var(--background-color);
+    backdrop-filter: blur(10px);
+    border: 1px solid var(--border-color);
+    box-shadow: 0px 4.91px 4.91px 0px #0000001c;
+    border-radius: $border-radius-medium;
+    padding: 18px;
+    position: absolute;
+    z-index: 1;
+  }
+
+  .icon {
+    display: flex;
+    align-items: center;
+    position: relative;
+  }
+
+  .icons-container {
+    .icon {
+      &:first-child {
+        &::after {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .zone-container {
+    display: flex;
+    background: var(--background-color);
+    backdrop-filter: blur(10px);
+    position: absolute;
+    bottom: 0px;
+    left: 50%;
+    gap: 6px;
+    border-radius: #{$border-radius-medium};
+    overflow: auto;
+    max-width: calc(100% - 500px);
+    z-index: 3;
+    transform: translate(-50%, -10%);
+    pointer-events: all;
+    transition: all 0.3s linear;
+
+    &.bottom {
+      bottom: var(--bottomWidth);
+    }
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    .arrow {
+      background: var(--highlight-accent-color);
+      color: var(--background-color);
+    }
+
+    .zones-wrapper {
+      padding: 6px;
+      display: flex;
+      gap: 6px;
+      border-radius: #{$border-radius-medium};
+      overflow-x: auto;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+
+    .no-zone {
+      @include flex-center;
+      gap: 4px;
+      padding: 4px;
+      color: var(--text-disabled);
+    }
+
+    .zone {
+      width: auto;
+      background: var(--background-color);
+      border-radius: #{$border-radius-medium};
+
+      padding: 4px 8px;
+      white-space: nowrap;
+      font-size: $small;
+    }
+
+    .active {
+      background: var(--background-color-accent);
+      color: var(--text-button-color);
+      border: none;
+      outline: none;
+    }
+  }
+
+  .zone-container.visualization-playing {
+    bottom: 74px;
+
+    &.bottom {
+      bottom: var(--bottomWidth);
+    }
+  }
+
+  .zone-wrapper.bottom {
+    bottom: var(--bottomWidth);
+  }
+
+  .content-container {
+    display: flex;
+    height: 100vh;
+    transition: all 0.3s ease;
+  }
+
+  .main-container {
+    position: relative;
+    flex: 1;
+    height: 600px;
+    background: rgb(235, 235, 235);
+    margin: 0 30px;
+    transition: height 0.3s ease, margin 0.3s ease;
+
+    .zone-wrapper {
+      display: flex;
+      background: rgba(224, 223, 255, 0.5);
+      position: absolute;
+      left: 50%;
+      transform: translate(-50%, 0);
+      gap: 6px;
+      padding: 4px;
+      border-radius: #{$border-radius-medium};
+
+      max-width: 80%;
+      overflow: auto;
+      transition: transform 0.3s ease;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      .zone {
+        width: auto;
+        background: $background-color;
+        border-radius: #{$border-radius-medium};
+
+        padding: 4px 8px;
+        white-space: nowrap;
+        cursor: pointer;
+        transition: background-color 0.3s ease;
+
+        &.active {
+          background: var(--primary-color);
+          color: var(--accent-color);
+        }
+      }
+
+    }
+  }
+
+  .panel {
+    position: absolute;
+    transition: all 0.3s ease;
+    border-radius: #{$border-radius-medium};
+
+    overflow: auto;
+    z-index: $z-index-tools;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    .panel-content {
+      position: relative;
+      height: 100%;
+      width: 100%;
+      padding: 10px;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      background: var(--background-color);
+      backdrop-filter: blur(10px);
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      .chart-container {
+        width: 100%;
+        max-height: 100%;
+        border: 1px dashed var(--background-color-gray);
+        border-radius: #{$border-radius-medium};
+
+        box-shadow: var(--box-shadow-medium);
+        background: var(--background-color);
+        position: relative;
+        padding: 0 10px;
+        animation: scaleFadeIn 0.4s forwards;
+
+        .kebab {
+          width: 30px;
+          height: 30px;
+          position: absolute;
+          top: 0px;
+          right: 0px;
+          z-index: 10;
+          cursor: pointer;
+          @include flex-center;
+        }
+
+        .kebab-options {
+          position: absolute;
+          top: 18px;
+          right: 5px;
+          transform: translate(0px, 0);
+          background: var(--background-color);
+          z-index: 10;
+
+          display: flex;
+          flex-direction: column;
+          gap: 6px;
+          border-radius: #{$border-radius-small};
+
+          box-shadow: var(--box-shadow-medium);
+
+          .btn {
+            display: flex;
+            gap: 6px;
+            align-items: center;
+            padding: 5px 10px;
+            color: var(--text-color);
+
+            &:hover {
+              background: var(--highlight-accent-color);
+              width: 100%;
+
+              .label {
+                color: var(--accent-color);
+              }
+
+              svg {
+                &:first-child {
+                  fill: var(--accent-color);
+                }
+
+                &:last-child {
+                  fill: auto;
+                  stroke: var(--accent-color);
+                }
+              }
+            }
+          }
+
+          .btn-blur {
+            color: var(--text-disabled);
+            cursor: not-allowed;
+            pointer-events: none;
+          }
+        }
+      }
+
+      .close-btn {
+        position: absolute;
+        top: 5px;
+        right: 5px;
+        background: none;
+        border: none;
+        cursor: pointer;
+        color: var(--primary-color);
+      }
+    }
+
+    &.top-panel,
+    &.bottom-panel {
+      left: 0;
+      right: 0;
+      min-height: 150px;
+
+      .panel-content {
+        display: flex;
+        flex-direction: row;
+        height: 100%;
+        width: 100%;
+        min-height: 150px;
+
+        .chart-container {
+          min-width: 160px;
+        }
+      }
+    }
+
+    &.top-panel {
+      top: 0;
+    }
+
+    &.bottom-panel {
+      bottom: 0;
+    }
+
+    &.left-panel {
+      left: 0;
+      top: 0;
+      bottom: 0;
+    }
+
+    &.right-panel {
+      right: 0;
+      top: 0;
+      bottom: 0;
+    }
+
+    &.left-panel,
+    &.right-panel {
+      min-width: 150px;
+
+      .panel-content {
+        flex-direction: column;
+        width: 100%;
+
+        gap: 6px;
+
+        .chart-container {
+          width: 100%;
+          min-height: 150px;
+          max-height: 100%;
+          border-radius: #{$border-radius-medium};
+
+          box-shadow: var(--box-shadow-medium);
+          padding: 6px 0;
+          background: var(--background-color);
+          position: relative;
+        }
+      }
+    }
+  }
+
+  .panel.hidePanel {
+    pointer-events: none;
+    opacity: 0;
+  }
+}
+
+.playingFlase {
+  .zone-wrapper.bottom {
+    bottom: var(--bottomWidth);
+  }
+}
+
+
+
+
+// Side Buttons
+.side-button-container {
+  position: absolute;
+  display: flex;
+  background: var(--background-color);
+  padding: 2px;
+  border-radius: 2px;
+  transition: transform 0.3s ease;
+  box-shadow: #{$box-shadow-medium};
+  pointer-events: all;
+
+  svg {
+    stroke: var(--icon-default-color) !important;
+  }
+
+  .extra-Bs {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+
+    .icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 18px;
+      height: 18px;
+      border-radius: #{$border-radius-small};
+    }
+
+    .active {
+      background: var(--background-color-accent);
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  .side-button {
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    width: 18px;
+    height: 18px;
+    display: flex;
+    justify-content: center;
+    background: var(--background-color-accent);
+    border: none;
+    color: var(--background-color);
+    border-radius: #{$border-radius-small};
+
+    .add-icon {
+      @include flex-center;
+      transition: rotate 0.2s;
+    }
+
+    path {
+      stroke: var(--text-button-color);
+      strokeWidth: 2;
+    }
+  }
+
+  .active {
+    background: #f657482f;
+
+    .add-icon {
+      rotate: 45deg;
+
+      path {
+        stroke: #f65648;
+        strokeWidth: 1.3;
+      }
+    }
+  }
+
+  &.top {
+    top: -30px;
+    left: 50%;
+    transform: translateX(-50%);
+    flex-direction: row;
+    gap: 6px;
+  }
+
+  &.right {
+    right: -30px;
+    top: 50%;
+    transform: translateY(-50%);
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  &.bottom {
+    bottom: -30px;
+    left: 50%;
+    transform: translateX(-50%);
+    flex-direction: row;
+    gap: 6px;
+  }
+
+  &.left {
+    left: -30px;
+    top: 50%;
+    transform: translateY(-50%);
+    flex-direction: column;
+    gap: 6px;
+  }
+}
+
+.right.side-button-container {
+  .extra-Bs {
+    flex-direction: column;
+  }
+}
+
+.left.side-button-container {
+  .extra-Bs {
+    flex-direction: column;
+  }
+}
+
+// Theme Container
+.theme-container {
+  width: 250px;
+  padding: 12px;
+  box-shadow: 1px -3px 4px 0px rgba(0, 0, 0, 0.11);
+  border-radius: #{$border-radius-medium};
+
+  background: white;
+  position: absolute;
+  top: 20px;
+  right: -100%;
+  transform: translate(-0%, 0);
+
+  h2 {
+    font-size: var(--font-size-small);
+    margin-bottom: 8px;
+    color: #2b3344;
+  }
+
+  .theme-preset-wrapper {
+    display: flex;
+    gap: 5px;
+    flex-wrap: wrap;
+
+    .theme-preset {
+      display: flex;
+      gap: 2px;
+      margin-bottom: 10px;
+      border: 1px solid $border-color;
+      padding: 5px 10px;
+      border-radius: #{$border-radius-small};
+
+      transition: border 0.3s ease;
+
+      &.active {
+        border: 1px solid var(--primary-color);
+
+        &::after {
+          content: "";
+          position: absolute;
+          top: 1px;
+          left: 1px;
+          width: 10px;
+          height: 10px;
+          background: var(--primary-color);
+          border-radius: #{$border-radius-circle};
+        }
+      }
+    }
+  }
+
+  .custom-color {
+    display: flex;
+    justify-content: space-between;
+
+    .color-displayer {
+      display: flex;
+      gap: 5px;
+      align-items: center;
+      border: 1px solid var(--accent-color);
+      border-radius: #{$border-radius-small};
+
+      padding: 0 5px;
+
+      input {
+        border: none;
+        outline: none;
+        border-radius: #{$border-radius-circle};
+      }
+    }
+  }
+}
+
+.arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  border: none;
+  cursor: pointer;
+  z-index: 10;
+  height: 100%;
+}
+
+.left-arrow {
+  left: 0;
+}
+
+.right-arrow {
+  right: 0;
+}
+
+.zone {
+  padding: 10px;
+  border: 1px solid var(--highlight-accent-color);
+  border-radius: #{$border-radius-small};
+  cursor: pointer;
+}
+
+.zone.active {
+  background: #007bff;
+  color: white;
+}
+
+.floating-wrapper {
+  .kebab {
+    width: 25px;
+    height: 25px;
+    position: absolute !important;
+    top: 0px;
+    right: 0px;
+    z-index: 10;
+    cursor: pointer;
+    @include flex-center;
+    background: transparent !important;
+  }
+
+  .kebab-options {
+    position: absolute;
+    top: 18px;
+    right: 5px;
+    transform: translate(0px, 0);
+    overflow: hidden;
+    background: var(--background-color);
+    backdrop-filter: blur(20px);
+    z-index: 10;
+
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    border-radius: #{$border-radius-small};
+
+    box-shadow: var(--box-shadow-medium);
+
+    .icon {
+      width: 25px !important;
+      height: 25px !important;
+      background: transparent;
+    }
+
+    .btn {
+      display: flex;
+      gap: 6px;
+      align-items: center;
+      padding: 5px 10px;
+      color: var(--text-color);
+      cursor: pointer;
+
+      &:hover {
+        .label {
+          color: var(--accent-color);
+        }
+
+        background: var(--highlight-accent-color);
+        width: 100%;
+
+        svg {
+          &:first-child {
+            fill: var(--accent-color);
+          }
+
+          &:last-child {
+            fill: auto;
+            stroke: var(--accent-color);
+          }
+        }
+      }
+    }
+  }
+}
+
+.distance-line {
+  position: absolute;
+  border-style: dashed;
+  border-color: var(--background-color-accent);
+  border-width: 1px;
+  pointer-events: none;
+  z-index: 10000;
+}
+
+/* Label styles for displaying distance values */
+.distance-label {
+  position: absolute;
+  background: var(--background-color-accent);
+  color: var(--text-button-color);
+  font-size: 12px;
+  padding: 2px 6px;
+  border-radius: #{$border-radius-small};
+  white-space: nowrap;
+  transform: translate(-50%, -50%);
+  /* Center the label */
+}
+
+/* Specific styles for each type of line */
+
+/* Top distance line */
+.distance-line.top {
+  border-bottom: none;
+  /* Remove bottom border for a single line */
+  width: 2px;
+  /* Thin vertical line */
+}
+
+.distance-line.top .distance-label {
+  top: -10px;
+  /* Position label above the line */
+  left: 50%;
+  /* Center horizontally */
+}
+
+/* Bottom distance line */
+.distance-line.bottom {
+  border-top: none;
+  /* Remove top border for a single line */
+  width: 2px;
+  /* Thin vertical line */
+}
+
+.distance-line.bottom .distance-label {
+  bottom: -10px;
+  /* Position label below the line */
+  left: 50%;
+  /* Center horizontally */
+}
+
+/* Left distance line */
+.distance-line.left {
+  border-right: none;
+  /* Remove right border for a single line */
+  height: 2px;
+  /* Thin horizontal line */
+}
+
+.distance-line.left .distance-label {
+  left: -10px;
+  /* Position label to the left of the line */
+  top: 50%;
+  /* Center vertically */
+}
+
+/* Right distance line */
+.distance-line.right {
+  border-left: none;
+  /* Remove left border for a single line */
+  height: 2px;
+  /* Thin horizontal line */
+}
+
+.distance-line.right .distance-label {
+  right: -10px;
+  /* Position label to the right of the line */
+  top: 50%;
+  /* Center vertically */
+}
+
+.activeChart {
+  outline: 1px solid var(--highlight-secondary-color);
+  z-index: 2 !important;
+}
+
+.chart-container.notLinked {
+  outline: 1px solid red;
+}
+
+.connectionSuccess {
+  outline-color: #43c06d;
+}
+
+.connectionFails {
+  outline-color: #ffe3e0;
+}
+
+.context-menu-options {
+  position: absolute;
+  background: var(--background-color);
+  backdrop-filter: blur(20px);
+  z-index: 3;
+  display: flex;
+  flex-direction: column;
+  border-radius: #{$border-radius-medium};
+  overflow: hidden;
+  padding: 4px;
+  min-width: 150px;
+  outline: 1px solid var(--border-color);
+
+  .option {
+    padding: 4px 10px;
+    border-radius: #{$border-radius-small};
+    color: var(--text-color);
+    text-wrap: nowrap;
+    cursor: pointer;
+    pointer-events: all;
+
+    &:hover {
+      background: var(--highlight-accent-color);
+      color: var(--accent-color);
+    }
+
+    &:last-child {
+      color: #f65648;
+
+      &:hover {
+        background: #f657484d;
+        color: #f65648;
+      }
+    }
+  }
+}
+
+.panel-content {
+  background: var(--background-color);
+}
+
+/* RIGHT */
+.panel-content.right-opening {
+  animation: rightExpand 0.5s ease-in-out forwards;
+  transform-origin: right;
+}
+
+@keyframes rightExpand {
+  from {
+    transform: scaleX(0);
+  }
+
+  to {
+    transform: scaleX(1);
+  }
+}
+
+.panel-content.right-closing {
+  animation: rightCollapse 0.5s ease-in-out forwards;
+  transform-origin: right;
+}
+
+@keyframes rightCollapse {
+  from {
+    transform: scaleX(1);
+  }
+
+  to {
+    transform: scaleX(0);
+  }
+}
+
+/* LEFT */
+.panel-content.left-opening {
+  animation: leftExpand 0.5s ease-in-out forwards;
+  transform-origin: left;
+}
+
+@keyframes leftExpand {
+  from {
+    transform: scaleX(0);
+  }
+
+  to {
+    transform: scaleX(1);
+  }
+}
+
+.left-closing {
+  animation: leftCollapse 0.5s ease-in-out forwards;
+  transform-origin: left;
+}
+
+@keyframes leftCollapse {
+  from {
+    transform: scaleX(1);
+  }
+
+  to {
+    transform: scaleX(0);
+  }
+}
+
+/* TOP */
+.panel-content.top-opening {
+  animation: topExpand 0.5s ease-in-out forwards;
+  transform-origin: top;
+}
+
+@keyframes topExpand {
+  from {
+    transform: scaleY(0);
+  }
+
+  to {
+    transform: scaleY(1);
+  }
+}
+
+.top-closing {
+  animation: topCollapse 0.5s ease-in-out forwards;
+  transform-origin: top;
+}
+
+@keyframes topCollapse {
+  from {
+    transform: scaleY(1);
+  }
+
+  to {
+    transform: scaleY(0);
+  }
+}
+
+/* BOTTOM */
+.panel-content.bottom-opening {
+  animation: bottomExpand 0.5s ease-in-out forwards;
+  transform-origin: bottom;
+}
+
+@keyframes bottomExpand {
+  from {
+    transform: scaleY(0);
+  }
+
+  to {
+    transform: scaleY(1);
+  }
+}
+
+.bottom-closing {
+  animation: bottomCollapse 0.5s ease-in-out forwards;
+  transform-origin: bottom;
+}
+
+@keyframes bottomCollapse {
+  from {
+    transform: scaleY(1);
+  }
+
+  to {
+    transform: scaleY(0);
+  }
+}
+
+// Add button
+
+.extra-Bs-addopening {
+  animation: slideDown 0.3s ease forwards;
+}
+
+.extra-Bs-addclosing {
+  animation: slideUp 0.3s ease forwards;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: scaleY(0);
+  }
+
+  to {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+
+  to {
+    opacity: 0;
+    transform: scaleY(0);
+  }
+}
+
+@keyframes scaleFadeIn {
+  from {
+    scale: 0;
+    opacity: 0;
+  }
+
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+
+.widget-placeholder {
+  background-color: gray;
+  border-radius: 6px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

app/src/styles/pages/userAuth.scss

@@ -0,0 +1,187 @@
+@use "../abstracts/variables" as *;
+@use "../abstracts/mixins" as *;
+
+.auth-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  color: var(--text-color);
+  height: 100vh;
+  background: var(--background-color);
+  position: relative;
+  z-index: 1;
+
+  .logo-icon {
+    width: 80px;
+    height: 80px;
+    margin-bottom: 20px;
+    @include flex-center;
+  }
+
+  h1 {
+    color: var(--text-color);
+    font-size: 24px;
+    margin-bottom: 10px;
+    font-weight: var(--font-weight-medium);
+  }
+
+  p {
+    font-size: 14px;
+    color: var(--text-color);
+    margin-bottom: 20px;
+
+    .link {
+      color: var(--accent-color);
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .google-login {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    max-width: 350px;
+    padding: 10px;
+    margin-bottom: 20px;
+    border: 1px solid var(--highlight-text-color);
+    border-radius: #{$border-radius-extra-large};
+    background: transparent;
+    color: var(--highlight-text-color);
+    font-size: 14px;
+    outline: none;
+    cursor: pointer;
+
+    .google-icon {
+      color: var(--highlight-text-color);
+      font-weight: bold;
+      font-size: 16px;
+      margin-right: 10px;
+    }
+
+    &:hover {
+      background: var(--background-color);
+    }
+  }
+
+  .error-message {
+    color: #f3453f;
+    font-size: 12px;
+    margin-bottom: 10px;
+  }
+
+  .auth-form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    max-width: 350px;
+
+    input {
+      width: 100%;
+      padding: 10px 18px;
+      margin-bottom: 10px;
+      border: 1px solid var(--border-color);
+      border-radius: #{$border-radius-extra-large};
+      background: var(--background-color);
+      font-size: 14px;
+      color: var(--input-text-color);
+
+      &:focus {
+        border-color: var(--border-color-accent);
+        outline: none;
+      }
+    }
+
+    .password-container {
+      position: relative;
+      width: 100%;
+
+      .toggle-password {
+        @include flex-center;
+        position: absolute;
+        top: 20px;
+        right: 10px;
+        height: 22px;
+        width: 22px;
+        transform: translateY(-50%);
+        background: none;
+        border: none;
+        outline: none;
+        cursor: pointer;
+        font-size: 16px;
+      }
+    }
+
+    .continue-button {
+      width: 100%;
+      padding: 10px;
+      background: var(--background-color-button);
+      color: var(--text-button-color);
+      font-size: 14px;
+      border: none;
+      outline: none;
+      border-radius: #{$border-radius-extra-large};
+      cursor: pointer;
+
+      &:hover {
+        opacity: 0.9;
+      }
+    }
+  }
+
+  .policy-checkbox {
+    @include flex-center;
+    gap: 6px;
+    margin: 18px 0;
+    margin-top: 8px;
+    justify-content: flex-start;
+    width: 100%;
+    padding: 0 6px;
+
+    input {
+      width: 15px;
+      height: 15px;
+      margin: 0;
+      accent-color: var(--accent-color);
+    }
+  }
+
+  .policy {
+    font-size: 12px;
+    margin-top: 20px;
+    text-align: center;
+    line-height: 1.5;
+    width: 320px;
+
+    .link {
+      color: var(--highlight-text-color);
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    &::after {
+      content: "";
+      position: absolute;
+      background: var(--faint-gradient-color);
+      height: 50vh;
+      width: 50vw;
+      top: 50%;
+      left: 50%;
+      opacity: 0.5;
+      transform: translate(-50%, -50%);
+      border-radius: #{$border-radius-circle};
+      filter: blur(200px);
+      z-index: -1;
+    }
+  }
+}

app/src/styles/scene/comments.scss

@@ -0,0 +1,310 @@
+@use "../abstracts/variables" as *;
+@use "../abstracts/mixins" as *;
+
+.comments-main-wrapper {
+  position: relative;
+}
+
+.comments-threads-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 4px;
+  background: var(--background-color);
+  border-radius: #{$border-radius-extra-large} #{$border-radius-extra-large} #{$border-radius-extra-large}
+    0;
+  backdrop-filter: blur(12px);
+  z-index: 1000;
+  transform: translateY(-100%);
+  outline: 1px solid var(--border-color);
+  .comments-threads-container {
+    display: flex;
+    align-items: start;
+    flex-direction: column;
+
+    .users-commented {
+      @include flex-center;
+
+      .users {
+        height: 24px;
+        line-height: 24px;
+        width: 24px;
+        text-transform: uppercase;
+        border-radius: 50%;
+      }
+    }
+
+    .last-comment-details {
+      display: flex;
+      align-items: start;
+      flex-direction: column;
+      overflow: hidden;
+      transition: all 0.2s ease-in;
+      .header {
+        @include flex-center;
+        gap: 10px;
+
+        .user-name {
+          text-transform: capitalize;
+        }
+
+        .time {
+          font-size: var(--font-size-small);
+          color: var(--input-text-color);
+        }
+      }
+
+      .message {
+        margin-top: 10px;
+      }
+
+      .replies {
+        margin-top: 4px;
+        font-size: var(--font-size-small);
+        color: var(--input-text-color);
+      }
+      .header,
+      .message,
+      .replies {
+        display: none;
+        opacity: 0;
+      }
+    }
+
+    .expand {
+      min-width: 200px;
+      max-width: 260px;
+      padding: 12px;
+      padding-top: 0;
+      height: 100%;
+    }
+  }
+
+  .open {
+    .users-commented {
+      padding: 12px;
+    }
+    .header,
+    .message,
+    .replies {
+      display: flex !important;
+      opacity: 1 !important;
+    }
+  }
+}
+
+.thread-chat-wrapper {
+  position: absolute;
+  // remove later
+  top: 50%;
+  left: 50%;
+  // ----
+  z-index: #{$z-index-ui-highest};
+  .thread-chat-container {
+    background: var(--background-color);
+    backdrop-filter: blur(14px);
+    border-radius: #{$border-radius-extra-large};
+    width: 20rem;
+    .header-wrapper {
+      padding: 12px;
+      @include flex-space-between;
+      .header-options {
+        @include flex-center;
+        position: relative;
+        .options-list {
+          position: absolute;
+          bottom: 0;
+          right: 0;
+          transform: translate(-24px, 100%);
+          background: var(--background-color);
+          padding: 8px 4px;
+          border-radius: #{$border-radius-medium};
+          backdrop-filter: blur(10px);
+          z-index: 100;
+          .options {
+            text-wrap: nowrap;
+            padding: 2px 4px;
+            border-radius: #{$border-radius-medium};
+            cursor: pointer;
+            &:hover {
+              color: var(--text-button-color);
+              background: var(--background-color-accent);
+            }
+            &.delete {
+              &:hover {
+                color: var(--log-error-text-color);
+                background: var(--log-error-background-color);
+              }
+            }
+          }
+        }
+        .options-button,
+        .close-button {
+          @include flex-center;
+          height: 24px;
+          width: 24px;
+          border-radius: #{$border-radius-medium};
+          &:hover {
+            background: var(--background-color-solid);
+          }
+        }
+        .close-button {
+          svg {
+            scale: 1.4;
+          }
+        }
+      }
+    }
+    .messages-wrapper {
+      padding: 12px;
+      padding-top: 0;
+      .edit-container {
+        .input-container {
+          textarea{
+            background: var(--background-color);
+            &:focus{
+              outline-color: var(--border-color-accent);
+            }
+          }
+        }
+        .actions-container {
+          @include flex-space-between;
+          width: 100%;
+          margin: 8px 0;
+          .actions {
+            @include flex-center;
+            gap: 4px;
+            .cancel-button,
+            .save-button {
+              padding: 4px 10px;
+              border-radius: #{$border-radius-large};
+              background: var(--background-color-solid);
+              outline: 1px solid var(--border-color);
+            }
+            .save-button {
+              color: var(--text-button-color);
+              background: var(--background-color-accent);
+              outline: none;
+            }
+          }
+        }
+      }
+      .message-container {
+        position: relative;
+        @include flex-space-between;
+        align-items: flex-start;
+        gap: 12px;
+        margin-top: 8px;
+        &:first-child{
+          margin: 0;
+        }
+        .profile {
+          height: 28px;
+          width: 28px;
+          min-width: 28px;
+          text-transform: uppercase;
+          line-height: 28px;
+          text-align: center;
+          border-radius: #{$border-radius-circle};
+        }
+        .content {
+          width: 100%;
+          .user-details {
+            display: flex;
+            align-items: flex-end;
+            gap: 8px;
+            .user-name {
+              text-transform: capitalize;
+            }
+            .time {
+              font-size: var(--font-size-tiny);
+              color: var(--input-text-color);
+            }
+          }
+        }
+        .more-options {
+          position: absolute;
+          right: 0;
+          top: 0;
+          .more-options-button {
+            @include flex-center;
+            height: 18px;
+            width: 18px;
+            border-radius: #{$border-radius-small};
+            &:hover{
+              background: var(--background-color-solid);
+            }
+          }
+          .options-list {
+            position: absolute;
+            right: 0;
+            padding: 3px 6px;
+            background: var(--background-color);
+            backdrop-filter: blur(10px);
+            outline: 1px solid var(--border-color);
+            border-radius: #{$border-radius-medium};
+            z-index: 100;
+            .option {
+              width: 100%;
+              border-radius: #{$border-radius-medium};
+              padding: 2px 6px;
+              text-align: start;
+              &:hover{
+                background: var(--background-color-accent);
+                color: var(--text-button-color);
+              }
+            }
+          }
+        }
+        .message{
+          margin-top: 6px;
+        }
+      }
+    }
+    .send-message-wrapper {
+      padding: 12px;
+      padding-top: 8px;
+      .input-container {
+        position: relative;
+        @include flex-space-between;
+        background: var(--background-color);
+        border-radius: #{$border-radius-extra-large};
+        outline: 1px solid var(--border-color);
+        textarea {
+          background: transparent;
+          outline: none;
+          width: calc(100% - 36px);
+          overflow: hidden;
+          line-height: 28px;
+          max-height: 108px;
+        }
+        .sent-button {
+          position: absolute;
+          right: 2px;
+          bottom: 2px;
+          @include flex-center;
+          padding: 2px;
+          svg {
+            rotate: 45deg;
+          }
+        }
+        .disable-send-btn {
+          filter: saturate(0);
+        }
+        &.active {
+          background: var(--background-color-solid);
+          padding-top: 4px;
+          flex-direction: column;
+          align-items: end;
+          textarea {
+            width: 100%;
+            line-height: 18px;
+          }
+          .sent-button {
+            position: relative;
+          }
+        }
+      }
+    }
+  }
+}

app/src/styles/scene/scene.scss

@@ -0,0 +1,120 @@
+@use "../abstracts/variables" as *;
+@use "../abstracts/mixins" as *;
+
+.distance-text-wrapper,
+.zone-name-wrapper,
+.pointer-none {
+  pointer-events: auto !important;
+  background-color: gray;
+}
+
+.zone-name-wrapper {
+  background: var(--background-color-accent);
+  color: var(--text-button-color);
+  outline: 1px solid var(--border-color);
+  border-radius: #{$border-radius-medium};
+  backdrop-filter: blur(12px);
+}
+
+.distance-text {
+  pointer-events: none !important;
+
+  div {
+    position: absolute;
+    transform: translate(-50%, -50%) scale(0.8);
+    pointer-events: none !important;
+    white-space: nowrap;
+    // style
+    font-size: var(--font-size-large);
+    padding: 2px 8px;
+    background: var(--background-color-accent);
+    color: var(--text-button-color);
+    border-radius: #{$border-radius-medium};
+    box-shadow: var(--box-shadow-light);
+  }
+
+  .area {
+    background: #008cff;
+  }
+}
+
+.zone-name {
+  padding: 2px 10px;
+  text-wrap: nowrap;
+  color: var(--text-button-color);
+}
+
+//
+//
+//
+//
+// ------------------------------- temp -----------------------------
+.select-floorplane-wrapper {
+  position: absolute;
+  @include flex-center;
+  gap: 12px;
+  top: 0;
+  left: 50%;
+  padding: 8px;
+  padding-left: 14px;
+  background: var(--background-color);
+  backdrop-filter: blur(12px);
+  border-radius: #{$border-radius-large};
+  outline: 1px solid var(--border-color);
+  transform: translate(-50%, 12px);
+  z-index: 2;
+
+  .presets-container {
+    @include flex-center;
+    gap: 6px;
+
+    .preset {
+      background: var(--background-color);
+      padding: 2px 8px;
+      border-radius: #{$border-radius-large};
+      outline: 1px solid var(--border-color);
+    }
+    .upload-btn{
+      padding: 4px 16px !important;
+    }
+    .generate-walls-btn{
+      padding: 4px 16px;
+      @include flex-center;
+      gap: 4px;
+      color: var(--text-button-color);
+      background: var(--background-color-button);
+      border-radius: #{$border-radius-extra-large};
+    }
+    .active {
+      background: var(--background-color-accent);
+      color: var(--text-button-color);
+    }
+  }
+}
+
+.label-toogler {
+  position: fixed;
+  bottom: 4%;
+  right: 1.5%;
+  z-index: 10;
+  border-radius: 8px;
+
+  .input-toggle-container {
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: end;
+    gap: 12px;
+
+    .check-box {
+      width: 35px;
+      height: 20px;
+
+      .check-box-style {
+        width: 16px;
+        height: 16px;
+        background: var(--text-button-color) !important;
+      }
+    }
+  }
+}