diff --git a/package-lock.json b/package-lock.json
index bba4f14..a2a225c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,11 +16,15 @@
         "@types/node": "^16.18.126",
         "@types/react": "^19.2.2",
         "@types/react-dom": "^19.2.2",
+        "clsx": "^2.1.1",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
         "react-scripts": "5.0.1",
         "typescript": "^4.9.5",
         "web-vitals": "^2.1.4"
+      },
+      "devDependencies": {
+        "sass": "^1.93.2"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -3019,6 +3023,316 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@parcel/watcher": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
+      "integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^1.0.3",
+        "is-glob": "^4.0.3",
+        "micromatch": "^4.0.5",
+        "node-addon-api": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher-android-arm64": "2.5.1",
+        "@parcel/watcher-darwin-arm64": "2.5.1",
+        "@parcel/watcher-darwin-x64": "2.5.1",
+        "@parcel/watcher-freebsd-x64": "2.5.1",
+        "@parcel/watcher-linux-arm-glibc": "2.5.1",
+        "@parcel/watcher-linux-arm-musl": "2.5.1",
+        "@parcel/watcher-linux-arm64-glibc": "2.5.1",
+        "@parcel/watcher-linux-arm64-musl": "2.5.1",
+        "@parcel/watcher-linux-x64-glibc": "2.5.1",
+        "@parcel/watcher-linux-x64-musl": "2.5.1",
+        "@parcel/watcher-win32-arm64": "2.5.1",
+        "@parcel/watcher-win32-ia32": "2.5.1",
+        "@parcel/watcher-win32-x64": "2.5.1"
+      }
+    },
+    "node_modules/@parcel/watcher-android-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz",
+      "integrity": "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz",
+      "integrity": "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.1.tgz",
+      "integrity": "sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-freebsd-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.1.tgz",
+      "integrity": "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.1.tgz",
+      "integrity": "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.1.tgz",
+      "integrity": "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.1.tgz",
+      "integrity": "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.1.tgz",
+      "integrity": "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.1.tgz",
+      "integrity": "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.1.tgz",
+      "integrity": "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.1.tgz",
+      "integrity": "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-ia32": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.1.tgz",
+      "integrity": "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz",
+      "integrity": "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -5678,6 +5992,15 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -6621,6 +6944,20 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+      "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "bin": {
+        "detect-libc": "bin/detect-libc.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/detect-newline": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
@@ -9211,6 +9548,13 @@
         "url": "https://opencollective.com/immer"
       }
     },
+    "node_modules/immutable": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.4.tgz",
+      "integrity": "sha512-p6u1bG3YSnINT5RQmx/yRZBpenIl30kVxkTLDyHLIMk0gict704Q9n+thfDI7lTRm9vXdDYutVzXhzcThxTnXA==",
+      "devOptional": true,
+      "license": "MIT"
+    },
     "node_modules/import-fresh": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -11614,6 +11958,14 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/node-forge": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
@@ -14522,6 +14874,27 @@
       "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA==",
       "license": "CC0-1.0"
     },
+    "node_modules/sass": {
+      "version": "1.93.2",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.93.2.tgz",
+      "integrity": "sha512-t+YPtOQHpGW1QWsh1CHQ5cPIr9lbbGZLZnbihP/D/qZj/yuV68m8qarcV17nvkOX81BCrvzAlq2klCQFZghyTg==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^4.0.0",
+        "immutable": "^5.0.2",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher": "^2.4.1"
+      }
+    },
     "node_modules/sass-loader": {
       "version": "12.6.0",
       "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
@@ -14560,6 +14933,36 @@
         }
       }
     },
+    "node_modules/sass/node_modules/chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/sass/node_modules/readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "devOptional": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
diff --git a/package.json b/package.json
index 4b8db03..b80a350 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "@types/node": "^16.18.126",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
+    "clsx": "^2.1.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-scripts": "5.0.1",
@@ -40,5 +41,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "sass": "^1.93.2"
   }
 }
diff --git a/src/App.tsx b/src/App.tsx
index a53698a..4765be0 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,26 +1,8 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import SceneView from "./pages/SceneView";
+import "./styles/main.scss";
 
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+    return <SceneView />;
 }
 
 export default App;
