diff --git a/app/web/src/render/ed/ed-base.tsx b/app/web/src/render/ed/ed-base.tsx
index 5344c91d..034455db 100644
--- a/app/web/src/render/ed/ed-base.tsx
+++ b/app/web/src/render/ed/ed-base.tsx
@@ -11,6 +11,7 @@ import { EdPopCompGroup } from "./panel/popup/comp/comp-group";
 import { EdPopSite } from "./panel/popup/site/site";
 import { EdScriptInit } from "./panel/script/monaco/init";
 import { EdScriptSite } from "./panel/script/site";
+import { EdRight } from "./ed-right";
 
 export const EdBase = () => {
   const p = useGlobal(EDGlobal, "EDITOR");
@@ -41,6 +42,8 @@ export const EdBase = () => {
         <EdLeft />
         <EdPane type="left" />
         <EdMain />
+        <EdPane type="right" />
+        <EdRight />
       </div>
       <>
         <EdPopSite />
diff --git a/app/web/src/render/ed/ed-right.tsx b/app/web/src/render/ed/ed-right.tsx
new file mode 100644
index 00000000..fb724fdf
--- /dev/null
+++ b/app/web/src/render/ed/ed-right.tsx
@@ -0,0 +1,18 @@
+import { useGlobal } from "web-utils";
+import { EDGlobal } from "./logic/ed-global";
+
+export const EdRight = () => {
+  const p = useGlobal(EDGlobal, "EDITOR");
+  return (
+    <div
+      className={cx(
+        css`
+          width: ${p.ui.layout.right}px;
+        `,
+        "border-l"
+      )}
+    >
+      
+    </div>
+  );
+};
diff --git a/app/web/src/render/ed/panel/main/main.tsx b/app/web/src/render/ed/panel/main/main.tsx
index 6c3a862a..80101255 100644
--- a/app/web/src/render/ed/panel/main/main.tsx
+++ b/app/web/src/render/ed/panel/main/main.tsx
@@ -1,3 +1,3 @@
 export const EdMain = () => {
-  return <div className="flex flex-1 bg-red-500"></div>;
+  return <div className="flex flex-1"></div>;
 };
diff --git a/app/web/src/render/ed/panel/main/pane-resize.tsx b/app/web/src/render/ed/panel/main/pane-resize.tsx
index 6a12a068..1718a0c7 100644
--- a/app/web/src/render/ed/panel/main/pane-resize.tsx
+++ b/app/web/src/render/ed/panel/main/pane-resize.tsx
@@ -9,9 +9,10 @@ export const EdPane = ({ type }: { type: "left" | "right" }) => {
       minSize={200}
       size={p.ui.layout[type]}
       onResize={(size) => {
-        p.ui.layout.left = size;
+        p.ui.layout[type] = size;
         p.render();
       }}
+      position={type}
       onDone={(size) => {
         localStorage.setItem("prasi-layout-" + type, size.toString());
       }}
@@ -24,6 +25,7 @@ const EdPaneResize = (arg: {
   size: number;
   onResize: (size: number) => void;
   onDone: (size: number) => void;
+  position: "left" | "right";
 }) => {
   const local = useLocal({
     default: arg.size,
@@ -51,7 +53,10 @@ const EdPaneResize = (arg: {
           onPointerMove={(e) => {
             local.result = Math.max(
               arg.minSize,
-              local.size + e.clientX - local.sx
+              local.size +
+                (arg.position === "left"
+                  ? e.clientX - local.sx
+                  : local.sx - e.clientX)
             );
             arg.onResize(local.result);
           }}