diff --git a/packages/client/dashboard/.env.example b/packages/client/dashboard/.env.example
index 912f4904..d2c51335 100644
--- a/packages/client/dashboard/.env.example
+++ b/packages/client/dashboard/.env.example
@@ -11,3 +11,5 @@ REACT_APP_DOCS_URL=https://docs.userscan.app
 REACT_APP_API_BASE_URL=https://api-test.s3.xyz
 
 REACT_APP_S3_SCAN_URL=https://scan-dev.s3.xyz
+
+REACT_APP_WALLET_CONNECT_PROJECT_ID = c652d0148879353d7e965d7f6f361e59
\ No newline at end of file
diff --git a/packages/client/dashboard/package.json b/packages/client/dashboard/package.json
index 09ad1d23..41331a62 100644
--- a/packages/client/dashboard/package.json
+++ b/packages/client/dashboard/package.json
@@ -8,32 +8,42 @@
     "@composedb/devtools": "0.4",
     "@graphiql/plugin-explorer": "^0.1.20",
     "@monaco-editor/react": "^4.5.1",
+    "@rjsf/core": "^5.8.2",
+    "@rjsf/utils": "^5.8.2",
+    "@rjsf/validator-ajv8": "^5.8.2",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
+    "@types/ejs": "^3.1.2",
     "@types/file-saver": "^2.0.5",
     "@types/jest": "^27.0.1",
     "@types/lodash": "^4.14.195",
     "@types/node": "^16.7.13",
+    "@types/prismjs": "^1.26.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@types/styled-components": "^5.1.26",
-    "@us3r-network/auth-with-rainbowkit": "^0.1.4",
+    "@us3r-network/auth-with-rainbowkit": "^0.1.8",
     "@us3r-network/data-model": "^0.2.1",
     "@us3r-network/profile": "^0.4.11",
+    "camelcase": "^7.0.1",
     "dayjs": "^1.11.7",
+    "ejs": "^3.1.9",
     "file-saver": "^2.0.5",
     "graphiql": "^2.4.7",
     "graphql-editor": "6.3.2",
     "json-bigint-patch": "^0.0.8",
     "lodash": "^4.17.21",
     "monaco-editor": "^0.38.0",
+    "prism-react-renderer": "^2.0.6",
+    "prismjs": "^1.29.0",
     "react": "^18.2.0",
     "react-aria-components": "^1.0.0-alpha.4",
     "react-dom": "^18.2.0",
     "react-infinite-scroll-component": "^6.1.0",
     "react-router-dom": "^6.11.2",
     "react-scripts": "5.0.1",
+    "react-toastify": "^9.1.3",
     "styled-components": "^5.3.11",
     "typescript": "^4.4.2",
     "use-url-search-params": "^2.5.1",
