diff --git a/app/web/src/nova/ed/ed-base.tsx b/app/web/src/nova/ed/ed-base.tsx
index b7e61c00..5685a53a 100644
--- a/app/web/src/nova/ed/ed-base.tsx
+++ b/app/web/src/nova/ed/ed-base.tsx
@@ -40,7 +40,7 @@ export const EdBase = () => {
   }
 
   return (
-    <div className="flex flex-col flex-1">
+    <div className={cx("flex flex-col flex-1", style)}>
       <div className="flex justify-between"></div>
       <div className="flex flex-1 items-stretch">
         <EdLeft />
@@ -66,3 +66,75 @@ export const EdBase = () => {
     </div>
   );
 };
+
+const style = css`
+  .toolbar-box {
+    display: flex;
+    align-items: stretch;
+    border-left: 1px solid #ececeb;
+    border-right: 1px solid #ececeb;
+    margin: 0px 0px 0px 5px;
+
+    .label {
+      display: flex;
+      user-select: none;
+      align-items: center;
+      font-size: 10px;
+      margin-top: 1px;
+      color: #999;
+      text-transform: uppercase;
+    }
+
+    .items {
+      display: flex;
+      align-items: stretch;
+      margin-left: 5px;
+      color: #555;
+      border-left: 1px solid transparent;
+
+      .item {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        user-select: none;
+        border-right: 1px solid transparent;
+        padding: 5px;
+        border-radius: 0px;
+
+        &:hover {
+          background: #ececeb;
+        }
+
+        &.disabled {
+          color: #ccc;
+          cursor: default;
+        }
+      }
+
+      .item:last-child {
+        border-top-right-radius: 2px;
+        border-bottom-right-radius: 2px;
+      }
+    }
+
+    &.no-label {
+      padding-left: 0px;
+      margin-left: 0px;
+      .items {
+        margin-left: 0px;
+      }
+    }
+
+    &:hover {
+      border: 1px solid black;
+
+      .items {
+        color: #111;
+        border-left: 1px solid #ececeb;
+        .item {
+          border-right: 1px solid #ececeb;
+        }
+      }
+    }
+  }
+`;
diff --git a/app/web/src/nova/ed/ed-mid.tsx b/app/web/src/nova/ed/ed-mid.tsx
index b0a946ce..50ac11a9 100644
--- a/app/web/src/nova/ed/ed-mid.tsx
+++ b/app/web/src/nova/ed/ed-mid.tsx
@@ -7,6 +7,7 @@ import { EdCompPicker } from "./panel/header/mid/comp-picker";
 import { EdPagePicker } from "./panel/header/mid/page-picker";
 import { TopBtn } from "./panel/header/top-btn";
 import { useGlobal } from "web-utils";
