diff --git a/app/package-lock.json b/app/package-lock.json
index 91c994b..b14b0af 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "aalai-beta",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "aalai-beta",
-      "version": "0.1.0",
+      "version": "0.1.1",
       "dependencies": {
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/sortable": "^10.0.0",
@@ -2031,7 +2031,7 @@
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
       "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "@jridgewell/trace-mapping": "0.3.9"
       },
@@ -2043,7 +2043,7 @@
       "version": "0.3.9",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
       "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.0.3",
         "@jridgewell/sourcemap-codec": "^1.4.10"
@@ -4242,26 +4242,6 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
-    "node_modules/@testing-library/dom": {
-      "version": "10.4.1",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
-      "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@babel/code-frame": "^7.10.4",
-        "@babel/runtime": "^7.12.5",
-        "@types/aria-query": "^5.0.1",
-        "aria-query": "5.3.0",
-        "dom-accessibility-api": "^0.5.9",
-        "lz-string": "^1.5.0",
-        "picocolors": "1.1.1",
-        "pretty-format": "^27.0.2"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/@testing-library/jest-dom": {
       "version": "5.17.0",
       "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz",
@@ -4373,25 +4353,25 @@
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz",
       "integrity": "sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/@tsconfig/node12": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
       "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/@tsconfig/node14": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
       "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/@tsconfig/node16": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
       "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/@turf/along": {
       "version": "7.2.0",
@@ -9233,7 +9213,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
       "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/cross-env": {
       "version": "7.0.3",
@@ -10249,7 +10229,7 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
       "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
-      "devOptional": true,
+      "dev": true,
       "engines": {
         "node": ">=0.3.1"
       }
@@ -15652,7 +15632,7 @@
       "version": "1.3.6",
       "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
       "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/makeerror": {
       "version": "1.0.12",
@@ -21308,7 +21288,7 @@
       "version": "10.9.2",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
       "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "@cspotcode/source-map-support": "^0.8.0",
         "@tsconfig/node10": "^1.0.7",
@@ -21351,7 +21331,7 @@
       "version": "8.3.4",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz",
       "integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "acorn": "^8.11.0"
       },
@@ -21363,7 +21343,7 @@
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
       "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/tsconfig-paths": {
       "version": "3.15.0",
@@ -21859,7 +21839,7 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
       "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/v8-to-istanbul": {
       "version": "8.1.1",
@@ -22952,7 +22932,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
       "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
-      "devOptional": true,
+      "dev": true,
       "engines": {
         "node": ">=6"
       }
diff --git a/app/package.json b/app/package.json
index ffeff66..c7590c0 100644
--- a/app/package.json
+++ b/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "aalai-beta",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
@@ -56,7 +56,7 @@
     "prepare": "husky",
     "prestart": "tsc scripts/git-prompt.ts && node scripts/git-prompt.js",
     "start": "react-scripts start",
-    "build": "GENERATE_SOURCEMAP=false react-scripts build",
+    "build": "cross-env GENERATE_SOURCEMAP=false react-scripts build",
     "test": "jest"
   },
   "eslintConfig": {
diff --git a/app/src/components/Dashboard/TutorialCard.tsx b/app/src/components/Dashboard/TutorialCard.tsx
index 1d30ca6..0ed3db5 100644
--- a/app/src/components/Dashboard/TutorialCard.tsx
+++ b/app/src/components/Dashboard/TutorialCard.tsx
@@ -1,21 +1,39 @@
 import { getUserData } from "../../functions/getUserData";
 import { ALPHA_ORG } from "../../pages/Dashboard";
 import { DeleteIcon } from "../icons/ContextMenuIcons";
+import RenameInput from "../ui/inputs/RenameInput";
 
-export const TutorialCard: React.FC<{ tutorial: Tutorial; onClick: (tutorial: Tutorial) => void }> = ({ tutorial, onClick }) => {
+export const TutorialCard: React.FC<{
+    tutorial: Tutorial;
+    onClick: (tutorial: Tutorial) => void;
+}> = ({ tutorial, onClick }) => {
     const { organization } = getUserData();
     return (
         <div className="tutorial-card-container" onClick={() => onClick(tutorial)}>
             <div
                 className="preview-container"
                 style={{
-                    backgroundImage: tutorial.thumbnail ? `url(${tutorial.thumbnail})` : "linear-gradient(135deg, #ddd, #bbb)",
+                    backgroundImage: tutorial.thumbnail
+                        ? `url(${tutorial.thumbnail})`
+                        : "linear-gradient(135deg, #ddd, #bbb)",
                 }}
             ></div>
-            <div className="tutorial-details">
+            <div
+                className="tutorial-details"
+                onClick={(e) => {
+                    e.stopPropagation();
+                }}
+            >
                 <div className="context">
-                    <div className="tutorial-name">{tutorial.projectName}</div>
-                    <div className="updated-date">{new Date(tutorial.createdAt).toLocaleDateString()}</div>
+                    <div className="tutorial-name">
+                        <RenameInput
+                            value={tutorial.projectName}
+                            canEdit={organization === ALPHA_ORG}
+                        />
+                    </div>
+                    <div className="updated-date">
+                        {new Date(tutorial.createdAt).toLocaleDateString()}
+                    </div>
                 </div>
                 {organization === ALPHA_ORG && (
                     <div className="delete-option">
diff --git a/app/src/components/SimulationDashboard/components/block/BlockEditor.tsx b/app/src/components/SimulationDashboard/components/block/BlockEditor.tsx
index 205cff3..b837d61 100644
--- a/app/src/components/SimulationDashboard/components/block/BlockEditor.tsx
+++ b/app/src/components/SimulationDashboard/components/block/BlockEditor.tsx
@@ -1,4 +1,4 @@
-import type { RefObject } from "react";
+import { useState, type RefObject } from "react";
 import { Block } from "../../../../types/exportedTypes";
 import { getAlphaFromRgba, rgbaToHex } from "../../functions/helpers/colorHandlers";
 import { getCurrentBlockStyleValue } from "../../functions/helpers/getCurrentBlockStyleValue";
@@ -8,6 +8,11 @@ import { handleBlurAmountChange } from "../../functions/helpers/handleBlurAmount
 import InputRange from "../../../ui/inputs/InputRange";
 import RegularDropDown from "../../../ui/inputs/RegularDropDown";
 import { DeleteIcon } from "../../../icons/ContextMenuIcons";
+import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
+import { AddIcon, DeviceIcon, ParametersIcon } from "../../../icons/ExportCommonIcons";
+import DataDetailedDropdown from "../../../ui/inputs/DataDetailedDropdown";
+import RenameInput from "../../../ui/inputs/RenameInput";
+import DataSourceSelector from "../../../ui/inputs/DataSourceSelector";
 
 interface BlockEditorProps {
     blockEditorRef: RefObject<HTMLDivElement>;
@@ -32,6 +37,10 @@ const BlockEditor: React.FC<BlockEditorProps> = ({
     updateBlockZIndex,
     handleRemoveBlock,
 }) => {
+
+    const [color, setColor] = useState("#000000");
+
+
     return (
         <div ref={blockEditorRef} className="panel block-editor-panel">
             <div className="header">
@@ -45,219 +54,158 @@ const BlockEditor: React.FC<BlockEditorProps> = ({
                     <DeleteIcon />
                 </div>
             </div>
-            <div className="form-group">
-                <label className="form-label">Position Type: </label>
-                <select
-                    value={currentBlock.positionType || "relative"}
-                    onChange={(e) => updateBlockPositionType(selectedBlock, e.target.value as "relative" | "absolute" | "fixed")}
-                    className="form-select"
-                >
-                    <option value="relative">Relative</option>
-                    <option value="absolute">Absolute</option>
-                    <option value="fixed">Fixed</option>
-                </select>
 
-                {/* <RegularDropDown
-                    header={currentBlock.positionType || "relative"}
-                    options={["Relative", "Absolute", "Fixed"]} // Pass layout names as options
-                    onSelect={(option) => updateBlockPositionType(
-                        selectedBlock,
-                        option.toLowerCase() as "relative" | "absolute" | "fixed"
-                    )}
-                    search={false}
-                /> */}
-            </div>
 
-            {currentBlock.positionType === "absolute" && (
-                <>
-                    <div className="form-group">
-                        <label className="form-label">X Position: </label>
-                        <input
-                            type="number"
-                            placeholder="X"
-                            value={currentBlock.position?.x || 0}
-                            onChange={(e) =>
-                                updateBlockPosition(selectedBlock, {
-                                    ...currentBlock.position!,
-                                    x: Number(e.target.value),
-                                })
-                            }
-                            className="form-input"
-                        />
+
+            <div className="design-section-wrapper">
+                <div className="design-section">
+                    <div className="section-header">Size</div>
+                    <InputWithDropDown
+                        label="Width"
+                        value={String(currentBlock.size?.width || 400)}  // Ensure the value is a string
+                        placeholder={"Width"}
+                        onChange={(newValue) => {
+                            updateBlockSize(selectedBlock, {
+                                ...currentBlock.size!,
+                                width: Number(newValue),  // Make sure to convert the string back to a number here
+                            })
+                        }}
+                    />
+                    <InputWithDropDown
+                        label="Height"
+                        value={String(currentBlock.size?.height || 300)}
+                        placeholder={"Width"}
+                        onChange={(newValue) => {
+                            updateBlockSize(selectedBlock, {
+                                ...currentBlock.size!,
+                                height: Number(newValue),
+                            })
+                        }}
+                    />
+                </div>
+
+                <div className="design-section">
+                    <div className="section-header">Position</div>
+                    <div className="select-type">
+                        {["relative", "absolute"].map((position) => (
+                            <div
+                                key={position}
+                                className={`type ${currentBlock.positionType === position ? "active" : ""}`}
+                                onClick={() => updateBlockPositionType(selectedBlock, position as "relative" | "absolute" | "fixed")}
+                            >
+                                {position.charAt(0).toUpperCase() + position.slice(1)}
+                            </div>
+                        ))}
                     </div>
-                    <div className="form-group">
-                        <label className="form-label">Y Position: </label>
-                        <input
-                            type="number"
-                            placeholder="Y"
-                            value={currentBlock.position?.y || 0}
-                            onChange={(e) =>
-                                updateBlockPosition(selectedBlock, {
-                                    ...currentBlock.position!,
-                                    y: Number(e.target.value),
-                                })
-                            }
-                            className="form-input"
-                        />
+                    <div className="position-canvas">
+                        <div className="canvas">
+                            <div className="value padding-top">
+                                <RenameInput
+                                    value={
+                                        getCurrentBlockStyleValue(currentBlock, "padding")
+                                            ? String(getCurrentBlockStyleValue(currentBlock, "padding"))
+                                            : "120"
+                                    }
+                                />
+
+                            </div>
+                            <div className="value padding-right">
+                                <RenameInput
+                                    value={
+                                        getCurrentBlockStyleValue(currentBlock, "padding")
+                                            ? String(getCurrentBlockStyleValue(currentBlock, "padding"))
+                                            : "120"
+                                    }
+                                />
+
+                            </div>
+                            <div className="value padding-bottom">
+                                <RenameInput
+                                    value={
+                                        getCurrentBlockStyleValue(currentBlock, "padding")
+                                            ? String(getCurrentBlockStyleValue(currentBlock, "padding"))
+                                            : "120"
+                                    }
+                                />
+
+                            </div>
+                            <div className="value padding-left">
+                                <RenameInput
+                                    value={
+                                        getCurrentBlockStyleValue(currentBlock, "padding")
+                                            ? String(getCurrentBlockStyleValue(currentBlock, "padding"))
+                                            : "120"
+                                    }
+                                />
+
+                            </div>
+                        </div>
                     </div>
-                </>
-            )}
 
-            <div className="form-group">
-                <label className="form-label">Background Color: </label>
-                <input
-                    type="color"
-                    value={rgbaToHex(getCurrentBlockStyleValue(currentBlock, "backgroundColor"))}
-                    onChange={(e) => handleBackgroundColorChange(currentBlock, selectedBlock, updateBlockStyle, e.target.value)}
-                    className="color-input"
-                />
+
+                    <div className="design-section-footer">
+                        <InputWithDropDown
+                            label="Layer"
+                            value={String(currentBlock.zIndex || 1)}
+                            placeholder={"Layer"}
+                            onChange={(newValue) => updateBlockZIndex(selectedBlock, Number(newValue))}
+                        />
+
+                        <InputRange
+                            label={"Radius"}
+                            min={0}
+                            max={8}
+                            value={parseInt(getCurrentBlockStyleValue(currentBlock, "borderRadius")) || 8}
+                            onChange={(newValue) => {
+                                updateBlockStyle(selectedBlock, {
+                                    borderRadius: Number(newValue),
+                                })
+                            }}
+                        />
+
+                    </div>
+                </div>
+
+                <div className="design-section">
+                    <div className="section-header">Background</div>
+                    <div className="data-picker">
+                        <div className="label">Color</div>
+                        <div className="left">
+                            <input
+                                type="color"
+                                value={rgbaToHex(getCurrentBlockStyleValue(currentBlock, "backgroundColor"))}
+                                // onChange={(e) => setColor(e.target.value)}
+                                onChange={(e) => handleBackgroundColorChange(currentBlock, selectedBlock, updateBlockStyle, e.target.value)}
+
+                            />
+
+                            <div className="colorValue">{color}</div>
+                        </div>
+                    </div>
+                    <InputRange
+                        label={"Opacity"}
+                        min={0}
+                        max={8}
+                        value={Math.round(getAlphaFromRgba(getCurrentBlockStyleValue(currentBlock, "backgroundColor")) * 100)}
+                        // onChange={(value: number) => handleBackgroundAlphaChange(currentBlock, selectedBlock, updateBlockStyle, Number(value))}
+                        onChange={(value: number) => handleBlurAmountChange(selectedBlock, updateBlockStyle, Number(value))}
+
+                    />
+                    <InputRange
+                        label={"Blur"}
+                        min={0}
+                        max={8}
+                        value={parseInt(getCurrentBlockStyleValue(currentBlock, "backdropFilter")?.match(/\d+/)?.[0] || "10")}
+
+                    />
+
+                </div>
             </div>
 
-            <div className="form-group">
-                {/* <label className="form-label">
-                    Background Opacity:{" "}
-                    {Math.round(
-                        getAlphaFromRgba(
-                            getCurrentBlockStyleValue(currentBlock, "backgroundColor")
-                        ) * 100
-                    )}
-                    %
-                </label>
-                <input
-                    type="range"
-                    min="0"
-                    max="100"
-                    value={
-                        getAlphaFromRgba(
-                            getCurrentBlockStyleValue(currentBlock, "backgroundColor")
-                        ) * 100
-                    }
-                    onChange={(e) =>
-                        handleBackgroundAlphaChange(
-                            currentBlock,
-                            selectedBlock,
-                            updateBlockStyle,
-                            Number(e.target.value)
-                        )
-                    }
-                    className="range-input"
-                /> */}
 
-                <InputRange
-                    label="Background Opacity"
-                    disabled={false}
-                    value={Math.round(getAlphaFromRgba(getCurrentBlockStyleValue(currentBlock, "backgroundColor")) * 100)}
-                    min={0}
-                    max={100}
-                    onChange={(value: number) => handleBackgroundAlphaChange(currentBlock, selectedBlock, updateBlockStyle, Number(value))}
-                    // onPointerUp={updatedDist}
-                    key={"6"}
-                />
-            </div>
 
-            <div className="form-group">
-                {/* <label className="form-label">
-                    Blur Amount:{" "}
-                    {parseInt(
-                        getCurrentBlockStyleValue(currentBlock, "backdropFilter")?.match(
-                            /\d+/
-                        )?.[0] || "10"
-                    )}
-                    px
-                </label>
-                <input
-                    type="range"
-                    min="0"
-                    max="50"
-                    value={parseInt(
-                        getCurrentBlockStyleValue(currentBlock, "backdropFilter")?.match(
-                            /\d+/
-                        )?.[0] || "10"
-                    )}
-                    onChange={(e) =>
-                        handleBlurAmountChange(
-                            selectedBlock,
-                            updateBlockStyle,
-                            Number(e.target.value)
-                        )
-                    }
-                    className="range-input"
-                /> */}
 
-                <InputRange
-                    label="Blur Amount"
-                    disabled={false}
-                    value={parseInt(getCurrentBlockStyleValue(currentBlock, "backdropFilter")?.match(/\d+/)?.[0] || "10")}
-                    min={0}
-                    max={50}
-                    onChange={(value: number) => handleBlurAmountChange(selectedBlock, updateBlockStyle, Number(value))}
-                    // onPointerUp={updatedDist}
-                    key={"6"}
-                />
-            </div>
 
-            <div className="form-group">
-                <label className="form-label">Width: </label>
-                <input
-                    type="number"
-                    placeholder="Width"
-                    value={currentBlock.size?.width || 400}
-                    onChange={(e) =>
-                        updateBlockSize(selectedBlock, {
-                            ...currentBlock.size!,
-                            width: Number(e.target.value),
-                        })
-                    }
-                    className="form-input"
-                />
-            </div>
-
-            <div className="form-group">
-                <label className="form-label">Height: </label>
-                <input
-                    type="number"
-                    placeholder="Height"
-                    value={currentBlock.size?.height || 300}
-                    onChange={(e) =>
-                        updateBlockSize(selectedBlock, {
-                            ...currentBlock.size!,
-                            height: Number(e.target.value),
-                        })
-                    }
-                    className="form-input"
-                />
-            </div>
-
-            <div className="form-group">
-                <label className="form-label">Z-Index: </label>
-                <input type="number" placeholder="Z-Index" value={currentBlock.zIndex || 1} onChange={(e) => updateBlockZIndex(selectedBlock, Number(e.target.value))} className="form-input" />
-            </div>
-
-            <div className="form-group">
-                <label className="form-label">Padding: </label>
-                <input
-                    type="number"
-                    placeholder="Padding"
-                    value={parseInt(getCurrentBlockStyleValue(currentBlock, "padding")) || 10}
-                    onChange={(e) => updateBlockStyle(selectedBlock, { padding: Number(e.target.value) })}
-                    className="form-input"
-                />
-            </div>
-
-            <div className="form-group">
-                <label className="form-label">Border Radius: </label>
-                <input
-                    type="number"
-                    placeholder="Border Radius"
-                    value={parseInt(getCurrentBlockStyleValue(currentBlock, "borderRadius")) || 8}
-                    onChange={(e) =>
-                        updateBlockStyle(selectedBlock, {
-                            borderRadius: Number(e.target.value),
-                        })
-                    }
-                    className="form-input"
-                />
-            </div>
         </div>
     );
 };
diff --git a/app/src/components/SimulationDashboard/components/element/ElementEditor.tsx b/app/src/components/SimulationDashboard/components/element/ElementEditor.tsx
index 3a54ac7..85ba980 100644
--- a/app/src/components/SimulationDashboard/components/element/ElementEditor.tsx
+++ b/app/src/components/SimulationDashboard/components/element/ElementEditor.tsx
@@ -1,8 +1,15 @@
-import type { RefObject } from "react";
+import { useState, type RefObject } from "react";
 import { ExtendedCSSProperties, UIElement } from "../../../../types/exportedTypes";
 import { getCurrentElementStyleValue } from "../../functions/helpers/getCurrentElementStyleValue";
 import type { DataModelManager } from "../../data/dataModel";
 import { DeleteIcon } from "../../../icons/ContextMenuIcons";
+import DataSourceSelector from "../../../ui/inputs/DataSourceSelector";
+import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
+import InputRange from "../../../ui/inputs/InputRange";
+import RenameInput from "../../../ui/inputs/RenameInput";
+import { AddIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, DeviceIcon, FlexColumnIcon, FlexRowIcon, FlexRowReverseIcon, ParametersIcon } from "../../../icons/ExportCommonIcons";
+import { getAlphaFromRgba, rgbaToHex, hexToRgba } from "../../functions/helpers/colorHandlers";
+import DataDetailedDropdown from "../../../ui/inputs/DataDetailedDropdown";
 
 interface ElementEditorProps {
     elementEditorRef: RefObject<HTMLDivElement>;
@@ -43,6 +50,9 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
     setShowSwapUI,
     dataModelManager,
 }) => {
+    const [selectType, setSelectType] = useState("design")
+    const [selectDataMapping, setSelectDataMapping] = useState("singleMachine")
+
     const defaultGraphData = [
         { name: "Jan", value: 400 },
         { name: "Feb", value: 300 },
@@ -52,6 +62,40 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
         { name: "Jun", value: 900 },
     ];
 
+    const [singleFields, setSingleFields] = useState<Array<{ id: string; label: string; showEyeDropper?: boolean }>>([
+        { id: "data-source", label: "Data Source", showEyeDropper: true },
+        { id: "input-1", label: "Input 1", showEyeDropper: false },
+        { id: "input-2", label: "Input 2", showEyeDropper: false },
+    ]);
+
+    const [multipleFields, setMultipleFields] = useState<Array<{ id: string; label: string }>>([
+        { id: "common-value", label: "Common Value" },
+        { id: "data-source-1", label: "Data Source" },
+        { id: "data-source-2", label: "Data Source" },
+    ]);
+
+    const addField = () => {
+        if (selectDataMapping === "singleMachine") {
+            setSingleFields((prev) => [
+                ...prev,
+                {
+                    id: `input-${Date.now()}`,
+                    label: `Input ${prev.filter((f) => f.label.startsWith("Input")).length + 1}`,
+                    showEyeDropper: false,
+                },
+            ]);
+            return;
+        }
+
+        setMultipleFields((prev) => [
+            ...prev,
+            {
+                id: `data-${Date.now()}`,
+                label: "Data Source",
+            },
+        ]);
+    };
+
     return (
         <div ref={elementEditorRef} className="panel element-editor-panel">
             <div className="header">
@@ -65,492 +109,542 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
                     <DeleteIcon />
                 </div>
             </div>
-            {currentElement.type === "label-value" && (
-                <>
-                    <div className="form-group">
-                        <label className="form-label">Label Color: </label>
-                        <input
-                            type="color"
-                            value={currentElement.style.labelColor || "#ffffff"}
-                            onChange={(e) =>
-                                updateElementStyle(selectedBlock, selectedElement, {
-                                    labelColor: e.target.value,
-                                })
-                            }
-                            className="color-input"
-                        />
-                    </div>
 
-                    <div className="form-group">
-                        <label className="form-label">Value Color: </label>
-                        <input
-                            type="color"
-                            value={currentElement.style.valueColor || "#ffffff"}
-                            onChange={(e) =>
-                                updateElementStyle(selectedBlock, selectedElement, {
-                                    valueColor: e.target.value,
-                                })
-                            }
-                            className="color-input"
-                        />
-                    </div>
 
-                    <div className="form-group">
-                        <label className="form-label">Flex Direction: </label>
-                        <select
-                            value={(currentElement.style.flexDirection as string) || "column"}
-                            onChange={(e) =>
-                                updateElementStyle(selectedBlock, selectedElement, {
-                                    flexDirection: e.target.value as React.CSSProperties["flexDirection"],
-                                })
-                            }
-                            className="form-select"
-                        >
-                            <option value="row">Row</option>
-                            <option value="column">Column</option>
-                            <option value="row-reverse">Row Reverse</option>
-                            <option value="column-reverse">Column Reverse</option>
-                        </select>
-                    </div>
-
-                    <div className="form-group">
-                        <label className="form-label">Align Items: </label>
-                        <select
-                            value={(currentElement.style.alignItems as string) || "flex-start"}
-                            onChange={(e) =>
-                                updateElementStyle(selectedBlock, selectedElement, {
-                                    alignItems: e.target.value as React.CSSProperties["alignItems"],
-                                })
-                            }
-                            className="form-select"
-                        >
-                            <option value="flex-start">Flex Start</option>
-                            <option value="center">Center</option>
-                            <option value="flex-end">Flex End</option>
-                            <option value="stretch">Stretch</option>
-                        </select>
-                    </div>
-
-                    <div className="form-group">
-                        <label className="form-label">Justify Content: </label>
-                        <select
-                            value={(currentElement.style.justifyContent as string) || "center"}
-                            onChange={(e) =>
-                                updateElementStyle(selectedBlock, selectedElement, {
-                                    justifyContent: e.target.value,
-                                })
-                            }
-                            className="form-select"
-                        >
-                            <option value="flex-start">Flex Start</option>
-                            <option value="center">Center</option>
-                            <option value="flex-end">Flex End</option>
-                            <option value="space-between">Space Between</option>
-                            <option value="space-around">Space Around</option>
-                        </select>
-                    </div>
-
-                    <div className="form-group">
-                        <label className="form-label">Gap: </label>
-                        <input
-                            type="number"
-                            placeholder="Gap"
-                            value={parseInt(currentElement.style.gap as string) || 4}
-                            onChange={(e) =>
-                                updateElementStyle(selectedBlock, selectedElement, {
-                                    gap: `${e.target.value}px`,
-                                })
-                            }
-                            className="form-input"
-                        />
-                    </div>
-                </>
-            )}
-
-            {currentElement.type !== "label-value" && (
-                <div className="form-group">
-                    <label className="form-label">Color: </label>
-                    <input
-                        type="color"
-                        value={getCurrentElementStyleValue(currentElement, "color") || "#ffffff"}
-                        onChange={(e) =>
-                            updateElementStyle(selectedBlock, selectedElement, {
-                                color: e.target.value,
-                            })
-                        }
-                        className="color-input"
-                    />
+            <div className="type-switch">
+                <div
+                    className={`type ${selectType === "design" ? "active" : ""}`}
+                    onClick={() => setSelectType("design")}>
+                    Design
+                </div>
+                <div
+                    className={`type ${selectType === "data" ? "active" : ""}`}
+                    onClick={() => setSelectType("data")}>
+                    Data
                 </div>
-            )}
-
-            <div className="form-group">
-                <label className="form-label">Text Align: </label>
-                <select
-                    value={getCurrentElementStyleValue(currentElement, "textAlign") || "left"}
-                    onChange={(e) =>
-                        updateElementStyle(selectedBlock, selectedElement, {
-                            textAlign: e.target.value as "left" | "center" | "right",
-                        })
-                    }
-                    className="form-select"
-                >
-                    <option value="left">Left</option>
-                    <option value="center">Center</option>
-                    <option value="right">Right</option>
-                </select>
             </div>
 
-            <div className="form-group">
-                <label className="form-label">Font Size: </label>
-                <input
-                    type="number"
-                    placeholder="Font Size"
-                    value={parseInt(getCurrentElementStyleValue(currentElement, "fontSize")) || 14}
-                    onChange={(e) =>
-                        updateElementStyle(selectedBlock, selectedElement, {
-                            fontSize: Number(e.target.value),
-                        })
-                    }
-                    className="form-input"
-                />
-            </div>
 
-            <div className="form-group">
-                <label className="form-label">Width: </label>
-                <input
-                    type="number"
-                    placeholder="Width"
-                    value={currentElement.size?.width || (currentElement.type === "graph" ? 400 : 200)}
-                    onChange={(e) =>
-                        updateElementSize(selectedBlock, selectedElement, {
-                            ...currentElement.size!,
-                            width: Number(e.target.value),
-                        })
-                    }
-                    className="form-input"
-                />
-            </div>
-
-            <div className="form-group">
-                <label className="form-label">Height: </label>
-                <input
-                    type="number"
-                    placeholder="Height"
-                    value={currentElement.size?.height || (currentElement.type === "graph" ? 200 : 60)}
-                    onChange={(e) =>
-                        updateElementSize(selectedBlock, selectedElement, {
-                            ...currentElement.size!,
-                            height: Number(e.target.value),
-                        })
-                    }
-                    className="form-input"
-                />
-            </div>
-
-            <div className="form-group">
-                <label className="form-label">Padding: </label>
-                <input
-                    type="number"
-                    placeholder="Padding"
-                    value={parseInt(getCurrentElementStyleValue(currentElement, "padding")) || 0}
-                    onChange={(e) =>
-                        updateElementStyle(selectedBlock, selectedElement, {
-                            padding: Number(e.target.value),
-                        })
-                    }
-                    className="form-input"
-                />
-            </div>
-
-            <div className="form-group">
-                <label className="form-label">Position Type: </label>
-                <select
-                    value={currentElement.positionType || "relative"}
-                    onChange={(e) => updateElementPositionType(selectedBlock, selectedElement, e.target.value as "relative" | "absolute" | "fixed")}
-                    className="form-select"
-                >
-                    <option value="relative">Relative</option>
-                    <option value="absolute">Absolute</option>
-                    <option value="fixed">Fixed</option>
-                </select>
-            </div>
-
-            {currentElement.positionType === "absolute" && (
+            {selectType === "design" && (
                 <>
-                    <div className="form-group">
-                        <label className="form-label">X Position: </label>
-                        <input
-                            type="number"
-                            placeholder="X"
-                            value={currentElement.position?.x || 0}
-                            onChange={(e) =>
-                                updateElementPosition(selectedBlock, selectedElement, {
-                                    ...currentElement.position!,
-                                    x: Number(e.target.value),
-                                })
-                            }
-                            className="form-input"
-                        />
-                    </div>
-                    <div className="form-group">
-                        <label className="form-label">Y Position: </label>
-                        <input
-                            type="number"
-                            placeholder="Y"
-                            value={currentElement.position?.y || 0}
-                            onChange={(e) =>
-                                updateElementPosition(selectedBlock, selectedElement, {
-                                    ...currentElement.position!,
-                                    y: Number(e.target.value),
-                                })
-                            }
-                            className="form-input"
-                        />
-                    </div>
-                </>
-            )}
-
-            {currentElement.positionType === "fixed" && (
-                <>
-                    <div className="form-group">
-                        <label className="form-label">Fixed X: </label>
-                        <input
-                            type="number"
-                            placeholder="X"
-                            value={currentElement.position?.x || 0}
-                            onChange={(e) =>
-                                updateElementPosition(selectedBlock, selectedElement, {
-                                    ...currentElement.position!,
-                                    x: Number(e.target.value),
-                                })
-                            }
-                            className="form-input"
-                        />
-                    </div>
-                    <div className="form-group">
-                        <label className="form-label">Fixed Y: </label>
-                        <input
-                            type="number"
-                            placeholder="Y"
-                            value={currentElement.position?.y || 0}
-                            onChange={(e) =>
-                                updateElementPosition(selectedBlock, selectedElement, {
-                                    ...currentElement.position!,
-                                    y: Number(e.target.value),
-                                })
-                            }
-                            className="form-input"
-                        />
-                    </div>
-                </>
-            )}
-
-            <div className="form-group">
-                <label className="form-label">Z-Index: </label>
-                <input
-                    type="number"
-                    placeholder="Z-Index"
-                    value={currentElement.zIndex || 1}
-                    onChange={(e) => updateElementZIndex(selectedBlock, selectedElement, Number(e.target.value))}
-                    className="form-input"
-                />
-            </div>
-
-            {currentElement.type === "graph" && (
-                <>
-                    <div className="form-group">
-                        <label className="form-label">Chart Type: </label>
-                        <select value={currentElement.graphType || "line"} onChange={(e) => updateGraphType(selectedBlock, selectedElement, e.target.value as GraphTypes)} className="form-select">
-                            <option value="line">Line Chart</option>
-                            <option value="bar">Bar Chart</option>
-                            <option value="area">Area Chart</option>
-                            <option value="pie">Pie Chart</option>
-                            <option value="radar">Radar Chart</option>
-                        </select>
-                    </div>
-
-                    <div className="form-group">
-                        <label className="form-label">Chart Title: </label>
-                        <input
-                            type="text"
-                            placeholder="Chart Title"
-                            value={currentElement.graphTitle || ""}
-                            onChange={(e) => updateGraphTitle(selectedBlock, selectedElement, e.target.value)}
-                            className="form-input"
-                        />
-                    </div>
-                </>
-            )}
-
-            <div className="form-group">
-                <button
-                    onClick={() => {
-                        setSwapSource(selectedElement);
-                        setShowSwapUI(true);
-                    }}
-                    className="control-button primary"
-                    style={{ width: "100%" }}
-                >
-                    Swap with Another Element
-                </button>
-            </div>
-
-            {/* Data Binding Section */}
-            <div className="header">
-                <h4>Data Binding</h4>
-            </div>
-
-            <div className="form-group">
-                <label className="form-label">Data Source: </label>
-                <select
-                    value={currentElement.data?.dataSource || "static"}
-                    onChange={(e) =>
-                        updateElementData(selectedBlock, selectedElement, {
-                            dataSource: e.target.value as DataSourceType,
-                        })
-                    }
-                    className="form-select"
-                >
-                    <option value="static">Static Value</option>
-                    <option value="dynamic">Dynamic Data</option>
-                    <option value="formula">Formula</option>
-                    <option value="api">API (Future)</option>
-                </select>
-            </div>
-
-            {currentElement.data?.dataSource === "static" && (
-                <>
-                    {currentElement.type === "label-value" && (
-                        <div className="form-group">
-                            <label className="form-label">Label: </label>
-                            <input
-                                type="text"
-                                placeholder="Label"
-                                value={currentElement.data?.label || ""}
-                                onChange={(e) =>
-                                    updateElementData(selectedBlock, selectedElement, {
-                                        label: e.target.value,
-                                    })
-                                }
-                                className="form-input"
-                            />
-                        </div>
-                    )}
-                    <div className="form-group">
-                        <label className="form-label">Value: </label>
-                        <input
-                            type="text"
-                            placeholder="Value"
-                            value={currentElement.data?.staticValue || ""}
-                            onChange={(e) =>
-                                updateElementData(selectedBlock, selectedElement, {
-                                    staticValue: e.target.value,
-                                })
-                            }
-                            className="form-input"
-                        />
-                    </div>
-                </>
-            )}
-
-            {currentElement.data?.dataSource === "dynamic" && (
-                <>
-                    {currentElement.type === "label-value" && (
-                        <div className="form-group">
-                            <label className="form-label">Label: </label>
-                            <input
-                                type="text"
-                                placeholder="Label"
-                                value={currentElement.data?.label || ""}
-                                onChange={(e) =>
-                                    updateElementData(selectedBlock, selectedElement, {
-                                        label: e.target.value,
-                                    })
-                                }
-                                className="form-input"
-                            />
-                        </div>
-                    )}
-                    <div className="form-group">
-                        <label className="form-label">Data Key: </label>
-                        <select
-                            value={currentElement.data?.dynamicKey || ""}
-                            onChange={(e) =>
-                                updateElementData(selectedBlock, selectedElement, {
-                                    dynamicKey: e.target.value,
-                                })
-                            }
-                            className="form-select"
-                        >
-                            <option value="">Select data key</option>
-                            {dataModelManager.getAvailableKeys().map((key: string) => (
-                                <option key={key} value={key}>
-                                    {key}
-                                </option>
-                            ))}
-                        </select>
-                    </div>
-                </>
-            )}
-
-            {currentElement.data?.dataSource === "formula" && (
-                <>
-                    {currentElement.type === "label-value" && (
-                        <div className="form-group">
-                            <label className="form-label">Label: </label>
-                            <input
-                                type="text"
-                                placeholder="Label"
-                                value={currentElement.data?.label || ""}
-                                onChange={(e) =>
-                                    updateElementData(selectedBlock, selectedElement, {
-                                        label: e.target.value,
-                                    })
-                                }
-                                className="form-input"
-                            />
-                        </div>
-                    )}
-                    <div className="form-group">
-                        <label className="form-label">Formula: </label>
-                        <input
-                            type="text"
-                            placeholder="e.g., {totalUsers} * {growthRate}"
-                            value={currentElement.data?.formula || ""}
-                            onChange={(e) =>
-                                updateElementData(selectedBlock, selectedElement, {
-                                    formula: e.target.value,
-                                })
-                            }
-                            className="form-input"
-                        />
-                        <small className="form-small">
-                            Use {"{key}"} to reference data values. Example: {"{totalUsers} * {growthRate}"}
-                        </small>
-                    </div>
-                </>
-            )}
-
-            {currentElement.type === "graph" && (
-                <div className="form-group">
-                    <label className="form-label">Chart Data (JSON): </label>
-                    <textarea
-                        placeholder='[{"name": "Jan", "value": 400}, ...]'
-                        value={JSON.stringify(currentElement.graphData || defaultGraphData, null, 2)}
-                        onChange={(e) => {
-                            try {
-                                const newData = JSON.parse(e.target.value);
-                                updateGraphData(selectedBlock, selectedElement, newData);
-                            } catch (error) {
-                                console.log("error: ", error);
-                            }
+                    <DataSourceSelector
+                        label={"Chart Type"}
+                        options={["Line Chart", "Bar Chart", "Pie Chart", "Area Chart", "Composed Chart", "Radar Chart", "Scatter Chart", "Radial Bar Chart"]}
+                        onSelect={(newValue) => {
+                            updateGraphType(selectedBlock, selectedElement, newValue as GraphTypes)
                         }}
-                        rows={4}
-                        className="form-textarea"
+                        showEyeDropper={false}
                     />
-                    <small className="form-small">Enter valid JSON array with "name" and "value" properties</small>
+
+
+                    <div className="design-section">
+                        <div className="section-header">Position</div>
+                        <div className="select-type">
+                            {["relative", "absolute"].map((position) => (
+                                <div
+                                    key={position}
+                                    className={`type ${currentElement.positionType === position ? "active" : ""}`}
+                                    onClick={() => updateElementPositionType(selectedBlock, selectedElement, position as "relative" | "absolute" | "fixed")}
+                                >
+                                    {position.charAt(0).toUpperCase() + position.slice(1)}
+                                </div>
+                            ))}
+                        </div>
+                        <div className="position-canvas">
+                            <div className="canvas">
+                                <div className="value padding-top">
+                                    <RenameInput
+                                        value={
+                                            getCurrentElementStyleValue(currentElement, "padding")
+                                                ? String(getCurrentElementStyleValue(currentElement, "padding"))
+                                                : "120"
+                                        }
+                                    />
+
+                                </div>
+                                <div className="value padding-right">
+                                    <RenameInput
+                                        value={
+                                            getCurrentElementStyleValue(currentElement, "padding")
+                                                ? String(getCurrentElementStyleValue(currentElement, "padding"))
+                                                : "120"
+                                        }
+                                    />
+
+                                </div>
+                                <div className="value padding-bottom">
+                                    <RenameInput
+                                        value={
+                                            getCurrentElementStyleValue(currentElement, "padding")
+                                                ? String(getCurrentElementStyleValue(currentElement, "padding"))
+                                                : "120"
+                                        }
+                                    />
+
+                                </div>
+                                <div className="value padding-left">
+                                    <RenameInput
+                                        value={
+                                            getCurrentElementStyleValue(currentElement, "padding")
+                                                ? String(getCurrentElementStyleValue(currentElement, "padding"))
+                                                : "120"
+                                        }
+                                    />
+
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="alignments-section">
+                            <div className="section">
+                                <div
+                                    className={`icon ${getCurrentElementStyleValue(currentElement, "textAlign") === "right" ? "active" : ""}`}
+                                    onClick={() => updateElementStyle(selectedBlock, selectedElement, { textAlign: "right" })}
+                                >
+                                    <AlignRightIcon />
+                                </div>
+                                <div
+                                    className={`icon ${getCurrentElementStyleValue(currentElement, "textAlign") === "justify" ? "active" : ""}`}
+                                    onClick={() => updateElementStyle(selectedBlock, selectedElement, { textAlign: "justify" })}
+                                >
+                                    <AlignJustifyIcon />
+                                </div>
+                                <div
+                                    className={`icon ${getCurrentElementStyleValue(currentElement, "textAlign") === "left" ? "active" : ""}`}
+                                    onClick={() => updateElementStyle(selectedBlock, selectedElement, { textAlign: "left" })}
+                                >
+                                    <AlignLeftIcon />
+                                </div>
+                            </div>
+                            <div className="section">
+                                <div
+                                    className={`icon ${((currentElement.style.flexDirection as string) || "row") === "row" ? "active" : ""}`}
+                                    onClick={() => updateElementStyle(selectedBlock, selectedElement, { flexDirection: "row" })}
+                                >
+                                    <FlexRowIcon />
+                                </div>
+                                <div
+                                    className={`icon ${((currentElement.style.flexDirection as string) || "row") === "column" ? "active" : ""}`}
+                                    onClick={() => updateElementStyle(selectedBlock, selectedElement, { flexDirection: "column" })}
+                                >
+                                    <FlexColumnIcon />
+                                </div>
+                                <div
+                                    className={`icon ${((currentElement.style.flexDirection as string) || "row") === "row-reverse" ? "active" : ""}`}
+                                    onClick={() => updateElementStyle(selectedBlock, selectedElement, { flexDirection: "row-reverse" })}
+                                >
+                                    <FlexRowReverseIcon />
+                                </div>
+                                <div
+                                    className={`icon ${((currentElement.style.flexDirection as string) || "row") === "column-reverse" ? "active" : ""}`}
+                                    onClick={() => updateElementStyle(selectedBlock, selectedElement, { flexDirection: "column-reverse" })}
+                                >
+                                    <FlexRowReverseIcon />
+                                </div>
+                            </div>
+                        </div>
+                        <div className="design-section-footer">
+                            <InputWithDropDown
+                                label="Layer"
+                                value={String(currentElement.zIndex || 1)}
+                                placeholder={"Layer"}
+                                onChange={(newValue: string) => updateElementZIndex(selectedBlock, selectedElement, Number(newValue))}
+                            />
+
+                            {/* <InputRange
+                        label={"Blur"}
+                        min={0}
+                        max={40}
+                        value={parseInt(getCurrentElementStyleValue(currentElement, "backdropFilter")?.match(/\d+/)?.[0] || "0")}
+                        onChange={(value: number) => updateElementStyle(selectedBlock, selectedElement, { backdropFilter: `blur(${Number(value)}px)` })}
+                    /> */}
+
+                            <InputRange
+                                label={"Radius"}
+                                min={0}
+                                max={8}
+                                value={parseInt(getCurrentElementStyleValue(currentElement, "borderRadius") || "") || 8}
+                                onChange={(newValue: number) => {
+                                    updateElementStyle(selectedBlock, selectedElement, {
+                                        borderRadius: Number(newValue),
+                                    })
+                                }}
+                            />
+
+                        </div>
+                    </div>
+
+                    <div className="design-section appearance">
+                        <div className="section-header">Appearance</div>
+                        <div className="design-datas-wrapper">
+
+                            <InputWithDropDown
+                                label="X-Position"
+                                value={String(currentElement.position?.x ?? 0)}
+                                placeholder={"X"}
+                                onChange={(newValue: string) => {
+                                    updateElementPosition(selectedBlock, selectedElement, {
+                                        ...(currentElement.position || { x: 0, y: 0 }),
+                                        x: Number(newValue),
+                                    });
+                                }}
+                            />
+                            <InputWithDropDown
+                                label="Y-Position"
+                                value={String(currentElement.position?.y ?? 0)}
+                                placeholder={"Y"}
+                                onChange={(newValue: string) => {
+                                    updateElementPosition(selectedBlock, selectedElement, {
+                                        ...(currentElement.position || { x: 0, y: 0 }),
+                                        y: Number(newValue),
+                                    });
+                                }}
+                            />
+                            <InputWithDropDown
+                                label="Width"
+                                value={String(currentElement.size?.width ?? (currentElement.type === "graph" ? 400 : 200))}
+                                placeholder={"Width"}
+                                onChange={(newValue: string) => {
+                                    updateElementSize(selectedBlock, selectedElement, {
+                                        ...(currentElement.size || { width: 0, height: 0 }),
+                                        width: Number(newValue),
+                                    });
+                                }}
+                            />
+                            <InputWithDropDown
+                                label="Height"
+                                value={String(currentElement.size?.height ?? (currentElement.type === "graph" ? 200 : 60))}
+                                placeholder={"Height"}
+                                onChange={(newValue: string) => {
+                                    updateElementSize(selectedBlock, selectedElement, {
+                                        ...(currentElement.size || { width: 0, height: 0 }),
+                                        height: Number(newValue),
+                                    });
+                                }}
+                            />
+                        </div>
+
+                    </div>
+
+
+                    <div className="design-section element-color">
+                        <div className="section-header">Element Color</div>
+                        <div className="data-picker">
+                            <div className="label">Color</div>
+                            <div className="left">
+                                <input
+                                    type="color"
+                                    value={rgbaToHex(getCurrentElementStyleValue(currentElement, "backgroundColor") || "rgba(50,50,50,1)")}
+                                    onChange={(e) => {
+                                        const currentBg = getCurrentElementStyleValue(currentElement, "backgroundColor") || "rgba(50,50,50,1)";
+                                        const currentAlpha = getAlphaFromRgba(currentBg);
+                                        const newBg = hexToRgba(e.target.value, currentAlpha);
+                                        updateElementStyle(selectedBlock, selectedElement, { backgroundColor: newBg });
+                                    }}
+                                />
+
+                                <div className="colorValue">{rgbaToHex(getCurrentElementStyleValue(currentElement, "backgroundColor") || "rgba(50,50,50,1)")}</div>
+                            </div>
+                        </div>
+
+                    </div>
+                    <div className="footer">Swap with Another Element</div>
+
+
+                    {/* Data Binding Section */}
+                    <div className="header">
+                        <h4>Data Binding</h4>
+                    </div>
+
+                    <div className="form-group">
+                        <label className="form-label">Data Source: </label>
+                        <select
+                            value={currentElement.data?.dataSource || "static"}
+                            onChange={(e) =>
+                                updateElementData(selectedBlock, selectedElement, {
+                                    dataSource: e.target.value as DataSourceType,
+                                })
+                            }
+                            className="form-select"
+                        >
+                            <option value="static">Static Value</option>
+                            <option value="dynamic">Dynamic Data</option>
+                            <option value="formula">Formula</option>
+                            <option value="api">API (Future)</option>
+                        </select>
+                    </div>
+
+                    {currentElement.data?.dataSource === "static" && (
+                        <>
+                            {currentElement.type === "label-value" && (
+                                <div className="form-group">
+                                    <label className="form-label">Label: </label>
+                                    <input
+                                        type="text"
+                                        placeholder="Label"
+                                        value={currentElement.data?.label || ""}
+                                        onChange={(e) =>
+                                            updateElementData(selectedBlock, selectedElement, {
+                                                label: e.target.value,
+                                            })
+                                        }
+                                        className="form-input"
+                                    />
+                                </div>
+                            )}
+                            <div className="form-group">
+                                <label className="form-label">Value: </label>
+                                <input
+                                    type="text"
+                                    placeholder="Value"
+                                    value={currentElement.data?.staticValue || ""}
+                                    onChange={(e) =>
+                                        updateElementData(selectedBlock, selectedElement, {
+                                            staticValue: e.target.value,
+                                        })
+                                    }
+                                    className="form-input"
+                                />
+                            </div>
+                        </>
+                    )}
+
+                    {currentElement.data?.dataSource === "dynamic" && (
+                        <>
+                            {currentElement.type === "label-value" && (
+                                <div className="form-group">
+                                    <label className="form-label">Label: </label>
+                                    <input
+                                        type="text"
+                                        placeholder="Label"
+                                        value={currentElement.data?.label || ""}
+                                        onChange={(e) =>
+                                            updateElementData(selectedBlock, selectedElement, {
+                                                label: e.target.value,
+                                            })
+                                        }
+                                        className="form-input"
+                                    />
+                                </div>
+                            )}
+                            <div className="form-group">
+                                <label className="form-label">Data Key: </label>
+                                <select
+                                    value={currentElement.data?.dynamicKey || ""}
+                                    onChange={(e) =>
+                                        updateElementData(selectedBlock, selectedElement, {
+                                            dynamicKey: e.target.value,
+                                        })
+                                    }
+                                    className="form-select"
+                                >
+                                    <option value="">Select data key</option>
+                                    {dataModelManager.getAvailableKeys().map((key: string) => (
+                                        <option key={key} value={key}>
+                                            {key}
+                                        </option>
+                                    ))}
+                                </select>
+                            </div>
+                        </>
+                    )}
+
+                    {currentElement.data?.dataSource === "formula" && (
+                        <>
+                            {currentElement.type === "label-value" && (
+                                <div className="form-group">
+                                    <label className="form-label">Label: </label>
+                                    <input
+                                        type="text"
+                                        placeholder="Label"
+                                        value={currentElement.data?.label || ""}
+                                        onChange={(e) =>
+                                            updateElementData(selectedBlock, selectedElement, {
+                                                label: e.target.value,
+                                            })
+                                        }
+                                        className="form-input"
+                                    />
+                                </div>
+                            )}
+                            <div className="form-group">
+                                <label className="form-label">Formula: </label>
+                                <input
+                                    type="text"
+                                    placeholder="e.g., {totalUsers} * {growthRate}"
+                                    value={currentElement.data?.formula || ""}
+                                    onChange={(e) =>
+                                        updateElementData(selectedBlock, selectedElement, {
+                                            formula: e.target.value,
+                                        })
+                                    }
+                                    className="form-input"
+                                />
+                                <small className="form-small">
+                                    Use {"{key}"} to reference data values. Example: {"{totalUsers} * {growthRate}"}
+                                </small>
+                            </div>
+                        </>
+                    )}
+
+                    {currentElement.type === "graph" && (
+                        <div className="form-group">
+                            <label className="form-label">Chart Data (JSON): </label>
+                            <textarea
+                                placeholder='[{"name": "Jan", "value": 400}, ...]'
+                                value={JSON.stringify(currentElement.graphData || defaultGraphData, null, 2)}
+                                onChange={(e) => {
+                                    try {
+                                        const newData = JSON.parse(e.target.value);
+                                        updateGraphData(selectedBlock, selectedElement, newData);
+                                    } catch (error) {
+                                        console.log("error: ", error);
+                                    }
+                                }}
+                                rows={4}
+                                className="form-textarea"
+                            />
+                            <small className="form-small">Enter valid JSON array with "name" and "value" properties</small>
+                        </div>
+                    )}
+                </>
+            )}
+            {selectType === "data" && (
+                <div className="data-details">
+
+                    <div className="data-wrapper">
+                        <InputWithDropDown
+                            label="Title"
+                            value={`title`}
+                            placeholder={"Label 1"}
+                            min={0.1}
+                            step={0.1}
+                            max={2}
+                            onChange={() => { }}
+                        />
+                        <div className="data">
+                            <DataDetailedDropdown
+                                title="Data Source"
+                                placeholder="Select assets"
+                                sections={[
+                                    {
+                                        title: "Global",
+                                        items: [
+                                            { id: "global", label: "Global", icon: <DeviceIcon /> },
+                                        ],
+                                    },
+                                    {
+                                        title: "Assets",
+                                        items: [
+                                            { id: "cmm-001", label: "CMM-001", icon: <DeviceIcon /> },
+                                            { id: "cnc-1", label: "CNC-Lathe-0001", icon: <DeviceIcon /> },
+                                            { id: "cnc-2", label: "CNC-drilling-tapping-3Axis", icon: <DeviceIcon /> },
+                                            { id: "cnc-3", label: "CNC_0001", icon: <DeviceIcon /> },
+                                        ],
+                                    },
+                                ]}
+                                value={null}
+                                onChange={() => { }}
+                                dropDownHeader={"RT-Data"}
+                                eyedroper={true}
+                            />
+                        </div>
+
+                        <div className="data">
+                            <DataDetailedDropdown
+                                title="Value"
+                                placeholder="Select Value"
+                                sections={[
+                                    {
+                                        title: "Selected Assets name",
+                                        items: [
+                                            { id: "ambientTemp", label: "ambientTemp", icon: <ParametersIcon /> },
+                                            { id: "measurementDeviation", label: "measurementDeviation", icon: <ParametersIcon /> },
+                                            { id: "powerConsumption", label: "powerConsumption", icon: <ParametersIcon /> },
+                                            { id: "probeX", label: "probePositionX", icon: <ParametersIcon /> },
+                                            { id: "probeY", label: "probePositionY", icon: <ParametersIcon /> },
+                                            { id: "probeZ", label: "probePositionZ", icon: <ParametersIcon /> },
+                                        ],
+                                    },
+                                ]}
+                                value={null}
+                                onChange={() => { }}
+                                dropDownHeader={"RT-Data-Value"}
+
+                            />
+
+                        </div>
+
+                    </div>
+
+                    {/* Data Mapping */}
+                    <div className="data-mapping">
+                        <div className="heading">Data Mapping</div>
+
+                        <div className="type-switch">
+                            <div
+                                className={`type ${selectDataMapping === "singleMachine" ? "active" : ""}`}
+                                onClick={() => setSelectDataMapping("singleMachine")}
+                            >
+                                Single Machine
+                            </div>
+                            <div
+                                className={`type ${selectDataMapping === "multipleeMachine" ? "active" : ""}`}
+                                onClick={() => setSelectDataMapping("multipleeMachine")}
+                            >
+                                Multiple Machine
+                            </div>
+                        </div>
+
+                        {selectDataMapping === "singleMachine" && (
+                            <div className="fields-wrapper">
+                                {singleFields.map((field) => (
+                                    <DataSourceSelector
+                                        key={field.id}
+                                        label={field.label}
+                                        options={["1h", "2h", "12h"]}
+                                        onSelect={() => { }}
+                                        showEyeDropper={!!field.showEyeDropper}
+                                    />
+                                ))}
+
+                                <div className="add-field" onClick={addField}>
+                                    <div className="icon"><AddIcon /></div>
+                                    <div className="label">Add Field</div>
+                                </div>
+
+                            </div>
+                        )}
+
+                        {selectDataMapping === "multipleeMachine" && (
+                            <div className="fields-wrapper">
+                                {multipleFields.map((field) => (
+                                    <div className="datas" key={field.id}>
+                                        <div className="datas__class">
+                                            <DataSourceSelector
+                                                label={field.label}
+                                                options={["1h", "2h", "12h"]}
+                                                onSelect={() => { }}
+                                                showEyeDropper={field.label !== "Common Value"}
+                                            />
+
+                                        </div>
+                                    </div>
+                                ))}
+
+                                <div className="add-field" onClick={addField}>
+                                    <div className="icon"><AddIcon /></div>
+                                    <div className="label">Add Field</div>
+                                </div>
+
+                            </div>
+                        )}
+
+
+                    </div>
                 </div>
             )}
+
         </div>
     );
 };
diff --git a/app/src/components/icons/ExportCommonIcons.tsx b/app/src/components/icons/ExportCommonIcons.tsx
index 5cd6b26..6659ac8 100644
--- a/app/src/components/icons/ExportCommonIcons.tsx
+++ b/app/src/components/icons/ExportCommonIcons.tsx
@@ -1748,3 +1748,118 @@ export const PerformanceStatsIcon = () => {
         </svg>
     );
 };
+
+export const DeviceIcon = () => {
+    return (
+        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M5.4 1.125H5.38395C4.97753 1.125 4.64972 1.125 4.38427 1.14668C4.11095 1.16902 3.87088 1.2162 3.64877 1.32937C3.29597 1.50913 3.00913 1.79597 2.82937 2.14877C2.7162 2.37088 2.66902 2.61095 2.64668 2.88427C2.625 3.14972 2.625 3.47753 2.625 3.88395V3.9V8.1V8.11605C2.625 8.52245 2.625 8.8503 2.64668 9.11575C2.66902 9.38905 2.7162 9.6291 2.82937 9.85125C3.00913 10.2041 3.29597 10.4908 3.64877 10.6706C3.87088 10.7838 4.11095 10.831 4.38427 10.8533C4.64972 10.875 4.97753 10.875 5.38395 10.875H5.4H6.6H6.61605C7.0225 10.875 7.3503 10.875 7.61575 10.8533C7.88905 10.831 8.1291 10.7838 8.35125 10.6706C8.70405 10.4908 8.99085 10.2041 9.17065 9.85125C9.2838 9.6291 9.331 9.38905 9.3533 9.11575C9.375 8.8503 9.375 8.5225 9.375 8.11605V8.1V3.9V3.88394C9.375 3.47753 9.375 3.14972 9.3533 2.88427C9.331 2.61095 9.2838 2.37088 9.17065 2.14877C8.99085 1.79597 8.70405 1.50913 8.35125 1.32937C8.1291 1.2162 7.88905 1.16902 7.61575 1.14668C7.3503 1.125 7.0225 1.125 6.61605 1.125H6.6H5.4ZM3.98926 1.99762C4.08802 1.9473 4.2184 1.91274 4.44534 1.89419C4.67666 1.87529 4.97378 1.875 5.4 1.875H6.6C7.02625 1.875 7.32335 1.87529 7.55465 1.89419C7.7816 1.91274 7.912 1.9473 8.01075 1.99762C8.2224 2.10548 8.3945 2.27758 8.5024 2.48926C8.5527 2.58802 8.58725 2.71841 8.6058 2.94534C8.6247 3.17666 8.625 3.47378 8.625 3.9V8.1C8.625 8.52625 8.6247 8.82335 8.6058 9.05465C8.58725 9.2816 8.5527 9.412 8.5024 9.51075C8.3945 9.7224 8.2224 9.8945 8.01075 10.0024C7.912 10.0527 7.7816 10.0872 7.55465 10.1058C7.32335 10.1247 7.02625 10.125 6.6 10.125H5.4C4.97378 10.125 4.67666 10.1247 4.44534 10.1058C4.2184 10.0872 4.08802 10.0527 3.98926 10.0024C3.77758 9.8945 3.60548 9.7224 3.49762 9.51075C3.4473 9.412 3.41274 9.2816 3.39419 9.05465C3.37529 8.82335 3.375 8.52625 3.375 8.1V3.9C3.375 3.47378 3.37529 3.17666 3.39419 2.94534C3.41274 2.71841 3.4473 2.58802 3.49762 2.48926C3.60548 2.27758 3.77758 2.10548 3.98926 1.99762ZM5 8.625C4.7929 8.625 4.625 8.7929 4.625 9C4.625 9.2071 4.7929 9.375 5 9.375H7C7.2071 9.375 7.375 9.2071 7.375 9C7.375 8.7929 7.2071 8.625 7 8.625H5Z" fill="#CCACFF" />
+        </svg>
+    );
+};
+
+export const ParametersIcon = () => {
+    return (
+        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g clip-path="url(#clip0_6422_4175)">
+                <path d="M10.5 4.875V3C10.4998 2.80116 10.4207 2.61052 10.2801 2.46992C10.1395 2.32932 9.94884 2.25023 9.75 2.25H8.625V3H9.75V4.875C9.75072 5.08872 9.79738 5.29978 9.88681 5.49388C9.97625 5.68799 10.1064 5.86059 10.2684 6C10.1064 6.13941 9.97625 6.31201 9.88681 6.50612C9.79738 6.70022 9.75072 6.91128 9.75 7.125V9H8.625V9.75H9.75C9.94884 9.74977 10.1395 9.67068 10.2801 9.53008C10.4207 9.38948 10.4998 9.19884 10.5 9V7.125C10.5002 6.92616 10.5793 6.73552 10.7199 6.59492C10.8605 6.45432 11.0512 6.37523 11.25 6.375V5.625C11.0512 5.62477 10.8605 5.54568 10.7199 5.40508C10.5793 5.26447 10.5002 5.07384 10.5 4.875Z" fill="#B7B7C6" />
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.375 3.375L6.05362 4.5H6.80362L7.125 3.375H7.875L7.55362 4.5H8.25V5.25H7.3395L6.91088 6.75H7.875V7.5H6.69638L6.375 8.625H5.625L5.94638 7.5H5.19638L4.875 8.625H4.125L4.44638 7.5H3.75V6.75H4.66087L5.0895 5.25H4.125V4.5H5.30362L5.625 3.375H6.375ZM6.5895 5.25H5.8395L5.41087 6.75H6.16088L6.5895 5.25Z" fill="#B7B7C6" />
+                <path d="M2.25 4.875V3H3.375V2.25H2.25C2.05116 2.25023 1.86052 2.32932 1.71992 2.46992C1.57932 2.61052 1.50023 2.80116 1.5 3V4.875C1.49977 5.07384 1.42068 5.26447 1.28008 5.40508C1.13948 5.54568 0.948842 5.62477 0.75 5.625V6.375C0.948842 6.37523 1.13948 6.45432 1.28008 6.59492C1.42068 6.73552 1.49977 6.92616 1.5 7.125V9C1.50023 9.19884 1.57932 9.38948 1.71992 9.53008C1.86052 9.67068 2.05116 9.74977 2.25 9.75H3.375V9H2.25V7.125C2.24928 6.91128 2.20262 6.70022 2.11319 6.50612C2.02375 6.31201 1.89363 6.13941 1.73164 6C1.89363 5.86059 2.02375 5.68799 2.11319 5.49388C2.20262 5.29978 2.24928 5.08872 2.25 4.875Z" fill="#B7B7C6" />
+            </g>
+            <defs>
+                <clipPath id="clip0_6422_4175">
+                    <rect width="12" height="12" fill="white" />
+                </clipPath>
+            </defs>
+        </svg>
+
+    );
+};
+
+
+export const AlignRightIcon = () => {
+    return (
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M21 10H8M21 14H3M21 18H8M21 6H3" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+    );
+};
+
+
+export const AlignJustifyIcon = () => {
+    return (
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M3 10H21M3 14H21M3 18H21M3 6H21" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+    );
+};
+
+
+export const AlignLeftIcon = () => {
+    return (
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M3 10H16M3 14H21M3 18H16M3 6H21" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+    );
+};
+
+export const FlexRowIcon = () => {
+    return (
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13.1782 5.79502L13.1782 18.2059C13.1782 19.3842 13.6809 19.8555 14.9299 19.8555H18.1033C19.3523 19.8555 19.855 19.3842 19.855 18.2059L19.855 5.79502C19.855 4.61677 19.3523 4.14547 18.1033 4.14547L14.9299 4.14547C13.6809 4.14547 13.1782 4.61677 13.1782 5.79502Z" stroke="white" stroke-width="0.7855" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M4.14502 5.79502L4.14502 18.2059C4.14502 19.3842 4.64774 19.8555 5.89668 19.8555H9.07011C10.3191 19.8555 10.8218 19.3842 10.8218 18.2059L10.8218 5.79502C10.8218 4.61677 10.3191 4.14547 9.07011 4.14547L5.89668 4.14547C4.64774 4.14547 4.14502 4.61677 4.14502 5.79502Z" stroke="white" stroke-width="0.7855" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+    );
+};
+
+export const FlexColumnIcon = () => {
+    return (
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M18.2055 13.1787H5.79457C4.61632 13.1787 4.14502 13.6814 4.14502 14.9304V18.1038C4.14502 19.3527 4.61632 19.8555 5.79457 19.8555H18.2055C19.3837 19.8555 19.855 19.3527 19.855 18.1038V14.9304C19.855 13.6814 19.3837 13.1787 18.2055 13.1787Z" stroke="white" stroke-width="0.7855" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M18.2055 4.14453H5.79457C4.61632 4.14453 4.14502 4.64725 4.14502 5.8962V9.06962C4.14502 10.3186 4.61632 10.8213 5.79457 10.8213H18.2055C19.3837 10.8213 19.855 10.3186 19.855 9.06962V5.8962C19.855 4.64725 19.3837 4.14453 18.2055 4.14453Z" stroke="white" stroke-width="0.7855" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+    );
+};
+
+export const FlexRowReverseIcon = () => {
+    return (
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g clip-path="url(#clip0_6424_3252)">
+                <path d="M9.74963 5.82994L9.74963 18.241C9.74963 19.4193 10.2524 19.8906 11.5013 19.8906H14.6748C15.9238 19.8906 16.4265 19.4193 16.4265 18.241V5.82994C16.4265 4.65167 15.9238 4.18037 14.6748 4.18037H11.5013C10.2524 4.18037 9.74963 4.65167 9.74963 5.82994Z" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
+                <path d="M0.716431 5.75865L0.716431 18.1698C0.716431 19.348 1.21916 19.8193 2.46812 19.8193H5.6416C6.89056 19.8193 7.39329 19.348 7.39329 18.1698L7.39329 5.75865C7.39329 4.58039 6.89056 4.10908 5.6416 4.10908H2.46812C1.21916 4.10908 0.716431 4.58039 0.716431 5.75865Z" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
+            </g>
+            <g clip-path="url(#clip1_6424_3252)">
+                <path d="M20.1401 4.99716C21.33 7.07912 21.1304 8.85883 19.5408 10.3352C20.3157 8.55061 19.8845 6.96667 18.4644 5.7629L17.2075 6.3372L18.3451 3.28529L21.397 4.42286L20.1401 4.99716Z" fill="white" stroke="white" stroke-width="0.460612" stroke-linecap="round" stroke-linejoin="round" />
+            </g>
+            <defs>
+                <clipPath id="clip0_6424_3252">
+                    <rect width="19.7634" height="20.6512" fill="white" transform="translate(0 3.34863)" />
+                </clipPath>
+                <clipPath id="clip1_6424_3252">
+                    <rect width="9.37901" height="9.11321" fill="white" transform="matrix(0.400662 0.916226 -0.902414 0.43087 20.2422 0)" />
+                </clipPath>
+            </defs>
+        </svg>
+    );
+};
+
+export const FlexColumnReverseIcon = () => {
+    return (
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g clip-path="url(#clip0_6424_3258)">
+                <path d="M15.0643 13.1787H2.65C1.47143 13.1787 1 13.6816 1 14.9309V18.1051C1 19.3544 1.47143 19.8573 2.65 19.8573H15.0643C16.2429 19.8573 16.7143 19.3544 16.7143 18.1051V14.9309C16.7143 13.6816 16.2429 13.1787 15.0643 13.1787Z" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
+                <path d="M15.0643 4.14355H2.65C1.47143 4.14355 1 4.64641 1 5.8957V9.06999C1 10.3193 1.47143 10.8221 2.65 10.8221H15.0643C16.2429 10.8221 16.7143 10.3193 16.7143 9.06999V5.8957C16.7143 4.64641 16.2429 4.14355 15.0643 4.14355Z" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
+            </g>
+            <g clip-path="url(#clip1_6424_3258)">
+                <path d="M20.14 4.99716C21.3298 7.07912 21.1303 8.85883 19.5407 10.3352C20.3156 8.55061 19.8844 6.96667 18.4642 5.7629L17.2074 6.3372L18.345 3.28529L21.3969 4.42286L20.14 4.99716Z" fill="white" stroke="white" stroke-width="0.460612" stroke-linecap="round" stroke-linejoin="round" />
+            </g>
+            <defs>
+                <clipPath id="clip0_6424_3258">
+                    <rect width="19.7634" height="20.6512" fill="white" transform="translate(0 3.34863)" />
+                </clipPath>
+                <clipPath id="clip1_6424_3258">
+                    <rect width="9.37901" height="9.11321" fill="white" transform="matrix(0.400662 0.916226 -0.902414 0.43087 20.2422 0)" />
+                </clipPath>
+            </defs>
+        </svg>
+    );
+};  
\ No newline at end of file
diff --git a/app/src/components/ui/analysis/ProductionCapacity.tsx b/app/src/components/ui/analysis/ProductionCapacity.tsx
index d5b0951..47c1898 100644
--- a/app/src/components/ui/analysis/ProductionCapacity.tsx
+++ b/app/src/components/ui/analysis/ProductionCapacity.tsx
@@ -3,7 +3,7 @@ import { Line } from "react-chartjs-2";
 import { Chart as ChartJS, LineElement, CategoryScale, LinearScale, PointElement } from "chart.js";
 import { PowerIcon, ProductionCapacityIcon } from "../../icons/analysis";
 import SkeletonUI from "../../templates/SkeletonUI";
-import { useInputValues, useMachineUptime, useProductionCapacityData, useThroughPutData } from "../../../store/builder/store";
+import { useInputValues, useMachineUptime, useProductionCapacityData } from "../../../store/builder/store";
 
 ChartJS.register(LineElement, CategoryScale, LinearScale, PointElement);
 
@@ -28,7 +28,6 @@ const ThroughputSummary: React.FC = () => {
     ];
 
     const { productionCapacityData } = useProductionCapacityData();
-    const { throughputData: data } = useThroughPutData();
 
     const chartOptions = {
         responsive: true,
diff --git a/app/src/components/ui/analysis/ROISummary.tsx b/app/src/components/ui/analysis/ROISummary.tsx
index 5e52cc0..f856270 100644
--- a/app/src/components/ui/analysis/ROISummary.tsx
+++ b/app/src/components/ui/analysis/ROISummary.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from "react";
 import {
   CostBreakDownIcon,
-  LightBulpIcon,
   ROISummaryIcon,
   ROISummaryProductName,
   SonarCrownIcon,
diff --git a/app/src/components/ui/analysis/ThroughputSummary.tsx b/app/src/components/ui/analysis/ThroughputSummary.tsx
index 52fa9f4..d0b23d2 100644
--- a/app/src/components/ui/analysis/ThroughputSummary.tsx
+++ b/app/src/components/ui/analysis/ThroughputSummary.tsx
@@ -1,99 +1,111 @@
 import { useEffect, useState } from "react";
-import { useInputValues, useMachineCount, useMachineUptime, useMaterialCycle, useProductionCapacityData, useThroughPutData } from "../../../store/builder/store";
 import {
-  ThroughputSummaryIcon,
-} from "../../icons/analysis";
+    useInputValues,
+    useMachineUptime,
+    useMaterialCycle,
+    useThroughPutData,
+} from "../../../store/builder/store";
+import { ThroughputSummaryIcon } from "../../icons/analysis";
 import SkeletonUI from "../../templates/SkeletonUI";
 
 const ProductionCapacity = ({
-  avgProcessTime = "28.4 Secs/unit",
-  machineUtilization = "78%",
-  throughputValue = 128,
-  timeRange = { startTime: "08:00 AM", endTime: "09:00 AM" },
+    avgProcessTime = "28.4 Secs/unit",
+    machineUtilization = "78%",
+    throughputValue = 128,
+    timeRange = { startTime: "08:00 AM", endTime: "09:00 AM" },
 }) => {
-  const { machineActiveTime } = useMachineUptime();
-  const { materialCycleTime } = useMaterialCycle();
-  const { throughputData } = useThroughPutData()
-  const { inputValues } = useInputValues();
+    const { machineActiveTime } = useMachineUptime();
+    const { materialCycleTime } = useMaterialCycle();
+    const { throughputData } = useThroughPutData();
+    const { inputValues } = useInputValues();
 
-  const progressPercent = machineActiveTime;
+    const progressPercent = machineActiveTime;
 
-  const shiftLength = parseFloat(inputValues["Shift length"]);
+    const shiftLength = parseFloat(inputValues["Shift length"]);
 
-  const totalBars = 6;
-  const barsToFill = Math.floor((progressPercent / 100) * totalBars);
-  const partialFillPercent = ((progressPercent / 1000) * totalBars - barsToFill) * 100;
+    const totalBars = 6;
+    const barsToFill = Math.floor((progressPercent / 100) * totalBars);
+    const partialFillPercent = ((progressPercent / 1000) * totalBars - barsToFill) * 100;
 
-  const [isLoading, setIsLoading] = useState(true);
+    const [isLoading, setIsLoading] = useState(true);
 
-  useEffect(() => {
-    if (throughputData > 0) {
-      setIsLoading(false);
-    } else {
-      setIsLoading(false);
-    }
-  }, [throughputData])
+    useEffect(() => {
+        if (throughputData > 0) {
+            setIsLoading(false);
+        } else {
+            setIsLoading(false);
+        }
+    }, [throughputData]);
 
-  const Units_per_hour = ((shiftLength * 60) / (materialCycleTime / 60) / shiftLength)
+    const Units_per_hour = (shiftLength * 60) / (materialCycleTime / 60) / shiftLength;
 
-  return (
-    <>
-      {!isLoading && <div className="throughtputSummary-container analysis-card">
-        <div className="throughtputSummary-wrapper analysis-card-wrapper">
-          <div className="card-header">
-            <div className="header">
-              <div className="main-header">Throughput Summary</div>
-              <div className="sub-header">
-                {timeRange.startTime} - {timeRange.endTime}
-              </div>
-            </div>
-            <div className="icon-wrapper">
-              <ThroughputSummaryIcon />
-            </div>
-          </div>
-          {!isLoading ? (
-            <>
-              <div className="process-container">
-                <div className="throughput-value">
-                  <span className="value">{(Units_per_hour).toFixed(2) === "Infinity"? 0 : (Units_per_hour).toFixed(2) }</span> Units/hour
-                </div>
+    return (
+        <>
+            {!isLoading && (
+                <div className="throughtputSummary-container analysis-card">
+                    <div className="throughtputSummary-wrapper analysis-card-wrapper">
+                        <div className="card-header">
+                            <div className="header">
+                                <div className="main-header">Throughput Summary</div>
+                                <div className="sub-header">
+                                    {timeRange.startTime} - {timeRange.endTime}
+                                </div>
+                            </div>
+                            <div className="icon-wrapper">
+                                <ThroughputSummaryIcon />
+                            </div>
+                        </div>
+                        {!isLoading ? (
+                            <>
+                                <div className="process-container">
+                                    <div className="throughput-value">
+                                        <span className="value">
+                                            {Units_per_hour.toFixed(2) === "Infinity"
+                                                ? 0
+                                                : Units_per_hour.toFixed(2)}
+                                        </span>{" "}
+                                        Units/hour
+                                    </div>
 
-                {/* Dynamic Progress Bar */}
-                <div className="progress-bar-wrapper">
-                  {[...Array(totalBars)].map((_, i) => (
-                    <div className="progress-bar" key={i}>
-                      {i < barsToFill ? (
-                        <div className="bar-fill full" />
-                      ) : i === barsToFill ? (
-                        <div
-                          className="bar-fill partial"
-                          style={{ width: `${partialFillPercent}%` }}
-                        />
-                      ) : null}
+                                    {/* Dynamic Progress Bar */}
+                                    <div className="progress-bar-wrapper">
+                                        {[...Array(totalBars)].map((_, i) => (
+                                            <div className="progress-bar" key={i}>
+                                                {i < barsToFill ? (
+                                                    <div className="bar-fill full" />
+                                                ) : i === barsToFill ? (
+                                                    <div
+                                                        className="bar-fill partial"
+                                                        style={{ width: `${partialFillPercent}%` }}
+                                                    />
+                                                ) : null}
+                                            </div>
+                                        ))}
+                                    </div>
+                                </div>
+
+                                <div className="metrics-section">
+                                    <div className="metric">
+                                        <span className="label">Avg. Process Time</span>
+                                        <span className="value">
+                                            {materialCycleTime} secs/unit{" "}
+                                        </span>
+                                    </div>
+                                    <div className="metric">
+                                        <span className="label">Machine Utilization</span>
+                                        <span className="value">{machineActiveTime}</span>
+                                        {/* <span className="value">{machineActiveTime}</span> */}
+                                    </div>
+                                </div>
+                            </>
+                        ) : (
+                            <SkeletonUI type={"default"} />
+                        )}
                     </div>
-                  ))}
                 </div>
-              </div>
-
-              <div className="metrics-section">
-                <div className="metric">
-                  <span className="label">Avg. Process Time</span>
-                  <span className="value">{materialCycleTime} secs/unit </span>
-                </div>
-                <div className="metric">
-                  <span className="label">Machine Utilization</span>
-                  <span className="value">{machineActiveTime}</span>
-                  {/* <span className="value">{machineActiveTime}</span> */}
-                </div>
-              </div>
-            </>
-          ) : (
-            <SkeletonUI type={"default"} />
-          )}
-        </div>
-      </div>}
-    </>
-  );
+            )}
+        </>
+    );
 };
 
 export default ProductionCapacity;
diff --git a/app/src/components/ui/inputs/DataDetailedDropdown.tsx b/app/src/components/ui/inputs/DataDetailedDropdown.tsx
new file mode 100644
index 0000000..c96293e
--- /dev/null
+++ b/app/src/components/ui/inputs/DataDetailedDropdown.tsx
@@ -0,0 +1,128 @@
+import React, { useState, useMemo, useRef, useEffect } from "react";
+import { EyeDroperIcon, SearchIcon } from "../../icons/ExportCommonIcons";
+
+export type DropdownItem = {
+    id: string;
+    label: string;
+    icon?: React.ReactNode;
+};
+
+type DataDetailedDropdownProps = {
+    title: string;
+    placeholder?: string;
+    sections: {
+        title?: string;
+        items: DropdownItem[];
+    }[];
+    value?: DropdownItem | null;
+    onChange?: (item: DropdownItem) => void;
+    dropDownHeader?: string;
+    eyedroper?: boolean;
+};
+
+const DataDetailedDropdown: React.FC<DataDetailedDropdownProps> = ({
+    title,
+    placeholder = "Select value",
+    sections,
+    value,
+    onChange,
+    dropDownHeader,
+    eyedroper,
+}) => {
+    const [open, setOpen] = useState(false);
+    const [search, setSearch] = useState("");
+    const [isEyeDroperActive, setIsEyeDroperActive] = useState(false)
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    // Close dropdown on outside click
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+                setOpen(false);
+            }
+        };
+
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+
+    const filteredSections = useMemo(() => {
+        if (!search) return sections;
+
+        return sections
+            .map((section) => ({
+                ...section,
+                items: section.items.filter((item) =>
+                    item.label.toLowerCase().includes(search.toLowerCase())
+                ),
+            }))
+            .filter((section) => section.items.length > 0);
+    }, [search, sections]);
+
+    return (
+        <div className="data-detailed-dropdown" ref={containerRef}>
+            <div className="title">{title}</div>
+            <div className="input-container">
+                <div className="input-wrapper">
+                    <div className="input" onClick={() => setOpen((v) => !v)}>
+                        {value?.label || placeholder}
+                        <div className="icon">▾</div>
+                    </div>
+
+                    {open && (
+                        <div className="dropdown-panel">
+                            {dropDownHeader && <div className="heading">{dropDownHeader}</div>}
+
+                            <div className="search">
+                                <div className="icon">
+                                    <SearchIcon />
+                                </div>
+                                <input
+                                    placeholder="Search Assets"
+                                    value={search}
+                                    onChange={(e) => setSearch(e.target.value)}
+                                />
+                            </div>
+
+                            {filteredSections.map((section, index) => (
+                                <div key={index} className="data-section">
+                                    {section.title && (
+                                        <div className="data-header">
+                                            <div className="data-section-title">{section.title}</div>
+                                            <div className="data-section-count">{section.items.length}</div>
+                                        </div>
+                                    )}
+
+                                    {section.items.map((item) => (
+                                        <div
+                                            key={item.id}
+                                            className="item"
+                                            onClick={() => {
+                                                onChange?.(item);
+                                                setOpen(false);
+                                            }}
+                                        >
+                                            {item.icon && <span className="icon">{item.icon}</span>}
+                                            <span>{item.label}</span>
+                                        </div>
+                                    ))}
+                                </div>
+                            ))}
+                        </div>
+                    )}
+                </div>
+
+                {eyedroper && (
+                    <div
+                        className={`icon ${isEyeDroperActive ? "active" : ""}`}
+                        onClick={() => setIsEyeDroperActive(!isEyeDroperActive)}
+                    >
+                        <EyeDroperIcon isActive={false} />
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default DataDetailedDropdown;
diff --git a/app/src/components/ui/inputs/DataSourceSelector.tsx b/app/src/components/ui/inputs/DataSourceSelector.tsx
new file mode 100644
index 0000000..4d8ae66
--- /dev/null
+++ b/app/src/components/ui/inputs/DataSourceSelector.tsx
@@ -0,0 +1,55 @@
+import React, { useState } from "react";
+import RegularDropDown from "./RegularDropDown";
+import { EyeDroperIcon } from "../../icons/ExportCommonIcons";
+
+type DataSourceSelectorProps = {
+    label?: string;
+    options: string[];
+    selected?: string;
+    onSelect: (value: string) => void;
+    eyeDropperActive?: boolean; // initial state
+    showEyeDropper?: boolean;
+};
+
+const DataSourceSelector: React.FC<DataSourceSelectorProps> = ({
+    label = "Data Source",
+    options,
+    selected,
+    onSelect,
+    showEyeDropper = true,
+}) => {
+    // Local state to toggle EyeDropper
+    const [isEyeActive, setIsEyeActive] = useState(false);
+
+    return (
+        <div className="datas">
+            <div className="datas__label">{label}</div>
+
+            <div className="datas__class">
+                <RegularDropDown
+                    header={selected || "Select value"}
+                    options={options}
+                    onSelect={onSelect}
+                    search={false}
+                />
+
+                {showEyeDropper && (
+                    <div
+                        className={`icon ${isEyeActive ? "active" : ""}`}
+                        onClick={() => setIsEyeActive(!isEyeActive)}
+                        style={{ cursor: "pointer" }}
+                    >
+                        {/* Pass the local state here */}
+                        <EyeDroperIcon isActive={isEyeActive} />
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default DataSourceSelector;
+
+
+
+
diff --git a/app/src/components/ui/inputs/InputWithDropDown.tsx b/app/src/components/ui/inputs/InputWithDropDown.tsx
index 486faea..cc2ccd5 100644
--- a/app/src/components/ui/inputs/InputWithDropDown.tsx
+++ b/app/src/components/ui/inputs/InputWithDropDown.tsx
@@ -88,3 +88,7 @@ const InputWithDropDown: React.FC<InputWithDropDownProps> = ({
 };
 
 export default InputWithDropDown;
+
+
+
+
diff --git a/app/src/components/ui/inputs/RenameInput.tsx b/app/src/components/ui/inputs/RenameInput.tsx
index d1679b9..aa1460a 100644
--- a/app/src/components/ui/inputs/RenameInput.tsx
+++ b/app/src/components/ui/inputs/RenameInput.tsx
@@ -1,10 +1,5 @@
 import React, { useState, useRef, useEffect } from "react";
 
-// interface RenameInputProps {
-//   value: string;
-//   onRename?: (newText: string) => void;
-// }
-
 interface RenameInputProps {
   value: string;
   onRename?: (newText: string) => void;
diff --git a/app/src/styles/components/simulationDashboard/_simulationDashBoard.scss b/app/src/styles/components/simulationDashboard/_simulationDashBoard.scss
index 73aac03..8de5c8f 100644
--- a/app/src/styles/components/simulationDashboard/_simulationDashBoard.scss
+++ b/app/src/styles/components/simulationDashboard/_simulationDashBoard.scss
@@ -12,7 +12,7 @@
     left: 0;
     pointer-events: none;
 
-    * > {
+    *> {
         pointer-events: auto;
     }
 
@@ -272,11 +272,22 @@
         box-shadow: 0px 4px 8px rgba(60, 60, 67, 0.1019607843);
         z-index: 3;
 
+
+        display: flex;
+        flex-direction: column;
+        gap: 11px;
+        min-width: 280px;
+        height: fit-content;
+        min-width: 320px;
+        min-height: 60vh;
+        padding: 12px;
+
+
         .header {
             display: flex;
             justify-content: space-between;
             align-items: center;
-            margin: 0 0 10px 0;
+            // margin: 0 0 10px 0;
             border-bottom: 1px solid gray;
             padding-bottom: 10px;
 
@@ -296,6 +307,223 @@
             }
         }
 
+        .icon {
+            display: flex;
+        }
+
+        .design-section {
+
+            padding: 4px;
+            outline: 1px solid var(--border-color);
+            outline-offset: -1px;
+            border-radius: 12px;
+            background: var(--background-color);
+
+            padding: 14px 12px;
+
+            display: flex;
+            flex-direction: column;
+            gap: 11px;
+
+            .value-field-container {
+                padding: 0;
+                margin: 0;
+                // padding: 6px 0px;
+            }
+
+            .select-type {
+                display: flex;
+
+                .type {
+                    flex: 1;
+                    padding: 4px 0;
+                    text-align: center;
+                    border-radius: 100px;
+
+                    &.active {
+                        background-color: var(--background-color-button);
+                    }
+                }
+            }
+
+            .position-canvas {
+                background: #8D70AD33;
+                height: 110px;
+                border-radius: 17px;
+
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                position: relative;
+
+                .canvas {
+                    width: 60%;
+                    height: 27px;
+                    background: #E0DFFF80;
+                    // position: relative;
+
+                    .value {
+                        position: absolute;
+
+                        input {
+                            // border: none;
+                            // outline: none;
+                            width: 20px;
+                            background: transparent;
+                        }
+
+                        &:nth-child(1) {
+                            top: 20px;
+                            left: 50%;
+                            transform: translateX(-50%);
+                        }
+
+                        &:nth-child(2) {
+                            top: 50%;
+                            right: 35px;
+                            transform: translateY(-50%);
+                        }
+
+                        &:nth-child(3) {
+                            bottom: 20px;
+                            left: 50%;
+                            transform: translateX(-50%);
+                        }
+
+                        &:nth-child(4) {
+                            top: 50%;
+                            left: 35px;
+                            transform: translateY(-50%);
+                        }
+                    }
+                }
+            }
+
+            .alignments-section {
+                display: flex;
+                justify-content: center;
+                gap: 7px;
+
+                .section {
+                    border-radius: 100px;
+                    padding: 6px;
+                    display: flex;
+                    gap: 10px;
+                    width: fit-content;
+
+                }
+
+                .icon {
+                    &.active {
+                        background-color: var(--background-color-button);
+                        border-radius: 2px;
+                    }
+                }
+            }
+
+            .input-range-container {
+                margin: 0;
+                padding: 0;
+            }
+
+            .data-picker {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+
+                .label {
+                    width: 50%;
+                    white-space: nowrap;
+                }
+
+                input[type="color"] {
+                    width: 42px;
+                    padding: 0;
+                    background: transparent;
+                    outline: none;
+                }
+
+                .left {
+                    width: 100%;
+                    display: flex;
+                    align-items: center;
+                    gap: 6px;
+
+                    .colorValue {
+                        width: 100%;
+                        background: linear-gradient(90.85deg, rgba(240, 228, 255, 0.3) 3.6%, rgba(211, 174, 253, 0.3) 96.04%);
+                        text-align: center;
+                        padding: 4px 0;
+                        border-radius: 100px;
+                    }
+                }
+            }
+
+            .design-section-footer {
+                display: flex;
+                gap: 7px;
+
+                label,
+                .input {
+                    width: auto;
+                }
+
+                input {
+                    width: 40px;
+                }
+
+                .input-range-container,
+                .value-field-container {
+                    width: 100%;
+                    display: flex;
+                    gap: 6px;
+
+                    .input-container {
+                        width: 100%;
+                        display: flex;
+                        gap: 6px;
+
+                        input[type="range"] {
+                            margin: 0;
+                            width: 70px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .datas {
+            // width: 100%  ;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .datas__label,
+            .datas__class {
+                flex: 1;
+
+            }
+        }
+
+
+        .type-switch {
+            display: flex;
+            padding: 6px 12px;
+
+            .type {
+                flex: 1;
+                text-align: center;
+                padding: 4px 0;
+                border-radius: 19px;
+                cursor: pointer;
+
+                &.active {
+                    background: var(--background-color-button);
+                }
+            }
+        }
+
         &.data-model-panel {
             left: 20px;
             top: 50px;
@@ -311,21 +539,171 @@
             }
         }
 
-        &.block-editor-panel {
-            min-width: 280px;
-            height: fit-content;
 
+        &.block-editor-panel {
             // h4 {
             //     color: #4caf50;
             // }
+
+
+
+            .design-section-wrapper {
+                display: flex;
+                flex-direction: column;
+                gap: 6px;
+
+
+            }
+
+        }
+        .data-details {
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+
+            .data-wrapper {
+                display: flex;
+                flex-direction: column;
+                gap: 6px;
+                padding: 6px 12px;
+
+                .value-field-container {
+                    margin: 0;
+                    padding: 0;
+
+                    .label,
+                    .input.default {
+                        width: auto;
+                        flex: 1;
+                    }
+
+                    input,
+                    .input-wrapper {
+                        background: transparent;
+                    }
+                }
+
+                .data {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    gap: 9px;
+
+                    .datas_label,
+                    .regularDropdown-container {
+                        flex: 1;
+                    }
+                }
+            }
+
+            .data-mapping {
+                display: flex;
+                flex-direction: column;
+                gap: 9px;
+                background: var(--background-color);
+                border: 1px solid var(--border-color);
+                box-shadow: var(--box-shadow-medium);
+                padding: 15px 12px;
+                border-radius: 25px;
+
+                .heading {
+                    text-align: center;
+                }
+
+                .type-switch {}
+
+                .fields-wrapper {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 6px;
+
+                    .datas {
+                        width: 100%;
+                        display: flex;
+                        align-items: center;
+                        // padding: 6px 12px;
+
+                        .datas__label,
+                        .datas__class {
+                            flex: 1;
+                        }
+
+                        .datas__label {
+                            flex: 0.8;
+                        }
+
+                        .datas__class {
+                            display: flex;
+                            align-items: center;
+                            gap: 4px;
+
+                            .icon {
+                                display: flex;
+                                padding: 3px;
+                                border-radius: 2px;
+
+                                &.active {
+
+                                    background: var(--background-color-button);
+                                }
+                            }
+
+                            .regularDropdown-container {
+                                .icon {
+                                    padding: 0;
+                                }
+                            }
+                        }
+                    }
+
+                    .add-field {
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        cursor: pointer;
+
+                        svg path {
+                            stroke: #CCACFF !important;
+                        }
+
+                        .label {
+                            color: #CCACFF;
+                        }
+                    }
+                }
+            }
         }
 
         &.element-editor-panel {
             right: 20px;
             top: 50px;
-            min-width: 300px;
+            // min-width: 300px;
             max-height: 84vh;
             overflow: auto;
+
+            max-width: 320px;
+
+            .appearance {
+                .design-datas-wrapper {
+
+                    display: grid;
+                    grid-template-columns: repeat(2, 1fr);
+                    gap: 16px 16px;
+
+                    .value-field-container {
+                        label {
+                            width: 80%;
+                            text-wrap: nowrap;
+                        }
+
+                    }
+                }
+            }
+
+            .footer {
+                text-align: center;
+                color: #CCACFF;
+            }
         }
     }
 
@@ -534,3 +912,143 @@
         }
     }
 }
+
+
+
+
+
+
+
+// DataDetailedDropdown
+.data-detailed-dropdown {
+    display: flex;
+    width: 100%;
+
+    .title,
+    .input-container {
+        flex: 1;
+    }
+
+    .input-container {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+
+        .input-wrapper {
+            width: 100%;
+            background: transparent;
+        }
+
+        .icon {
+            display: flex;
+            padding: 2px;
+            border-radius: 2px;
+
+            &.active {
+                background: var(--background-color-button);
+            }
+
+            cursor: pointer;
+        }
+    }
+
+    .input-wrapper {
+
+        outline: 1px solid var(--input-border-color);
+        outline-offset: -1px;
+        border: none;
+        background: var(--background-color-input);
+        color: var(--input-text-color);
+
+        border-radius: 100px;
+        position: relative;
+
+        .input {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 4px 8px;
+        }
+
+        .dropdown-panel {
+            position: absolute;
+            z-index: 1;
+            top: 0;
+            right: 0;
+            transform: translateY(30px);
+            min-width: 200px;
+            padding: 12px;
+
+            outline: 1px solid var(--border-color);
+            outline-offset: -1px;
+            border-radius: 12px;
+
+            background: var(--background-color);
+            backdrop-filter: blur(20px);
+
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+
+            .search {
+
+                outline: 1px solid var(--border-color);
+                outline-offset: -1px;
+                border-radius: 12px;
+                background: var(--background-color);
+
+                display: flex;
+                align-items: center;
+
+                padding: 4px 9px;
+
+                .icon {
+                    height: 10px;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                }
+
+                input {
+                    outline: none;
+                    border: none;
+                    background: transparent;
+                    padding: 0;
+                    padding-left: 3px;
+                }
+            }
+
+            .data-section {
+                .data-header {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+
+                    .data-section-count {
+                        font-size: 10px;
+                    }
+                }
+
+                .item {
+                    padding: 8px 0;
+                    display: flex;
+                    gap: 2px;
+                    align-items: center;
+
+                    .icon {
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                    }
+
+                    &.active {
+                        span {
+                            color: #CCACFF;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file