diff --git a/packages/client/dashboard/public/index.html b/packages/client/dashboard/public/index.html
index e417c4d8..cc78d8fc 100644
--- a/packages/client/dashboard/public/index.html
+++ b/packages/client/dashboard/public/index.html
@@ -25,6 +25,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>%REACT_APP_NAME%</title>
+
     <style>
       @font-face {
         font-family: 'Rubik';
diff --git a/packages/client/dashboard/src/App.tsx b/packages/client/dashboard/src/App.tsx
index 755f25aa..bcf68853 100644
--- a/packages/client/dashboard/src/App.tsx
+++ b/packages/client/dashboard/src/App.tsx
@@ -10,7 +10,7 @@ import { useAppCtx } from './context/AppCtx'
 import MyDapps from './container/MyDapps'
 import NoMatch from './container/NoMatch'
 import CeramicProvider from './context/AppCtx'
-import { CERAMIC_TESTNET_HOST } from './constants'
+import { CERAMIC_TESTNET_HOST, WALLET_CONNECT_PROJECT_ID } from './constants'
 import DappHome from './container/DappHome'
 import DappCreate from './container/DappCreate'
 import Header from './components/Header'
@@ -26,6 +26,8 @@ import Components from './container/Components'
 import { useState } from 'react'
 import ModelList from './components/ModelList'
 import { DappComposite, ModelStream } from './types'
+import { ToastContainer } from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.min.css'
 
 dayjs.extend(relativeTime)
 
@@ -55,7 +57,10 @@ function Routers() {
 
 export default function App() {
   return (
-    <Us3rAuthWithRainbowkitProvider>
+    <Us3rAuthWithRainbowkitProvider
+      projectId={WALLET_CONNECT_PROJECT_ID}
+      appName="S3 Dashboard"
+    >
       <ProfileStateProvider ceramicHost={CERAMIC_TESTNET_HOST}>
         <CeramicProvider>
           <Routers />
@@ -72,6 +77,18 @@ function Layout() {
       <AppContainer>
         <Outlet />
       </AppContainer>
+      <ToastContainer
+        position="top-right"
+        autoClose={3000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+        theme="dark"
+      />
     </div>
   )
 }
diff --git a/packages/client/dashboard/src/api/index.ts b/packages/client/dashboard/src/api/index.ts
index 3b4f1836..b368fa79 100644
--- a/packages/client/dashboard/src/api/index.ts
+++ b/packages/client/dashboard/src/api/index.ts
@@ -8,7 +8,11 @@ import {
   ModelMid,
   ModelStream,
 } from '../types'
-import { Network } from '../components/Selector/EnumSelect'
+import {
+  GraphqlGenType,
+  GraphqlGenTypeServer,
+  Network,
+} from '../components/Selector/EnumSelect'
 
 export const PageSize = 50
 
@@ -257,3 +261,20 @@ export function deleteDappComposites({
     },
   })
 }
+
+export function getModelSDK({
+  network,
+  modelId,
+  type,
+}: {
+  network: Network
+  modelId: string
+  type: GraphqlGenType
+}): AxiosPromise<ApiResp<any>> {
+  let host = APP_API_URL
+  const serverType = GraphqlGenTypeServer[type]
+  return axios({
+    url: host + `/models/${modelId}/sdk?network=${network}&type=${serverType}`,
+    method: 'GET',
+  })
+}
diff --git a/packages/client/dashboard/src/components/CompositeDefinition.tsx b/packages/client/dashboard/src/components/CompositeDefinition.tsx
index 48f91ba4..4bf5de47 100644
--- a/packages/client/dashboard/src/components/CompositeDefinition.tsx
+++ b/packages/client/dashboard/src/components/CompositeDefinition.tsx
@@ -4,6 +4,7 @@ import FileSaver from 'file-saver'
 import { GraphQLEditor, PassedSchema } from 'graphql-editor'
 import { DappComposite } from '../types'
 import { schemas } from '../utils/composedb-types/schemas'
+import { Code } from './ModelSDK'
 
 export default function CompositeDefinition({
   composite,
@@ -57,11 +58,14 @@ export default function CompositeDefinition({
               </button>
             </div>
             <div className="result-text">
-              <pre>
-                <code>
-                  {JSON.stringify(JSON.parse(composite.composite), null, 2)}
-                </code>
-              </pre>
+              <Code
+                name="composite"
+                content={JSON.stringify(
+                  JSON.parse(composite.composite),
+                  null,
+                  2
+                )}
+              />
             </div>
           </div>
         )}
@@ -82,15 +86,14 @@ export default function CompositeDefinition({
               </button>
             </div>
             <div className="result-text">
-              <pre>
-                <code>
-                  {JSON.stringify(
-                    JSON.parse(composite.runtimeDefinition),
-                    null,
-                    2
-                  )}
-                </code>
-              </pre>
+              <Code
+                name="runtimeDefinition"
+                content={JSON.stringify(
+                  JSON.parse(composite.runtimeDefinition),
+                  null,
+                  2
+                )}
+              />
             </div>
           </div>
         )}
@@ -134,6 +137,7 @@ const ResultBox = styled.div`
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
+  margin-top: 20px;
   > div {
     background: #1b1e23;
     border: 1px solid #39424c;
@@ -141,11 +145,10 @@ const ResultBox = styled.div`
     overflow: hidden;
   }
   div {
-    margin: 20px 0px;
-    padding: 10px;
     box-sizing: border-box;
     background-color: #1a1a1c;
     .title {
+      padding: 10px;
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -174,6 +177,10 @@ const ResultBox = styled.div`
     color: #718096;
     overflow: scroll;
     width: 100%;
+
+    > div {
+      width: fit-content;
+    }
   }
 
   button {
diff --git a/packages/client/dashboard/src/components/DappTitleEditor.tsx b/packages/client/dashboard/src/components/DappTitleEditor.tsx
index 523fad98..3a67ca6d 100644
--- a/packages/client/dashboard/src/components/DappTitleEditor.tsx
+++ b/packages/client/dashboard/src/components/DappTitleEditor.tsx
@@ -58,6 +58,7 @@ const TitleBox = styled.div`
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
+      max-width: 800px;
 
       padding: 0 5px 0 0;
     }
diff --git a/packages/client/dashboard/src/components/Definition.tsx b/packages/client/dashboard/src/components/Definition.tsx
index 2f41bc86..5a4f2642 100644
--- a/packages/client/dashboard/src/components/Definition.tsx
+++ b/packages/client/dashboard/src/components/Definition.tsx
@@ -8,6 +8,7 @@ import { schemas } from '../utils/composedb-types/schemas'
 import { AxiosError } from 'axios'
 import { Network } from './Selector/EnumSelect'
 import useSelectedDapp from '../hooks/useSelectedDapp'
+import { Code } from './ModelSDK'
 
 export default function Definition({ streamId }: { streamId: string }) {
   const [modelData, setModelData] = useState<ModeQueryResult>()
@@ -120,9 +121,10 @@ export default function Definition({ streamId }: { streamId: string }) {
               </button>
             </div>
             <div className="result-text">
-              <pre>
-                <code>{JSON.stringify(modelData.composite, null, 2)}</code>
-              </pre>
+              <Code
+                name="composite"
+                content={JSON.stringify(modelData.composite, null, 2)}
+              />
             </div>
           </div>
         )}
@@ -143,11 +145,10 @@ export default function Definition({ streamId }: { streamId: string }) {
               </button>
             </div>
             <div className="result-text">
-              <pre>
-                <code>
-                  {JSON.stringify(modelData.runtimeDefinition, null, 2)}
-                </code>
-              </pre>
+              <Code
+                name="runtimeDefinition"
+                content={JSON.stringify(modelData.runtimeDefinition, null, 2)}
+              />
             </div>
           </div>
         )}
@@ -173,6 +174,7 @@ const ResultBox = styled.div`
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
+  margin-top: 20px;
   > div {
     background: #1b1e23;
     border: 1px solid #39424c;
@@ -180,11 +182,10 @@ const ResultBox = styled.div`
     overflow: hidden;
   }
   div {
-    margin: 20px 0px;
-    padding: 10px;
     box-sizing: border-box;
     background-color: #1a1a1c;
     .title {
+      padding: 10px;
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -213,6 +214,10 @@ const ResultBox = styled.div`
     color: #718096;
     overflow: scroll;
     width: 100%;
+    margin-top: 0;
+    > div {
+      width: fit-content;
+    }
   }
 
   button {
diff --git a/packages/client/dashboard/src/components/EditDappInfo.tsx b/packages/client/dashboard/src/components/EditDappInfo.tsx
index 14a86216..42e650ca 100644
--- a/packages/client/dashboard/src/components/EditDappInfo.tsx
+++ b/packages/client/dashboard/src/components/EditDappInfo.tsx
@@ -126,6 +126,7 @@ export default function EditDappInfo({
           setValue={setNetwork}
           labelText="Network:"
           values={Network}
+          isDisabled={true}
         />
       </div>
 
diff --git a/packages/client/dashboard/src/components/Icons/PlusCircleIcon.tsx b/packages/client/dashboard/src/components/Icons/PlusCircleIcon.tsx
index 63387d06..b1f4fe04 100644
--- a/packages/client/dashboard/src/components/Icons/PlusCircleIcon.tsx
+++ b/packages/client/dashboard/src/components/Icons/PlusCircleIcon.tsx
@@ -9,7 +9,7 @@ export default function PlusCircleIcon() {
     >
       <path
         d="M10.0003 6.66602V13.3327M6.66699 9.99935H13.3337M18.3337 9.99935C18.3337 14.6017 14.6027 18.3327 10.0003 18.3327C5.39795 18.3327 1.66699 14.6017 1.66699 9.99935C1.66699 5.39698 5.39795 1.66602 10.0003 1.66602C14.6027 1.66602 18.3337 5.39698 18.3337 9.99935Z"
-        stroke="#718096"
+        stroke="#fff"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
diff --git a/packages/client/dashboard/src/components/Modal/ModalBase.tsx b/packages/client/dashboard/src/components/Modal/ModalBase.tsx
new file mode 100644
index 00000000..697227cf
--- /dev/null
+++ b/packages/client/dashboard/src/components/Modal/ModalBase.tsx
@@ -0,0 +1,137 @@
+import {
+  Button,
+  Dialog,
+  Heading,
+  Modal,
+  ModalOverlay,
+  ModalOverlayProps,
+} from 'react-aria-components'
+import CloseIcon from '../Icons/CloseIcon'
+import styled, { keyframes } from 'styled-components'
+
+export interface ModalBaseProps extends ModalOverlayProps {
+  children?: React.ReactNode
+  title?: string
+  showCloseBtn?: boolean
+  modalClassName?: string
+  dialogClassName?: string
+  headingClassName?: string
+  titleClassName?: string
+  closeBtnClassName?: string
+}
+
+export default function ModalBase({
+  children,
+  title,
+  showCloseBtn = true,
+  modalClassName = '',
+  dialogClassName = '',
+  headingClassName = '',
+  titleClassName = '',
+  closeBtnClassName = '',
+  onOpenChange,
+  ...props
+}: ModalBaseProps) {
+  return (
+    <ModalOverlayStyled onOpenChange={onOpenChange} {...props}>
+      <ModalStyled className={modalClassName}>
+        <DialogStyled className={dialogClassName}>
+          {(!!title || showCloseBtn) && (
+            <HeadingStyled className={headingClassName}>
+              {' '}
+              <span className={titleClassName}>{title}</span>
+              {showCloseBtn && (
+                <CloseBtnStyled
+                  className={closeBtnClassName}
+                  onPress={() => {
+                    if (!onOpenChange) return
+                    onOpenChange(false)
+                  }}
+                >
+                  <CloseIcon />
+                </CloseBtnStyled>
+              )}
+            </HeadingStyled>
+          )}
+          {children}
+        </DialogStyled>
+      </ModalStyled>
+    </ModalOverlayStyled>
+  )
+}
+
+const fade = keyframes`
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+`
+const zoom = keyframes`
+    from {
+        transform: scale(0.8);
+    }
+
+    to {
+        transform: scale(1);
+    }
+`
+const ModalOverlayStyled = styled(ModalOverlay)`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  z-index: 100000;
+  height: var(--visual-viewport-height);
+  background: rgba(0 0 0 / 0.5);
+  backdrop-filter: blur(12px);
+  overflow: scroll;
+
+  &[data-entering] {
+    animation: ${fade} 200ms;
+  }
+
+  &[data-exiting] {
+    animation: ${fade} 150ms reverse ease-in;
+  }
+`
+const ModalStyled = styled(Modal)`
+  box-shadow: 0 8px 20px rgba(0 0 0 / 0.1);
+  border-radius: 6px;
+  background: var(--page-background);
+  border: 1px solid var(--spectrum-global-color-gray-300);
+  outline: none;
+  padding: 30px;
+  position: relative;
+
+  &[data-entering] {
+    animation: ${zoom} 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
+`
+const DialogStyled = styled(Dialog)`
+  outline: none;
+  width: fit-content;
+  margin: 0 auto;
+  background: #1b1e23;
+  border-radius: 20px;
+  padding: 20px;
+`
+const HeadingStyled = styled(Heading)`
+  margin: 0;
+  padding: 0;
+  height: 30px;
+  line-height: 30px;
+  margin-top: 0;
+  color: #fff;
+  font-size: 24px;
+  font-style: italic;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+`
+const CloseBtnStyled = styled(Button)`
+  margin-left: auto;
+`
diff --git a/packages/client/dashboard/src/components/ModelInstance.tsx b/packages/client/dashboard/src/components/ModelInstance.tsx
index fbf44600..dbb847e1 100644
--- a/packages/client/dashboard/src/components/ModelInstance.tsx
+++ b/packages/client/dashboard/src/components/ModelInstance.tsx
@@ -5,16 +5,26 @@ import InfiniteScroll from 'react-infinite-scroll-component'
 // import ModelStreamList from '../../components/ModelStreamList'
 import { AxiosError } from 'axios'
 import { Network } from './Selector/EnumSelect'
-import { ModelMid } from '../types'
-import { getModelMid, PageSize } from '../api'
+import { ModelMid, ModelStream } from '../types'
+import { getModelMid, PageSize, queryModelGraphql } from '../api'
 import ModelStreamList from './ModelStreamList'
+import { Button } from 'react-aria-components'
+import PlusIcon from './Icons/PlusIcon'
+import ModelInstanceFormModal from './ModelInstanceFormModal'
+import useSelectedDapp from '../hooks/useSelectedDapp'
+import { useComposeClient } from '../hooks/useComposeClient'
+import { toast } from 'react-toastify'
 
 export default function Instance({
   streamId,
   network,
+  schema,
+  name,
 }: {
   streamId: string
   network: Network
+  schema: ModelStream['stream_content']['schema']
+  name: string
 }) {
   const pageNum = useRef(1)
   // const { network } = useCeramicCtx()
@@ -58,6 +68,134 @@ export default function Instance({
     fetchModelMid()
   }, [fetchModelMid])
 
+  // stream form
+  const [isOpenStreamForm, setIsOpenStreamForm] = useState(false)
+  const [formType, setFormType] = useState<'create' | 'update'>('create')
+  const [formData, setFormData] = useState({})
+  const [formDisabled, setFormDisabled] = useState(false)
+  const [updateStreamId, setUpdateStreamId] = useState('')
+  const [definition, setDefinition] = useState<any>()
+  const { selectedDapp } = useSelectedDapp()
+  useEffect(() => {
+    ;(async () => {
+      if (!streamId || !selectedDapp) {
+        setDefinition(null)
+        return
+      }
+      try {
+        const resp = await queryModelGraphql(
+          streamId,
+          selectedDapp.network as Network
+        )
+        const { data } = resp.data
+        setDefinition(data.runtimeDefinition)
+      } catch (error) {
+        setDefinition(null)
+      }
+    })()
+  }, [streamId, selectedDapp])
+
+  const { composeClient, composeClientAuthenticated } =
+    useComposeClient(definition)
+
+  const createStream = useCallback(async () => {
+    if (!composeClientAuthenticated || !composeClient) {
+      toast.error('composeClient not authenticated')
+      return
+    }
+    if (!name) {
+      toast.error('model name not found')
+      return
+    }
+    const mutation = `
+      mutation create${name}($input: Create${name}Input!) {
+        create${name}(input: $input) {
+          document {
+            id
+          }
+        }
+      }
+    `
+    setFormDisabled(true)
+    const res = await composeClient.executeQuery(mutation, {
+      input: {
+        content: { ...formData },
+      },
+    })
+    if (res?.errors && res?.errors.length > 0) {
+      toast.error(res?.errors[0]?.message)
+    } else {
+      toast.success('Submitted successfully!')
+      setIsOpenStreamForm(false)
+      fetchModelMid()
+    }
+    setFormDisabled(false)
+  }, [formData, composeClientAuthenticated, composeClient, name, fetchModelMid])
+
+  const updateStream = useCallback(async () => {
+    if (!composeClientAuthenticated || !composeClient) {
+      toast.error('composeClient not authenticated')
+      return
+    }
+    if (!name) {
+      toast.error('model name not found')
+      return
+    }
+    const mutation = `
+      mutation update${name}($input: Update${name}Input!) {
+        update${name}(input: $input) {
+          document {
+            id
+          }
+        }
+      }
+    `
+    setFormDisabled(true)
+    const res = await composeClient.executeQuery(mutation, {
+      input: {
+        id: updateStreamId,
+        content: { ...formData },
+      },
+    })
+    if (res?.errors && res?.errors.length > 0) {
+      toast.error(res?.errors[0]?.message)
+    } else {
+      toast.success('Submitted successfully!')
+      setStreams(
+        (streams) =>
+          streams?.map((stream: any) => {
+            if (stream.streamId === updateStreamId) {
+              return {
+                ...stream,
+                streamContent: {
+                  ...(stream?.streamContent || {}),
+                  ...formData,
+                },
+              }
+            }
+            return stream
+          }) || []
+      )
+      setIsOpenStreamForm(false)
+    }
+    setFormDisabled(false)
+  }, [
+    updateStreamId,
+    formData,
+    composeClientAuthenticated,
+    composeClient,
+    name,
+  ])
+
+  const submitStream = useCallback(async () => {
+    if (formType === 'create') {
+      await createStream()
+    }
+    if (formType === 'update') {
+      await updateStream()
+    }
+  }, [formType, createStream, updateStream])
+
   if (loading) {
     return (
       <PageBox>
@@ -77,6 +215,31 @@ export default function Instance({
 
   return (
     <PageBox>
+      <ModelInstanceFormModal
+        title={formType === 'create' ? 'Create Stream' : 'Update Stream'}
+        isOpen={isOpenStreamForm}
+        disabled={formDisabled}
+        onOpenChange={setIsOpenStreamForm}
+        schema={schema}
+        formData={formData}
+        onChange={(e) => setFormData(e.formData)}
+        onSubmit={() => submitStream()}
+      />
+
+      {composeClientAuthenticated && (
+        <ListHeading>
+          <PlusButton
+            onPress={() => {
+              setFormType('create')
+              setFormData({})
+              setIsOpenStreamForm(true)
+            }}
+          >
+            <PlusIcon />
+          </PlusButton>
+        </ListHeading>
+      )}
+
       <InfiniteScroll
         dataLength={streams.length}
         next={() => {
@@ -86,7 +249,19 @@ export default function Instance({
         hasMore={hasMore}
         loader={<Loading>Loading...</Loading>}
       >
-        {streamId && <ModelStreamList data={streams} modelId={streamId} />}
+        {streamId && (
+          <ModelStreamList
+            data={streams}
+            modelId={streamId}
+            editable={composeClientAuthenticated}
+            editAction={(stream: any) => {
+              setFormType('update')
+              setUpdateStreamId(stream?.streamId)
+              setFormData(stream?.streamContent)
+              setIsOpenStreamForm(true)
+            }}
+          />
+        )}
       </InfiniteScroll>
       {!hasMore && <Loading>no more data</Loading>}
     </PageBox>
@@ -131,3 +306,42 @@ const PageBox = styled.div`
     }
   }
 `
+const ListHeading = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-bottom: 20px;
+`
+const PlusButton = styled(Button)`
+  box-sizing: border-box;
+
+  /* Auto layout */
+
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 12px 24px;
+  isolation: isolate;
+
+  height: 36px;
+
+  /* 🌘 $neutral/100 */
+
+  background: #1a1e23;
+  border: 1px solid #39424c;
+  border-radius: 12px;
+
+  font-family: 'Rubik';
+  font-style: normal;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 24px;
+  /* identical to box height, or 150% */
+
+  text-align: center;
+
+  /* #718096 */
+
+  color: #718096;
+`
diff --git a/packages/client/dashboard/src/components/ModelInstanceForm.tsx b/packages/client/dashboard/src/components/ModelInstanceForm.tsx
new file mode 100644
index 00000000..e585b05d
--- /dev/null
+++ b/packages/client/dashboard/src/components/ModelInstanceForm.tsx
@@ -0,0 +1,243 @@
+import { useMemo } from 'react'
+import styled, { css } from 'styled-components'
+import Form, { FormProps } from '@rjsf/core'
+import { RJSFSchema } from '@rjsf/utils'
+import defaultValidator from '@rjsf/validator-ajv8'
+
+const formatSchema = (schema: RJSFSchema) => {
+  const newSchema = { ...schema }
+
+  const formatDefByRef = (orgDef: RJSFSchema) => {
+    if (!orgDef?.$ref) return
+    // 从 $ref 中的路径获取对应的定义，如：#/definitions/aaa/bbb 中获取bbb的定义
+    const refPaths = orgDef.$ref.replace(/^#/, '').split('/').filter(Boolean)
+    if (!refPaths.length) return
+    const def = refPaths.reduce((acc, cur) => {
+      if (!acc) return null
+      return acc[cur]
+    }, newSchema)
+    if (!def || typeof def !== 'object') return
+    delete def.title
+    delete orgDef.$ref
+    Object.assign(orgDef, { ...def, ...orgDef })
+    formatDef(orgDef)
+  }
+
+  const formatDefByObj = (objDef: RJSFSchema) => {
+    if (objDef?.type !== 'object' || !objDef?.properties) return
+    for (const key in objDef.properties) {
+      if (!objDef.properties[key]) continue
+      const prop = objDef.properties[key]
+      formatDef(prop as RJSFSchema)
+    }
+  }
+
+  const formatDefByAry = (aryDef: RJSFSchema) => {
+    if (aryDef?.type !== 'array' || !aryDef?.items) return
+    const items = aryDef.items
+    formatDef(items as RJSFSchema)
+  }
+
+  const formatDef = (def: RJSFSchema, defConfig?: Partial<RJSFSchema>) => {
+    if (def?.$ref) {
+      formatDefByRef(def)
+    }
+
+    if (def?.type === 'object') {
+      formatDefByObj(def)
+    }
+
+    if (def?.type === 'array') {
+      formatDefByAry(def)
+    }
+
+    if (defConfig) {
+      Object.assign(def, defConfig)
+    }
+  }
+  formatDef(newSchema)
+  delete newSchema.$schema
+  return newSchema
+}
+
+export interface ModelInstanceFormProps extends Omit<FormProps, 'validator'> {
+  validator?: FormProps['validator']
+}
+export default function ModelInstanceForm({
+  validator,
+  schema,
+  ...props
+}: ModelInstanceFormProps) {
+  const newSchema = useMemo(() => formatSchema(schema), [schema])
+  const newProps = {
+    ...props,
+    validator: validator || defaultValidator,
+    schema: newSchema,
+  }
+  return <FormBox {...newProps} />
+}
+
+const ButtonCss = css`
+  display: flex;
+  width: 160px;
+  height: 48px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 12px;
+  background: #fff;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 24px;
+`
+const InputCss = css`
+  color: #fff;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+
+  background: #1a1e23;
+  border: 1px solid #39424c;
+  border-radius: 12px;
+  padding: 16px;
+  outline: none;
+  width: 100%;
+  flex-grow: 1;
+  box-sizing: border-box;
+  height: 48px;
+
+  &::-webkit-calendar-picker-indicator {
+    filter: invert(1);
+  }
+`
+
+const FormBox = styled(Form)`
+  & > .errors {
+    display: none;
+  }
+  .text-danger {
+    font-size: 12px;
+    color: #aa4f4f;
+  }
+  & > .form-group:first-child {
+    padding-bottom: 20px;
+    border-bottom: 1px solid #39424c;
+  }
+  button {
+    margin: 0;
+    padding: 0;
+  }
+  fieldset {
+    border: unset;
+    margin: unset;
+    padding: unset;
+
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  legend {
+    width: 100%;
+    box-sizing: border-box;
+    text-transform: capitalize;
+  }
+  .control-label {
+    color: #fff;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+  }
+
+  .field-array {
+    & > fieldset > legend {
+      border-left: 6px solid #fff;
+      color: var(--ffffff, #fff);
+      font-size: 20px;
+      font-style: italic;
+      font-weight: 700;
+      padding-left: 10px;
+    }
+    .btn-add {
+      ${ButtonCss}
+      margin-left: auto;
+      width: 132px;
+      border: 1px solid #39424c;
+      background: #718096;
+      color: #fff;
+      &::before {
+        content: '＋ Add';
+      }
+    }
+
+    .array-item-list {
+      margin-top: 20px;
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+    }
+    .array-item-add {
+      margin: 0;
+      margin-top: 20px;
+    }
+    .array-item {
+      display: flex;
+      flex-direction: row;
+      gap: 20px;
+      align-items: flex-end;
+      justify-content: space-between;
+      .form-group > fieldset > legend {
+        margin-bottom: 20px;
+      }
+
+      & > div:first-child {
+        flex: 1;
+      }
+
+      & > .array-item-toolbox {
+        & > .btn-group {
+          ${ButtonCss}
+          width: 132px;
+          background: #14171a;
+
+          button {
+            font-size: 20px;
+          }
+          & > .array-item-remove {
+            &::before {
+              content: 'x';
+              color: #aa4f4f;
+            }
+          }
+          & > .array-item-move-up {
+            &::before {
+              content: '↑';
+              color: #718096;
+            }
+          }
+          & > .array-item-move-down {
+            &::before {
+              content: '↓';
+              color: #718096;
+            }
+          }
+        }
+      }
+    }
+  }
+  button[type='submit'] {
+    ${ButtonCss}
+    margin-top: 20px;
+    margin-left: auto;
+  }
+  button[type='submit']:active {
+    background: var(--ffffff, #fff);
+  }
+
+  input {
+    ${InputCss}
+  }
+`
diff --git a/packages/client/dashboard/src/components/ModelInstanceFormModal.tsx b/packages/client/dashboard/src/components/ModelInstanceFormModal.tsx
new file mode 100644
index 00000000..732f2b19
--- /dev/null
+++ b/packages/client/dashboard/src/components/ModelInstanceFormModal.tsx
@@ -0,0 +1,37 @@
+import { ModelInstanceFormProps } from './ModelInstanceForm'
+import ModelInstanceForm from './ModelInstanceForm'
+import styled from 'styled-components'
+import ModalBase, { ModalBaseProps } from './Modal/ModalBase'
+
+interface ModelInstanceFormModalProps
+  extends ModalBaseProps,
+    Pick<
+      ModelInstanceFormProps,
+      'schema' | 'formData' | 'onChange' | 'onSubmit' | 'disabled'
+    > {}
+export default function ModelInstanceFormModal({
+  schema,
+  formData,
+  onChange,
+  onSubmit,
+  disabled,
+  ...props
+}: ModelInstanceFormModalProps) {
+  return (
+    <ModalBase {...props}>
+      <ModelInstanceFormStyled
+        schema={schema}
+        formData={formData}
+        onChange={onChange}
+        onSubmit={onSubmit}
+        disabled={disabled}
+      />
+    </ModalBase>
+  )
+}
+
+const ModelInstanceFormStyled = styled(ModelInstanceForm)`
+  width: 800px;
+  max-height: calc(100vh - 150px);
+  overflow-y: auto;
+`
diff --git a/packages/client/dashboard/src/components/ModelSDK.tsx b/packages/client/dashboard/src/components/ModelSDK.tsx
new file mode 100644
index 00000000..c078868f
--- /dev/null
+++ b/packages/client/dashboard/src/components/ModelSDK.tsx
@@ -0,0 +1,327 @@
+import { useCallback, useEffect, useState } from 'react'
+import styled from 'styled-components'
+import camelCase from 'camelcase'
+
+import Prism from 'prismjs'
+import 'prismjs/components/prism-typescript'
+import 'prismjs/plugins/line-numbers/prism-line-numbers.js'
+import 'prismjs/plugins/line-numbers/prism-line-numbers.css'
+
+import { getModelSDK } from '../api'
+import useSelectedDapp from '../hooks/useSelectedDapp'
+import { sdkTemplate } from './sdkTemplate'
+
+import { GraphqlGenType, Network } from './Selector/EnumSelect'
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from 'react-aria-components'
+import FileSaver from 'file-saver'
+
+export default function ModelSDK({
+  modelId,
+  modelName,
+}: {
+  modelId: string
+  modelName: string
+}) {
+  const { selectedDapp } = useSelectedDapp()
+
+  const [codes, setCodes] = useState<
+    { id: number; title: string; content: string }[]
+  >([])
+  const [loading, setLoading] = useState<boolean>(false)
+  const [errMsg, setErrMsg] = useState('')
+  const [selectKey, setSelectKey] = useState<string>('0')
+  const [genType, setGenType] = useState(GraphqlGenType.CLIENT_PRESET)
+
+  const download = (text: string, filename: string) => {
+    const blob = new Blob([text], {
+      type: 'text/plain;charset=utf-8',
+    })
+
+    FileSaver.saveAs(blob, filename)
+  }
+
+  const downloadCurr = useCallback(() => {
+    if (codes.length === 0) {
+      return
+    }
+    let curr
+    if (selectKey) {
+      curr = codes.find((item) => `${item.id}` === selectKey)
+    } else {
+      curr = codes[0]
+    }
+    if (!curr) {
+      console.error('no curr')
+      return
+    }
+
+    download(curr.content, curr.title)
+  }, [selectKey, codes])
+
+  const fetchModelSDK = useCallback(async () => {
+    try {
+      setLoading(true)
+      setErrMsg('')
+      const resp = await getModelSDK({
+        network: selectedDapp?.network as Network,
+        modelId: modelId,
+        type: genType,
+      })
+      if (resp.data.code !== 0) {
+        throw new Error(resp.data.msg)
+      }
+
+      const data: { filename: string; content: string }[] = resp.data.data
+      const graphql = data.find((item: any) => item.filename === 'graphql.ts')
+      if (!graphql) {
+        throw new Error('no graphql')
+      }
+
+      const runtimeComposite = data.find(
+        (item) => item.filename === 'runtime-composite.ts'
+      )
+      if (!runtimeComposite) {
+        throw new Error('no runtime-composite')
+      }
+
+      runtimeComposite.content = `// This is an auto-generated file, do not edit manually
+
+export const definition = ${JSON.stringify(
+        JSON.parse(runtimeComposite.content),
+        null,
+        2
+      )}
+      `
+
+      const sdkContent = sdkTemplate
+        .replaceAll('<%= modelName %>', modelName)
+        .replaceAll('<%= modelNameCamelcase %>', camelCase(modelName))
+
+      setCodes(
+        [
+          {
+            filename: `S3${modelName}Model.ts`,
+            content: sdkContent,
+          },
+          runtimeComposite,
+          graphql,
+        ].map((item, i) => ({
+          title: item.filename,
+          content: item.content,
+          id: i,
+        }))
+      )
+    } catch (error) {
+      console.error(error)
+      setErrMsg((error as any).message)
+    } finally {
+      setLoading(false)
+    }
+  }, [selectedDapp?.network, modelId, genType, modelName])
+
+  useEffect(() => {
+    fetchModelSDK()
+  }, [fetchModelSDK])
+
+  return (
+    <SDKContainer>
+      {/* <EnumSelect
+        value={genType}
+        setValue={setGenType}
+        labelText=""
+        values={GraphqlGenType}
+      /> */}
+
+      {(errMsg && (
+        <div className="err-msg">
+          <p>An Error Occurred Please Try Again Later.</p>
+          <p className="info">{errMsg}</p>
+        </div>
+      )) || (
+        <>
+          {(loading && (
+            <SDKBoxLoading>
+              <Loading>Loading...</Loading>
+            </SDKBoxLoading>
+          )) || (
+            <SDKBox>
+              <TabsStyle>
+                <TabBox>
+                  <TabList
+                    className={'code-tabs'}
+                    aria-label="Dynamic tabs"
+                    items={codes}
+                    onSelectionChange={(key) => {
+                      setSelectKey(key.toString())
+                    }}
+                  >
+                    {(item) => <Tab className={'code-tab'}>{item.title}</Tab>}
+                  </TabList>
+
+                  <button onClick={downloadCurr}>Download</button>
+                </TabBox>
+                <TabPanels items={codes}>
+                  {(item) => (
+                    <TabPanel>
+                      <Code name={item.title} content={item.content} />
+                    </TabPanel>
+                  )}
+                </TabPanels>
+              </TabsStyle>
+            </SDKBox>
+          )}
+        </>
+      )}
+    </SDKContainer>
+  )
+}
+
+export function Code({ name, content }: { name: string; content: string }) {
+  useEffect(() => {
+    Prism.highlightAll()
+  }, [content])
+
+  const preCode = `<pre class="line-numbers"><code class="language-typescript">${content}</code></pre>`
+  return (
+    <CodeBox>
+      <div
+        className="line-numbers"
+        dangerouslySetInnerHTML={{ __html: preCode }}
+      ></div>
+    </CodeBox>
+  )
+}
+
+const SDKContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+
+  .err-msg {
+    text-align: center;
+    margin-top: 20px;
+    color: #ff4d4f;
+    font-size: 16px;
+
+    .info {
+      font-size: 14px;
+      color: #718096;
+    }
+  }
+`
+
+const SDKBox = styled.div`
+  padding: 12px 20px 0 20px;
+  border-radius: 20px;
+  border: 1px solid #39424c;
+  background: #1b1e23;
+`
+
+const CodeBox = styled.div`
+  > .name {
+    border-bottom: none;
+    display: inline-block;
+    padding: 10px 20px;
+  }
+  > .line-numbers {
+    overflow: scroll;
+    /* margin-bottom: 20px; */
+  }
+`
+
+const TabsStyle = styled(Tabs)`
+  margin: 0;
+  padding: 0;
+
+  .react-aria-TabPanel {
+    padding: 0;
+    margin: 0;
+  }
+`
+
+const TabBox = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #39424c;
+  margin-bottom: 10px;
+  .code-tabs {
+    display: flex;
+    height: 72px;
+    align-items: center;
+    gap: 20px;
+
+    .code-tab {
+      display: flex;
+      height: 72px;
+      justify-content: center;
+      align-items: center;
+
+      position: relative;
+      border-bottom: none;
+      border-left: none;
+      cursor: pointer;
+
+      font-size: 18px;
+      font-family: Rubik;
+      border: none;
+      outline: none;
+      color: #718096;
+      /* medium-16 */
+      font-size: 16px;
+      font-family: Rubik;
+      font-weight: 500;
+
+      &:first-child {
+        border-top-left-radius: 5px;
+      }
+
+      &:last-child {
+        border-top-right-radius: 5px;
+      }
+
+      &::before {
+        content: ' ';
+        position: absolute;
+        width: 100%;
+        height: 3px;
+        left: 0;
+        bottom: -1px;
+        border-radius: 100px 100px 0px 0px;
+      }
+      &[aria-selected='true']::before {
+        background-color: #fff;
+      }
+
+      &[aria-selected='true'] {
+        color: #fff;
+      }
+    }
+  }
+
+  > button {
+    background-color: #fff;
+    padding: 5px 15px;
+    border-radius: 100px;
+
+    color: #14171a;
+    height: 40px;
+    /* Text/Body 16pt · 1rem */
+    font-size: 16px;
+    font-family: Rubik;
+    line-height: 24px;
+  }
+`
+
+const SDKBoxLoading = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 20px;
+`
+
+const Loading = styled.div`
+  padding: 20px;
+  text-align: center;
+  color: gray;
+`
diff --git a/packages/client/dashboard/src/components/ModelStreamList.tsx b/packages/client/dashboard/src/components/ModelStreamList.tsx
index 884ded47..c75723a7 100644
--- a/packages/client/dashboard/src/components/ModelStreamList.tsx
+++ b/packages/client/dashboard/src/components/ModelStreamList.tsx
@@ -5,16 +5,29 @@ import dayjs from 'dayjs'
 import { shortPubKey } from '../utils/shortPubKey'
 import UserAvatarStyled from './UserAvatarStyled'
 import { UserName } from '@us3r-network/profile'
+import EditIcon from './Icons/EditIcon'
+import { Button } from 'react-aria-components'
+import { useSession } from '@us3r-network/auth-with-rainbowkit'
+import { useMemo } from 'react'
 import { S3_SCAN_URL } from '../constants'
 import useSelectedDapp from '../hooks/useSelectedDapp'
 
 export default function ModelStreamList({
   modelId,
   data,
+  editable,
+  editAction,
 }: {
   modelId: string
   data: ModelMid[]
+  editable?: boolean
+  editAction?: (stream: ModelMid) => void
 }) {
+  const session = useSession()
+  const showAction = useMemo(
+    () => session?.id && editable,
+    [editable, session?.id]
+  )
   const { selectedDapp } = useSelectedDapp()
   return (
     <TableBox>
@@ -23,7 +36,8 @@ export default function ModelStreamList({
           <tr>
             <th>Stream ID</th>
             <th>DID</th>
-            <th>Indexing Time</th>
+            <th>Update Time</th>
+            {showAction && <th>Action</th>}
           </tr>
         </thead>
         <tbody>
@@ -52,9 +66,24 @@ export default function ModelStreamList({
                 </td>
                 <td className="index-time">
                   <div>
-                    <time>{dayjs(item.createdAt).fromNow()}</time>
+                    <time>{dayjs(item.updatedAt).fromNow()}</time>
                   </div>
                 </td>
+                {showAction && (
+                  <td className="td-action">
+                    {session?.id === item.controllerDid ? (
+                      <EditBtn
+                        onPress={() => {
+                          if (editAction) editAction(item)
+                        }}
+                      >
+                        <EditIcon />
+                      </EditBtn>
+                    ) : (
+                      '-'
+                    )}
+                  </td>
+                )}
               </tr>
             )
           })}
@@ -148,3 +177,7 @@ const TableContainer = styled.table`
     color: #718096;
   }
 `
+const EditBtn = styled(Button)`
+  margin: 0;
+  padding: 0;
+`
diff --git a/packages/client/dashboard/src/components/ModelTabs.tsx b/packages/client/dashboard/src/components/ModelTabs.tsx
index 2910e3f6..9a2a5607 100644
--- a/packages/client/dashboard/src/components/ModelTabs.tsx
+++ b/packages/client/dashboard/src/components/ModelTabs.tsx
@@ -1,8 +1,7 @@
 import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'react-aria-components'
 import Definition from './Definition'
-import Instance from './Instance'
-import PlaygroundGraphiQL from './Playground'
-import { Network } from './Selector/EnumSelect'
+
+import ModelSDK from './ModelSDK'
 
 export default function ModelTabs({
   name,
@@ -17,19 +16,15 @@ export default function ModelTabs({
         <span>{name}</span>
         <TabList aria-label="History of Ancient Rome">
           <Tab id="Definition">Model Definition</Tab>
-          <Tab id="Instance">Model Instance Documents</Tab>
-          <Tab id="Playground">Model Playground</Tab>
+          <Tab id="model-sdk">Model SDK</Tab>
         </TabList>
       </div>
       <TabPanels>
         <TabPanel id="Definition">
           <Definition streamId={modelId} />
         </TabPanel>
-        <TabPanel id="Instance">
-          <Instance streamId={modelId} />
-        </TabPanel>
-        <TabPanel id="Playground">
-          <PlaygroundGraphiQL streamId={modelId} />
+        <TabPanel id="model-sdk">
+          <ModelSDK modelId={modelId} modelName={name} />
         </TabPanel>
       </TabPanels>
     </Tabs>
diff --git a/packages/client/dashboard/src/components/Selector/EnumSelect.tsx b/packages/client/dashboard/src/components/Selector/EnumSelect.tsx
index 36103134..39436fbd 100644
--- a/packages/client/dashboard/src/components/Selector/EnumSelect.tsx
+++ b/packages/client/dashboard/src/components/Selector/EnumSelect.tsx
@@ -31,16 +31,32 @@ export enum AppType {
   OTHER = 'Other',
 }
 
-export default function EnumSelector<T extends Stage | Network | AppType>({
+export enum GraphqlGenType {
+  CLIENT_PRESET = 'Client preset',
+  REACT_QUERY_HOOKS = 'React-Query Hooks',
+  REACT_APOLLO_HOOKS = 'React-Apollo Hooks',
+}
+
+export enum GraphqlGenTypeServer {
+  'Client preset' = 'ClientPreset',
+  'React-Query Hooks' = 'ReactQueryHooks',
+  'React-Apollo Hooks' = 'ReactApolloHooks',
+}
+
+export default function EnumSelector<
+  T extends Stage | Network | AppType | GraphqlGenType
+>({
   value,
   setValue,
   values,
   labelText = 'Selector:',
+  isDisabled = false,
 }: {
   value: T
   setValue: (s: T) => void
   values: any // TODO: fix this
   labelText?: string
+  isDisabled?: boolean
 }) {
   const [width, setWidth] = useState(0)
   let options = useMemo(() => {
@@ -53,6 +69,7 @@ export default function EnumSelector<T extends Stage | Network | AppType>({
   return (
     <SelectStyled
       selectedKey={value}
+      isDisabled={isDisabled}
       onSelectionChange={(k) => {
         setValue(k as T)
       }}
@@ -109,6 +126,9 @@ const ButtonStyled = styled(Button)`
 
     color: #ffffff;
   }
+  &:disabled {
+    cursor: not-allowed;
+  }
 `
 
 const PopoverStyled = styled(Popover)<{ width: number }>`
diff --git a/packages/client/dashboard/src/components/TableBox.tsx b/packages/client/dashboard/src/components/TableBox.tsx
index 730a3d68..42f1b405 100644
--- a/packages/client/dashboard/src/components/TableBox.tsx
+++ b/packages/client/dashboard/src/components/TableBox.tsx
@@ -37,8 +37,8 @@ export const TableContainer = styled.table<{ isMobile?: boolean }>`
     }
 
     &:last-child {
-      padding-left: 20px;
-      padding-right: 0px;
+      padding-left: 0px;
+      padding-right: 10px;
       width: 70px !important;
     }
   }
@@ -56,8 +56,8 @@ export const TableContainer = styled.table<{ isMobile?: boolean }>`
     }
 
     &:last-child {
-      padding-left: 20px;
-      padding-right: 0px;
+      padding-left: 0px;
+      padding-right: 10px;
     }
 
     > div {
diff --git a/packages/client/dashboard/src/components/sdkTemplate.ts b/packages/client/dashboard/src/components/sdkTemplate.ts
new file mode 100644
index 00000000..03e0c5e9
--- /dev/null
+++ b/packages/client/dashboard/src/components/sdkTemplate.ts
@@ -0,0 +1,165 @@
+export const sdkTemplate = `/**
+ * How to use this model:
+ * 
+ * export const CERAMIC_TESTNET_HOST = "https://gcp-ceramic-testnet-dev.s3.xyz";
+ * const <%= modelNameCamelcase %>Model = new S3<%= modelName %>Model(CERAMIC_TESTNET_HOST);
+ * 
+ * // auth with didSession
+ * <%= modelNameCamelcase %>Model.authComposeClient(didSession);
+ * 
+ * // createNew
+ * const resp = await <%= modelNameCamelcase %>Model.create<%= modelName %>({...});
+ * 
+ * // update
+ * const resp = await <%= modelNameCamelcase %>Model.update<%= modelName %>({...});
+ * 
+ * // queryList
+ * const resp = await <%= modelNameCamelcase %>Model.query<%= modelName %>Index({first: 100, after: ""});
+ *
+ * // queryWithId
+ * const resp = await <%= modelNameCamelcase %>Model.query<%= modelName %>WithId("...");
+ * 
+ */
+
+import { ComposeClient } from "@composedb/client";
+import { RuntimeCompositeDefinition } from "@composedb/types";
+import { DIDSession } from "did-session";
+import type { CeramicApi } from "@ceramicnetwork/common";
+import { DID } from "dids";
+import { Page } from "@ceramicnetwork/common";
+
+import { definition } from "./runtime-composite";
+
+import {
+  <%= modelName %>,
+  Create<%= modelName %>Input,
+  Create<%= modelName %>Payload,
+  Update<%= modelName %>Input,
+  Update<%= modelName %>Payload,
+  Scalars,
+} from "./graphql";
+
+export class S3<%= modelName %>Model {
+  composeClient: ComposeClient;
+
+  constructor(ceramic: CeramicApi | string) {
+    this.composeClient = new ComposeClient({
+      ceramic: ceramic,
+      definition: definition as RuntimeCompositeDefinition,
+    });
+  }
+
+  public authComposeClient(session: DIDSession) {
+    if (!session || (session.hasSession && session.isExpired)) {
+      throw new Error("Please login with wallet first!");
+    }
+    this.composeClient.setDID(session.did);
+  }
+
+  public resetComposeClient() {
+    const did = new DID();
+    this.composeClient.setDID(did);
+  }
+
+  async create<%= modelName %>(input: Create<%= modelName %>Input) {
+    const mutation = \`
+      mutation create<%= modelName %>($input: Create<%= modelName %>Input!) {
+        create<%= modelName %>(input: $input) {
+          document {
+            id
+          }
+        }
+      }
+    \`;
+    const resp = await this.composeClient.executeQuery<{
+      create<%= modelName %>: Create<%= modelName %>Payload;
+    }>(mutation, {
+      input: {
+        content: {
+          ...input.content,
+        },
+      },
+    });
+    return resp;
+  }
+
+  async update<%= modelName %>(input: Update<%= modelName %>Input) {
+    const mutation = \`
+      mutation($input: Update<%= modelName %>Input!) {
+        update<%= modelName %>(input: $input) {
+          document {
+            id
+          }
+        }
+      }
+    \`;
+    const resp = await this.composeClient.executeQuery<{
+      update<%= modelName %>: Update<%= modelName %>Payload;
+    }>(mutation, {
+      input: {
+        id: input.id,
+        content: {
+          ...input.content,
+        },
+      },
+    });
+
+    return resp;
+  }
+
+  async query<%= modelName %>Index({
+    first = 100,
+    after = "",
+  }: {
+    first: number;
+    after?: string;
+  }) {
+    const query = \`
+      query {
+        <%= modelNameCamelcase %>Index(first: \${first}, after: "\${after}") {
+          edges {
+            node {
+              id
+              # other fields
+            }
+          }
+          pageInfo {
+            hasNextPage
+            hasPreviousPage
+            endCursor
+            startCursor
+          }
+        }
+      }
+    \`;
+
+    const resp = await this.composeClient.executeQuery<{
+      <%= modelNameCamelcase %>Index: Page<<%= modelName %>>;
+    }>(query);
+
+    return resp;
+  }
+
+  async query<%= modelName %>WithId(id: Scalars["ID"]["input"]) {
+    const query = \`
+      query($id: ID!) {
+        node(id: $id) {
+          ... on <%= modelName %> {
+            id
+            # other fields
+          }
+        }
+      }
+    \`;
+
+    const resp = await this.composeClient.executeQuery<{
+      node: <%= modelName %>;
+    }>(query, {
+      id,
+    });
+
+    return resp;
+  }
+}
+
+`
diff --git a/packages/client/dashboard/src/constants/index.ts b/packages/client/dashboard/src/constants/index.ts
index 9a312524..53e9f82b 100644
--- a/packages/client/dashboard/src/constants/index.ts
+++ b/packages/client/dashboard/src/constants/index.ts
@@ -20,3 +20,7 @@ export const DISCORD = 'discord'
 export const MEDIUM = 'medium'
 export const MIRROR = 'mirror'
 export const GITHUB = 'github'
+
+export const WALLET_CONNECT_PROJECT_ID =
+  process.env.REACT_APP_WALLET_CONNECT_PROJECT_ID ||
+  'c652d0148879353d7e965d7f6f361e59'
diff --git a/packages/client/dashboard/src/container/DappDataStatistic.tsx b/packages/client/dashboard/src/container/DappDataStatistic.tsx
index 084f2eaa..b8018c66 100644
--- a/packages/client/dashboard/src/container/DappDataStatistic.tsx
+++ b/packages/client/dashboard/src/container/DappDataStatistic.tsx
@@ -20,6 +20,8 @@ export default function DappDataStatistic() {
         <Instance
           streamId={selectModel.stream_id}
           network={(selectedDapp?.network as Network) || Network.TESTNET}
+          schema={selectModel?.stream_content?.schema || {}}
+          name={selectModel?.stream_content?.name}
         />
       </div>
     )
diff --git a/packages/client/dashboard/src/container/DappHome.tsx b/packages/client/dashboard/src/container/DappHome.tsx
index 9d730298..1aee35f7 100644
--- a/packages/client/dashboard/src/container/DappHome.tsx
+++ b/packages/client/dashboard/src/container/DappHome.tsx
@@ -252,6 +252,7 @@ const DappHomeContainer = styled.div`
     line-height: 47px;
     margin: 0;
     color: #ffffff;
+    word-break: break-all;
   }
 
   > div {
diff --git a/packages/client/dashboard/src/container/DappInfo.tsx b/packages/client/dashboard/src/container/DappInfo.tsx
index 065df7ac..3e6c7cc7 100644
--- a/packages/client/dashboard/src/container/DappInfo.tsx
+++ b/packages/client/dashboard/src/container/DappInfo.tsx
@@ -64,7 +64,7 @@ export default function DappInfo() {
               {showCopyTint && <span>Copied</span>}
             </div>
           </div>
-          <p>{selectedDapp.description}</p>
+          <p className="description">{selectedDapp.description}</p>
         </div>
       </div>
       <div className="links">
@@ -173,7 +173,7 @@ const DappInfoContainer = styled.div`
           }
         }
       }