+import { ResponsiveToggle } from "./panel/header/right/responsive-toggle";
 
 export const EdMid: FC<{}> = () => {
   const ed = useGlobal(EDGlobal, "EDITORF");
@@ -32,8 +33,9 @@ export const EdMid: FC<{}> = () => {
             <EdCompPicker />
           </div>
         </div>
-        <div className="flex items-center flex-1 justify-end">
-          <label className="border-r border-r-slate-300 text-slate-400 flex items-center pr-1 mr-1">
+        <div className="flex items-stretch flex-1 justify-end">
+          {ed.mode}
+          <label className=" text-slate-400 flex items-center pr-1">
             <div className=" px-1"> Zoom</div>
             <select
               value={ed.ui.zoom}
@@ -54,6 +56,9 @@ export const EdMid: FC<{}> = () => {
               )}
             </select>
           </label>
+          <div className=" text-slate-400 flex items-center pr-1 ">
+            <ResponsiveToggle />
+          </div>
           <a href={`/vi/${params.site_id}/${params.page_id}`} target="_blank">
             <TopBtn style="slim" className="font-mono text-[9px]">
               PREVIEW
diff --git a/app/web/src/nova/ed/logic/ed-global.ts b/app/web/src/nova/ed/logic/ed-global.ts
index 0ee98f91..90718a25 100644
--- a/app/web/src/nova/ed/logic/ed-global.ts
+++ b/app/web/src/nova/ed/logic/ed-global.ts
@@ -17,6 +17,7 @@ export const EmptySite = {
   config: { api_url: "" },
   js: "",
   js_compiled: "",
+  responsive: "" as "desktop" | "mobile",
   layout: {
     id: "--",
     snapshot: null as null | Uint8Array,
@@ -182,7 +183,7 @@ export const EDGlobal = {
     group: {} as Record<string, Awaited<ReturnType<SAction["comp"]["group"]>>>,
   },
   ui: {
-    zoom: localStorage.zoom || '100%',
+    zoom: localStorage.zoom || "100%",
     should_render: false,
     side: { prop: true },
     layout: {
diff --git a/app/web/src/nova/ed/panel/header/right/responsive-toggle.tsx b/app/web/src/nova/ed/panel/header/right/responsive-toggle.tsx
new file mode 100644
index 00000000..14275ef8
--- /dev/null
+++ b/app/web/src/nova/ed/panel/header/right/responsive-toggle.tsx
@@ -0,0 +1,69 @@
+import { useGlobal } from "web-utils";
+import { w } from "../../../../../utils/types/general";
+import { ToolbarBox } from "../../../../../utils/ui/box";
+import { EDGlobal } from "../../../logic/ed-global";
+
+export const ResponsiveToggle = () => {
+  const c = useGlobal(EDGlobal, "EDITOR");
+  const mode = c.mode;
+  const activeModeClassName = "border-b-2 border-blue-500";
+  return (
+    <ToolbarBox
+      className="flex"
+      items={[
+        {
+          onClick() {
+            c.mode = "mobile";
+            w.isMobile = true;
+            w.isDesktop = false;
+            localStorage.setItem("prasi-editor-mode", "mobile");
+            c.render();
+          },
+          className: cx(mode === "mobile" && activeModeClassName),
+          content: (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="15"
+              height="15"
+              fill="none"
+              viewBox="0 0 15 15"
+            >
+              <path
+                fill="currentColor"
+                fillRule="evenodd"
+                d="M4 2.5a.5.5 0 01.5-.5h6a.5.5 0 01.5.5v10a.5.5 0 01-.5.5h-6a.5.5 0 01-.5-.5v-10zM4.5 1A1.5 1.5 0 003 2.5v10A1.5 1.5 0 004.5 14h6a1.5 1.5 0 001.5-1.5v-10A1.5 1.5 0 0010.5 1h-6zM6 11.65a.35.35 0 100 .7h3a.35.35 0 100-.7H6z"
+                clipRule="evenodd"
+              ></path>
+            </svg>
+          ),
+        },
+        {
+          onClick() {
+            c.mode = "desktop";
+            w.isMobile = false;
+            w.isDesktop = true;
+            localStorage.setItem("prasi-editor-mode", "desktop");
+            c.render();
+          },
+          className: cx(mode === "desktop" && activeModeClassName),
+          content: (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="15"
+              height="15"
+              fill="none"
+              viewBox="0 0 15 15"
+            >
+              <path
+                fill="currentColor"
+                fillRule="evenodd"
+                d="M1 3.25A.25.25 0 011.25 3h12.5a.25.25 0 01.25.25v7.5a.25.25 0 01-.25.25H1.25a.25.25 0 01-.25-.25v-7.5zM1.25 2C.56 2 0 2.56 0 3.25v7.5C0 11.44.56 12 1.25 12h3.823l-.243 1.299a.55.55 0 00.54.651h4.26a.55.55 0 00.54-.651L9.927 12h3.823c.69 0 1.25-.56 1.25-1.25v-7.5C15 2.56 14.44 2 13.75 2H1.25zm7.76 10H5.99l-.198 1.05h3.416L9.01 12z"
+                clipRule="evenodd"
+              ></path>
+            </svg>
+          ),
+        },
+      ]}
+    />
+  );
+};
diff --git a/pkgs/core/api/_prasi.ts b/pkgs/core/api/_prasi.ts
index ce371c3a..4afdc4c8 100644
--- a/pkgs/core/api/_prasi.ts
+++ b/pkgs/core/api/_prasi.ts
@@ -4,8 +4,8 @@ import { g } from "../utils/global";
 import { dir } from "../utils/dir";
 
 const cache = {
-  dev: "",
-  prod: "",
+  dev: {} as Record<string, string>,
+  prod: {} as Record<string, string>,
 };
 
 export const _ = {
@@ -25,8 +25,12 @@ export const _ = {
           ? JSON.stringify(req.query_parameters["url"])
           : "undefined";
 
-        if (!cache.dev) {
-          cache.dev = `\
+        const mode = req.query_parameters["dev"] ? "dev" : "prod";
+
+        if (!cache[mode][url]) {
+          let src = "";
+          if (mode === "dev") {
+            src = `\
 (() => {
   const baseurl = new URL(location.href);
   baseurl.pathname = '';
@@ -45,8 +49,8 @@ export const _ = {
     },
   };
 })();`;
-
-          cache.prod = `\
+          } else {
+            src = `\
 (() => {
   const baseurl = new URL(location.href);
   baseurl.pathname = '';
@@ -59,13 +63,12 @@ export const _ = {
     apiEntry: ${JSON.stringify(getApiEntry())},
   };
 })();`;
+          }
+
+          cache[mode][url] = src;
         }
 
-        if (req.query_parameters["dev"]) {
-          res.send(cache.dev);
-        } else {
-          res.send(cache.prod);
-        }
+        res.send(cache[mode][url]);
       },
     };