diff --git a/src/App.tsx b/src/App.tsx
index ffaefa9..127f098 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -13,14 +13,23 @@ const router = createBrowserRouter([
     element: <Home/>,
     children: [{
       path: '/',
-      element: <List/>
+      element: <List develop/>,
     }, {
       path: '/create/:id',
-      element: <Create />
+      element: <Create develop/>
     }, {
       path: '/detail/:id',
-      element: <Create edit />
-    }]
+      element: <Create develop edit/>
+    }, {
+      path: '/demo',
+      element: <List/>,
+    }, {
+      path: '/demo/create/:id',
+      element: <Create/>
+    }, {
+      path: '/demo/detail/:id',
+      element: <Create edit/>
+    },]
   },
 ]);
 
diff --git a/src/Create.tsx b/src/Create.tsx
index 42b07f2..566a8e4 100644
--- a/src/Create.tsx
+++ b/src/Create.tsx
@@ -111,7 +111,7 @@ const AntSwitch = styled(Switch)(({ theme }) => ({
   },
 }));
 
-export const Create: FC<{ edit?: boolean }> = ({ edit }) => {
+export const Create: FC<{ edit?: boolean; develop?: boolean }> = ({ edit, develop }) => {
   const { id } = useParams();
   const [formJson, setFormJson] = useState({
     id: 'abc',
@@ -154,9 +154,6 @@ export const Create: FC<{ edit?: boolean }> = ({ edit }) => {
   const creatorId = '4034902020';
   const location = useLocation();
   const [teamLink, setTeamLink] = useState('');
-  const debug = useMemo(() => {
-    return (new URLSearchParams(location.search)).get('debug') === 'true';
-  }, [location]);
   useEffect(() => {
     console.log(workflowContent);
     console.log(flowDefinition);
@@ -332,13 +329,13 @@ export const Create: FC<{ edit?: boolean }> = ({ edit }) => {
       name: formJson.name,
       content: Json2Yml(newJson)
     });
-    if (!debug) {
+    if (!develop) {
       await axios.delete(`/bot/workflow/${id}/bind/${channelId}`);
       await axios.post(`/bot/workflow/${id}/bind`, { channelId });
     }
-    message.success(`Publish Success! ${debug ? 'Back to List and go bind your channel!' : ''}`);
+    message.success(`Publish Success! ${develop ? 'Back to List and go bind your channel!' : ''}`);
     setTimeout(() => {
-      navigate(`/${debug ? '?debug=true' : ''}`);
+      navigate(`/${develop ? '' : 'demo'}`);
     }, 3000);
   };
 
@@ -462,7 +459,7 @@ export const Create: FC<{ edit?: boolean }> = ({ edit }) => {
           {!!botAddinAction && <AIBot name={botAddinAction.stateName} value={aibot} onChange={setAIBot}/>}
           {!!scriptAction && <ScriptBlock name={scriptAction.stateName} value={script} onChange={setScript}/>}
           {!!glipSenderAction &&
-            <GlipSender debug={debug} teamLink={teamLink} id={id} edit={edit} value={glipSenderData}
+            <GlipSender develop={!!develop} teamLink={teamLink} id={id} edit={edit} value={glipSenderData}
                         onChange={(value, isTeamLink) => {
                           if (isTeamLink) {
                             setTeamLink(value);
diff --git a/src/GlipSender.tsx b/src/GlipSender.tsx
index ef73b76..e9aea1f 100644
--- a/src/GlipSender.tsx
+++ b/src/GlipSender.tsx
@@ -11,12 +11,12 @@ import { MenuItem, Select, SelectChangeEvent } from "@mui/material";
 
 export const GlipSender: FC<{
   value: string;
-  debug?: boolean
+  develop?: boolean
   edit?: boolean
   id?: string
   teamLink: string
   onChange: (value: string, isTeamLink?: boolean) => void
-}> = ({ value, id,teamLink, debug, edit, onChange }) => {
+}> = ({ value, id,teamLink, develop, edit, onChange }) => {
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     onChange(e.target.value);
   };
@@ -42,7 +42,7 @@ export const GlipSender: FC<{
     <Paper sx={{ p: 2, mb: 2 }}>
       <Typography variant="subtitle1" sx={{ mb: 1 }}>GlipSender</Typography>
       <Box>
-        {!debug &&
+        {!develop &&
           <>
             <Select value={senderType} sx={{ mb: 1 }} onChange={handleChangeType}>
               <MenuItem value="default">Use built-in bot (only supports team message)</MenuItem>
diff --git a/src/List.tsx b/src/List.tsx
index 669c2b6..81078db 100644
--- a/src/List.tsx
+++ b/src/List.tsx
@@ -5,13 +5,12 @@
  *
  *
  */
-import React, { useEffect, useMemo, useState } from "react";
+import React, { FC, useEffect, useMemo, useState } from "react";
 import Button from '@mui/material/Button';
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 import CardActionArea from '@mui/material/CardActionArea';
-import Switch from '@mui/material/Switch';
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import AddIcon from '@mui/icons-material/Add';
 import Card from '@mui/material/Card';
@@ -42,7 +41,7 @@ interface Workflow {
   emoji?: string;
 }
 
-export const List = () => {
+export const List: FC<{ develop?: boolean }> = ({ develop }) => {
   const [list, setList] = useState<Workflow[]>([]);
   const [showModal, setShowModal] = useState(false);
   const [showBindModal, setShowBindModel] = useState('');
@@ -72,16 +71,13 @@ export const List = () => {
     setShowBindModel('');
   };
   const location = useLocation();
-  const debug = useMemo(() => {
-    return (new URLSearchParams(location.search)).get('debug') === 'true';
-  }, [location]);
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     const formData = new FormData(event.currentTarget);
     const formJson = Object.fromEntries((formData as any).entries());
     axios.post('/bot/workflow', { name: formJson.name }).then(({ data }) => {
       handleClose();
-      navigate(`/create/${data.visibleId}${debug ? '?debug=true' : ''}`,);
+      navigate(`${develop ? '' : '/demo'}/create/${data.visibleId}`,);
     });
   };
   const handleSubmitBind = async (event: React.FormEvent<HTMLFormElement>) => {
@@ -103,7 +99,7 @@ export const List = () => {
         {list.map(item => (
           <Link
             key={item.id}
-            to={`/detail/${item.id}${debug ? '?debug=true' : ''}`}
+            to={`${develop ? '' : '/demo'}/detail/${item.id}`}
           >
             <Card sx={{ width: 263, borderRadius: 2, boxShadow: 2 }}>
               <CardActionArea>
@@ -121,7 +117,7 @@ export const List = () => {
                   }}>
                   <Typography component="span" variant="caption" style={{ opacity: .6 }}>Last
                     modified: {formatTime(item.lastModifiedTime)}</Typography>
-                  {debug ?
+                  {develop ?
                     <Button size="small" onClick={(e: any) => {
                       e.preventDefault();
                       handleOpenBind(item.id);