-      > p {
+      > p.description {
         margin: 0;
         padding: 0;
         font-weight: 400;
@@ -181,6 +181,8 @@ const DappInfoContainer = styled.div`
         line-height: 19px;
 
         color: #718096;
+        max-width: 1141px;
+        word-break: break-all;
       }
     }
   }
diff --git a/packages/client/dashboard/src/hooks/useComposeClient.ts b/packages/client/dashboard/src/hooks/useComposeClient.ts
new file mode 100644
index 00000000..8e059697
--- /dev/null
+++ b/packages/client/dashboard/src/hooks/useComposeClient.ts
@@ -0,0 +1,47 @@
+import { useSession } from '@us3r-network/auth-with-rainbowkit'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { ComposeClient } from '@composedb/client'
+import { RuntimeCompositeDefinition } from '@composedb/types'
+import { DID } from 'dids'
+import useSelectedDapp from './useSelectedDapp'
+import { Network } from '../components/Selector/EnumSelect'
+import { CERAMIC_MAINNET_HOST, CERAMIC_TESTNET_HOST } from '../constants'
+
+export function useComposeClient(definition: RuntimeCompositeDefinition) {
+  const { selectedDapp } = useSelectedDapp()
+  const session = useSession()
+
+  const composeClient = useMemo(
+    () =>
+      definition
+        ? new ComposeClient({
+            ceramic:
+              selectedDapp?.network === Network.MAINNET
+                ? CERAMIC_MAINNET_HOST
+                : CERAMIC_TESTNET_HOST,
+            definition,
+          })
+        : null,
+    [definition, selectedDapp?.network]
+  )
+  const [composeClientAuthenticated, setComposeClientAuthenticated] =
+    useState(false)
+
+  const authComposeClients = useCallback(() => {
+    if (!composeClient) return
+    if (session) {
+      composeClient.setDID(session.did)
+      setComposeClientAuthenticated(true)
+    } else {
+      const did = new DID()
+      composeClient.setDID(did)
+      setComposeClientAuthenticated(false)
+    }
+  }, [session, composeClient, setComposeClientAuthenticated])
+
+  useEffect(() => {
+    authComposeClients()
+  }, [authComposeClients])
+
+  return { composeClient, composeClientAuthenticated }
+}
diff --git a/packages/client/dashboard/src/index.tsx b/packages/client/dashboard/src/index.tsx
index d5bf0657..26d7472d 100644
--- a/packages/client/dashboard/src/index.tsx
+++ b/packages/client/dashboard/src/index.tsx
@@ -10,6 +10,7 @@ import './styles/tab.css'
 import './styles/playground.css'
 import './styles/menu.css'
 import './styles/checkbox.css'
+import './styles/prism-vsc-dark-plus.css'
 
 import '@graphiql/plugin-explorer/dist/style.css'
 import 'graphiql/graphiql.css'
diff --git a/packages/client/dashboard/src/styles/prism-vsc-dark-plus.css b/packages/client/dashboard/src/styles/prism-vsc-dark-plus.css
new file mode 100644
index 00000000..b4753b89
--- /dev/null
+++ b/packages/client/dashboard/src/styles/prism-vsc-dark-plus.css
@@ -0,0 +1,318 @@
+pre[class*="language-"],
+code[class*="language-"] {
+	color: #d4d4d4;
+	font-size: 13px;
+	text-shadow: none;
+	font-family: Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;
+	direction: ltr;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	line-height: 1.5;
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+pre[class*="language-"]::selection,
+code[class*="language-"]::selection,
+pre[class*="language-"] *::selection,
+code[class*="language-"] *::selection {
+	text-shadow: none;
+	background: #264F78;
+}
+
+@media print {
+	pre[class*="language-"],
+	code[class*="language-"] {
+		text-shadow: none;
+	}
+}
+
+pre[class*="language-"] {
+	padding: 1em;
+	margin:  0;
+	overflow: auto;
+	background: #1e1e1e;
+}
+
+:not(pre) > code[class*="language-"] {
+	padding: .1em .3em;
+	border-radius: .3em;
+	color: #db4c69;
+	background: #1e1e1e;
+}
+/*********************************************************
+* Tokens
+*/
+.namespace {
+	opacity: .7;
+}
+
+.token.doctype .token.doctype-tag {
+	color: #569CD6;
+}
+
+.token.doctype .token.name {
+	color: #9cdcfe;
+}
+
+.token.comment,
+.token.prolog {
+	color: #6a9955;
+}
+
+.token.punctuation,
+.language-html .language-css .token.punctuation,
+.language-html .language-javascript .token.punctuation {
+	color: #d4d4d4;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.inserted,
+.token.unit {
+	color: #b5cea8;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.deleted {
+	color: #ce9178;
+}
+
+.language-css .token.string.url {
+	text-decoration: underline;
+}
+
+.token.operator,
+.token.entity {
+	color: #d4d4d4;
+}
+
+.token.operator.arrow {
+	color: #569CD6;
+}
+
+.token.atrule {
+	color: #ce9178;
+}
+
+.token.atrule .token.rule {
+	color: #c586c0;
+}
+
+.token.atrule .token.url {
+	color: #9cdcfe;
+}
+
+.token.atrule .token.url .token.function {
+	color: #dcdcaa;
+}
+
+.token.atrule .token.url .token.punctuation {
+	color: #d4d4d4;
+}
+
+.token.keyword {
+	color: #569CD6;
+}
+
+.token.keyword.module,
+.token.keyword.control-flow {
+	color: #c586c0;
+}
+
+.token.function,
+.token.function .token.maybe-class-name {
+	color: #dcdcaa;
+}
+
+.token.regex {
+	color: #d16969;
+}
+
+.token.important {
+	color: #569cd6;
+}
+
+.token.italic {
+	font-style: italic;
+}
+
+.token.constant {
+	color: #9cdcfe;
+}
+
+.token.class-name,
+.token.maybe-class-name {
+	color: #4ec9b0;
+}
+
+.token.console {
+	color: #9cdcfe;
+}
+
+.token.parameter {
+	color: #9cdcfe;
+}
+
+.token.interpolation {
+	color: #9cdcfe;
+}
+
+.token.punctuation.interpolation-punctuation {
+	color: #569cd6;
+}
+
+.token.boolean {
+	color: #569cd6;
+}
+
+.token.property,
+.token.variable,
+.token.imports .token.maybe-class-name,
+.token.exports .token.maybe-class-name {
+	color: #9cdcfe;
+}
+
+.token.selector {
+	color: #d7ba7d;
+}
+
+.token.escape {
+	color: #d7ba7d;
+}
+
+.token.tag {
+	color: #569cd6;
+}
+
+.token.tag .token.punctuation {
+	color: #808080;
+}
+
+.token.cdata {
+	color: #808080;
+}
+
+.token.attr-name {
+	color: #9cdcfe;
+}
+
+.token.attr-value,
+.token.attr-value .token.punctuation {
+	color: #ce9178;
+}
+
+.token.attr-value .token.punctuation.attr-equals {
+	color: #d4d4d4;
+}
+
+.token.entity {
+	color: #569cd6;
+}
+
+.token.namespace {
+	color: #4ec9b0;
+}
+/*********************************************************
+* Language Specific
+*/
+
+pre[class*="language-javascript"],
+code[class*="language-javascript"],
+pre[class*="language-jsx"],
+code[class*="language-jsx"],
+pre[class*="language-typescript"],
+code[class*="language-typescript"],
+pre[class*="language-tsx"],
+code[class*="language-tsx"] {
+	color: #9cdcfe;
+}
+
+pre[class*="language-css"],
+code[class*="language-css"] {
+	color: #ce9178;
+}
+
+pre[class*="language-html"],
+code[class*="language-html"] {
+	color: #d4d4d4;
+}
+
+.language-regex .token.anchor {
+	color: #dcdcaa;
+}
+
+.language-html .token.punctuation {
+	color: #808080;
+}
+/*********************************************************
+* Line highlighting
+*/
+pre[class*="language-"] > code[class*="language-"] {
+	position: relative;
+	z-index: 1;
+}
+
+.line-highlight.line-highlight {
+	background: #f7ebc6;
+	box-shadow: inset 5px 0 0 #f7d87c;
+	z-index: 0;
+}
+
+pre[class*="language-"].line-numbers {
+    position: relative;
+    padding-left: 3.8em;
+    counter-reset: linenumber;
+    white-space: pre-wrap;
+}
+
+pre[class*="language-"].line-numbers > code {
+    position: relative;
+    white-space: inherit;
+}
+
+.line-numbers .line-numbers-rows {
+    position: absolute;
+    pointer-events: none;
+    top: 0;
+    font-size: 100%;
+    left: -3.8em;
+    width: 3em; /* works for line-numbers below 1000 lines */
+    letter-spacing: -1px;
+    border-right: 1px solid #999;
+
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+
+}
+
+.line-numbers-rows > span {
+    pointer-events: none;
+    display: block;
+    counter-increment: linenumber;
+}
+
+.line-numbers-rows > span:before {
+    content: counter(linenumber);
+    color: #999;
+    display: block;
+    padding-right: 0.8em;
+    text-align: right;
+}
diff --git a/packages/client/dashboard/src/utils/createDefaultQuery.ts b/packages/client/dashboard/src/utils/createDefaultQuery.ts
index b93e7969..32fbf36a 100644
--- a/packages/client/dashboard/src/utils/createDefaultQuery.ts
+++ b/packages/client/dashboard/src/utils/createDefaultQuery.ts
@@ -1,7 +1,7 @@
 export function createGraphqlDefaultQuery(modelName: string, propertes: any[]) {
   return `
     {
-      ${modelName.charAt(0).toLowerCase() + modelName.slice(1)}Index(first: 5) {
+      ${modelName.charAt(0).toLowerCase() + modelName.slice(1)}Index(last: 5) {
         edges {
           node {
             id,${propertes.map((p) => {
diff --git a/packages/client/dashboard/yarn.lock b/packages/client/dashboard/yarn.lock
index e8a2280f..3db0b451 100644
--- a/packages/client/dashboard/yarn.lock
+++ b/packages/client/dashboard/yarn.lock
@@ -3040,10 +3040,10 @@
     schema-utils "^3.0.0"
     source-map "^0.7.3"
 
-"@rainbow-me/rainbowkit@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/@rainbow-me/rainbowkit/-/rainbowkit-1.0.1.tgz#c852383a5a16fb6452e2533992aa2cd6d562a992"
-  integrity sha512-P+2lgHaN5X84K1e+MARUydyhYRS+nStN4H470QloBBWP5UsidHZpSJGd4qi0WFtfR6zBff96N6kmsfJo7PjFhQ==
+"@rainbow-me/rainbowkit@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/@rainbow-me/rainbowkit/-/rainbowkit-1.0.2.tgz#d6113ffe95c7af0ef03a8c0dcf227862e7730136"
+  integrity sha512-CIcEekBBlYiqg2oNS7LZqqN882OfJ0T1ORe4c46dscSuMCaX9sdbviQR1m8LoA4KocSCzSxOPAnfoVN8eC/HNA==
   dependencies:
     "@vanilla-extract/css" "1.9.1"
     "@vanilla-extract/dynamic" "2.0.2"
@@ -4228,6 +4228,38 @@
   resolved "https://registry.npmjs.org/@repeaterjs/repeater/-/repeater-3.0.4.tgz#a04d63f4d1bf5540a41b01a921c9a7fddc3bd1ca"
   integrity sha512-AW8PKd6iX3vAZ0vA43nOUOnbq/X5ihgU+mSXXqunMkeQADGiqw/PY0JNeYtD5sr0PAy51YPgAPbDoeapv9r8WA==
 
+"@rjsf/core@^5.8.2":
+  version "5.8.2"
+  resolved "https://registry.npmjs.org/@rjsf/core/-/core-5.8.2.tgz#4d04ce099e793ac1ca311cd13b32084f266b96a4"
+  integrity sha512-DwFPYHFGRR3xzmFa5EpffcmDoW/tKcLaDRU8t15Uv8mbr7OBhLavwTceGGgO/TYCTjNUDwofcnwquPzKRw39Cg==
+  dependencies:
+    lodash "^4.17.21"
+    lodash-es "^4.17.21"
+    markdown-to-jsx "^7.2.1"
+    nanoid "^3.3.6"
+    prop-types "^15.8.1"
+
+"@rjsf/utils@^5.8.2":
+  version "5.8.2"
+  resolved "https://registry.npmjs.org/@rjsf/utils/-/utils-5.8.2.tgz#82e4263eae860f8b08dd9dc7e91585eaf1cf87d9"
+  integrity sha512-vSnXHuUAg2dUmkGn9HNoEkuykno4vTb8hef+YoMDU3+oi3z5Bb8yZw/UC02Lo40Uo5XxvQeBfLb3RN0vfeSpMg==
+  dependencies:
+    json-schema-merge-allof "^0.8.1"
+    jsonpointer "^5.0.1"
+    lodash "^4.17.21"
+    lodash-es "^4.17.21"
+    react-is "^18.2.0"
+
+"@rjsf/validator-ajv8@^5.8.2":
+  version "5.8.2"
+  resolved "https://registry.npmjs.org/@rjsf/validator-ajv8/-/validator-ajv8-5.8.2.tgz#91106dada3334bc857c676236cf6d9e773e2526b"
+  integrity sha512-Rahn2D0iXVPkadpgQ12HmEocnTNg6QVy2sqmBfpXV8jYQHKZMpk4llEHw0FTjuBN8jMusKcdWYN4Dp/fLPHESQ==
+  dependencies:
+    ajv "^8.12.0"
+    ajv-formats "^2.1.1"
+    lodash "^4.17.21"
+    lodash-es "^4.17.21"
+
 "@rollup/plugin-babel@^5.2.0":
   version "5.3.1"
   resolved "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283"
@@ -5049,6 +5081,11 @@
   resolved "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.2.tgz#6c2324641cc4ba050a8c710b2b251b377581fbf0"
   integrity sha512-KufADq8uQqo1pYKVIYzfKbJfBAc0sOeXqGbFaSpv8MRmC/zXgowNZmFcbngndGk922QDmOASEXUZCaY48gs4cg==
 
+"@types/prismjs@^1.26.0":
+  version "1.26.0"
+  resolved "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.0.tgz#a1c3809b0ad61c62cac6d4e0c56d610c910b7654"
+  integrity sha512-ZTaqn/qSqUuAq1YwvOFQfVW1AR/oQJlLSZVustdjwI+GZ8kr0MSHBj0tsXPW1EqHubx50gtBEjbPGsdZwQwCjQ==
+
 "@types/prop-types@*":
   version "15.7.5"
   resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
@@ -5287,13 +5324,14 @@
     "@typescript-eslint/types" "5.59.8"
     eslint-visitor-keys "^3.3.0"
 
-"@us3r-network/auth-with-rainbowkit@^0.1.4":
-  version "0.1.4"
-  resolved "https://registry.npmjs.org/@us3r-network/auth-with-rainbowkit/-/auth-with-rainbowkit-0.1.4.tgz#79c4bc50ed3e77fba8fded42ed52d0d43f234f70"
-  integrity sha512-s4BwBW/55Z0ebIDb2dAb0L2C1nxYZl/PCZRXu1QFNpvw/2F9tuttnYpcE5Bdu5f//D5Go1Hw4kam7m6JfqO6GQ==
+"@us3r-network/auth-with-rainbowkit@^0.1.8":
+  version "0.1.8"
+  resolved "https://registry.npmjs.org/@us3r-network/auth-with-rainbowkit/-/auth-with-rainbowkit-0.1.8.tgz#af2039e67c3426e052b7651b0fa6028b3fd0fc6c"
+  integrity sha512-k4zMN8XpHNANhqIk9s1xX5JYrF7vUxnvdWImGtOiWq5Z0iixtN7HY6tTiQhKM1C3W2hD/ZgsCUBKBso11Jdc2A==
   dependencies:
-    "@rainbow-me/rainbowkit" "^1.0.1"
+    "@rainbow-me/rainbowkit" "1.0.2"
     "@us3r-network/auth" "^0.2.2"
+    buffer "^6.0.3"
     viem "^0.3.37"
     wagmi "^1.0.7"
 
@@ -6065,7 +6103,7 @@ ajv@^6.10.0, ajv@^6.12.2, ajv@^6.12.4, ajv@^6.12.5:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-ajv@^8.0.0, ajv@^8.6.0, ajv@^8.9.0:
+ajv@^8.0.0, ajv@^8.12.0, ajv@^8.6.0, ajv@^8.9.0:
   version "8.12.0"
   resolved "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz#d1a0527323e22f53562c567c00991577dfbe19d1"
   integrity sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==
@@ -7076,6 +7114,25 @@ compression@^1.7.4:
     safe-buffer "5.1.2"
     vary "~1.1.2"
 
+compute-gcd@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/compute-gcd/-/compute-gcd-1.2.1.tgz#34d639f3825625e1357ce81f0e456a6249d8c77f"
+  integrity sha512-TwMbxBNz0l71+8Sc4czv13h4kEqnchV9igQZBi6QUaz09dnz13juGnnaWWJTRsP3brxOoxeB4SA2WELLw1hCtg==
+  dependencies:
+    validate.io-array "^1.0.3"
+    validate.io-function "^1.0.2"
+    validate.io-integer-array "^1.0.0"
+
+compute-lcm@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/compute-lcm/-/compute-lcm-1.1.2.tgz#9107c66b9dca28cefb22b4ab4545caac4034af23"
+  integrity sha512-OFNPdQAXnQhDSKioX8/XYT6sdUlXwpeMjfd6ApxMJfyZ4GxmLR1xvMERctlYhlHwIiz6CSpBc2+qYKjHGZw4TQ==
+  dependencies:
+    compute-gcd "^1.2.1"
+    validate.io-array "^1.0.3"
+    validate.io-function "^1.0.2"
+    validate.io-integer-array "^1.0.0"
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -10797,6 +10854,22 @@ json-rpc-random-id@^1.0.0, json-rpc-random-id@^1.0.1:
   resolved "https://registry.npmjs.org/json-rpc-random-id/-/json-rpc-random-id-1.0.1.tgz#ba49d96aded1444dbb8da3d203748acbbcdec8c8"
   integrity sha512-RJ9YYNCkhVDBuP4zN5BBtYAzEl03yq/jIIsyif0JY9qyJuQQZNeDK7anAPKKlyEtLSj2s8h6hNh2F8zO5q7ScA==
 
+json-schema-compare@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.npmjs.org/json-schema-compare/-/json-schema-compare-0.2.2.tgz#dd601508335a90c7f4cfadb6b2e397225c908e56"
+  integrity sha512-c4WYmDKyJXhs7WWvAWm3uIYnfyWFoIp+JEoX34rctVvEkMYCPGhXtvmFFXiffBbxfZsvQ0RNnV5H7GvDF5HCqQ==
+  dependencies:
+    lodash "^4.17.4"
+
+json-schema-merge-allof@^0.8.1:
+  version "0.8.1"
+  resolved "https://registry.npmjs.org/json-schema-merge-allof/-/json-schema-merge-allof-0.8.1.tgz#ed2828cdd958616ff74f932830a26291789eaaf2"
+  integrity sha512-CTUKmIlPJbsWfzRRnOXz+0MjIqvnleIXwFTzz+t9T86HnYX/Rozria6ZVGLktAU9e+NygNljveP+yxqtQp/Q4w==
+  dependencies:
+    compute-lcm "^1.1.2"
+    json-schema-compare "^0.2.2"
+    lodash "^4.17.20"
+
 json-schema-traverse@^0.4.1:
   version "0.4.1"
   resolved "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
@@ -10853,7 +10926,7 @@ jsonparse@^1.2.0:
   resolved "https://registry.npmjs.org/jsonparse/-/jsonparse-1.3.1.tgz#3f4dae4a91fac315f71062f8521cc239f1366280"
   integrity sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==
 
-jsonpointer@^5.0.0:
+jsonpointer@^5.0.0, jsonpointer@^5.0.1:
   version "5.0.1"
   resolved "https://registry.npmjs.org/jsonpointer/-/jsonpointer-5.0.1.tgz#2110e0af0900fd37467b5907ecd13a7884a1b559"
   integrity sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==
@@ -11097,7 +11170,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==
 
-lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
+lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -11180,6 +11253,11 @@ markdown-it@^12.2.0:
     mdurl "^1.0.1"
     uc.micro "^1.0.5"
 
+markdown-to-jsx@^7.2.1:
+  version "7.2.1"
+  resolved "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.2.1.tgz#87061fd3176ad926ef3d99493e5c57f6335e0c51"
+  integrity sha512-9HrdzBAo0+sFz9ZYAGT5fB8ilzTW+q6lPocRxrIesMO+aB40V9MgFfbfMXxlGjf22OpRy+IXlvVaQenicdpgbg==
+
 mdn-data@2.0.14:
   version "2.0.14"
   resolved "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
@@ -12521,6 +12599,19 @@ pretty-format@^29.0.0, pretty-format@^29.5.0:
     ansi-styles "^5.0.0"
     react-is "^18.0.0"
 
+prism-react-renderer@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-2.0.6.tgz#24f0c1afbc07d4a268677fb05e77079ea80b6a2f"
+  integrity sha512-ERzmAI5UvrcTw5ivfEG20/dYClAsC84eSED5p9X3oKpm0xPV4A5clFK1mp7lPIdKmbLnQYsPTGiOI7WS6gWigw==
+  dependencies:
+    "@types/prismjs" "^1.26.0"
+    clsx "^1.2.1"
+
+prismjs@^1.29.0:
+  version "1.29.0"
+  resolved "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
+  integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==
+
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@@ -12853,7 +12944,7 @@ react-is@^17.0.1:
   resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
-react-is@^18.0.0:
+react-is@^18.0.0, react-is@^18.2.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
@@ -13007,6 +13098,13 @@ react-style-singleton@^2.2.1:
     invariant "^2.2.4"
     tslib "^2.0.0"
 
+react-toastify@^9.1.3:
+  version "9.1.3"
+  resolved "https://registry.npmjs.org/react-toastify/-/react-toastify-9.1.3.tgz#1e798d260d606f50e0fab5ee31daaae1d628c5ff"
+  integrity sha512-fPfb8ghtn/XMxw3LkxQBk3IyagNpF/LIKjOBflbexr2AWxAH1MJgvnESwEwBn9liLFXgTKWgBSdZpw9m4OTHTg==
+  dependencies:
+    clsx "^1.1.1"
+
 react-transition-group@^4.4.5:
   version "4.4.5"
   resolved "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
@@ -14630,6 +14728,36 @@ v8-to-istanbul@^8.1.0:
     convert-source-map "^1.6.0"
     source-map "^0.7.3"
 
+validate.io-array@^1.0.3:
+  version "1.0.6"
+  resolved "https://registry.npmjs.org/validate.io-array/-/validate.io-array-1.0.6.tgz#5b5a2cafd8f8b85abb2f886ba153f2d93a27774d"
+  integrity sha512-DeOy7CnPEziggrOO5CZhVKJw6S3Yi7e9e65R1Nl/RTN1vTQKnzjfvks0/8kQ40FP/dsjRAOd4hxmJ7uLa6vxkg==
+
+validate.io-function@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/validate.io-function/-/validate.io-function-1.0.2.tgz#343a19802ed3b1968269c780e558e93411c0bad7"
+  integrity sha512-LlFybRJEriSuBnUhQyG5bwglhh50EpTL2ul23MPIuR1odjO7XaMLFV8vHGwp7AZciFxtYOeiSCT5st+XSPONiQ==
+
+validate.io-integer-array@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/validate.io-integer-array/-/validate.io-integer-array-1.0.0.tgz#2cabde033293a6bcbe063feafe91eaf46b13a089"
+  integrity sha512-mTrMk/1ytQHtCY0oNO3dztafHYyGU88KL+jRxWuzfOmQb+4qqnWmI+gykvGp8usKZOM0H7keJHEbRaFiYA0VrA==
+  dependencies:
+    validate.io-array "^1.0.3"
+    validate.io-integer "^1.0.4"
+
+validate.io-integer@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/validate.io-integer/-/validate.io-integer-1.0.5.tgz#168496480b95be2247ec443f2233de4f89878068"
+  integrity sha512-22izsYSLojN/P6bppBqhgUDjCkr5RY2jd+N2a3DCAUey8ydvrZ/OkGvFPR7qfOpwR2LC5p4Ngzxz36g5Vgr/hQ==
+  dependencies:
+    validate.io-number "^1.0.3"
+
+validate.io-number@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/validate.io-number/-/validate.io-number-1.0.3.tgz#f63ffeda248bf28a67a8d48e0e3b461a1665baf8"
+  integrity sha512-kRAyotcbNaSYoDnXvb4MHg/0a1egJdLwS6oJ38TJY7aw9n93Fl/3blIXdyYvPOp55CNxywooG/3BcrwNrBpcSg==
+
 valtio@1.10.5:
   version "1.10.5"
   resolved "https://registry.npmjs.org/valtio/-/valtio-1.10.5.tgz#7852125e3b774b522827d96bd9c76d285c518678"