diff --git a/src/components/outlinePanel/OutlineList .tsx b/src/components/outlinePanel/OutlineList .tsx
new file mode 100644
index 0000000..934774a
--- /dev/null
+++ b/src/components/outlinePanel/OutlineList .tsx	
@@ -0,0 +1,487 @@
+import React, { useState } from "react";
+import {
+    AddIcon,
+    ChevronIcon,
+    CollapseAllIcon,
+    CubeIcon,
+    EyeIcon,
+    FocusIcon,
+    FolderIcon,
+    KebebIcon,
+    LockIcon,
+} from "../../icons/ExportIcons";
+import { OutlinePanelProps } from "./OutlinePanel";
+import clsx from "clsx";
+
+interface AssetGroupChild {
+    groupUuid?: string;
+    groupName?: string;
+    isExpanded?: boolean;
+    children?: AssetGroupChild[];
+    modelUuid?: string;
+    modelName?: string;
+    isVisible?: boolean;
+    isLocked?: boolean;
+}
+
+interface TreeNodeProps {
+    item: AssetGroupChild;
+    level?: number;
+    textColor?: string;
+    eyeIconColor?: string;
+    lockIconColor?: string;
+    onDragStart: (item: AssetGroupChild) => void;
+    onDrop: (item: AssetGroupChild, parent: AssetGroupChild | null, e: any) => void;
+    draggingItem: AssetGroupChild | null;
+    selectedObject: string | null;
+    onDragOver: (item: AssetGroupChild, parent: AssetGroupChild | null, e: React.DragEvent) => void;
+    setSelectedObject: React.Dispatch<React.SetStateAction<string | null>>;
+}
+
+type DropAction = "above" | "child" | "below" | "none";
+
+const DEFAULT_PRAMS = {
+    backgroundColor: "linear-gradient(to bottom, #1e1e2f, #12121a)",
+    panelSide: "left",
+    textColor: "linear-gradient(to bottom, rgba(231, 231, 255, 1), #cacad6ff)",
+    addIconColor: "white",
+    lockIconColor: "white",
+    eyeIconColor: "white",
+};
+
+const TreeNode: React.FC<TreeNodeProps> = ({
+    item,
+    level = 0,
+    textColor,
+    eyeIconColor,
+    lockIconColor,
+    onDragStart,
+    onDrop,
+    draggingItem,
+    setSelectedObject,
+    selectedObject,
+    onDragOver,
+}) => {
+    const isGroupNode =
+        Array.isArray(item.children) && item.children.length > 0 ? item.children : false;
+    const [isExpanded, setIsExpanded] = useState(item.isExpanded || false);
+    const [isVisible, setIsVisible] = useState(item.isVisible ?? true);
+    const [isLocked, setIsLocked] = useState(item.isLocked ?? false);
+    const [isEditing, setIsEditing] = useState(false);
+    const [name, setName] = useState(isGroupNode ? item.groupName : item.modelName);
+
+    const handleDragStart = (e: React.DragEvent) => {
+        e.stopPropagation();
+        onDragStart(item);
+    };
+
+    const handleDragOver = (e: React.DragEvent) => {
+        e.preventDefault();
+        onDragOver(item, draggingItem, e);
+    };
+
+    const handleDrop = (e: React.DragEvent) => {
+        e.preventDefault();
+        onDrop(item, draggingItem, e);
+    };
+
+    const isBeingDragged =
+        draggingItem?.groupUuid === item.groupUuid || draggingItem?.modelUuid === item.modelUuid;
+
+    const handleDoubleClick = () => {
+        setIsEditing(true);
+    };
+
+    const handleBlur = () => {
+        setIsEditing(false);
+    };
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === "Enter") {
+            setIsEditing(false);
+        }
+    };
+
+    // Toggle selection (used by mouse click, keyboard and touch)
+    const toggleSelect = () => {
+        const currentId = item.modelUuid || item.groupUuid || null;
+        setSelectedObject((prev) => (prev === currentId ? null : currentId));
+    };
+
+    const handleDivKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+        // support Enter and Space for accessibility
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            toggleSelect();
+        }
+    };
+
+    const handleTouchStart = () => {
+        toggleSelect();
+    };
+
+    return (
+        <div className="tree-node">
+            <div
+                tabIndex={0}
+                onKeyDown={handleDivKeyDown}
+                onTouchStart={handleTouchStart}
+                className={clsx("tree-node-content", {
+                    "group-node": isGroupNode,
+                    "asset-node": !isGroupNode,
+                    selected: selectedObject === item.modelUuid,
+                    locked: isLocked,
+                    hidden: !isVisible,
+                    dragging: isBeingDragged,
+                })}
+                draggable
+                onDragStart={handleDragStart}
+                onDragOver={handleDragOver}
+                onDrop={handleDrop}
+                id={item.modelUuid || item.groupUuid}
+                onClick={toggleSelect}
+            >
+                <div className="node-wrapper" style={{ paddingLeft: `${level * 25 + 8}px` }}>
+                    {isGroupNode && (
+                        <button
+                            className="expand-button"
+                            onClick={(e) => {
+                                e.stopPropagation(); // prevent triggering selection
+                                setIsExpanded(!isExpanded);
+                            }}
+                        >
+                            <ChevronIcon isOpen={isExpanded} />
+                        </button>
+                    )}
+
+                    <div className="node-icon">
+                        {isGroupNode ? <FolderIcon isOpen={isExpanded} /> : <CubeIcon />}
+                    </div>
+
+                    <div className="rename-input" onDoubleClick={handleDoubleClick}>
+                        {isEditing ? (
+                            <input
+                                autoFocus
+                                value={name}
+                                className="renaming"
+                                style={{ color: textColor }}
+                                onChange={(e) => setName(e.target.value)}
+                                onBlur={handleBlur}
+                                onKeyDown={handleKeyDown}
+                            />
+                        ) : (
+                            <span
+                                className="rename-input"
+                                style={{ color: textColor || DEFAULT_PRAMS.textColor }}
+                            >
+                                {name}
+                            </span>
+                        )}
+                    </div>
+
+                    <div className="node-controls">
+                        <button
+                            className="control-button"
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                setIsVisible(!isVisible);
+                            }}
+                        >
+                            <EyeIcon
+                                isClosed={!isVisible}
+                                color={eyeIconColor || DEFAULT_PRAMS.eyeIconColor}
+                            />
+                        </button>
+                        {isGroupNode && item.children?.length ? (
+                            <button className="control-button">
+                                <FocusIcon />
+                            </button>
+                        ) : null}
+                        <button
+                            className="control-button"
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                setIsLocked(!isLocked);
+                            }}
+                        >
+                            <LockIcon
+                                isLocked={isLocked}
+                                color={lockIconColor || DEFAULT_PRAMS.lockIconColor}
+                            />
+                        </button>
+                        {isGroupNode ? (
+                            <button className="control-button">
+                                <KebebIcon />
+                            </button>
+                        ) : null}
+                    </div>
+                </div>
+            </div>
+            {isExpanded && item.children?.length ? (
+                <div className="tree-children">
+                    {item.children.map((child) => (
+                        <TreeNode
+                            key={child.groupUuid || child.modelUuid}
+                            item={child}
+                            level={level + 1}
+                            onDragStart={onDragStart}
+                            onDrop={onDrop}
+                            draggingItem={draggingItem}
+                            selectedObject={selectedObject}
+                            setSelectedObject={setSelectedObject}
+                            onDragOver={onDragOver}
+                        />
+                    ))}
+                </div>
+            ) : null}
+        </div>
+    );
+};
+
+export const OutlineList: React.FC<OutlinePanelProps> = ({
+    backgroundColor = "linear-gradient(to bottom, #1e1e2f, #12121a)",
+    panelSide = "left",
+    textColor = "linear-gradient(to bottom, rgba(231, 231, 255, 1), #cacad6ff)",
+    addIconColor,
+    lockIconColor,
+    eyeIconColor,
+}) => {
+    const [selectedObject, setSelectedObject] = useState<string | null>(null); // store UUID
+
+    const [isOpen, setIsOpen] = useState(true);
+    const [draggingItem, setDraggingItem] = useState<AssetGroupChild | null>(null);
+    const [groupHierarchy, setGroupHierarchy] = useState<AssetGroupChild[]>([
+        { modelUuid: "a1", modelName: "Asset 1", isVisible: true, isLocked: false, children: [] },
+        { modelUuid: "a2", modelName: "Asset 2", isVisible: true, isLocked: false, children: [] },
+        { modelUuid: "a3", modelName: "Asset 3", isVisible: true, isLocked: false, children: [] },
+        { modelUuid: "a4", modelName: "Asset 4", isVisible: true, isLocked: false, children: [] },
+        { modelUuid: "a5", modelName: "Asset 5", isVisible: true, isLocked: false, children: [] },
+        { modelUuid: "a6", modelName: "Asset 6", isVisible: true, isLocked: false, children: [] },
+    ]);
+
+    const handleDragStart = (item: AssetGroupChild) => {
+        setDraggingItem(item); // Set the dragged item when dragging starts
+    };
+
+    const handleDrop = (
+        targetItem: AssetGroupChild,
+        draggedItem: AssetGroupChild | null,
+        event: DragEvent | React.DragEvent
+    ) => {
+        if (!draggedItem) return;
+
+        const targetId = targetItem.modelUuid;
+        if (!targetId) return;
+
+        const hoveredDiv = document.getElementById(targetId);
+        if (!hoveredDiv) return;
+
+        // Calculate drop position
+        const rect = hoveredDiv.getBoundingClientRect();
+        const parentScrollTop = hoveredDiv.parentElement?.scrollTop || 0;
+        const y = (event as any).clientY - (rect.top + parentScrollTop);
+
+        // Determine drop action
+        const action = getDropAction(y);
+        if (action === "none") {
+            hoveredDiv.style.borderTop = "none";
+            hoveredDiv.style.borderBottom = "none";
+            hoveredDiv.style.outline = "none";
+            hoveredDiv.style.border = "none";
+            setDraggingItem(null);
+            return;
+        }
+
+        // Update hierarchy
+        const updatedHierarchy = [...groupHierarchy];
+
+        if (!removeItemFromHierarchy(draggedItem, updatedHierarchy)) {
+            return;
+        }
+
+        if (!insertItemByAction(draggedItem, targetId, action, updatedHierarchy)) {
+            updatedHierarchy.push(draggedItem);
+        }
+
+        // Commit changes
+        setGroupHierarchy(updatedHierarchy);
+        setDraggingItem(null);
+        hoveredDiv.style.borderTop = "none";
+        hoveredDiv.style.borderBottom = "none";
+        hoveredDiv.style.outline = "none";
+        hoveredDiv.style.border = "none";
+    };
+
+    const getDropAction = (y: number): DropAction => {
+        if (y >= 0 && y < 7) return "above";
+        if (y >= 7 && y < 19) return "child";
+        if (y >= 19 && y < 32) return "below";
+        return "none";
+    };
+
+    const removeItemFromHierarchy = (
+        item: AssetGroupChild,
+        hierarchy: AssetGroupChild[]
+    ): boolean => {
+        for (let i = 0; i < hierarchy.length; i++) {
+            const current = hierarchy[i];
+            if (current.modelUuid === item.modelUuid) {
+                hierarchy.splice(i, 1);
+                return true;
+            }
+            if (current.children?.length) {
+                const removed = removeItemFromHierarchy(item, current.children);
+                if (removed) return true;
+            }
+        }
+        return false;
+    };
+
+    const insertItemByAction = (
+        item: AssetGroupChild,
+        targetId: string,
+        action: DropAction,
+        hierarchy: AssetGroupChild[]
+    ): boolean => {
+        switch (action) {
+            case "above":
+                return insertAsSibling(item, targetId, hierarchy, 0);
+            case "below":
+                return insertAsSibling(item, targetId, hierarchy, 1);
+            case "child":
+                return addAsChild(targetId, item, hierarchy);
+            default:
+                return false;
+        }
+    };
+
+    const insertAsSibling = (
+        item: AssetGroupChild,
+        targetId: string,
+        hierarchy: AssetGroupChild[],
+        offset: number // 0 for above, 1 for below
+    ): boolean => {
+        for (let i = 0; i < hierarchy.length; i++) {
+            if (hierarchy[i].modelUuid === targetId) {
+                hierarchy.splice(i + offset, 0, item);
+                return true;
+            }
+            if (hierarchy[i].children?.length) {
+                const inserted = insertAsSibling(item, targetId, hierarchy[i].children!, offset);
+                if (inserted) return true;
+            }
+        }
+        return false;
+    };
+
+    const addAsChild = (
+        parentId: string,
+        childItem: AssetGroupChild,
+        hierarchy: AssetGroupChild[]
+    ): boolean => {
+        for (let i = 0; i < hierarchy.length; i++) {
+            if (hierarchy[i].modelUuid === parentId) {
+                if (!hierarchy[i].children) hierarchy[i].children = [];
+                hierarchy[i].children!.push(childItem);
+                return true;
+            }
+            if (hierarchy[i].children?.length) {
+                const added = addAsChild(parentId, childItem, hierarchy[i].children!);
+                if (added) return true;
+            }
+        }
+        return false;
+    };
+
+    const handleDragOver = (
+        targetItem: AssetGroupChild,
+        draggedItem: AssetGroupChild | null,
+        event: DragEvent | React.DragEvent
+    ) => {
+        event.preventDefault();
+        const targetId = targetItem?.modelUuid || targetItem?.groupUuid;
+        if (!targetId) return;
+
+        const hoveredDiv = document.getElementById(targetId);
+        if (!hoveredDiv) return;
+
+        // Remove previous outlines before applying new one
+        hoveredDiv.style.outline = "none";
+        hoveredDiv.style.borderTop = "none";
+        hoveredDiv.style.borderBottom = "none";
+
+        const rect = hoveredDiv.getBoundingClientRect();
+        const y = (event as any).clientY - rect.top;
+
+        // Determine where the user is hovering
+        if (y >= 0 && y < 7) {
+            // Top region
+            console.log("Top: ");
+
+            hoveredDiv.style.borderTop = "2px solid purple";
+            return "above";
+        } else if (y >= 19 && y < 32) {
+            // Bottom region
+            console.log("Bottom: ");
+            hoveredDiv.style.borderBottom = "2px solid purple";
+            return "below";
+        } else {
+            // Middle region (child)
+            console.log("Middle: ");
+            hoveredDiv.style.outline = "2px solid #b188ff";
+            return "child";
+        }
+    };
+
+    return (
+        <div
+            className="outline-overlay"
+            style={{
+                justifyContent: panelSide === "left" ? "flex-start" : "flex-end",
+            }}
+        >
+            <div
+                className="outline-card"
+                style={{
+                    background: backgroundColor || DEFAULT_PRAMS.backgroundColor,
+                }}
+            >
+                <div className="outline-header">
+                    <div className="header-title">
+                        <p>Outline</p>
+                    </div>
+                    <div className="outline-toolbar">
+                        <button className="toolbar-button">
+                            <AddIcon color={addIconColor || DEFAULT_PRAMS.addIconColor} />
+                        </button>
+                        <button className="toolbar-button">
+                            <CollapseAllIcon />
+                        </button>
+                        <button className="close-button" onClick={() => setIsOpen(!isOpen)}>
+                            <ChevronIcon isOpen={isOpen} />
+                        </button>
+                    </div>
+                </div>
+
+                {isOpen && (
+                    <div className="outline-content">
+                        {groupHierarchy.map((item) => (
+                            <TreeNode
+                                key={item.groupUuid || item.modelUuid}
+                                item={item}
+                                textColor={textColor}
+                                eyeIconColor={eyeIconColor}
+                                lockIconColor={lockIconColor}
+                                onDragStart={handleDragStart}
+                                onDrop={handleDrop}
+                                onDragOver={handleDragOver}
+                                draggingItem={draggingItem}
+                                selectedObject={selectedObject} // pass UUID
+                                setSelectedObject={setSelectedObject} // pass setter
+                            />
+                        ))}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
diff --git a/src/components/outlinePanel/OutlinePanel.tsx b/src/components/outlinePanel/OutlinePanel.tsx
new file mode 100644
index 0000000..5de1e82
--- /dev/null
+++ b/src/components/outlinePanel/OutlinePanel.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import { OutlineList } from "./OutlineList ";
+
+export interface OutlinePanelProps {
+    textColor?: string;
+    panelSide?: "left" | "right";
+    backgroundColor?: string;
+    addIconColor?: string;
+    eyeIconColor?: string;
+    lockIconColor?: string;
+}
+
+const OutlinePanel: React.FC<OutlinePanelProps> = (props) => {
+    return <OutlineList {...props} />;
+};
+
+export default OutlinePanel;
diff --git a/src/icons/ExportIcons.tsx b/src/icons/ExportIcons.tsx
new file mode 100644
index 0000000..64d5283
--- /dev/null
+++ b/src/icons/ExportIcons.tsx
@@ -0,0 +1,1742 @@
+export function SearchIcon() {
+    return (
+        <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M17.682 17.3859C17.8951 17.5615 18.2102 17.5311 18.3859 17.318C18.5615 17.1049 18.5311 16.7898 18.318 16.6141L17.682 17.3859ZM15.2256 10.8149C15.2256 13.1933 13.277 15.1298 10.8628 15.1298V16.1298C13.8199 16.1298 16.2256 13.7549 16.2256 10.8149H15.2256ZM10.8628 15.1298C8.44862 15.1298 6.5 13.1933 6.5 10.8149H5.5C5.5 13.7549 7.9057 16.1298 10.8628 16.1298V15.1298ZM6.5 10.8149C6.5 8.4365 8.44862 6.5 10.8628 6.5V5.5C7.9057 5.5 5.5 7.87489 5.5 10.8149H6.5ZM10.8628 6.5C13.277 6.5 15.2256 8.4365 15.2256 10.8149H16.2256C16.2256 7.87489 13.8199 5.5 10.8628 5.5V6.5ZM14.1274 14.4565L17.682 17.3859L18.318 16.6141L14.7634 13.6848L14.1274 14.4565Z"
+                fill="white"
+            />
+        </svg>
+    );
+}
+
+export function ArrowIcon() {
+    return (
+        <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path d="M4 5L6.5 7.51615L9 5L4 5Z" fill="white" />
+        </svg>
+    );
+}
+
+export function FocusIcon() {
+    return (
+        <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M7.31999 1.56H9.89999C10.0325 1.56 10.14 1.66745 10.14 1.8V4.14M10.14 7.5V9.9C10.14 10.0325 10.0325 10.14 9.89999 10.14H7.31999M4.55999 10.14H1.91999C1.78744 10.14 1.67999 10.0325 1.67999 9.9V7.5M1.67999 4.14V1.8C1.67999 1.66745 1.78744 1.56 1.91999 1.56H4.55999"
+                stroke="white"
+                strokeLinecap="round"
+            />
+            <circle cx="6" cy="5.87999" r="0.95" stroke="white" strokeWidth="0.5" />
+        </svg>
+    );
+}
+
+export function KebebIcon() {
+    return (
+        <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <circle cx="6" cy="3" r="1" fill="white" />
+            <circle cx="6" cy="6" r="1" fill="white" />
+            <circle cx="6" cy="9" r="1" fill="white" />
+        </svg>
+    );
+}
+interface IconProps {
+    color?: string;
+    size?: number; // optional for width/height
+    isClosed?: boolean;
+    isLocked?: boolean;
+}
+
+export function AddIcon({ color = "white", size = 12 }: IconProps) {
+    return (
+        <svg
+            width={size}
+            height={size}
+            viewBox="0 0 12 12"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M6 2L6 10M2 6H10"
+                stroke={color} // use the prop
+                strokeWidth="0.705882"
+                strokeLinecap="round"
+            />
+        </svg>
+    );
+}
+
+export function EyeIcon({ color = "white", isClosed }: IconProps) {
+    return isClosed ? (
+        <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <g clipPath="url(#clip0_889_1582)">
+                <path
+                    d="M1.52462 4.65539C1.50864 4.60647 1.5 4.55424 1.5 4.5C1.5 4.22386 1.72386 4 2 4C2.22985 4 2.42348 4.1551 2.48194 4.36634C3.52484 7.8593 8.4728 7.8601 9.5174 4.36868C9.5751 4.15624 9.7693 4 10 4C10.2761 4 10.5 4.22386 10.5 4.5C10.5 4.5534 10.4916 4.60485 10.4761 4.6531C10.2758 5.3241 9.96205 5.8938 9.56935 6.3622L10.2072 7C10.4024 7.19525 10.4024 7.51185 10.2072 7.7071C10.0119 7.90235 9.6953 7.90235 9.50005 7.7071L8.84435 7.0514C8.48725 7.3213 8.0956 7.53275 7.6843 7.6858L7.8632 8.35355C7.9347 8.6203 7.7764 8.89445 7.50965 8.9659C7.2429 9.0374 6.96875 8.8791 6.8973 8.61235L6.71555 7.9341C6.2418 8.0042 5.7582 8.0042 5.28445 7.9341L5.1027 8.61235C5.03125 8.8791 4.75708 9.0374 4.49035 8.9659C4.22361 8.89445 4.06533 8.6203 4.1368 8.35355L4.31572 7.6858C3.90446 7.53275 3.5128 7.3213 3.15573 7.05145L2.50009 7.7071C2.30482 7.90235 1.98824 7.90235 1.79298 7.7071C1.59771 7.51185 1.59771 7.19525 1.79298 7L2.43074 6.36225C2.03845 5.89435 1.72505 5.3254 1.52462 4.65539Z"
+                    fill={color}
+                />
+            </g>
+            <defs>
+                <clipPath id="clip0_889_1582">
+                    <rect width="12" height="12" fill={color} />
+                </clipPath>
+            </defs>
+        </svg>
+    ) : (
+        <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M7.50035 6C7.50035 6.82845 6.8288 7.5 6.00035 7.5C5.17195 7.5 4.50036 6.82845 4.50036 6C4.50036 5.17155 5.17195 4.5 6.00035 4.5C6.8288 4.5 7.50035 5.17155 7.50035 6Z"
+                stroke={color}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M6.0006 2.5C3.76177 2.5 1.86663 3.97144 1.22949 6C1.86662 8.02855 3.76177 9.5 6.0006 9.5C8.2394 9.5 10.1345 8.02855 10.7717 6C10.1345 3.97146 8.2394 2.5 6.0006 2.5Z"
+                stroke={color}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </svg>
+    );
+}
+
+export function LockIcon({ color = "white", isLocked }: IconProps) {
+    return isLocked ? (
+        <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M3.5 5.0144C3.73571 5 4.0263 5 4.4 5H7.6C7.9737 5 8.2643 5 8.5 5.0144M3.5 5.0144C3.20584 5.03235 2.99715 5.07275 2.81902 5.1635C2.53677 5.3073 2.3073 5.53675 2.16349 5.819C2 6.1399 2 6.5599 2 7.4V8.1C2 8.9401 2 9.3601 2.16349 9.681C2.3073 9.96325 2.53677 10.1927 2.81902 10.3365C3.13988 10.5 3.55992 10.5 4.4 10.5H7.6C8.4401 10.5 8.8601 10.5 9.181 10.3365C9.46325 10.1927 9.6927 9.96325 9.8365 9.681C10 9.3601 10 8.9401 10 8.1V7.4C10 6.5599 10 6.1399 9.8365 5.819C9.6927 5.53675 9.46325 5.3073 9.181 5.1635C9.00285 5.07275 8.79415 5.03235 8.5 5.0144M3.5 5.0144V4C3.5 2.61929 4.61929 1.5 6 1.5C7.3807 1.5 8.5 2.61929 8.5 4V5.0144"
+                stroke={color}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </svg>
+    ) : (
+        <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M8.292 3C7.9062 2.11705 7.02515 1.5 6 1.5C4.61929 1.5 3.5 2.61929 3.5 4V5.0144M3.5 5.0144C3.73571 5 4.0263 5 4.4 5H7.6C8.4401 5 8.8601 5 9.181 5.1635C9.46325 5.3073 9.6927 5.53675 9.8365 5.819C10 6.1399 10 6.5599 10 7.4V8.1C10 8.9401 10 9.3601 9.8365 9.681C9.6927 9.96325 9.46325 10.1927 9.181 10.3365C8.8601 10.5 8.4401 10.5 7.6 10.5H4.4C3.55992 10.5 3.13988 10.5 2.81902 10.3365C2.53677 10.1927 2.3073 9.96325 2.16349 9.681C2 9.3601 2 8.9401 2 8.1V7.4C2 6.5599 2 6.1399 2.16349 5.819C2.3073 5.53675 2.53677 5.3073 2.81902 5.1635C2.99715 5.07275 3.20584 5.03235 3.5 5.0144Z"
+                stroke={color}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </svg>
+    );
+}
+export function CloseIcon() {
+    return (
+        <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path d="M3.87868 8.62132L8.12132 4.37868" stroke="white" strokeLinecap="round" />
+            <path d="M3.87866 4.37868L8.1213 8.62132" stroke="white" strokeLinecap="round" />
+        </svg>
+    );
+}
+
+export function SettingsIcon() {
+    return (
+        <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <g clipPath="url(#clip0_111_481)">
+                <path
+                    d="M6 7.5C6.82843 7.5 7.5 6.82843 7.5 6C7.5 5.17157 6.82843 4.5 6 4.5C5.17157 4.5 4.5 5.17157 4.5 6C4.5 6.82843 5.17157 7.5 6 7.5Z"
+                    stroke="white"
+                />
+                <path
+                    d="M6.8827 1.07612C6.6989 1 6.46595 1 6 1C5.53405 1 5.3011 1 5.1173 1.07612C4.87228 1.17761 4.67761 1.37229 4.57611 1.61731C4.52978 1.72917 4.51165 1.85925 4.50455 2.04899C4.49413 2.32784 4.35113 2.58594 4.10947 2.72546C3.86782 2.86498 3.57279 2.85977 3.32609 2.72938C3.15822 2.64065 3.0365 2.59131 2.91647 2.57551C2.65352 2.54089 2.38759 2.61214 2.17718 2.7736C2.01937 2.89469 1.90288 3.09645 1.66991 3.49996C1.43694 3.90348 1.32046 4.10524 1.29449 4.30245C1.25988 4.5654 1.33113 4.83133 1.49259 5.04175C1.56628 5.1378 1.66985 5.2185 1.83059 5.3195C2.0669 5.468 2.21894 5.72095 2.21893 6C2.21891 6.27905 2.06687 6.53195 1.83059 6.6804C1.66982 6.78145 1.56624 6.8622 1.49254 6.95825C1.33108 7.16865 1.25983 7.43455 1.29445 7.6975C1.32041 7.8947 1.43689 8.0965 1.66986 8.5C1.90284 8.9035 2.01932 9.1053 2.17713 9.22635C2.38754 9.3878 2.65347 9.45905 2.91642 9.42445C3.03644 9.40865 3.15816 9.3593 3.32602 9.2706C3.57273 9.1402 3.86778 9.135 4.10945 9.2745C4.35112 9.41405 4.49413 9.67215 4.50455 9.95105C4.51165 10.1407 4.52978 10.2708 4.57611 10.3827C4.67761 10.6277 4.87228 10.8224 5.1173 10.9239C5.3011 11 5.53405 11 6 11C6.46595 11 6.6989 11 6.8827 10.9239C7.1277 10.8224 7.3224 10.6277 7.42385 10.3827C7.4702 10.2708 7.48835 10.1407 7.49545 9.951C7.50585 9.67215 7.64885 9.41405 7.8905 9.2745C8.13215 9.13495 8.4272 9.1402 8.67395 9.2706C8.8418 9.3593 8.9635 9.4086 9.0835 9.4244C9.34645 9.45905 9.6124 9.3878 9.8228 9.22635C9.9806 9.10525 10.0971 8.9035 10.33 8.49995C10.563 8.09645 10.6795 7.8947 10.7055 7.6975C10.7401 7.43455 10.6688 7.1686 10.5074 6.9582C10.4337 6.86215 10.3301 6.7814 10.1693 6.6804C9.9331 6.53195 9.78105 6.279 9.78105 5.99995C9.78105 5.7209 9.9331 5.46805 10.1693 5.3196C10.3301 5.21855 10.4337 5.13785 10.5074 5.04175C10.6689 4.83136 10.7401 4.56543 10.7055 4.30248C10.6796 4.10527 10.5631 3.90351 10.3301 3.5C10.0971 3.09648 9.98065 2.89472 9.82285 2.77363C9.61245 2.61218 9.3465 2.54092 9.08355 2.57554C8.96355 2.59134 8.84185 2.64068 8.67395 2.7294C8.42725 2.85979 8.1322 2.86501 7.89055 2.72548C7.64885 2.58595 7.50585 2.32783 7.49545 2.04897C7.48835 1.85924 7.4702 1.72916 7.42385 1.61731C7.3224 1.37229 7.1277 1.17761 6.8827 1.07612Z"
+                    stroke="white"
+                />
+            </g>
+            <defs>
+                <clipPath id="clip0_111_481">
+                    <rect width="12" height="12" fill="white" />
+                </clipPath>
+            </defs>
+        </svg>
+    );
+}
+
+export function HelpIcon() {
+    return (
+        <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <g clipPath="url(#clip0_111_484)">
+                <path
+                    d="M6 12C2.6862 12 0 9.3138 0 6C0 2.6862 2.6862 0 6 0C9.3138 0 12 2.6862 12 6C12 9.3138 9.3138 12 6 12ZM3.552 4.3404V4.4016C3.552 4.48117 3.58361 4.55747 3.63987 4.61373C3.69613 4.66999 3.77244 4.7016 3.852 4.7016H4.4502C4.48952 4.7016 4.52845 4.69386 4.56478 4.67881C4.6011 4.66376 4.63411 4.64171 4.66191 4.61391C4.68971 4.58611 4.71176 4.5531 4.72681 4.51678C4.74186 4.48045 4.7496 4.44152 4.7496 4.4022C4.7496 3.6282 5.3484 3.2148 6.1536 3.2148C6.9384 3.2148 7.4544 3.6282 7.4544 4.2168C7.4544 4.7736 7.1652 5.0322 6.4428 5.3628L6.2364 5.4552C5.6274 5.724 5.4 6.126 5.4 6.8286V6.9C5.4 6.97957 5.43161 7.05587 5.48787 7.11213C5.54413 7.16839 5.62044 7.2 5.7 7.2H6.2982C6.33752 7.2 6.37645 7.19226 6.41278 7.17721C6.4491 7.16216 6.48211 7.14011 6.50991 7.11231C6.53771 7.08451 6.55976 7.0515 6.57481 7.01518C6.58986 6.97885 6.5976 6.93992 6.5976 6.9006C6.5976 6.591 6.6804 6.4668 6.9276 6.3534L7.1346 6.2604C8.0016 5.868 8.652 5.352 8.652 4.2264V4.1646C8.652 2.9778 7.62 2.1 6.1536 2.1C4.6668 2.1 3.552 2.9568 3.552 4.3404ZM5.1 8.9946C5.1 9.5148 5.4954 9.9 5.9946 9.9C6.5046 9.9 6.9 9.5148 6.9 8.9946C6.9 8.4744 6.5046 8.1 5.9946 8.1C5.4954 8.1 5.1 8.4744 5.1 8.9946Z"
+                    fill="var(--icon-default-color)"
+                />
+            </g>
+            <defs>
+                <clipPath id="clip0_111_484">
+                    <rect width="12" height="12" fill="white" />
+                </clipPath>
+            </defs>
+        </svg>
+    );
+}
+
+export function TrashIcon() {
+    return (
+        <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <g clipPath="url(#clip0_111_486)">
+                <path
+                    d="M4.70587 5.32353V9.02941M7.17646 5.32353V9.02941M9.64704 2.85294V10.2647C9.64704 10.947 9.094 11.5 8.41175 11.5H3.47057C2.78834 11.5 2.23528 10.947 2.23528 10.2647V2.85294M0.999985 2.85294H10.8823M7.7941 2.85294V2.23529C7.7941 1.55306 7.24106 1 6.55881 1H5.32351C4.64128 1 4.08822 1.55306 4.08822 2.23529V2.85294"
+                    stroke="white"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                />
+            </g>
+            <defs>
+                <clipPath id="clip0_111_486">
+                    <rect width="12" height="12" fill="white" />
+                </clipPath>
+            </defs>
+        </svg>
+    );
+}
+
+export function FilterIcon() {
+    return (
+        <svg
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path d="M6.86655 10V3.33333" stroke="white" strokeLinecap="round" />
+            <path d="M6.86655 16.6666V13.3333" stroke="white" strokeLinecap="round" />
+            <path d="M13.0667 5.83336V3.33336" stroke="white" strokeLinecap="round" />
+            <path d="M13.0667 16.6666V9.16664" stroke="white" strokeLinecap="round" />
+            <path
+                d="M6.86666 13.3333C7.78714 13.3333 8.53333 12.5871 8.53333 11.6667C8.53333 10.7462 7.78714 10 6.86666 10C5.94619 10 5.2 10.7462 5.2 11.6667C5.2 12.5871 5.94619 13.3333 6.86666 13.3333Z"
+                stroke="white"
+                strokeLinecap="round"
+            />
+            <path
+                d="M13.0667 9.16669C13.9871 9.16669 14.7333 8.4205 14.7333 7.50003C14.7333 6.57955 13.9871 5.83336 13.0667 5.83336C12.1462 5.83336 11.4 6.57955 11.4 7.50003C11.4 8.4205 12.1462 9.16669 13.0667 9.16669Z"
+                stroke="white"
+                strokeLinecap="round"
+            />
+        </svg>
+    );
+}
+
+export function EyeDroperIcon({ isActive }: { isActive: boolean }) {
+    return (
+        <svg
+            width="14"
+            height="14"
+            viewBox="0 0 14 14"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M6.5625 3.5L10.0625 7"
+                stroke={isActive ? "var(--icon-default-color-active)" : "white"}
+                strokeWidth="0.875"
+                strokeMiterlimit="10"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M7.4375 4.37266L10.0625 1.74766C10.5437 1.26641 11.3312 1.26641 11.8125 1.74766C12.2937 2.22891 12.2937 3.01641 11.8125 3.49766L9.1875 6.12266"
+                stroke={isActive ? "var(--icon-default-color-active)" : "white"}
+                strokeWidth="0.875"
+                strokeMiterlimit="10"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M7.30625 4.50391L2.49375 9.31641C2.23125 9.57891 2.14375 9.88516 2.14375 10.2352C1.925 10.3664 1.75 10.6289 1.75 10.9352C1.75 11.4164 2.14375 11.8102 2.625 11.8102C2.93125 11.8102 3.19375 11.6352 3.36875 11.4164C3.675 11.4164 4.025 11.2852 4.2875 11.0664L9.1 6.25391"
+                stroke={isActive ? "var(--icon-default-color-active)" : "white"}
+                strokeWidth="0.875"
+                strokeMiterlimit="10"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </svg>
+    );
+}
+
+export function TickIcon() {
+    return (
+        <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M3 6.5L4.84616 8.5L9 4"
+                stroke="white"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </svg>
+    );
+}
+
+export function UndoIcon() {
+    return (
+        <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M3.76516 1.73483C3.91161 1.88128 3.91161 2.11872 3.76516 2.26516L2.90533 3.125H7.5C9.0878 3.125 10.375 4.41218 10.375 6C10.375 7.5878 9.0878 8.875 7.5 8.875H4C3.79289 8.875 3.625 8.7071 3.625 8.5C3.625 8.2929 3.79289 8.125 4 8.125H7.5C8.6736 8.125 9.625 7.1736 9.625 6C9.625 4.82639 8.6736 3.875 7.5 3.875H2.90533L3.76516 4.73483C3.91161 4.88128 3.91161 5.1187 3.76516 5.26515C3.61872 5.4116 3.38128 5.4116 3.23483 5.26515L1.73483 3.76516C1.58839 3.61872 1.58839 3.38128 1.73483 3.23483L3.23483 1.73483C3.38128 1.58839 3.61872 1.58839 3.76516 1.73483Z"
+                fill="var(--icon-default-color)"
+            />
+        </svg>
+    );
+}
+
+export function RedoIcon() {
+    return (
+        <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M8.23484 1.73483C8.08839 1.88128 8.08839 2.11872 8.23484 2.26516L9.09467 3.125H4.5C2.9122 3.125 1.625 4.41218 1.625 6C1.625 7.5878 2.9122 8.875 4.5 8.875H8C8.20711 8.875 8.375 8.7071 8.375 8.5C8.375 8.2929 8.20711 8.125 8 8.125H4.5C3.3264 8.125 2.375 7.1736 2.375 6C2.375 4.82639 3.3264 3.875 4.5 3.875H9.09467L8.23484 4.73483C8.08839 4.88128 8.08839 5.1187 8.23484 5.26515C8.38128 5.4116 8.61872 5.4116 8.76517 5.26515L10.2652 3.76516C10.4116 3.61872 10.4116 3.38128 10.2652 3.23483L8.76517 1.73483C8.61872 1.58839 8.38128 1.58839 8.23484 1.73483Z"
+                fill="var(--icon-default-color)"
+            />
+        </svg>
+    );
+}
+
+export function ResizeHeightIcon() {
+    return (
+        <svg
+            width="15"
+            height="7"
+            viewBox="0 0 15 7"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <circle cx="1.5" cy="1.63281" r="1.5" fill="var(--text-disabled)" />
+            <circle cx="5.3667" cy="1.63281" r="1.5" fill="var(--text-disabled)" />
+            <circle cx="9.2334" cy="1.63281" r="1.5" fill="var(--text-disabled)" />
+            <circle cx="13.1001" cy="1.63281" r="1.5" fill="var(--text-disabled)" />
+            <circle cx="1.5" cy="5.5" r="1.5" fill="var(--text-disabled)" />
+            <circle cx="5.3667" cy="5.5" r="1.5" fill="var(--text-disabled)" />
+            <circle cx="9.2334" cy="5.5" r="1.5" fill="var(--text-disabled)" />
+            <circle cx="13.1001" cy="5.5" r="1.5" fill="var(--text-disabled)" />
+        </svg>
+    );
+}
+
+export function RemoveIcon() {
+    return (
+        <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path d="M3 6.5H9" stroke="white" strokeLinecap="round" />
+        </svg>
+    );
+}
+
+export function InfoIcon() {
+    return (
+        <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M5.46289 7.75441C5.46289 7.68342 5.47691 7.6131 5.50422 7.54758C5.53158 7.48201 5.57156 7.42254 5.62201 7.37257C5.67246 7.3226 5.73231 7.2831 5.79807 7.25636C5.86388 7.22963 5.93425 7.21619 6.00529 7.21681C6.11003 7.21873 6.21188 7.25142 6.29814 7.31089C6.38435 7.37036 6.45121 7.45398 6.49019 7.55118C6.52921 7.64843 6.53862 7.75499 6.5174 7.85757C6.49614 7.96014 6.44511 8.05417 6.37071 8.12795C6.29631 8.20168 6.20185 8.25184 6.09908 8.27219C5.99631 8.29254 5.8898 8.28212 5.79294 8.24224C5.69603 8.2024 5.61308 8.13486 5.55438 8.04808C5.49567 7.96134 5.46385 7.8592 5.46289 7.75441ZM5.63564 6.44401L5.56844 3.93842C5.56206 3.87819 5.56844 3.81729 5.58716 3.75968C5.60583 3.70207 5.63641 3.64902 5.67692 3.604C5.71743 3.55897 5.76697 3.52297 5.82227 3.49832C5.87761 3.47368 5.93751 3.46094 5.99804 3.46094C6.05862 3.46094 6.11852 3.47368 6.17387 3.49832C6.22916 3.52297 6.2787 3.55897 6.31921 3.604C6.35972 3.64902 6.3903 3.70207 6.40897 3.75968C6.42769 3.81729 6.43407 3.87819 6.42769 3.93842L6.36529 6.44401C6.36529 6.54073 6.32689 6.63356 6.25844 6.70196C6.19004 6.77036 6.09721 6.80881 6.00049 6.80881C5.90372 6.80881 5.81094 6.77036 5.74254 6.70196C5.67414 6.63356 5.63564 6.54073 5.63564 6.44401Z"
+                fill="white"
+            />
+            <path
+                d="M6.00006 10.3175C8.45219 10.3175 10.4401 8.32963 10.4401 5.8775C10.4401 3.42536 8.45219 1.4375 6.00006 1.4375C3.54792 1.4375 1.56006 3.42536 1.56006 5.8775C1.56006 8.32963 3.54792 10.3175 6.00006 10.3175Z"
+                stroke="white"
+                strokeWidth="0.72"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </svg>
+    );
+}
+
+export function AIIcon() {
+    return (
+        <svg
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M7.90908 14.9119C7.70892 12.2881 5.62382 10.203 3 10.0028C5.62382 9.80267 7.70892 7.71753 7.90908 5.09375C8.10925 7.71753 10.1944 9.80267 12.8182 10.0028C10.1944 10.203 8.10925 12.2881 7.90908 14.9119Z"
+                fill="var(--icon-default-color-active)"
+            />
+            <path
+                d="M14.0454 18.5888C13.9383 17.809 13.4611 16.3226 11.5908 16.1342C13.4611 15.9458 13.9383 14.4595 14.0454 13.6797C14.2337 15.5499 15.7201 16.0272 16.4999 16.1342C15.7201 16.2412 14.2337 16.7185 14.0454 18.5888Z"
+                fill="var(--icon-default-color-active)"
+            />
+            <path
+                d="M14.0454 1.40625C14.2337 3.27654 15.7201 3.7538 16.4999 3.86079C15.7201 3.9678 14.2337 4.44505 14.0454 6.31533C13.9383 5.53553 13.4611 4.04915 11.5908 3.86079C13.4611 3.67243 13.9383 2.18606 14.0454 1.40625Z"
+                fill="var(--icon-default-color-active)"
+            />
+        </svg>
+    );
+}
+
+export const KebabIcon = () => {
+    return (
+        <svg
+            width="13"
+            height="3"
+            viewBox="0 0 13 3"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <ellipse cx="1.54798" cy="1.35112" rx="1.4993" ry="1.27477" fill="white" />
+            <ellipse cx="6.04868" cy="1.35131" rx="1.4993" ry="1.27477" fill="white" />
+            <ellipse cx="10.5476" cy="1.35131" rx="1.4993" ry="1.27477" fill="white" />
+        </svg>
+    );
+};
+
+export const DublicateIcon = () => {
+    return (
+        <svg
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M14.3125 11.375C14.3125 11.7545 14.0045 12.0625 13.625 12.0625H8.125C7.7455 12.0625 7.4375 11.7545 7.4375 11.375V5.875C7.4375 5.4955 7.7455 5.1875 8.125 5.1875H13.625C14.0045 5.1875 14.3125 5.4955 14.3125 5.875V11.375ZM13.625 4.5H8.125C7.36566 4.5 6.75 5.11566 6.75 5.875V11.375C6.75 12.1343 7.36566 12.75 8.125 12.75H13.625C14.3843 12.75 15 12.1343 15 11.375V5.875C15 5.11566 14.3843 4.5 13.625 4.5ZM11.5625 14.125C11.5625 14.5045 11.2545 14.8125 10.875 14.8125H5.375C4.9955 14.8125 4.6875 14.5045 4.6875 14.125V8.625C4.6875 8.2455 4.9955 7.9375 5.375 7.9375H6.0625V7.25H5.375C4.61566 7.25 4 7.86566 4 8.625V14.125C4 14.8843 4.61566 15.5 5.375 15.5H10.875C11.6343 15.5 12.25 14.8843 12.25 14.125V13.4375H11.5625V14.125Z"
+                fill="var(--icon-default-color)"
+            />
+        </svg>
+    );
+};
+
+export const DeleteIcon = () => {
+    return (
+        <svg
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M8.33301 10V13.3334"
+                stroke="white"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path d="M11 10V13.3334" stroke="white" strokeLinecap="round" strokeLinejoin="round" />
+            <path
+                d="M4.33301 6.66406H15"
+                stroke="white"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M5.66699 8.66406V13.9976C5.66699 15.1022 6.56245 15.9976 7.66705 15.9976H11.6672C12.7718 15.9976 13.6672 15.1022 13.6672 13.9976V8.66406"
+                stroke="white"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M7.66699 5.33337C7.66699 4.59697 8.26396 4 9.00037 4H10.3337C11.0702 4 11.6671 4.59697 11.6671 5.33337V6.66675H7.66699V5.33337Z"
+                stroke="white"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </svg>
+    );
+};
+
+export const HourlySimulationIcon = () => {
+    return (
+        <svg
+            width="17"
+            height="16"
+            viewBox="0 0 17 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M9.22794 8.29297C9.22794 9.1131 9.69975 9.49575 10.1561 9.86512C10.7275 10.3286 11.371 10.8503 11.4375 12.4462H5.91087C5.97732 10.8503 6.62079 10.3286 7.19228 9.86512C7.64859 9.49575 8.1204 9.1131 8.1204 8.29297C8.1204 7.47284 7.64859 7.09018 7.19228 6.72082C6.62079 6.25732 5.97732 5.73567 5.91087 4.13971H11.4375C11.371 5.73567 10.7275 6.25732 10.1561 6.72082C9.69975 7.09018 9.22794 7.47284 9.22794 8.29297ZM10.5049 7.15054C11.1694 6.61173 11.9968 5.94112 11.9968 3.86282V3.58594H5.35156V3.86282C5.35156 5.94112 6.17889 6.61173 6.84342 7.15054C7.27867 7.50385 7.56663 7.73699 7.56663 8.29297C7.56663 8.84895 7.27867 9.08209 6.84342 9.4354C6.17889 9.97421 5.35156 10.6448 5.35156 12.7231V13H11.9968V12.7231C11.9968 10.6448 11.1695 9.97421 10.5049 9.4354C10.0697 9.08209 9.78171 8.84895 9.78171 8.29297C9.78171 7.73699 10.0697 7.50385 10.5049 7.15054ZM8.54764 9.83582L7.71588 10.5109C7.3515 10.806 7.03751 11.0602 6.86916 11.6156H10.4792C10.3108 11.0602 9.99685 10.806 9.63247 10.5109L8.80071 9.83582C8.72706 9.77602 8.62129 9.77602 8.54764 9.83582Z"
+                fill="white"
+            />
+        </svg>
+    );
+};
+
+export const DailyProductionIcon = () => {
+    return (
+        <svg
+            width="17"
+            height="16"
+            viewBox="0 0 17 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M13.4564 6.96778C13.3816 6.81906 13.2232 6.72864 13.0596 6.74287L12.5621 6.77922C12.0226 4.82899 10.2365 3.39063 8.11668 3.39063C5.57103 3.39059 3.5 5.46179 3.5 8.00724C3.5 10.5529 5.57103 12.6239 8.11664 12.6239C9.59017 12.6239 10.9876 11.911 11.8549 10.7172C11.988 10.5335 11.947 10.2772 11.7637 10.1437C11.5801 10.0105 11.3235 10.0519 11.1904 10.2347C10.477 11.2167 9.328 11.8032 8.11645 11.8032C6.02331 11.8032 4.32065 10.1003 4.32065 8.00737C4.32065 5.91438 6.02334 4.21163 8.11648 4.21163C9.80226 4.21163 11.2333 5.3171 11.7269 6.84049L11.4679 6.85944C11.3024 6.87139 11.1604 6.98234 11.1083 7.13969C11.0559 7.29735 11.104 7.47084 11.2294 7.57934L11.9746 8.22285C12.0471 8.33961 12.1753 8.41774 12.3224 8.41774C12.3301 8.41774 12.3373 8.41599 12.3449 8.41564C12.3474 8.41564 12.3493 8.4167 12.3516 8.4167C12.3614 8.4167 12.3714 8.41654 12.3816 8.41564C12.4901 8.40757 12.5909 8.35682 12.6622 8.27447L13.3998 7.42041C13.5087 7.2949 13.5308 7.11596 13.4564 6.96778Z"
+                fill="white"
+            />
+            <path
+                d="M5.94531 9.43859V9.04L6.30878 8.71149C6.92314 8.16192 7.22165 7.84585 7.23024 7.51715C7.23024 7.28766 7.09188 7.1061 6.76706 7.1061C6.52494 7.1061 6.31281 7.2269 6.16567 7.33979L5.97956 6.86783C6.19166 6.70822 6.52036 6.57812 6.90122 6.57812C7.53737 6.57812 7.88783 6.95018 7.88783 7.46078C7.88783 7.9324 7.54615 8.30903 7.1393 8.67234L6.87962 8.88866V8.89708H7.9398V9.43823H5.94531V9.43859Z"
+                fill="white"
+            />
+            <path
+                d="M9.51199 9.43788V8.76696H8.26587V8.33889L9.33028 6.625H10.1352V8.27375H10.4726V8.76696H10.1352V9.43788H9.51199ZM9.51199 8.27375V7.65077C9.51199 7.48187 9.52061 7.30909 9.53359 7.12718H9.51638C9.42525 7.30909 9.35168 7.47344 9.25671 7.65077L8.88026 8.26513V8.27375H9.51199Z"
+                fill="white"
+            />
+        </svg>
+    );
+};
+
+export const MonthlyROI = () => {
+    return (
+        <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M3.78955 11.9997V4.84175H4.84219V4.21016C4.84221 3.97761 5.03071 3.7891 5.26325 3.7891H6.10535C6.33789 3.7891 6.52639 3.97761 6.52641 4.21012V4.84175H9.47381L9.47379 4.21012C9.47379 3.97756 9.66231 3.78906 9.89485 3.78906H10.737C10.9695 3.78906 11.158 3.97756 11.158 4.21012V4.84175H12.2107V11.9997H3.78955ZM4.42113 11.3681H11.5791V6.52599H4.42113V11.3681ZM4.84219 9.89443H6.10535V10.9471H4.84219V9.89443ZM6.52641 9.89443H7.78957V10.9471H6.52641V9.89443ZM8.21063 9.89443H9.47379V10.9471H8.21063V9.89443ZM9.89485 9.89443H11.158V10.9471H9.89485V9.89443ZM4.84219 8.42073H6.10535V9.47337H4.84219V8.42073ZM6.52641 8.42073H7.78957V9.47337H6.52641V8.42073ZM8.21063 8.42073H9.47379V9.47337H8.21063V8.42073ZM9.89485 8.42073H11.158V9.47337H9.89485V8.42073ZM6.52641 6.94707H7.78957V7.99971H6.52641V6.94707ZM8.21063 6.94707H9.47379V7.99971H8.21063V6.94707ZM9.89485 6.94707H11.158V7.99971H9.89485V6.94707ZM10.2106 4.21019C10.0362 4.21019 9.89485 4.35156 9.89485 4.52598V5.15756C9.89485 5.33198 10.0362 5.47335 10.2106 5.47335H10.4212C10.5956 5.47335 10.737 5.33198 10.737 5.15756V4.52598C10.737 4.35156 10.5956 4.21019 10.4212 4.21019H10.2106ZM5.57904 4.21016C5.40462 4.21016 5.26325 4.35156 5.26325 4.52598V5.15756C5.26325 5.33195 5.40462 5.47335 5.57904 5.47335H5.78956C5.96398 5.47335 6.10535 5.33195 6.10535 5.15756V4.52598C6.10535 4.35156 5.96398 4.21016 5.78956 4.21016H5.57904ZM6.73695 8.63125V9.26285H7.57905V8.63125H6.73695ZM5.05271 8.63125V9.26285H5.89483V8.63125H5.05271ZM8.42117 8.63125V9.26285H9.26327V8.63125H8.42117ZM10.1054 8.63125V9.26283H10.9475V8.63125H10.1054Z"
+                fill="white"
+            />
+        </svg>
+    );
+};
+
+export const ExpandIcon = ({ isActive }: { isActive: boolean }) => {
+    return isActive ? (
+        <svg
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M16 5.32324C16 5.09668 15.8018 4.89844 15.5752 4.89844H3.96387C3.7373 4.89844 3.53906 5.09668 3.53906 5.32324V6.17285C3.53906 6.39941 3.7373 6.59766 3.96387 6.59766H15.5752C15.8018 6.59766 16 6.39941 16 6.17285V5.32324Z"
+                fill="white"
+            />
+            <path
+                d="M16 13.8232C16 13.5967 15.8018 13.3984 15.5752 13.3984H3.96387C3.7373 13.3984 3.53906 13.5967 3.53906 13.8232V14.6729C3.53906 14.8994 3.7373 15.0977 3.96387 15.0977H15.5752C15.8018 15.0977 16 14.8994 16 14.6729V13.8232Z"
+                fill="white"
+            />
+            <path
+                d="M12.1768 10.8477C12.4033 10.8477 12.6016 10.6494 12.6016 10.4229V9.57324C12.6016 9.34668 12.4033 9.14844 12.1768 9.14844H7.3623C7.13574 9.14844 6.9375 9.34668 6.9375 9.57324V10.4229C6.9375 10.6494 7.13574 10.8477 7.3623 10.8477H12.1768Z"
+                fill="white"
+            />
+        </svg>
+    ) : (
+        <svg
+            width="21"
+            height="20"
+            viewBox="0 0 21 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M5 5.6875H15.5"
+                stroke="white"
+                strokeWidth="1.4"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M5 8.60156H15.5"
+                stroke="white"
+                strokeWidth="1.4"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M5 10.6484L10.25 14.7318L15.5 10.6484"
+                stroke="white"
+                strokeWidth="1.4"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </svg>
+    );
+};
+
+export const ExpandIcon2 = () => {
+    return (
+        <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M9.78365 2H6.6001C6.46676 2 6.33342 2.08334 6.33342 2.21668V2.71672C6.33342 2.85006 6.45009 3.00007 6.6001 3.00007H7.91686C8.06687 3.00007 8.15021 3.16675 8.03353 3.26675L5.20001 6.10028C5.1 6.20028 5.1 6.3503 5.20001 6.4503L5.55003 6.80033C5.65004 6.90033 5.80005 6.90033 5.90005 6.80033L8.73358 3.9668C8.83359 3.86679 9.00026 3.93346 9.00026 4.08347V5.40023C9.00026 5.53357 9.1336 5.68358 9.26695 5.68358H9.75031C9.88366 5.68358 10.0003 5.53357 10.0003 5.40023V2.23335C10.0003 2.08334 9.91699 2 9.78365 2Z"
+                fill="white"
+            />
+            <path
+                d="M7.71705 5.91777L7.15035 6.50115C7.05034 6.60115 7.00034 6.71783 7.00034 6.85117V8.7513C7.00034 8.88464 6.88366 9.00132 6.75032 9.00132H3.25008C3.11674 9.00132 3.00007 8.88464 3.00007 8.7513V5.25106C3.00007 5.11772 3.11674 5.00104 3.25008 5.00104H5.16688C5.30022 5.00104 5.43357 4.95104 5.5169 4.85103L6.08361 4.28433C6.18362 4.18432 6.11695 4.00098 5.96694 4.00098H2.66671C2.30002 4.00098 2 4.301 2 4.66769V9.33467C2 9.70136 2.30002 10.0014 2.66671 10.0014H7.33369C7.70039 10.0014 8.00041 9.70136 8.00041 9.33467V6.03445C8.00041 5.88444 7.81706 5.81777 7.71705 5.91777Z"
+                fill="white"
+            />
+        </svg>
+    );
+};
+
+export const StartIcon = () => {
+    return (
+        <svg
+            width="21"
+            height="20"
+            viewBox="0 0 21 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M10.8542 7.58594V10.5918"
+                stroke="white"
+                strokeWidth="0.901765"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M10.854 15.9971C7.95036 15.9971 5.59375 13.6405 5.59375 10.7369C5.59375 7.83317 7.95036 5.47656 10.854 5.47656C13.7577 5.47656 16.1143 7.83317 16.1143 10.7369"
+                stroke="white"
+                strokeWidth="0.901765"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M9.05078 3.97656H12.6578"
+                stroke="white"
+                strokeWidth="0.901765"
+                strokeMiterlimit="10"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M12.5977 13.898V13.2007C12.5977 12.341 13.2109 11.9863 13.9563 12.4191L14.5575 12.7678L15.1587 13.1165C15.9041 13.5494 15.9041 14.2527 15.1587 14.6856L14.5575 15.0343L13.9563 15.3829C13.2109 15.8158 12.5977 15.4611 12.5977 14.6014V13.898Z"
+                stroke="#6F42C1"
+                strokeWidth="0.901765"
+                strokeMiterlimit="10"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </svg>
+    );
+};
+
+export const EndIcon = () => {
+    return (
+        <svg
+            width="21"
+            height="20"
+            viewBox="0 0 21 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M10.8542 7.58594V10.5918"
+                stroke="white"
+                strokeWidth="0.901765"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M10.854 15.9971C7.95036 15.9971 5.59375 13.6405 5.59375 10.7369C5.59375 7.83317 7.95036 5.47656 10.854 5.47656C13.7577 5.47656 16.1143 7.83317 16.1143 10.7369"
+                stroke="white"
+                strokeWidth="0.901765"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M9.05078 3.97656H12.6578"
+                stroke="white"
+                strokeWidth="0.901765"
+                strokeMiterlimit="10"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M12.5977 13.898V13.2007C12.5977 12.341 13.2109 11.9863 13.9563 12.4191L14.5575 12.7678L15.1587 13.1165C15.9041 13.5494 15.9041 14.2527 15.1587 14.6856L14.5575 15.0343L13.9563 15.3829C13.2109 15.8158 12.5977 15.4611 12.5977 14.6014V13.898Z"
+                stroke="white"
+                strokeWidth="0.901765"
+                strokeMiterlimit="10"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </svg>
+    );
+};
+
+export const SpeedIcon = () => {
+    return (
+        <svg
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M9.55992 9.81727L4.10352 6.17969V14.7664L9.55992 11.1288V14.7664L16 10.4731L9.55992 6.17969V9.81727ZM5.1948 12.7273V8.21877L8.57624 10.4731L5.1948 12.7273ZM10.6512 12.7273V8.21877L14.0326 10.4731L10.6512 12.7273Z"
+                fill="white"
+            />
+        </svg>
+    );
+};
+
+export const LogListIcon = () => {
+    return (
+        <svg
+            width="24"
+            height="25"
+            viewBox="0 0 24 25"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M14.5 18.25H5.5M18.5 21.7272V19.3568H17.3829C16.8245 19.3568 16.375 18.9072 16.375 18.3489V18.08C16.375 17.5216 16.8246 17.0721 17.3829 17.0721H18.5V13.7318H17.2579C16.6995 13.7318 16.25 13.2822 16.25 12.7239V12.4551C16.25 11.8967 16.6996 11.4472 17.2579 11.4472H18.5V7.98185H17.2579C16.6995 7.98185 16.25 7.5323 16.25 6.97395V6.70515C16.25 6.14675 16.6996 5.69725 17.2579 5.69725H18.5V3.27065M14.5 12.75H5.5M12 7.24995H5.5M20.25 3.25H3.75C3.1977 3.25 2.75 3.6977 2.75 4.25V20.75C2.75 21.3023 3.1977 21.75 3.75 21.75H20.25C20.8023 21.75 21.25 21.3023 21.25 20.75V4.25C21.25 3.6977 20.8023 3.25 20.25 3.25Z"
+                stroke="white"
+                strokeWidth="1.2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </svg>
+    );
+};
+
+export const LogTickIcon = () => {
+    return (
+        <svg
+            width="10"
+            height="10"
+            viewBox="0 0 10 10"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <g clipPath="url(#clip0_3962_4223)">
+                <path
+                    d="M5.00065 0.835938C2.70482 0.835938 0.833984 2.70677 0.833984 5.0026C0.833984 7.29844 2.70482 9.16927 5.00065 9.16927C7.29648 9.16927 9.16732 7.29844 9.16732 5.0026C9.16732 2.70677 7.29648 0.835938 5.00065 0.835938ZM6.99232 4.04427L4.62982 6.40677C4.57148 6.4651 4.49232 6.49844 4.40898 6.49844C4.32565 6.49844 4.24648 6.4651 4.18815 6.40677L3.00898 5.2276C2.88815 5.10677 2.88815 4.90677 3.00898 4.78594C3.12982 4.6651 3.32982 4.6651 3.45065 4.78594L4.40898 5.74427L6.55065 3.6026C6.67148 3.48177 6.87148 3.48177 6.99232 3.6026C7.11315 3.72344 7.11315 3.91927 6.99232 4.04427Z"
+                    fill="#49B841"
+                />
+            </g>
+            <defs>
+                <clipPath id="clip0_3962_4223">
+                    <rect width="10" height="10" fill="white" />
+                </clipPath>
+            </defs>
+        </svg>
+    );
+};
+
+export const LogInfoIcon = () => {
+    return (
+        <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M0.75 2.64438V7.41438C0.75 7.92094 0.951232 8.40675 1.30943 8.76495C1.66762 9.12314 2.15344 9.32438 2.66 9.32438H3.615V10.7544L6.5 9.32438H9.365C9.87156 9.32438 10.3574 9.12314 10.7156 8.76495C11.0738 8.40675 11.275 7.92094 11.275 7.41438V2.64438C11.275 2.13781 11.0738 1.652 10.7156 1.2938C10.3574 0.935607 9.87156 0.734375 9.365 0.734375H2.66C2.15344 0.734375 1.66762 0.935607 1.30943 1.2938C0.951232 1.652 0.75 2.13781 0.75 2.64438Z"
+                fill="#8E8E93"
+            />
+            <path
+                d="M5.04492 6.94531H6.95492"
+                stroke="white"
+                strokeWidth="0.955"
+                strokeMiterlimit="10"
+            />
+            <path
+                d="M5.04492 4.07812H5.99992V6.94313"
+                stroke="white"
+                strokeWidth="0.955"
+                strokeMiterlimit="10"
+            />
+            <path
+                d="M5.52539 2.65625H6.47539"
+                stroke="white"
+                strokeWidth="0.955"
+                strokeMiterlimit="10"
+            />
+        </svg>
+    );
+};
+
+export const WarningIcon = () => {
+    return (
+        <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M0.75 2.64438V7.41438C0.75 7.92094 0.951232 8.40675 1.30943 8.76495C1.66762 9.12314 2.15344 9.32438 2.66 9.32438H3.615V10.7544L6.5 9.32438H9.365C9.87156 9.32438 10.3574 9.12314 10.7156 8.76495C11.0738 8.40675 11.275 7.92094 11.275 7.41438V2.64438C11.275 2.13781 11.0738 1.652 10.7156 1.2938C10.3574 0.935607 9.87156 0.734375 9.365 0.734375H2.66C2.15344 0.734375 1.66762 0.935607 1.30943 1.2938C0.951232 1.652 0.75 2.13781 0.75 2.64438Z"
+                fill="#8E8E93"
+            />
+            <path
+                d="M5.04492 6.94531H6.95492"
+                stroke="white"
+                strokeWidth="0.955"
+                strokeMiterlimit="10"
+            />
+            <path
+                d="M5.04492 4.07812H5.99992V6.94313"
+                stroke="white"
+                strokeWidth="0.955"
+                strokeMiterlimit="10"
+            />
+            <path
+                d="M5.52539 2.65625H6.47539"
+                stroke="white"
+                strokeWidth="0.955"
+                strokeMiterlimit="10"
+            />
+        </svg>
+    );
+};
+
+export const ErrorIcon = () => {
+    return (
+        <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M11 6C11 8.7614 8.7614 11 6 11C3.23857 11 1 8.7614 1 6C1 3.23857 3.23857 1 6 1C8.7614 1 11 3.23857 11 6ZM4.48482 4.48483C4.63126 4.33838 4.8687 4.33838 5.01515 4.48483L6 5.46965L6.9848 4.48484C7.13125 4.33839 7.3687 4.33839 7.51515 4.48484C7.6616 4.63128 7.6616 4.86872 7.51515 5.01515L6.5303 6L7.51515 6.9848C7.6616 7.13125 7.6616 7.3687 7.51515 7.51515C7.3687 7.6616 7.13125 7.6616 6.9848 7.51515L6 6.53035L5.01515 7.51515C4.86871 7.6616 4.63127 7.6616 4.48483 7.51515C4.33838 7.3687 4.33838 7.13125 4.48483 6.98485L5.46965 6L4.48482 5.01515C4.33837 4.86871 4.33837 4.63127 4.48482 4.48483Z"
+                fill="#ED5342"
+            />
+        </svg>
+    );
+};
+
+export const LocationIcon = () => {
+    return (
+        <svg
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M3 9.45984L10.4205 9.98901L11.085 17.5L18 2.5L3 9.45984Z"
+                fill="white"
+            />
+        </svg>
+    );
+};
+export const SaveDiskIcon = () => {
+    return (
+        <svg
+            width="51"
+            height="51"
+            viewBox="0 0 51 51"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M4.2832 15.0331C4.2832 9.2892 8.93959 4.63281 14.6835 4.63281H31.681C33.3359 4.63281 34.9231 5.29026 36.0934 6.46052L44.0567 14.4239C45.2269 15.5942 45.8845 17.1814 45.8845 18.8364V35.8337C45.8845 41.5776 41.228 46.2341 35.4841 46.2341H14.6835C8.93959 46.2341 4.2832 41.5776 4.2832 35.8337V15.0331ZM16.7636 12.9531V8.79294H29.244V12.9531H16.7636ZM33.4041 15.0331V9.65452L41.1151 17.3655C41.5051 17.7556 41.7243 18.2847 41.7243 18.8364V35.8337C41.7243 39.2802 38.9306 42.0739 35.4841 42.0739H14.6835C11.2372 42.0739 8.44333 39.2802 8.44333 35.8337V15.0331C8.44333 12.3161 10.1798 10.0047 12.6035 9.14803V15.0331C12.6035 16.1819 13.5347 17.1132 14.6835 17.1132H31.324C32.4728 17.1132 33.4041 16.1819 33.4041 15.0331Z"
+                fill="#E6E6E6"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M25.0859 21.2656C20.4907 21.2656 16.7656 24.9908 16.7656 29.5859C16.7656 34.1809 20.4907 37.9061 25.0859 37.9061C29.6809 37.9061 33.4061 34.1809 33.4061 29.5859C33.4061 24.9908 29.6809 21.2656 25.0859 21.2656ZM20.9257 29.5859C20.9257 27.2882 22.7882 25.4257 25.0859 25.4257C27.3835 25.4257 29.246 27.2882 29.246 29.5859C29.246 31.8835 27.3835 33.746 25.0859 33.746C22.7882 33.746 20.9257 31.8835 20.9257 29.5859Z"
+                fill="#B6B6B6"
+            />
+            <circle cx="25.084" cy="29.5898" r="4.16012" fill="#D7D7D7" />
+        </svg>
+    );
+};
+export const WalkIcon = () => {
+    return (
+        <svg
+            width="18"
+            height="18"
+            viewBox="0 0 18 18"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M10.5 3.5C11.0523 3.5 11.5 3.94772 11.5 4.5V8.5H6.5V4.5C6.5 3.94772 6.94772 3.5 7.5 3.5H10.5ZM10.4746 4.71094C10.4331 4.71095 10.3949 4.73196 10.3594 4.77344C10.3238 4.81197 10.2971 4.86257 10.2793 4.9248C10.2289 5.09668 10.163 5.3394 10.083 5.65332L10.0166 5.94727C9.93366 6.33229 9.86296 6.61232 9.80371 6.78711C9.64369 6.44039 9.50522 6.09665 9.38965 5.75586C9.27406 5.41503 9.21488 5.23842 9.21191 5.22656C9.20004 5.18808 9.17329 5.15269 9.13184 5.12012C9.09035 5.08755 9.03685 5.07129 8.97168 5.07129C8.92148 5.07135 8.87149 5.08479 8.82129 5.11133C8.77404 5.13495 8.74436 5.16867 8.73242 5.21289L8.6875 5.34668C8.60156 5.59562 8.51085 5.85245 8.41602 6.11621C8.32421 6.37975 8.24009 6.60348 8.16309 6.78711C7.96155 6.05508 7.80881 5.41163 7.70508 4.85742C7.69322 4.80425 7.66829 4.76683 7.62988 4.74609C7.59143 4.72243 7.55406 4.71098 7.51855 4.71094C7.45644 4.71094 7.39415 4.73018 7.33203 4.76855C7.26992 4.80404 7.23841 4.85299 7.23828 4.91504C7.23828 4.96542 7.26596 5.12009 7.32227 5.37793C7.37857 5.63575 7.44541 5.88782 7.52246 6.13379L7.63379 6.51172C7.70488 6.75758 7.76126 6.94868 7.80273 7.08496C7.84715 7.22116 7.88924 7.32152 7.92773 7.38672C7.94547 7.41628 7.97913 7.44313 8.0293 7.4668C8.07968 7.48754 8.1322 7.49805 8.18555 7.49805C8.23282 7.49799 8.27602 7.48654 8.31445 7.46289C8.35284 7.43627 8.38261 7.40074 8.40332 7.35645C8.41518 7.32384 8.42568 7.29233 8.43457 7.2627C8.44638 7.23022 8.45598 7.20042 8.46484 7.17383C8.61004 6.7412 8.77527 6.29237 8.95898 5.82715C9.03307 6.06119 9.13625 6.33545 9.26953 6.64941C9.40577 6.9604 9.52046 7.20597 9.6123 7.38672C9.63305 7.41636 9.66742 7.44309 9.71484 7.4668C9.76504 7.48744 9.81504 7.498 9.86523 7.49805C9.91558 7.49805 9.96339 7.48656 10.0078 7.46289C10.0522 7.43626 10.0838 7.40079 10.1016 7.35645C10.1549 7.20233 10.217 6.97225 10.2881 6.66699C10.2999 6.61959 10.3133 6.56035 10.3281 6.48926C10.3459 6.41814 10.3679 6.33505 10.3945 6.24023C10.5042 5.82532 10.6054 5.47686 10.6973 5.19531C10.7387 5.071 10.7588 4.9954 10.7588 4.96875C10.7588 4.87393 10.7368 4.80708 10.6924 4.76855C10.6479 4.73011 10.5753 4.71094 10.4746 4.71094Z"
+                fill="#B392F0"
+            />
+            <path
+                d="M11.5 14.5H6.5V9.5H11.5V14.5ZM8.92773 10.1016C8.84362 10.1016 8.70774 10.1241 8.52051 10.1699C8.33706 10.212 8.2073 10.2528 8.13086 10.291C7.98945 10.3598 7.86687 10.4722 7.76367 10.6289C7.66048 10.7818 7.6094 10.933 7.60938 11.082C7.60938 11.2426 7.65843 11.3958 7.75781 11.541C7.85721 11.6863 8.00832 11.8088 8.21094 11.9082C8.40585 12.0037 8.62961 12.0855 8.88184 12.1543C9.05769 12.1963 9.23023 12.2709 9.39844 12.3779C9.56653 12.4849 9.65039 12.6075 9.65039 12.7451C9.65039 12.8866 9.57178 12.9989 9.41504 13.083C9.26212 13.1671 9.07117 13.21 8.8418 13.21C8.64303 13.21 8.47656 13.1691 8.34277 13.0889C8.20911 13.0048 8.11501 12.8842 8.06152 12.7275C8.04994 12.6857 8.01608 12.6434 7.95898 12.6016C7.90164 12.5557 7.84551 12.5332 7.79199 12.5332C7.68901 12.5333 7.61417 12.5578 7.56836 12.6074C7.52262 12.6533 7.50001 12.728 7.5 12.8311C7.5 12.9801 7.55318 13.118 7.66016 13.2441C7.77099 13.3703 7.92018 13.4796 8.10742 13.5713C8.36738 13.686 8.58586 13.7432 8.76172 13.7432C8.93355 13.7432 9.10346 13.7237 9.27148 13.6855C9.43969 13.6473 9.58771 13.5901 9.71387 13.5137C9.90103 13.4067 10.035 13.2901 10.1152 13.1641C10.1993 13.0341 10.2412 12.8789 10.2412 12.6992C10.2412 12.493 10.1992 12.3324 10.1152 12.2178C10.0311 12.0993 9.89533 11.9839 9.70801 11.873C9.60097 11.8081 9.48969 11.7549 9.375 11.7129C9.26418 11.667 9.12104 11.617 8.94531 11.5635C8.81151 11.5291 8.68695 11.4892 8.57227 11.4434C8.47295 11.409 8.38705 11.365 8.31445 11.3115C8.24564 11.2542 8.21094 11.1868 8.21094 11.1104C8.21105 11.0188 8.24375 10.9388 8.30859 10.8701C8.37731 10.7976 8.46133 10.7423 8.56055 10.7041C8.65994 10.6659 8.75591 10.6465 8.84766 10.6465C8.93174 10.6465 9.02776 10.6577 9.13477 10.6807C9.24542 10.7036 9.32945 10.7251 9.38672 10.7441C9.44399 10.7709 9.50337 10.8241 9.56445 10.9043C9.61013 10.9576 9.64819 10.9977 9.67871 11.0244C9.70919 11.0511 9.74003 11.0644 9.77051 11.0645C9.89662 11.0645 9.98447 11.0379 10.0342 10.9844C10.0877 10.9309 10.1152 10.8696 10.1152 10.8008C10.1151 10.6863 10.0743 10.591 9.99414 10.5146C9.91393 10.4383 9.79001 10.3523 9.62207 10.2568C9.53797 10.2071 9.42871 10.1684 9.29492 10.1416C9.16112 10.1148 9.0386 10.1016 8.92773 10.1016Z"
+                fill="#B392F0"
+            />
+            <path
+                d="M5.5 14.5H1.5C0.947715 14.5 0.5 14.0523 0.5 13.5V10.5C0.5 9.94772 0.947715 9.5 1.5 9.5H5.5V14.5ZM3.2207 10.1016C3.15581 10.1016 3.09643 10.119 3.04297 10.1533C2.98952 10.1839 2.95068 10.2218 2.92773 10.2676C2.7557 10.5811 2.61583 10.8527 2.50879 11.082C2.40558 11.3114 2.29118 11.5871 2.16504 11.9082L1.93555 12.4697C1.80939 12.7412 1.71237 12.9596 1.64355 13.124C1.57867 13.2844 1.53057 13.4369 1.5 13.582C1.5 13.647 1.5347 13.6991 1.60352 13.7373C1.67594 13.7716 1.75407 13.789 1.83789 13.7891C1.93714 13.7891 2.00461 13.7603 2.03906 13.7031C2.08876 13.619 2.14798 13.4771 2.2168 13.2783C2.26645 13.1408 2.30634 13.0375 2.33691 12.9688C2.37132 12.8999 2.41213 12.8346 2.45801 12.7734C2.57258 12.7735 2.72524 12.7816 2.91602 12.7969C2.96566 12.7969 3.04043 12.801 3.13965 12.8086C3.24282 12.8124 3.33682 12.8135 3.4209 12.8135C3.57382 12.8135 3.77088 12.7971 4.01172 12.7627C4.05749 12.8314 4.09749 12.9134 4.13184 13.0088C4.16998 13.1042 4.19348 13.1614 4.20117 13.1807C4.2394 13.2915 4.27516 13.3875 4.30957 13.4678C4.34392 13.5441 4.38595 13.6148 4.43555 13.6797C4.49289 13.7561 4.57761 13.7949 4.68848 13.7949C4.77633 13.7949 4.8469 13.7714 4.90039 13.7256C4.9577 13.6759 4.9863 13.6053 4.98633 13.5137C4.98633 13.4754 4.9557 13.406 4.89453 13.3066C4.79909 13.1539 4.71105 12.986 4.63086 12.8027C4.5544 12.6154 4.46251 12.3836 4.35547 12.1084L4.23535 11.8047C4.09011 11.4263 3.96959 11.1301 3.87402 10.916C3.78227 10.7019 3.67099 10.4936 3.54102 10.291C3.50281 10.2261 3.47419 10.1842 3.45508 10.165C3.43596 10.1421 3.40941 10.1268 3.375 10.1191C3.34447 10.1077 3.29313 10.1016 3.2207 10.1016ZM3.22559 10.7959C3.34406 10.9985 3.46356 11.2713 3.58203 11.6152C3.69672 11.9364 3.78454 12.162 3.8457 12.292C3.73102 12.3188 3.57176 12.332 3.36914 12.332C3.08636 12.332 2.82271 12.3167 2.57812 12.2861C2.7004 11.9461 2.80974 11.6865 2.90527 11.5068C3.04658 11.2166 3.15295 10.9793 3.22559 10.7959Z"
+                fill="#B392F0"
+            />
+            <path
+                d="M16.5 9.5C17.0523 9.5 17.5 9.94772 17.5 10.5V13.5C17.5 14.0523 17.0523 14.5 16.5 14.5H12.5V9.5H16.5ZM13.8779 10.1016C13.7938 10.1016 13.7111 10.1302 13.6309 10.1875C13.5507 10.241 13.5107 10.3085 13.5107 10.3887C13.5108 10.5146 13.5169 10.6386 13.5283 10.7607C13.5436 10.8827 13.5528 10.9574 13.5566 10.9844C13.5834 11.1907 13.6048 11.3992 13.6201 11.6094C13.6354 11.8158 13.6426 12.0782 13.6426 12.3955C13.6426 12.6783 13.6293 12.946 13.6025 13.1982C13.5911 13.1944 13.5676 13.1924 13.5332 13.1924C13.4722 13.1925 13.4147 13.2098 13.3613 13.2441C13.3118 13.2747 13.2871 13.3187 13.2871 13.376C13.2872 13.5174 13.3923 13.6185 13.6025 13.6797C13.8127 13.737 14.0477 13.7656 14.3076 13.7656C14.6515 13.7656 14.9346 13.739 15.1562 13.6855C15.3816 13.6282 15.5595 13.5556 15.6895 13.4678C15.8232 13.3799 15.9652 13.2654 16.1143 13.124C16.2557 12.9941 16.3701 12.8235 16.458 12.6133C16.5459 12.3993 16.5898 12.1949 16.5898 12C16.5898 11.7363 16.5499 11.5105 16.4697 11.3232C16.3895 11.1321 16.2863 10.9636 16.1602 10.8184C16.0034 10.6425 15.7717 10.4842 15.4658 10.3428C15.1638 10.1976 14.7532 10.124 14.2334 10.124C14.199 10.124 14.1469 10.1209 14.0781 10.1133C13.9943 10.1057 13.9275 10.1016 13.8779 10.1016ZM14.1592 10.623C14.4495 10.6231 14.698 10.6445 14.9043 10.6865C15.1107 10.7247 15.2844 10.7881 15.4258 10.876C15.6169 10.9945 15.7588 11.1456 15.8506 11.3291C15.9422 11.5125 15.9883 11.7344 15.9883 11.9941C15.9882 12.2425 15.9188 12.4622 15.7812 12.6533C15.6436 12.8406 15.4618 12.9877 15.2363 13.0947C15.0109 13.1978 14.7717 13.25 14.5195 13.25C14.3709 13.25 14.2508 13.2418 14.1592 13.2266C14.2012 12.9896 14.2217 12.6739 14.2217 12.2803C14.2217 12.0089 14.2104 11.6513 14.1875 11.208C14.1799 11.0937 14.1758 11.0137 14.1758 10.9678C14.1643 10.8301 14.1592 10.7148 14.1592 10.623Z"
+                fill="#B392F0"
+            />
+        </svg>
+    );
+};
+export const EyeCloseIcon = () => {
+    return (
+        <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M2.80346 6.01162C2.71239 5.79913 2.4663 5.7007 2.25381 5.79177C2.04132 5.88284 1.94288 6.12892 2.03395 6.34141L2.80346 6.01162ZM13.9661 6.34141C14.0571 6.12892 13.9587 5.88284 13.7462 5.79177C13.5337 5.7007 13.2876 5.79913 13.1965 6.01162L13.9661 6.34141ZM8 9.66482C6.20065 9.66482 4.9087 8.7688 4.05101 7.84513C3.62228 7.38343 3.30794 6.92041 3.10107 6.57287C2.99787 6.39949 2.92207 6.25595 2.87269 6.15719C2.84801 6.10785 2.82999 6.06978 2.81848 6.04486C2.81273 6.03241 2.80861 6.02326 2.80611 6.01764C2.80486 6.01483 2.8039 6.01263 2.80346 6.01162C2.80345 6.0116 2.80347 6.01167 2.80346 6.01162C2.80351 6.01175 2.80346 6.01162 2.41871 6.17652C2.03395 6.34141 2.03387 6.34122 2.03395 6.34141C2.03399 6.3415 2.03423 6.34206 2.03431 6.34223C2.03444 6.34256 2.03462 6.34295 2.03481 6.3434C2.0352 6.3443 2.03569 6.34544 2.03629 6.34681C2.03749 6.34955 2.03911 6.35323 2.04115 6.35782C2.04522 6.36698 2.05098 6.37976 2.05845 6.39592C2.07337 6.42825 2.09514 6.47411 2.12388 6.53159C2.18133 6.6465 2.26686 6.80818 2.38168 7.00108C2.61084 7.38607 2.95928 7.8998 3.43751 8.41478C4.39374 9.44459 5.89244 10.502 8 10.502V9.66482ZM9.8488 9.31923C9.30719 9.53244 8.69303 9.66482 8 9.66482V10.502C8.8027 10.502 9.52068 10.3481 10.1554 10.0983L9.8488 9.31923ZM13.5813 6.17652C13.1965 6.01162 13.1965 6.0117 13.1965 6.01162C13.1966 6.01153 13.1968 6.01103 13.1968 6.01109C13.1967 6.0112 13.1966 6.0116 13.1962 6.01229C13.1956 6.01367 13.1945 6.0162 13.1929 6.01982C13.1897 6.02707 13.1844 6.03871 13.1771 6.05443C13.1624 6.08586 13.1396 6.13351 13.1083 6.19475C13.0458 6.31732 12.95 6.49371 12.8197 6.70295C12.5582 7.12264 12.1616 7.66782 11.6204 8.17574L12.1934 8.78616C12.8012 8.21564 13.2418 7.6086 13.5302 7.14569C13.6748 6.91363 13.7822 6.71612 13.8542 6.57511C13.8901 6.50456 13.9173 6.44801 13.9359 6.40818C13.9451 6.38827 13.9523 6.37252 13.9573 6.36128C13.9598 6.35566 13.9618 6.35117 13.9633 6.34784C13.964 6.34618 13.9646 6.34481 13.9651 6.34373C13.9653 6.3432 13.9655 6.34273 13.9656 6.34235C13.9657 6.34215 13.966 6.34157 13.9661 6.34141C13.9661 6.34145 13.9661 6.34133 13.9661 6.34141C13.9661 6.34132 13.9661 6.34141 13.5813 6.17652ZM11.6204 8.17574C11.141 8.6257 10.5528 9.04212 9.8488 9.31923L10.1554 10.0983C10.9779 9.77455 11.6538 9.29255 12.1934 8.78616L11.6204 8.17574Z"
+                fill="white"
+            />
+            <path
+                opacity="0.5"
+                d="M8.41869 10.0914C8.41869 9.86022 8.23127 9.6728 8.0001 9.6728C7.76892 9.6728 7.5815 9.86022 7.5815 10.0914H8.41869ZM10.3531 9.48839C10.227 9.29461 9.96767 9.23975 9.77389 9.36583C9.58016 9.49191 9.52524 9.75122 9.65138 9.945L10.3531 9.48839ZM6.34884 9.945C6.47493 9.75122 6.42005 9.49191 6.22628 9.36583C6.0325 9.23975 5.77321 9.29461 5.64712 9.48839L6.34884 9.945ZM4.85859 10.7003C4.7325 10.894 4.78738 11.1533 4.98115 11.2794C5.17493 11.4055 5.43423 11.3506 5.56031 11.1569L4.85859 10.7003ZM12.203 8.19292C12.0395 8.02944 11.7745 8.02944 11.611 8.19292C11.4475 8.3564 11.4475 8.62139 11.611 8.78487L12.203 8.19292ZM12.4482 9.62206C12.6117 9.78554 12.8767 9.78554 13.0402 9.62206C13.2036 9.45859 13.2036 9.19359 13.0402 9.03011L12.4482 9.62206ZM7.5815 11.4867C7.5815 11.7179 7.76892 11.9053 8.0001 11.9053C8.23127 11.9053 8.41869 11.7179 8.41869 11.4867H7.5815ZM10.4399 11.1569C10.566 11.3506 10.8253 11.4055 11.019 11.2794C11.2128 11.1533 11.2677 10.894 11.1416 10.7003L10.4399 11.1569ZM4.38918 8.78487C4.55265 8.62139 4.55265 8.3564 4.38918 8.19292C4.22571 8.02944 3.96067 8.02944 3.7972 8.19292L4.38918 8.78487ZM2.96001 9.03011C2.79653 9.19359 2.79653 9.45859 2.96001 9.62206C3.12348 9.78554 3.38852 9.78554 3.55199 9.62206L2.96001 9.03011ZM5.64712 9.48839L4.85859 10.7003L5.56031 11.1569L6.34884 9.945L5.64712 9.48839ZM11.611 8.78487L12.4482 9.62206L13.0402 9.03011L12.203 8.19292L11.611 8.78487ZM7.5815 10.0914V11.4867H8.41869V10.0914H7.5815ZM9.65138 9.945L10.4399 11.1569L11.1416 10.7003L10.3531 9.48839L9.65138 9.945ZM3.7972 8.19292L2.96001 9.03011L3.55199 9.62206L4.38918 8.78487L3.7972 8.19292Z"
+                fill="white"
+            />
+        </svg>
+    );
+};
+
+export const SaveIcon = () => {
+    return (
+        <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M14.6942 4.26907C12.9155 3.91031 11.0846 3.91031 9.30594 4.26907C7.25504 4.68274 5.77783 6.50871 5.77783 8.63016V17.8926C5.77783 19.5181 7.51712 20.5298 8.89979 19.7085L11.4179 18.2129C11.7775 17.9993 12.2226 17.9993 12.5822 18.2129L15.1003 19.7085C16.483 20.5298 18.2223 19.5181 18.2223 17.8926V8.63016C18.2223 6.50871 16.745 4.68274 14.6942 4.26907Z"
+                fill="white"
+            />
+        </svg>
+    );
+};
+
+export const FolderIcon = ({ isOpen }: { isOpen: boolean }) => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" className="hierarchy-icon">
+        {isOpen ? (
+            <path
+                d="M2 4h12v9a1 1 0 01-1 1H3a1 1 0 01-1-1V4z M2 4V3a1 1 0 011-1h3l1 1h6a1 1 0 011 1v1"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+            />
+        ) : (
+            <path
+                d="M2 3a1 1 0 011-1h3l1 1h6a1 1 0 011 1v8a1 1 0 01-1 1H3a1 1 0 01-1-1V3z"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+            />
+        )}
+    </svg>
+);
+
+export const CubeIcon = () => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" className="hierarchy-icon">
+        <path
+            d="M8 2l5 3v6l-5 3-5-3V5l5-3z M8 2v6 M3 5l5 3 M13 5l-5 3"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+    </svg>
+);
+
+export const ChevronIcon = ({ isOpen }: { isOpen: boolean }) => {
+    return isOpen ? (
+        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="hierarchy-chevron">
+            <path
+                d="M3 4.5L6 7.5L9 4.5"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </svg>
+    ) : (
+        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="hierarchy-chevron">
+            <path
+                d="M4.5 3L7.5 6L4.5 9"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </svg>
+    );
+};
+
+export const CollapseAllIcon = () => {
+    return (
+        <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M1.28508 7.8945H7.37508C7.66983 7.8945 7.90908 7.6365 7.90908 7.3215C7.90908 7.0065 7.66983 6.7485 7.37508 6.7485H1.28508C0.989582 6.7485 0.750332 7.0065 0.750332 7.3215C0.750332 7.6365 0.990332 7.8945 1.28508 7.8945ZM1.28508 5.2215H7.37508C7.66983 5.2215 7.90908 4.96425 7.90908 4.6485C7.90908 4.3335 7.66983 4.0755 7.37508 4.0755H1.28508C0.989582 4.0755 0.750332 4.3335 0.750332 4.6485C0.750332 4.9635 0.990332 5.2215 1.28508 5.2215ZM1.32333 2.6445H10.6488C10.9638 2.6445 11.2413 2.406 11.2503 2.09175C11.2528 2.01494 11.2399 1.93841 11.2122 1.86671C11.1845 1.79501 11.1427 1.72961 11.0893 1.6744C11.0358 1.61919 10.9718 1.5753 10.901 1.54534C10.8303 1.51538 10.7542 1.49996 10.6773 1.5H1.35183C1.03683 1.5 0.759332 1.73925 0.750332 2.05275C0.747714 2.12962 0.7606 2.20623 0.788222 2.27802C0.815844 2.34981 0.857636 2.4153 0.911107 2.47059C0.964578 2.52588 1.02863 2.56984 1.09945 2.59985C1.17028 2.62985 1.24642 2.64529 1.32333 2.64525V2.6445ZM8.58633 7.8855V4.086L11.2503 5.98575L8.58633 7.8855C8.58633 7.8945 8.58633 7.8945 8.58633 7.8855ZM10.6773 9.32625H1.35183C1.03683 9.32625 0.759332 9.56625 0.750332 9.87975C0.747817 9.95656 0.760779 10.0331 0.788447 10.1048C0.816115 10.1765 0.857923 10.2419 0.911384 10.2971C0.964844 10.3523 1.02886 10.3962 1.09964 10.4262C1.17041 10.4561 1.24648 10.4715 1.32333 10.4715H10.6488C10.9638 10.4715 11.2413 10.2322 11.2503 9.918C11.2528 9.84119 11.2399 9.76466 11.2122 9.69296C11.1845 9.62126 11.1427 9.55586 11.0893 9.50065C11.0358 9.44544 10.9718 9.40155 10.901 9.37159C10.8303 9.34163 10.7542 9.32621 10.6773 9.32625Z"
+                fill="white"
+            />
+        </svg>
+    );
+};
+
+export const SaveVersionIcon = () => {
+    return (
+        <svg
+            width="183"
+            height="114"
+            viewBox="0 0 183 114"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <foreignObject
+                x="-38.7816"
+                y="-60.596"
+                width="261.775"
+                height="235.114"
+            ></foreignObject>
+            <rect
+                data-figma-bg-blur-radius="60.596"
+                x="22.4204"
+                y="0.60596"
+                width="139.371"
+                height="112.709"
+                rx="10.3013"
+                fill="url(#paint0_linear_4816_8890)"
+                stroke="#564B69"
+                strokeWidth="1.21192"
+            />
+            <circle cx="33.9336" cy="10.9082" r="2.42384" fill="#6F6F7A" />
+            <circle cx="41.2051" cy="10.9082" r="2.42384" fill="#6F6F7A" />
+            <circle cx="48.4766" cy="10.9082" r="2.42384" fill="#6F6F7A" />
+            <rect
+                x="132.099"
+                y="8.48438"
+                width="20.6026"
+                height="3.63576"
+                rx="1.81788"
+                fill="#6F6F7A"
+            />
+            <rect
+                x="0.60596"
+                y="21.2075"
+                width="181.788"
+                height="27.8742"
+                rx="13.9371"
+                fill="url(#paint1_linear_4816_8890)"
+                stroke="#564B69"
+                strokeWidth="1.21192"
+            />
+            <g clipPath="url(#clip1_4816_8890)">
+                <path
+                    d="M14.5432 43.9516C9.69069 43.9516 5.74316 40.0038 5.74316 35.1516C5.74316 30.2993 9.69069 26.3516 14.5432 26.3516C19.3956 26.3516 23.3432 30.2993 23.3432 35.1516C23.3432 40.0038 19.3956 43.9516 14.5432 43.9516Z"
+                    fill="#D7EBFF"
+                />
+                <path
+                    d="M23.343 35.1516C23.343 30.2993 19.3954 26.3516 14.543 26.3516V43.9516C19.3954 43.9516 23.343 40.0038 23.343 35.1516Z"
+                    fill="#C4E2FF"
+                />
+                <path
+                    d="M14.5428 42.8044C10.3233 42.8044 6.89062 39.3715 6.89062 35.1522C6.89062 30.9328 10.3233 27.5 14.5428 27.5C18.7623 27.5 22.195 30.9329 22.195 35.1522C22.195 39.3715 18.7623 42.8044 14.5428 42.8044Z"
+                    fill="#88CC2A"
+                />
+                <g filter="url(#filter1_f_4816_8890)">
+                    <path
+                        d="M14.5428 42.8044C10.3233 42.8044 6.89062 39.3715 6.89062 35.1522C6.89062 30.9328 10.3233 27.5 14.5428 27.5C18.7623 27.5 22.195 30.9329 22.195 35.1522C22.195 39.3715 18.7623 42.8044 14.5428 42.8044Z"
+                        fill="#88CC2A"
+                    />
+                </g>
+                <path
+                    d="M22.1952 35.1522C22.1952 30.9329 18.7625 27.5 14.543 27.5V42.8043C18.7625 42.8044 22.1952 39.3715 22.1952 35.1522Z"
+                    fill="#7FB335"
+                />
+                <path
+                    d="M13.7776 38.5936C13.4839 38.5936 13.1903 38.4815 12.9661 38.2573L10.6009 35.8921C10.1526 35.4439 10.1526 34.7172 10.6009 34.269C11.0493 33.8206 11.7757 33.8206 12.2241 34.269L13.7776 35.8224L17.053 32.5472C17.5013 32.0988 18.2277 32.0988 18.6761 32.5472C19.1245 32.9954 19.1245 33.7221 18.6761 34.1703L14.5892 38.2573C14.365 38.4815 14.0713 38.5936 13.7776 38.5936Z"
+                    fill="white"
+                />
+                <path
+                    d="M17.0531 32.5472L14.543 35.0572V38.295C14.5579 38.2815 14.5749 38.2716 14.5893 38.2572L18.6762 34.1703C19.1246 33.7221 19.1246 32.9954 18.6762 32.5472C18.2278 32.0988 17.5015 32.0988 17.0531 32.5472Z"
+                    fill="#EDF0F2"
+                />
+            </g>
+            <rect
+                x="29.0859"
+                y="31.5078"
+                width="130.887"
+                height="6.0596"
+                rx="3.0298"
+                fill="#6F6F7A"
+            />
+            <path
+                d="M168.457 32.1172L173.911 37.5708"
+                stroke="#F65648"
+                strokeWidth="1.21192"
+                strokeLinecap="round"
+            />
+            <path
+                d="M173.911 32.1172L168.457 37.5708"
+                stroke="#F65648"
+                strokeWidth="1.21192"
+                strokeLinecap="round"
+            />
+            <defs>
+                <clipPath id="bgblur_0_4816_8890_clip_path" transform="translate(38.7816 60.596)">
+                    <rect x="22.4204" y="0.60596" width="139.371" height="112.709" rx="10.3013" />
+                </clipPath>
+                <filter
+                    id="filter1_f_4816_8890"
+                    x="1.93981"
+                    y="22.5492"
+                    width="25.2058"
+                    height="25.2063"
+                    filterUnits="userSpaceOnUse"
+                    colorInterpolationFilters="sRGB"
+                >
+                    <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                    <feBlend
+                        mode="normal"
+                        in="SourceGraphic"
+                        in2="BackgroundImageFix"
+                        result="shape"
+                    />
+                    <feGaussianBlur
+                        stdDeviation="2.47541"
+                        result="effect1_foregroundBlur_4816_8890"
+                    />
+                </filter>
+                <linearGradient
+                    id="paint0_linear_4816_8890"
+                    x1="24.4428"
+                    y1="-3.9557e-07"
+                    x2="36.8899"
+                    y2="151.75"
+                    gradientUnits="userSpaceOnUse"
+                >
+                    <stop stopColor="#333333" />
+                    <stop offset="1" stopColor="#2D2437" />
+                </linearGradient>
+                <linearGradient
+                    id="paint1_linear_4816_8890"
+                    x1="3.42139"
+                    y1="20.6016"
+                    x2="4.04875"
+                    y2="59.5968"
+                    gradientUnits="userSpaceOnUse"
+                >
+                    <stop stopColor="#333333" />
+                    <stop offset="1" stopColor="#2D2437" />
+                </linearGradient>
+                <clipPath id="clip1_4816_8890">
+                    <rect
+                        width="24"
+                        height="24"
+                        fill="white"
+                        transform="translate(2.54297 23.1484)"
+                    />
+                </clipPath>
+            </defs>
+        </svg>
+    );
+};
+
+export const RenameVersionIcon = () => {
+    return (
+        <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M12.7995 4.19826L18.9416 7.44492C19.8527 7.92654 19.8527 9.23161 18.9416 9.71322L17.8513 10.2896L18.9416 10.8658C19.8527 11.3475 19.8527 12.6526 18.9416 13.1342L17.8513 13.7105L18.9416 14.2868C19.8527 14.7684 19.8527 16.0735 18.9416 16.5551L12.7995 19.8017C12.2995 20.0661 11.701 20.0661 11.2008 19.8017L5.05883 16.5551C4.1477 16.0735 4.14771 14.7684 5.05883 14.2868L6.14911 13.7105L5.05883 13.1342C4.1477 12.6526 4.14771 11.3475 5.05883 10.8658L6.14911 10.2896L5.05883 9.71322C4.14771 9.2316 4.14771 7.92654 5.05883 7.44492L11.2008 4.19826C11.701 3.93391 12.2995 3.93391 12.7995 4.19826ZM16.0212 14.6779L12.7995 16.3808C12.2995 16.6452 11.701 16.6452 11.2008 16.3808L7.97918 14.6779L6.57338 15.421L12.0002 18.2895L17.427 15.421L16.0212 14.6779ZM16.0212 11.2569L12.7995 12.9599C12.3449 13.2002 11.809 13.222 11.3395 13.0254L11.2008 12.9599L7.97918 11.2569L6.57338 12L12.0002 14.8686L17.427 12L16.0212 11.2569ZM12.0002 5.71047L6.57338 8.57907L12.0002 11.4476L17.427 8.57907L12.0002 5.71047Z"
+                fill="white"
+            />
+        </svg>
+    );
+};
+
+export const FinishEditIcon = () => {
+    return (
+        <svg
+            width="61"
+            height="60"
+            viewBox="0 0 61 60"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M30.5 52C18.3688 52 8.5 42.1307 8.5 30C8.5 17.8693 18.3688 8 30.5 8C42.6312 8 52.5 17.8693 52.5 30C52.5 42.1307 42.6312 52 30.5 52Z"
+                fill="#D7EBFF"
+            />
+            <path
+                d="M52.5 30C52.5 17.8693 42.6312 8 30.5 8V52C42.6312 52 52.5 42.1307 52.5 30Z"
+                fill="#C4E2FF"
+            />
+            <path
+                d="M30.4996 49.1281C19.9508 49.1281 11.3691 40.5461 11.3691 29.9977C11.3691 19.4493 19.9508 10.8672 30.4996 10.8672C41.0484 10.8672 49.6301 19.4493 49.6301 29.9977C49.6301 40.546 41.0484 49.1281 30.4996 49.1281Z"
+                fill="#88CC2A"
+            />
+            <path
+                d="M49.6305 29.9977C49.6305 19.4493 41.0488 10.8672 30.5 10.8672V49.128C41.0488 49.1281 49.6305 40.546 49.6305 29.9977Z"
+                fill="#7FB335"
+            />
+            <path
+                d="M28.5872 38.605C27.8529 38.605 27.1187 38.3247 26.5583 37.7642L20.6454 31.8514C19.5244 30.7309 19.5244 28.9141 20.6454 27.7936C21.7664 26.6726 23.5822 26.6726 24.7032 27.7936L28.5872 31.6771L36.7755 23.4892C37.8964 22.3682 39.7123 22.3682 40.8333 23.4892C41.9542 24.6096 41.9542 26.4264 40.8333 27.547L30.6161 37.7642C30.0557 38.3247 29.3214 38.605 28.5872 38.605Z"
+                fill="white"
+            />
+            <path
+                d="M36.7752 23.497L30.5 29.7719V37.8665C30.5374 37.8327 30.5797 37.808 30.6158 37.7719L40.833 27.5547C41.954 26.4342 41.954 24.6174 40.833 23.4969C39.7122 22.376 37.8962 22.376 36.7752 23.497Z"
+                fill="#EDF0F2"
+            />
+        </svg>
+    );
+};
+
+export const PerformanceIcon = () => {
+    return (
+        <svg
+            width="22"
+            height="18"
+            viewBox="0 0 22 18"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M11.1484 1.16797C16.2895 1.16797 20.4921 5.3714 20.4922 10.5117C20.4922 12.7821 19.6669 14.8349 18.3467 16.4316L18.1807 16.2656C19.3378 14.8012 20.1179 12.9631 20.2236 10.9746L20.2354 10.5107C20.2364 9.46665 20.0573 8.43143 19.707 7.4502L19.5469 7.03223C19.1476 6.06682 18.5848 5.17876 17.8848 4.40625L17.5771 4.08301C16.733 3.23884 15.7302 2.56951 14.627 2.11328C13.524 1.65716 12.342 1.42257 11.1484 1.42383C10.1041 1.42277 9.06837 1.60175 8.08691 1.95215L7.66992 2.11328C6.70451 2.51257 5.81644 3.07536 5.04395 3.77539L4.71973 4.08398C3.98113 4.8228 3.37584 5.68237 2.93066 6.625L2.75 7.03418C2.3509 7.99977 2.12214 9.02598 2.07227 10.0674L2.06152 10.5127C2.06152 12.7338 2.80096 14.7019 4.10059 16.2803L3.93652 16.4443C2.58335 14.8587 1.80469 12.8058 1.80469 10.5117C1.80479 5.37146 6.00742 1.16807 11.1484 1.16797ZM10.8008 11.2383L10.3887 10.8076L13.8027 7.81543L10.8008 11.2383Z"
+                stroke="url(#paint0_linear_1736_988)"
+                strokeWidth="1.80917"
+                strokeLinecap="round"
+            />
+            <defs>
+                <linearGradient
+                    id="paint0_linear_1736_988"
+                    x1="11.1486"
+                    y1="0.263672"
+                    x2="11.1486"
+                    y2="17.742"
+                    gradientUnits="userSpaceOnUse"
+                >
+                    <stop stopColor="#6F42C1" />
+                    <stop offset="1" stopColor="#B392F0" />
+                </linearGradient>
+            </defs>
+        </svg>
+    );
+};
+
+export const GreenTickIcon = () => {
+    return (
+        <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M7.8265 15.1051C11.9138 15.1051 15.2272 11.7998 15.2272 7.72249C15.2272 3.64517 11.9138 0.339844 7.8265 0.339844C3.73919 0.339844 0.425781 3.64517 0.425781 7.72249C0.425781 11.7998 3.73919 15.1051 7.8265 15.1051Z"
+                fill="#14CA44"
+            />
+            <path
+                d="M4.85742 7.20505L6.91318 9.25578L10.3394 5.83789"
+                stroke="white"
+                strokeWidth="2.45534"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </svg>
+    );
+};
+
+export const SuccessIcon = () => {
+    return (
+        <svg
+            width="155"
+            height="155"
+            viewBox="0 0 155 155"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M115.596 48.1456C117.888 50.4283 117.896 54.1368 115.613 56.4288L66.2605 105.982C63.9779 108.274 60.2695 108.281 57.9775 105.999L39.9789 88.075C37.6868 85.7924 37.6791 82.0838 39.9617 79.7917C42.2443 77.4996 45.9528 77.4919 48.2449 79.7745L62.0935 93.5657L107.313 48.1624C109.596 45.8704 113.304 45.8629 115.596 48.1456Z"
+                fill="#244A84"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M77.1586 11.7143C46.1114 11.7143 20.065 33.3937 13.379 62.4361L13.379 62.4362C12.2906 67.1635 11.7143 72.0909 11.7143 77.1586C11.7143 113.275 41.0421 142.603 77.1586 142.603C113.275 142.603 142.603 113.275 142.603 77.1586C142.603 41.0421 113.275 11.7143 77.1586 11.7143ZM1.96331 59.808C9.8455 25.5697 40.53 0 77.1586 0C119.745 0 154.317 34.5725 154.317 77.1586C154.317 119.745 119.745 154.317 77.1586 154.317C34.5725 154.317 0 119.745 0 77.1586C0 71.1999 0.677961 65.3909 1.96331 59.808Z"
+                fill="#C2CDE0"
+            />
+        </svg>
+    );
+};
+
+export const AlertIcon = () => {
+    return (
+        <svg
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M13.454 14.797H6.54597C6.1917 14.8122 5.83973 14.7329 5.5262 14.5673C5.21266 14.4017 4.94885 14.1556 4.76177 13.8544C4.5747 13.5531 4.47112 13.2075 4.46165 12.8531C4.45219 12.4986 4.53719 12.148 4.70792 11.8372L8.16189 5.83436C8.35337 5.51828 8.62315 5.25693 8.94513 5.07553C9.2671 4.89413 9.63038 4.79883 9.99993 4.79883C10.3695 4.79883 10.7328 4.89413 11.0548 5.07553C11.3768 5.25693 11.6466 5.51828 11.838 5.83436L15.292 11.8372C15.4627 12.148 15.5478 12.4986 15.5383 12.8531C15.5288 13.2075 15.4253 13.5531 15.2382 13.8544C15.0511 14.1556 14.7872 14.4017 14.4737 14.5673C14.1602 14.7329 13.8082 14.8122 13.454 14.797Z"
+                stroke="white"
+                strokeWidth="0.832956"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M10.0015 12.1777C10.0679 12.1791 10.1324 12.1997 10.187 12.2373C10.2417 12.275 10.2842 12.328 10.3091 12.3896C10.3339 12.4515 10.3402 12.5197 10.3267 12.585C10.3131 12.6501 10.2802 12.7099 10.2329 12.7568C10.1857 12.8035 10.1254 12.8357 10.0601 12.8486C9.99488 12.8615 9.92713 12.8544 9.86572 12.8291C9.83506 12.8165 9.80623 12.8 9.78076 12.7793L9.71436 12.7061L9.67139 12.6172C9.66175 12.5864 9.65628 12.5541 9.65576 12.5215C9.65579 12.4763 9.66481 12.4314 9.68213 12.3896C9.69961 12.3477 9.72603 12.3093 9.7583 12.2773C9.79045 12.2455 9.82857 12.2203 9.87061 12.2031C9.91219 12.1862 9.95664 12.1776 10.0015 12.1777ZM9.85596 10.998L9.77783 8.09961V8.08887L9.77686 8.07812V8.03125C9.77846 8.01596 9.78187 8.00098 9.78662 7.98633C9.7962 7.95676 9.81179 7.92933 9.83252 7.90625C9.84285 7.89476 9.85427 7.88407 9.8667 7.875L9.90674 7.85156C9.93523 7.83888 9.96642 7.83203 9.99756 7.83203C10.013 7.83203 10.0284 7.83375 10.0435 7.83691L10.0884 7.85156C10.1166 7.86421 10.1418 7.88315 10.1626 7.90625C10.1834 7.92943 10.199 7.95689 10.2085 7.98633C10.2181 8.01596 10.2215 8.04735 10.2183 8.07812L10.2173 8.08887V8.10059L10.145 10.999V11.0059C10.145 11.0441 10.1291 11.0804 10.1021 11.1074C10.0749 11.1345 10.0386 11.1504 10.0005 11.1504C9.96219 11.1504 9.92502 11.1345 9.89795 11.1074C9.87115 11.0804 9.85598 11.0439 9.85596 11.0059V10.998Z"
+                fill="black"
+                stroke="white"
+                strokeWidth="0.555304"
+            />
+        </svg>
+    );
+};
+export const NavigationIcon = () => {
+    return (
+        <svg
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M9.99988 4.58398C7.0132 4.58398 4.5835 7.01369 4.5835 10.0004C4.5835 12.9872 7.0132 15.4173 9.99988 15.4173C12.9867 15.4173 15.4168 12.9872 15.4168 10.0004C15.4168 7.01369 12.9867 4.58398 9.99988 4.58398ZM9.99988 14.7764C7.36664 14.7764 5.22402 12.634 5.22402 10.0004C5.22402 7.36713 7.3666 5.22451 9.99988 5.22451C12.6335 5.22451 14.7759 7.36709 14.7759 10.0004C14.7759 12.634 12.6335 14.7764 9.99988 14.7764Z"
+                fill="white"
+                fillOpacity="0.85"
+            />
+            <path
+                d="M9.92024 6.74255L8.37659 12.8023C8.36662 12.8418 8.38635 12.8823 8.42392 12.8985C8.46109 12.9147 8.50461 12.9018 8.52685 12.8671L10.0191 10.5407L11.4739 12.8667C11.4894 12.8915 11.5166 12.9055 11.544 12.9055C11.5548 12.9055 11.5655 12.9033 11.5764 12.8991C11.6142 12.8829 11.6341 12.8419 11.6244 12.8023L10.0807 6.74255C10.0619 6.66915 9.93845 6.66915 9.92024 6.74255ZM10.0899 10.3422C10.0747 10.3184 10.0487 10.3039 10.0203 10.3039H10.0201C9.99177 10.3039 9.96531 10.3178 9.95019 10.3416L8.66357 12.3474L10.0001 7.09867L11.3321 12.3286L10.0899 10.3422Z"
+                fill="white"
+                fillOpacity="0.85"
+            />
+            <path
+                d="M11.5438 12.9321C11.5066 12.9321 11.4708 12.9126 11.4514 12.8814L10.0187 10.59L8.54867 12.8817C8.52069 12.9257 8.46184 12.9438 8.41374 12.9235C8.3643 12.9019 8.33822 12.8484 8.35165 12.7966L9.89512 6.73667C9.90622 6.69241 9.94861 6.66211 10.0003 6.66211C10.0519 6.66211 10.0946 6.69199 10.1059 6.73667L11.649 12.7966C11.6624 12.8488 11.6362 12.9024 11.5865 12.9235C11.5723 12.9293 11.5584 12.9321 11.5438 12.9321ZM10.0189 10.4928L10.0411 10.5279L11.4957 12.8537C11.5097 12.8765 11.5396 12.8863 11.5664 12.8754C11.5917 12.8645 11.6057 12.8365 11.5988 12.8095L10.0553 6.7495C10.0486 6.72325 10.0216 6.71384 10.0002 6.71384C9.9787 6.71384 9.95185 6.72325 9.94515 6.7495L8.4019 12.8095C8.39461 12.8365 8.40842 12.8645 8.4339 12.8754C8.45842 12.8852 8.48985 12.8766 8.50444 12.8537L10.0189 10.4928ZM8.59871 12.4969L9.99995 6.99367L11.3991 12.4844L10.0678 10.3568C10.0465 10.3226 9.99244 10.3244 9.97215 10.3562L8.59871 12.4969Z"
+                fill="white"
+                fillOpacity="0.85"
+            />
+        </svg>
+    );
+};
+export const HangTagIcon = () => {
+    return (
+        <svg
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <g clipPath="url(#clip0_5895_2753)">
+                <path
+                    d="M14.7002 5.2998V9.37598L9.5 14.5762L5.42383 10.5L10.624 5.2998H14.7002ZM12 7.2002C11.5581 7.2002 11.2002 7.55806 11.2002 8C11.2002 8.44194 11.5581 8.7998 12 8.7998C12.4419 8.7998 12.7998 8.44194 12.7998 8C12.7998 7.55806 12.4419 7.2002 12 7.2002Z"
+                    stroke="white"
+                    strokeOpacity="0.85"
+                    strokeWidth="0.6"
+                />
+            </g>
+            <defs>
+                <clipPath id="clip0_5895_2753">
+                    <rect width="20" height="20" fill="white" />
+                </clipPath>
+            </defs>
+        </svg>
+    );
+};
+export const DecalInfoIcon = () => {
+    return (
+        <svg
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M10.0002 15.4173C12.9917 15.4173 15.4168 12.9922 15.4168 10.0007C15.4168 7.00911 12.9917 4.58398 10.0002 4.58398C7.00862 4.58398 4.5835 7.00911 4.5835 10.0007C4.5835 12.9922 7.00862 15.4173 10.0002 15.4173Z"
+                stroke="white"
+                strokeOpacity="0.85"
+                strokeWidth="0.8125"
+            />
+            <path
+                d="M10 12.709V9.45898"
+                stroke="white"
+                strokeOpacity="0.85"
+                strokeWidth="0.8125"
+                strokeLinecap="round"
+            />
+            <path
+                d="M10.0002 7.29167C10.2993 7.29167 10.5418 7.53418 10.5418 7.83333C10.5418 8.13249 10.2993 8.375 10.0002 8.375C9.70101 8.375 9.4585 8.13249 9.4585 7.83333C9.4585 7.53418 9.70101 7.29167 10.0002 7.29167Z"
+                fill="white"
+                fillOpacity="0.85"
+            />
+        </svg>
+    );
+};
+
+export const LayeringBottomIcon = () => {
+    return (
+        <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <rect
+                x="0.857138"
+                y="5.39229"
+                width="10.9233"
+                height="9.75071"
+                stroke="white"
+                strokeWidth="0.714277"
+            />
+            <path
+                d="M5.49121 0.599609H14.3867C14.9559 0.599609 15.3994 1.01267 15.3994 1.5V9.5C15.3993 9.98728 14.9559 10.3994 14.3867 10.3994H5.49121C4.92207 10.3994 4.47858 9.98728 4.47852 9.5V1.5C4.47852 1.01268 4.92203 0.599609 5.49121 0.599609Z"
+                fill="#6F42C1"
+                stroke="white"
+                strokeWidth="0.2"
+            />
+            <path
+                d="M7.87686 6.85212L9.54491 8.3521C9.5966 8.39897 9.65809 8.43616 9.72585 8.46155C9.7936 8.48693 9.86628 8.5 9.93968 8.5C10.0131 8.5 10.0858 8.48693 10.1535 8.46155C10.2213 8.43616 10.2828 8.39897 10.3345 8.3521L12.0025 6.85212C12.1072 6.75797 12.166 6.63027 12.166 6.49713C12.166 6.36398 12.1072 6.23628 12.0025 6.14213C11.8978 6.04798 11.7558 5.99509 11.6077 5.99509C11.4597 5.99509 11.3177 6.04798 11.213 6.14213L10.4957 6.79212V2.99717C10.4957 2.86456 10.4371 2.73739 10.3328 2.64362C10.2286 2.54985 10.0871 2.49718 9.93968 2.49718C9.79222 2.49718 9.65079 2.54985 9.54652 2.64362C9.44224 2.73739 9.38366 2.86456 9.38366 2.99717V6.79212L8.6664 6.14213C8.61472 6.09527 8.55322 6.05807 8.48546 6.03269C8.41771 6.0073 8.34503 5.99423 8.27163 5.99423C8.19823 5.99423 8.12556 6.0073 8.0578 6.03269C7.99005 6.05807 7.92855 6.09527 7.87686 6.14213C7.82475 6.18861 7.78338 6.24391 7.75516 6.30484C7.72693 6.36577 7.71239 6.43112 7.71239 6.49713C7.71239 6.56313 7.72693 6.62848 7.75516 6.68941C7.78338 6.75034 7.82475 6.80564 7.87686 6.85212Z"
+                fill="#FCFDFD"
+            />
+        </svg>
+    );
+};
+
+export const LayeringTopIcon = () => {
+    return (
+        <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <rect
+                x="0.857138"
+                y="5.39229"
+                width="10.9233"
+                height="9.75071"
+                stroke="white"
+                strokeWidth="0.714277"
+            />
+            <path
+                d="M5.49121 0.599609H14.3867C14.9559 0.599609 15.3994 1.01267 15.3994 1.5V9.5C15.3993 9.98728 14.9559 10.3994 14.3867 10.3994H5.49121C4.92207 10.3994 4.47858 9.98728 4.47852 9.5V1.5C4.47852 1.01268 4.92203 0.599609 5.49121 0.599609Z"
+                fill="#6F42C1"
+                stroke="white"
+                strokeWidth="0.2"
+            />
+            <path
+                d="M12.002 4.14397L10.334 2.64399C10.2823 2.59713 10.2208 2.55993 10.1531 2.53455C10.0853 2.50916 10.0126 2.49609 9.93923 2.49609C9.86583 2.49609 9.79315 2.50916 9.7254 2.53455C9.65764 2.55993 9.59614 2.59713 9.54446 2.64399L7.87641 4.14397C7.77171 4.23812 7.71289 4.36582 7.71289 4.49897C7.71289 4.63212 7.77171 4.75981 7.87641 4.85396C7.98111 4.94811 8.12311 5.00101 8.27118 5.00101C8.41925 5.00101 8.56125 4.94811 8.66595 4.85396L9.38321 4.20397V7.99892C9.38321 8.13153 9.44179 8.25871 9.54606 8.35247C9.65034 8.44624 9.79176 8.49892 9.93923 8.49892C10.0867 8.49892 10.2281 8.44624 10.3324 8.35247C10.4367 8.25871 10.4952 8.13153 10.4952 7.99892V4.20397L11.2125 4.85396C11.2642 4.90083 11.3257 4.93802 11.3934 4.96341C11.4612 4.98879 11.5339 5.00186 11.6073 5.00186C11.6807 5.00186 11.7533 4.98879 11.8211 4.96341C11.8889 4.93802 11.9504 4.90083 12.002 4.85396C12.0542 4.80748 12.0955 4.75218 12.1238 4.69125C12.152 4.63033 12.1665 4.56497 12.1665 4.49897C12.1665 4.43296 12.152 4.36761 12.1238 4.30668C12.0955 4.24575 12.0542 4.19045 12.002 4.14397Z"
+                fill="#FCFDFD"
+            />
+        </svg>
+    );
+};
+
+export const ValueUpdateIcon = () => {
+    return (
+        <svg
+            width="9"
+            height="12"
+            viewBox="0 0 9 12"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M2.30511 4.5C1.50348 4.5 1.10202 3.53079 1.66886 2.96396L3.80771 0.825099C4.15911 0.473707 4.72882 0.473708 5.08021 0.825099L7.21907 2.96396C7.78591 3.5308 7.38445 4.5 6.58282 4.5L2.30511 4.5Z"
+                fill="#B7B7C6"
+            />
+            <path
+                d="M2.30511 7.5C1.50348 7.5 1.10202 8.46921 1.66886 9.03604L3.80771 11.1749C4.15911 11.5263 4.72882 11.5263 5.08021 11.1749L7.21907 9.03604C7.78591 8.4692 7.38445 7.5 6.58282 7.5L2.30511 7.5Z"
+                fill="#B7B7C6"
+            />
+        </svg>
+    );
+};
+
+export const ListTaskIcon = () => {
+    return (
+        <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M6.00008 8.66667H12.6667C13.0349 8.66667 13.3334 8.96514 13.3334 9.33333C13.3334 9.70152 13.0349 10 12.6667 10H6.00008C5.63189 10 5.33341 9.70152 5.33341 9.33333C5.33341 8.96514 5.63189 8.66667 6.00008 8.66667ZM6.00008 11.3333H12.6667C13.0349 11.3333 13.3334 11.6318 13.3334 12C13.3334 12.3682 13.0349 12.6667 12.6667 12.6667H6.00008C5.63189 12.6667 5.33341 12.3682 5.33341 12C5.33341 11.6318 5.63189 11.3333 6.00008 11.3333ZM10.0001 6H12.6667C13.0349 6 13.3334 6.29848 13.3334 6.66667C13.3334 7.03486 13.0349 7.33333 12.6667 7.33333H10.0001C9.63189 7.33333 9.33342 7.03486 9.33342 6.66667C9.33342 6.29848 9.63189 6 10.0001 6ZM5.16184 7.27614L2.66675 4.78105L3.60956 3.83824L5.16184 5.39052L8.55237 2L9.49518 2.94281L5.16184 7.27614Z"
+                fill="#B7B7C6"
+            />
+        </svg>
+    );
+};
+
+export const LocationPinIcon = () => {
+    return (
+        <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M7.99992 14C10.3333 11.6 12.6666 9.45093 12.6666 6.8C12.6666 4.14903 10.5773 2 7.99992 2C5.42259 2 3.33325 4.14903 3.33325 6.8C3.33325 9.45093 5.66659 11.6 7.99992 14Z"
+                stroke="#B7B7C6"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M8 8.66602C9.1046 8.66602 10 7.77062 10 6.66602C10 5.56145 9.1046 4.66602 8 4.66602C6.8954 4.66602 6 5.56145 6 6.66602C6 7.77062 6.8954 8.66602 8 8.66602Z"
+                stroke="#B7B7C6"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </svg>
+    );
+};
+
+export const ClockThreeIcon = () => {
+    return (
+        <svg
+            width="11"
+            height="11"
+            viewBox="0 0 11 11"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M5.5 3.20833V5.5H6.875M9.625 5.5C9.625 7.77819 7.77819 9.625 5.5 9.625C3.22183 9.625 1.375 7.77819 1.375 5.5C1.375 3.22183 3.22183 1.375 5.5 1.375C7.77819 1.375 9.625 3.22183 9.625 5.5Z"
+                stroke="#FCFDFD"
+                strokeWidth="0.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </svg>
+    );
+};
+
+export const SlectedTickIcon = () => {
+    return (
+        <svg
+            width="11"
+            height="11"
+            viewBox="0 0 11 11"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M4.90747 6.87464C4.98667 6.94724 5.11867 6.94724 5.19787 6.86804L7.67287 4.31384C7.75207 4.23464 7.75207 4.10264 7.66627 4.02344C7.58707 3.94424 7.45507 3.94424 7.37587 4.03004L4.90087 6.58424L5.19127 6.57764L3.68647 5.19824C3.60067 5.11904 3.47527 5.12564 3.39607 5.21144C3.31687 5.29724 3.32347 5.42264 3.40927 5.50184L4.90747 6.87464Z"
+                fill="#FCFDFD"
+            />
+            <path
+                d="M5.53442 9.57422C3.25742 9.57422 1.40942 7.72622 1.40942 5.44922C1.40942 3.17222 3.25742 1.32422 5.53442 1.32422C7.81142 1.32422 9.65942 3.17222 9.65942 5.44922C9.65942 7.72622 7.81142 9.57422 5.53442 9.57422ZM5.53442 1.72022C3.47522 1.72022 1.80542 3.39002 1.80542 5.44922C1.80542 7.50842 3.47522 9.17822 5.53442 9.17822C7.59362 9.17822 9.26342 7.50842 9.26342 5.44922C9.26342 3.39002 7.59362 1.72022 5.53442 1.72022Z"
+                fill="#FCFDFD"
+            />
+        </svg>
+    );
+};
+
+export const HourGlassIcon = () => {
+    return (
+        <svg
+            width="11"
+            height="11"
+            viewBox="0 0 11 11"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M5.98324 5.5C5.98324 6.21872 6.39671 6.55406 6.79659 6.87775C7.29742 7.28394 7.86133 7.74109 7.91957 9.13971H3.07633C3.13456 7.74109 3.69847 7.28394 4.19929 6.87775C4.59918 6.55406 5.01265 6.21872 5.01265 5.5C5.01265 4.78128 4.59918 4.44594 4.19929 4.12225C3.69847 3.71606 3.13456 3.25891 3.07633 1.86029H7.91956C7.86133 3.25891 7.29741 3.71606 6.79659 4.12225C6.39671 4.44594 5.98324 4.78128 5.98324 5.5ZM7.10233 4.49884C7.68468 4.02665 8.40971 3.43896 8.40971 1.61765V1.375H2.58618V1.61764C2.58618 3.43896 3.31121 4.02664 3.89357 4.49884C4.275 4.80846 4.52735 5.01276 4.52735 5.5C4.52735 5.98724 4.275 6.19154 3.89357 6.50116C3.31121 6.97335 2.58618 7.56104 2.58618 9.38235V9.625H8.40971V9.38236C8.40971 7.56104 7.68468 6.97336 7.10233 6.50116C6.72089 6.19154 6.46853 5.98724 6.46853 5.5C6.46853 5.01276 6.72088 4.80846 7.10233 4.49884ZM5.38706 6.85208L4.65814 7.44365C4.33882 7.70231 4.06366 7.92506 3.91613 8.41181H7.07976C6.93223 7.92506 6.65707 7.70231 6.33775 7.44365L5.60884 6.85208C5.54429 6.79967 5.4516 6.79967 5.38706 6.85208Z"
+                fill="#FCFDFD"
+            />
+        </svg>
+    );
+};
+
+export const TargetIcon = () => {
+    return (
+        <svg
+            width="11"
+            height="11"
+            viewBox="0 0 11 11"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M9.625 5.5C9.625 7.77815 7.77815 9.625 5.5 9.625M9.625 5.5C9.625 3.22182 7.77815 1.375 5.5 1.375M9.625 5.5H7.975M5.5 9.625C3.22182 9.625 1.375 7.77815 1.375 5.5M5.5 9.625V7.975M5.5 1.375C3.22182 1.375 1.375 3.22182 1.375 5.5M5.5 1.375V3.025M1.375 5.5H3.025"
+                stroke="#FCFDFD"
+                strokeWidth="0.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </svg>
+    );
+};
+
+export const RightHalfFillCircleIcon = () => {
+    return (
+        <svg
+            width="19"
+            height="19"
+            viewBox="0 0 19 19"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M9.50391 17.3962C13.8218 17.3962 17.4003 13.8178 17.4003 9.49985C17.4003 5.18983 13.8139 1.60352 9.49594 1.60352C5.17802 1.60352 1.59961 5.18983 1.59961 9.49985C1.59961 13.8178 5.18596 17.3962 9.50391 17.3962ZM9.50391 16.0523C5.86982 16.0523 2.95143 13.1339 2.95143 9.49985C2.95143 5.87373 5.86189 2.95533 9.49594 2.95533L9.50391 16.0523Z"
+                fill="#CCACFF"
+            />
+        </svg>
+    );
+};
+
+export const PerformanceStatsIcon = () => {
+    return (
+        <svg
+            width="18"
+            height="18"
+            viewBox="0 0 18 18"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M14.8929 11.25C14.9366 11.25 14.9799 11.2518 15.0228 11.2554L14.8929 11.25C14.9523 11.25 15.0111 11.2534 15.0689 11.26C15.0972 11.2632 15.1255 11.2673 15.1535 11.2721C15.1671 11.2744 15.1804 11.2769 15.1936 11.2795C15.2253 11.2858 15.2571 11.2932 15.2886 11.3015C15.2959 11.3035 15.3028 11.3054 15.3097 11.3073C15.9951 11.5 16.5 12.1568 16.5 12.9375C16.5 13.8695 15.7805 14.625 14.8929 14.625C14.0053 14.625 13.2857 13.8695 13.2857 12.9375C13.2857 12.2836 13.64 11.7165 14.158 11.4363L14.1825 11.4233C14.2082 11.41 14.2343 11.3974 14.2608 11.3855L14.158 11.4363C14.202 11.4126 14.2472 11.3908 14.2934 11.3713C14.3196 11.3603 14.3459 11.35 14.3725 11.3404C14.385 11.3359 14.3977 11.3315 14.4106 11.3273C14.433 11.3199 14.4555 11.313 14.4782 11.3067C14.4957 11.3018 14.5132 11.2972 14.5309 11.293C14.5568 11.2867 14.5833 11.281 14.6101 11.276C14.6214 11.2739 14.6327 11.272 14.644 11.2701C14.6755 11.265 14.7071 11.2608 14.739 11.2576C14.7483 11.2567 14.7576 11.2559 14.767 11.2551C14.8084 11.2517 14.8504 11.25 14.8929 11.25ZM3.10714 11.25C3.1534 11.25 3.1992 11.2521 3.24447 11.2561L3.10714 11.25C3.16574 11.25 3.22361 11.2533 3.28059 11.2597C3.31033 11.2631 3.34005 11.2673 3.3695 11.2724C3.38717 11.2754 3.40441 11.2787 3.42156 11.2823C3.4495 11.2881 3.47724 11.2947 3.5047 11.302C3.51921 11.3059 3.53337 11.3099 3.54745 11.3141C3.58874 11.3264 3.62986 11.3406 3.6702 11.3565C3.67382 11.3579 3.67761 11.3594 3.68139 11.3609C3.7172 11.3753 3.75223 11.3909 3.7866 11.4078C3.79182 11.4103 3.79697 11.4129 3.80211 11.4155C4.3419 11.6879 4.71429 12.267 4.71429 12.9375C4.71429 13.8695 3.99474 14.625 3.10714 14.625C2.21954 14.625 1.5 13.8695 1.5 12.9375C1.5 12.0987 2.08287 11.4028 2.84653 11.2721C2.85718 11.2702 2.86803 11.2685 2.87892 11.2669C2.88372 11.2662 2.88844 11.2655 2.89316 11.2648C2.96309 11.2551 3.03456 11.25 3.10714 11.25ZM11.5949 8.4375C11.8445 8.4375 12.0469 8.64527 12.0469 8.90156C12.0469 8.97298 12.0312 9.04063 12.0031 9.10106L12.0041 9.10327L9.64783 12.9735C9.60495 13.0651 9.54787 13.1483 9.47951 13.2202C9.31535 13.3928 9.08616 13.5 8.83259 13.5C8.33331 13.5 7.92857 13.0845 7.92857 12.5719C7.92857 12.3409 8.01076 12.1296 8.14675 11.9672L8.18282 11.928L8.17932 11.9249L11.3015 8.54545C11.3824 8.47851 11.484 8.4375 11.5949 8.4375ZM11.3313 5.0625C13.51 5.97312 15.0904 8.1232 15.2885 10.6837C15.16 10.6587 15.0279 10.6458 14.8929 10.6458C14.6286 10.6458 14.3753 10.6952 14.1408 10.7855C13.9844 8.73724 12.7454 7.00925 11.0251 6.23205C11.1919 5.93956 11.2978 5.60356 11.3246 5.24409L11.3313 5.0625ZM6.9701 4.92558C6.96756 4.97088 6.96627 5.01653 6.96627 5.0625C6.96627 5.4431 7.05463 5.80203 7.21099 6.1179C5.35305 6.82594 3.99052 8.62072 3.8197 10.7711C3.59683 10.6899 3.35688 10.6458 3.10714 10.6458C2.95794 10.6458 2.81224 10.6616 2.67145 10.6915C2.86628 8.12968 4.44576 5.977 6.62395 5.05909L6.8092 4.98457L6.9701 4.92558ZM9.14881 3.375C9.96607 3.375 10.6408 4.01551 10.7427 4.84453C10.7424 4.84445 10.7419 4.84419 10.7427 4.84453L10.7507 4.92538C10.7542 4.97061 10.756 5.01634 10.756 5.0625C10.756 5.10841 10.7542 5.15388 10.7508 5.19887L10.756 5.0625C10.756 5.124 10.7528 5.18472 10.7467 5.24452C10.7437 5.27412 10.74 5.30333 10.7355 5.3323C10.7329 5.34948 10.73 5.36651 10.7269 5.38345C10.7221 5.40994 10.7166 5.43628 10.7106 5.46237C10.7066 5.47937 10.7025 5.49603 10.6982 5.5126C10.6634 5.64484 10.6137 5.77058 10.551 5.88768C10.5465 5.89622 10.5418 5.90473 10.5371 5.91318C10.5202 5.94358 10.5024 5.97334 10.4837 6.00246C10.4797 6.00881 10.4757 6.01492 10.4717 6.02099C10.1817 6.46144 9.69736 6.75 9.14881 6.75C8.48455 6.75 7.91441 6.32685 7.66955 5.72327C7.66321 5.70712 7.6569 5.69091 7.65082 5.67457C7.64358 5.6555 7.63689 5.63645 7.63052 5.61724C7.62394 5.59704 7.61755 5.57656 7.61154 5.55591C7.59268 5.49135 7.57745 5.42495 7.56608 5.35715C7.56407 5.34507 7.56213 5.33276 7.56033 5.32041C7.54803 5.23618 7.54167 5.15012 7.54167 5.0625C7.54167 4.96409 7.54969 4.86765 7.56508 4.77386C7.56645 4.76554 7.56786 4.75731 7.56933 4.7491C7.70925 3.96687 8.3632 3.375 9.14881 3.375Z"
+                fill="white"
+            />
+        </svg>
+    );
+};
diff --git a/src/pages/SceneView.tsx b/src/pages/SceneView.tsx
new file mode 100644
index 0000000..b701242
--- /dev/null
+++ b/src/pages/SceneView.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import OutlinePanel from "../components/outlinePanel/OutlinePanel";
+
+const SceneView = () => {
+    return (
+        <OutlinePanel
+        // panelSide="right"
+        // textColor=""
+        // addIconColor=""
+        // eyeIconColor=""
+        // backgroundColor=""
+        />
+    );
+};
+
+export default SceneView;
diff --git a/src/styles/abstracts/_functions.scss b/src/styles/abstracts/_functions.scss
new file mode 100644
index 0000000..6f0745d
--- /dev/null
+++ b/src/styles/abstracts/_functions.scss
@@ -0,0 +1,5 @@
+// get rem from pixels
+
+@function get_rem($px) {
+  @return calc($px / 16 * 1rem);
+}
diff --git a/src/styles/abstracts/_mixins.scss b/src/styles/abstracts/_mixins.scss
new file mode 100644
index 0000000..4133dc1
--- /dev/null
+++ b/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
+  );
+}
diff --git a/src/styles/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss
new file mode 100644
index 0000000..2ddbfc9
--- /dev/null
+++ b/src/styles/abstracts/_variables.scss
@@ -0,0 +1,171 @@
+@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%);
+$background-model: #ffffff80;
+
+// ---------- 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%
+);
+$background-model-dark: #00000080;
+
+// 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;
diff --git a/src/styles/components/outlinePanel.scss b/src/styles/components/outlinePanel.scss
new file mode 100644
index 0000000..f0704fc
--- /dev/null
+++ b/src/styles/components/outlinePanel.scss
@@ -0,0 +1,580 @@
+// .outline-overlay {
+//     padding: 0 4px;
+//     font-family: "Segoe UI", sans-serif;
+//     display: flex;
+//     position: absolute;
+//     top: 0;
+//     bottom: 0;
+//     width: 100vw;
+//     pointer-events: none;
+//     .outline-card {
+//         pointer-events: all;
+//     }
+// }
+
+// .outline-header {
+//     display: flex;
+//     align-items: center;
+//     justify-content: space-between;
+//     padding: 10px 16px;
+//     border-bottom: 1px solid #2e2e3e;
+
+//     .header-title {
+//         p {
+//             margin: 0;
+//             font-weight: 600;
+//             font-size: 14px;
+//             color: #ffffff;
+//         }
+//     }
+
+//     .outline-toolbar {
+//         display: flex;
+//         gap: 8px;
+
+//         .toolbar-button {
+//             background: none;
+//             border: none;
+//             color: #aaa;
+//             cursor: pointer;
+//             width: 24px;
+//             height: 24px;
+//             border-radius: 4px;
+//             transition: background 0.3s;
+
+//             &:hover {
+//                 background-color: rgba(255, 255, 255, 0.1);
+//                 color: #a855f7;
+//             }
+
+//             svg {
+//                 width: 100%;
+//                 height: 100%;
+//             }
+//         }
+
+//         .close-button {
+//             background: none;
+//             border: none;
+//             color: #aaa;
+//             cursor: pointer;
+//             width: 24px;
+//             height: 24px;
+//             border-radius: 4px;
+//             transition: transform 0.3s ease;
+
+//             &:hover {
+//                 background-color: rgba(255, 255, 255, 0.1);
+//                 transform: rotate(-90deg);
+//                 color: #a855f7;
+//             }
+
+//             svg {
+//                 width: 100%;
+//                 height: 100%;
+//             }
+//         }
+//     }
+// }
+
+// .outline-content {
+//     max-height: 52vh;
+//     overflow-y: auto;
+//     padding: 8px 0;
+
+//     &::-webkit-scrollbar {
+//         width: 6px;
+//     }
+
+//     &::-webkit-scrollbar-thumb {
+//         background: #a855f7;
+//         border-radius: 10px;
+//     }
+// }
+// .tree-node {
+//     display: flex;
+//     flex-direction: column;
+//     width: 100%;
+//     outline: 2px solid transparent;
+//     transition: all 0.3s ease;
+
+//     .tree-node-content {
+//         display: flex;
+//         align-items: center;
+//         width: 100%;
+//         padding: 6px 10px;
+//         border-radius: 8px;
+//         background: transparent;
+//         transition: background 0.2s ease, outline 0.2s ease;
+//         box-sizing: border-box;
+//         position: relative;
+
+//         &:hover {
+//             background: rgba(255, 255, 255, 0.05);
+//         }
+
+//         &.selected {
+//             background: var(--background-color-accent, #6f42c1);
+//         }
+
+//         &.multi-selected {
+//             background: rgba(167, 139, 250, 0.2);
+//             border-left: 3px solid var(--highlight-secondary-color, #a855f7);
+//         }
+
+//         .expand-button {
+//             background: none;
+//             border: none;
+//             color: #aaa;
+//             cursor: pointer;
+//             width: 18px;
+//             height: 18px;
+//             flex-shrink: 0;
+//             display: flex;
+//             align-items: center;
+//             justify-content: center;
+
+//             &:hover {
+//                 color: #a855f7;
+//             }
+//         }
+
+//         .node-wrapper {
+//             display: flex;
+//             align-items: center;
+//             flex: 1;
+//             min-width: 0;
+//             gap: 8px;
+//         }
+
+//         .node-icon {
+//             color: #a855f7;
+//             flex-shrink: 0;
+//             width: 16px;
+//             height: 16px;
+//             display: flex;
+//             align-items: center;
+//             justify-content: center;
+//         }
+
+//         .rename-input {
+//             flex: 1;
+//             min-width: 0;
+//             overflow: hidden;
+//             white-space: nowrap;
+//             text-overflow: ellipsis;
+//             font-size: 14px;
+//             color: #fff;
+
+//             input.renaming {
+//                 width: 100%;
+//                 border: none;
+//                 outline: none;
+//                 border-radius: 6px;
+//                 background: rgba(255, 255, 255, 0.1);
+//                 color: #fff;
+//                 padding: 3px 6px;
+//                 font-size: 14px;
+//                 box-sizing: border-box;
+//             }
+//         }
+
+//         .node-controls {
+//             display: flex;
+//             align-items: center;
+//             gap: 4px;
+//             flex-shrink: 0;
+
+//             .control-button {
+//                 background: none;
+//                 border: none;
+//                 color: #aaa;
+//                 cursor: pointer;
+//                 border-radius: 4px;
+//                 padding: 4px;
+//                 display: flex;
+//                 align-items: center;
+//                 justify-content: center;
+
+//                 &:hover {
+//                     background: rgba(255, 255, 255, 0.1);
+//                     color: #a855f7;
+//                 }
+
+//                 svg {
+//                     width: 14px;
+//                     height: 14px;
+//                 }
+//             }
+//         }
+//     }
+
+//     .tree-children {
+//         padding-left: 16px;
+//         border-left: 1px dashed rgba(255, 255, 255, 0.1);
+//         margin-left: 6px;
+//     }
+// }
+
+// // .tree-node {
+// //     display: flex;
+// //     flex-direction: column;
+// //     outline: 2px solid transparent;
+// //     transition: background 0.3s;
+
+// //     .tree-node-content {
+// //         display: flex;
+// //         align-items: center;
+// //         padding: 8px 9px;
+// //         gap: 6px;
+// //         transition: background 0.2s ease;
+// //         position: relative;
+// //         &.selected {
+// //             background: #6f42c1;
+// //             border-radius: 45px;
+// //         }
+
+// //         &:hover {
+// //             outline: 1px solid pink;
+// //             border-radius: 80px;
+// //         }
+// //         .node-wrapper {
+// //             display: flex;
+// //             gap: 40px;
+// //         }
+
+// //         .expand-button {
+// //             background: none;
+// //             border: none;
+// //             cursor: pointer;
+// //             width: 20px;
+// //             height: 20px;
+// //             padding: 0;
+// //             color: #aaa;
+
+// //             &:hover {
+// //                 color: #a855f7;
+// //             }
+// //         }
+
+// //         .node-icon {
+// //             color: white;
+// //             width: 18px;
+// //             flex-shrink: 0;
+// //         }
+
+// //         .rename-input {
+// //             background: transparent;
+// //             border: none;
+// //             color: #fff;
+// //             font-size: 14px;
+// //             flex: 1;
+// //             outline: none;
+// //             padding: 2px 4px;
+// //             &:focus {
+// //                 border-bottom: 1px solid #a855f7;
+// //             }
+// //             .renaming {
+// //                 outline: none;
+// //                 border: none;
+// //                 border-radius: 15px;
+// //                 height: 20px;
+// //             }
+// //         }
+
+// //         .node-controls {
+// //             display: flex;
+// //             gap: 6px;
+
+// //             .control-button {
+// //                 background: none;
+// //                 border: none;
+// //                 color: #888;
+// //                 cursor: pointer;
+// //                 // padding: 4px;
+// //                 border-radius: 4px;
+
+// //                 &:hover {
+// //                     background-color: rgba(255, 255, 255, 0.1);
+// //                     color: #a855f7;
+// //                 }
+
+// //                 svg {
+// //                     width: 16px;
+// //                     height: 16px;
+// //                 }
+// //             }
+// //         }
+// //     }
+// // }
+
+// // .tree-children {
+// //     padding-left: 16px;
+// //     border-left: 1px dashed rgba(255, 255, 255, 0.05);
+// // }
+
+// Outline Component Styles
+// Professional tree/hierarchy view with drag-and-drop support
+
+.outline-overlay {
+    padding: 0 4px;
+    font-family: "Segoe UI", sans-serif;
+    display: flex;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    pointer-events: none;
+    z-index: 1000;
+}
+
+.outline-card {
+    pointer-events: all;
+    width: 280px;
+    max-width: 100%;
+    border-radius: 10px;
+    border: 1px solid #2e2e3e;
+    background: linear-gradient(to bottom, #1e1e2f, #12121a);
+    box-shadow: 0 0 8px rgba(168, 85, 247, 0.2);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.outline-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 16px;
+    border-bottom: 1px solid #2e2e3e;
+}
+
+.header-title {
+    p {
+        margin: 0;
+        font-weight: 600;
+        font-size: 14px;
+        color: #ffffff;
+    }
+}
+
+.outline-toolbar {
+    display: flex;
+    gap: 8px;
+
+    .toolbar-button {
+        background: none;
+        border: none;
+        color: #aaa;
+        cursor: pointer;
+        width: 24px;
+        height: 24px;
+        border-radius: 4px;
+        transition: background 0.3s;
+
+        &:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+            color: #a855f7;
+        }
+
+        svg {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .close-button {
+        background: none;
+        border: none;
+        color: #aaa;
+        cursor: pointer;
+        width: 24px;
+        height: 24px;
+        border-radius: 4px;
+        transition: transform 0.3s ease;
+
+        &:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+            transform: rotate(-90deg);
+            color: #a855f7;
+        }
+
+        svg {
+            width: 100%;
+            height: 100%;
+        }
+    }
+}
+
+.outline-content {
+    max-height: 52vh;
+    overflow-y: auto;
+    padding: 8px 0;
+
+    &::-webkit-scrollbar {
+        width: 6px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: #a855f7;
+        border-radius: 10px;
+    }
+}
+
+.tree-node {
+    display: flex;
+    flex-direction: column;
+    transition: background 0.3s;
+
+    &.dragging {
+        opacity: 0.5;
+    }
+}
+
+.tree-node-content {
+    display: flex;
+    align-items: center;
+    padding: 8px 12px;
+    gap: 8px;
+    transition: background 0.2s ease;
+    position: relative;
+    cursor: pointer;
+    border-radius: 6px;
+    margin: 2px 8px;
+
+    &.selected {
+        background: #6f42c1;
+        border-radius: 50px;
+    }
+
+    &:hover {
+        outline: 2px solid #b188ff;
+        border-radius: 50px;
+    }
+    > div {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        flex: 1;
+    }
+
+    &.locked {
+        opacity: 0.6;
+        cursor: not-allowed;
+        transform: scale(0.98);
+        background-color: transparent;
+        outline: none;
+        border: none;
+    }
+
+    &.hidden {
+        opacity: 0.4;
+    }
+}
+
+.expand-button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    color: #aaa;
+
+    &:hover {
+        color: #a855f7;
+    }
+}
+
+.node-icon {
+    color: #fff;
+    width: 18px;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+        width: 18px;
+        height: 18px;
+    }
+}
+
+.rename-input {
+    background: transparent;
+    border: none;
+    color: #fff;
+    font-size: 14px;
+    flex: 1;
+    outline: none;
+    padding: 2px 4px;
+
+    &:focus {
+        border-bottom: 1px solid #a855f7;
+    }
+
+    input {
+        background: white;
+        border: none;
+        color: black;
+        font-size: 14px;
+        width: 100%;
+        outline: none;
+
+        &:focus {
+            border-bottom: 1px solid white;
+            border-radius: 30px;
+            height: 20px;
+        }
+    }
+
+    span {
+        display: block;
+    }
+}
+
+.node-controls {
+    display: flex;
+    gap: 6px;
+    margin-left: auto;
+
+    .control-button {
+        background: none;
+        border: none;
+        color: #888;
+        cursor: pointer;
+        padding: 4px;
+        border-radius: 4px;
+        transition: all 0.2s;
+
+        &:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+            color: #a855f7;
+        }
+
+        svg {
+            width: 16px;
+            height: 16px;
+        }
+    }
+}
+
+.tree-children {
+    padding-left: 16px;
+    border-left: 1px dashed rgba(255, 255, 255, 0.05);
+}
+
+// Responsive adjustments
+@media (max-width: 768px) {
+    .outline-card {
+        width: 240px;
+    }
+
+    .outline-overlay {
+        padding: 0 2px;
+    }
+
+    .rename-input {
+        font-size: 13px;
+    }
+}
diff --git a/src/styles/main.scss b/src/styles/main.scss
new file mode 100644
index 0000000..7ddf49e
--- /dev/null
+++ b/src/styles/main.scss
@@ -0,0 +1 @@
+@use "components/outlinePanel.scss";