diff --git a/packages/client/dashboard/src/App.tsx b/packages/client/dashboard/src/App.tsx
index d4cf6f9e..6a31fca1 100644
--- a/packages/client/dashboard/src/App.tsx
+++ b/packages/client/dashboard/src/App.tsx
@@ -1,4 +1,9 @@
+import { Us3rAuthWithRainbowkitProvider } from '@us3r-network/auth-with-rainbowkit'
+import { ProfileStateProvider } from '@us3r-network/profile'
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
 import { useEffect, useState } from 'react'
+import { Tab, TabList, TabPanel, Tabs } from 'react-aria-components'
 import {
   NavLink,
   Outlet,
@@ -7,37 +12,29 @@ import {
   useLocation,
   useParams
 } from 'react-router-dom'
-import styled from 'styled-components'
-import dayjs from 'dayjs'
-import relativeTime from 'dayjs/plugin/relativeTime'
-import { Us3rAuthWithRainbowkitProvider } from '@us3r-network/auth-with-rainbowkit'
-import { ProfileStateProvider } from '@us3r-network/profile'
 import { ToastContainer } from 'react-toastify'
 import 'react-toastify/dist/ReactToastify.min.css'
-
-import { DappCompositeDto, ModelStream } from './types.d'
+import styled from 'styled-components'
+import DappModelAndComposites from './components/model/DappModelAndComposites'
+import Header from './components/nav/Header'
+import Nav from './components/nav/Nav'
 import { CERAMIC_TESTNET_HOST, WALLET_CONNECT_PROJECT_ID } from './constants'
-
-import AppProvider, { useAppCtx } from './context/AppCtx'
-import CeramicNodeProvider from './context/CeramicNodeCtx'
-
-import MyDapps from './container/MyDapps'
+import CeramicNodes from './container/CeramicNodes'
+import Components from './container/Components'
 import DappCreate from './container/DappCreate'
+import DappEditor from './container/DappEditor'
 import DappHome from './container/DappHome'
 import DappInfo from './container/DappInfo'
-import DappModelEditor from './container/DappModelEditor'
-import DappModelPlayground from './container/DappModelPlayground'
-import DappModelSdk from './container/DappModelSdk'
-import DappDataStatistic from './container/DappDataStatistic'
-import Components from './container/Components'
-import CeramicNodes from './container/CeramicNodes'
+import DappMetrics from './container/DappMetrics'
+import DappPlayground from './container/DappPlayground'
+import DappSdk from './container/DappSdk'
+import ExploreComposite from './container/ExploreComposite'
 import ExploreModel from './container/ExploreModel'
+import MyDapps from './container/MyDapps'
 import NoMatch from './container/NoMatch'
-
-import Header from './components/nav/Header'
-import Nav from './components/nav/Nav'
-import DappModelAndComposites from './components/model/DappModelAndComposites'
-import ExploreComposite from './container/ExploreComposite'
+import AppProvider, { useAppCtx } from './context/AppCtx'
+import CeramicNodeProvider from './context/CeramicNodeCtx'
+import { DappCompositeDto, ModelStream } from './types.d'
 
 dayjs.extend(relativeTime)
 
@@ -49,23 +46,19 @@ function Routers () {
         <Route path='dapp/create' element={<DappCreate />} />
         <Route path='dapp/:appId' element={<DappLayout />}>
           <Route path='index' element={<DappHome />} />
-          <Route path='node' element={<CeramicNodes />} />
-          <Route element={<ModelEditorLayout />}>
-            <Route path='model-editor' element={<DappModelEditor />} />
-            <Route path='model-playground' element={<DappModelPlayground />} />
-            <Route path='model-sdk' element={<DappModelSdk />} />
-            <Route path='statistic' element={<DappDataStatistic />} />
-          </Route>
-          <Route path='info' element={<DappInfo />} />
           <Route path='explore' element={<ExploreLayout />}>
             <Route path='model' element={<ExploreModel />} />
             <Route path='composite' element={<ExploreComposite />} />
+            <Route path='components' element={<Components />} />
           </Route>
-          <Route path='favorite' element={<ExploreLayout />}>
-            <Route path='model' element={<ExploreModel />} />
-            <Route path='composite' element={<ExploreComposite />} />
+          <Route path='build' element={<BuildLayout />}>
+            <Route path='editor' element={<DappEditor />} />
+            <Route path='playground' element={<DappPlayground />} />
+            <Route path='sdk' element={<DappSdk />} />
+            <Route path='metrics' element={<DappMetrics />} />
           </Route>
-          <Route path='components' element={<Components />} />
+          <Route path='info' element={<DappInfo />} />
+          <Route path='node' element={<CeramicNodes />} />
         </Route>
       </Route>
       <Route path='*' element={<NoMatch />} />
@@ -174,14 +167,31 @@ const AppContainer = styled.div`
   }
 `
 
-function ModelEditorLayout () {
+function BuildLayout () {
   const [selectModel, setSelectModel] = useState<ModelStream>()
   const [selectComposite, setSelectComposite] = useState<DappCompositeDto>()
-
   const { pathname } = useLocation()
-
+  const defaultKey = pathname.split('/build/')[1]
+  const PAGES = [
+    {
+      id: 'editor',
+      label: 'Editor'
+    },
+    {
+      id: 'playground',
+      label: 'Playground'
+    },
+    {
+      id: 'sdk',
+      label: 'SDK'
+    },
+    {
+      id: 'metrics',
+      label: 'Metrics'
+    }
+  ]
   return (
-    <EditorLayoutContainer>
+    <LayoutContainer>
       <DappModelAndComposites
         selectModel={selectModel}
         setSelectModel={data => {
@@ -195,93 +205,99 @@ function ModelEditorLayout () {
         selectComposite={selectComposite}
         editable={pathname.includes('model-editor')}
       />
-      <Outlet
-        context={{
-          selectModel,
-          selectComposite
-        }}
-      />
-    </EditorLayoutContainer>
+      <div className='build-content'>
+        <Tabs selectedKey={defaultKey}>
+          {PAGES.map(page => (
+            <div className='tab-panel'>
+              <TabPanel id={page.id}>
+                <Outlet
+                  context={{
+                    selectModel,
+                    selectComposite
+                  }}
+                />
+              </TabPanel>
+            </div>
+          ))}
+          <div className='tab-list'>
+            <TabList aria-label='Explore'>
+              {PAGES.map(page => (
+                <Tab id={page.id}>
+                  <NavLink to={page.id} key={page.id}>
+                    {page.label}
+                  </NavLink>
+                </Tab>
+              ))}
+            </TabList>
+          </div>
+        </Tabs>
+      </div>
+    </LayoutContainer>
   )
 }
 
-const EditorLayoutContainer = styled.div`
-  margin-top: 25px;
-  margin-bottom: 25px;
-  display: flex;
-  gap: 20px;
-
-  > .list {
-    flex-grow: 1;
-  }
-
-  .ops {
-    flex-grow: 1;
-    overflow: hidden;
-  }
-
-  .playground-ops {
-    flex-grow: 1;
-    overflow: hidden;
-
-    > div {
-      height: calc(100vh - 100px);
-    }
-    .graphiql-container {
-      height: 100%;
-    }
-  }
-`
-
 function ExploreLayout () {
   const { pathname } = useLocation()
+  const defaultExploreKey = pathname.split('/explore/')[1]
+  const EXPLORE_PAGES = [
+    {
+      id: 'model',
+      label: 'Models'
+    },
+    {
+      id: 'composite',
+      label: 'Composites'
+    },
+    {
+      id: 'components',
+      label: 'Components'
+    }
+  ]
   return (
-    <ExploreLayoutContainer>
-      <div className='explore-catalog'>
-        <NavLink to='model' key='model'>
-          {({ isActive }) => (
-            <div className={`item ${isActive ? 'active' : ''}`}>
-              <span>Models</span>
-            </div>
-          )}
-        </NavLink>
-
-        {!pathname.includes('favorite') && (
-          <NavLink to='composite' key='model'>
-            {({ isActive }) => (
-              <div className={`item ${isActive ? 'active' : ''}`}>
-                <span>Composites</span>
-              </div>
-            )}
-          </NavLink>
-        )}
-      </div>
-      <div>
-        <Outlet />
-      </div>
-    </ExploreLayoutContainer>
+    <LayoutContainer>
+      <Tabs selectedKey={defaultExploreKey}>
+        {EXPLORE_PAGES.map(page => (
+          <div className='tab-panel'>
+            <TabPanel id={page.id}>
+              <Outlet />
+            </TabPanel>
+          </div>
+        ))}
+        <div className='tab-list'>
+          <TabList aria-label='Explore'>
+            {EXPLORE_PAGES.map(page => (
+              <Tab id={page.id}>
+                <NavLink to={page.id} key={page.id}>
+                  {page.label}
+                </NavLink>
+              </Tab>
+            ))}
+          </TabList>
+        </div>
+      </Tabs>
+    </LayoutContainer>
   )
 }
 
-const ExploreLayoutContainer = styled.div`
-  margin-top: 25px;
-  margin-bottom: 25px;
-
-  .explore-catalog {
+const LayoutContainer = styled.div`
+  width: 100%;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  display: flex;
+  gap: 20px;
+  .tab-list {
     position: absolute;
-    display: flex;
-    gap: 20px;
-    .item {
-      font-size: 24px;
-      font-weight: 700;
-      color: #718096;
-      > span {
-        transition: opacity 0.09s ease-in-out;
-      }
-      &.active {
-        background: #14171a;
-        color: #fff;
-      }
-    }
+    top: 0px;
+    right: 0px;
+  }
+  .tab-panel {
+    position: absolute;
+    width: 100%;
+    top: 0;
+    margin: 0;
+    padding: 0;
+  }
+  .build-content{
+    flex-grow: 1;
   }
 `
diff --git a/packages/client/dashboard/src/components/icons/CompositeIcon.tsx b/packages/client/dashboard/src/components/icons/CompositeIcon.tsx
new file mode 100644
index 00000000..ca663929
--- /dev/null
+++ b/packages/client/dashboard/src/components/icons/CompositeIcon.tsx
@@ -0,0 +1,16 @@
+export default function CompositeIcon ({ isActive }: { isActive?: boolean }) {
+  return (
+    <svg
+      width='14'
+      height='14'
+      viewBox='0 0 14 14'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        d='M6.59902 12.8522C6.85421 12.7673 7.02431 12.8341 7.10931 13.0527C7.15792 13.1498 7.16098 13.25 7.11847 13.3532C7.07597 13.4565 7.00611 13.5263 6.90889 13.5628L6.05206 13.9453C6.00345 13.9818 5.9366 14 5.85151 14C5.77863 14 5.70576 13.9818 5.63289 13.9453L5.61456 13.9271L0.237086 11.5589C0.0790288 11.4738 0 11.3524 0 11.1945V2.81463C0 2.75383 0.024306 2.67486 0.0729181 2.5777C0.133752 2.49275 0.20667 2.44417 0.291672 2.43195L5.68747 0.0455273C5.79683 -0.0151758 5.90012 -0.0151758 5.99734 0.0455273L11.4661 2.45027C11.6241 2.53522 11.7031 2.65667 11.7031 2.81463V4.5634C11.7031 4.66056 11.6637 4.74861 11.5847 4.82754C11.5057 4.90647 11.4115 4.94594 11.3022 4.94594C11.2049 4.94594 11.1168 4.90647 11.0379 4.82754C10.9589 4.74861 10.9194 4.66056 10.9194 4.5634V3.39746L6.23457 5.45604V13.0163L6.59916 12.8522H6.59902ZM5.85151 0.828926L1.34905 2.79631L5.85151 4.8002L10.3541 2.79631L5.85151 0.828926ZM0.783904 3.39746V10.9396L5.46872 13.0163V5.47436L0.783904 3.39746ZM13.7629 6.89527C13.921 6.98031 14 7.10176 14 7.25963V11.9596C14 12.1297 13.921 12.2451 13.7629 12.3058L10.7187 13.6721C10.6823 13.6843 10.6276 13.6903 10.5547 13.6903C10.4817 13.6903 10.427 13.6843 10.3905 13.6721L7.36445 12.324C7.35232 12.324 7.33408 12.3118 7.30973 12.2876C7.12741 12.2026 7.06056 12.0629 7.10917 11.8686V7.3325C7.08491 7.24746 7.09102 7.16853 7.1275 7.0957C7.18825 6.98633 7.26116 6.91346 7.34626 6.87709L10.3905 5.54723C10.4634 5.52289 10.518 5.51072 10.5545 5.51072C10.591 5.51072 10.6457 5.52289 10.7185 5.54723L13.7628 6.89527H13.7629ZM10.5547 8.18863L12.6328 7.25963L10.5547 6.33049L8.45836 7.25963L10.5547 8.18863ZM7.87502 7.8426V11.7046L10.1719 12.7248V8.86266L7.87502 7.8426ZM10.9374 12.7065L13.2161 11.7046V7.8426L10.9374 8.86266V12.7065Z'
+        fill={isActive ? '#ffffff' : '#718096'}
+      />
+    </svg>
+  )
+}
diff --git a/packages/client/dashboard/src/components/icons/ModelIcon.tsx b/packages/client/dashboard/src/components/icons/ModelIcon.tsx
new file mode 100644
index 00000000..673443cb
--- /dev/null
+++ b/packages/client/dashboard/src/components/icons/ModelIcon.tsx
@@ -0,0 +1,16 @@
+export default function ModelIcon ({ isActive }: { isActive?: boolean }) {
+  return (
+    <svg
+      width='13'
+      height='15'
+      viewBox='0 0 13 15'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        d='M6.02992 14.3549C5.94398 14.3549 5.85805 14.333 5.78008 14.2893L0.247891 11.1093C0.0939843 11.0197 -0.00195312 10.8566 -0.00195312 10.6774V4.32145C-0.00195312 4.14441 0.0939843 3.9791 0.247891 3.88957L5.78008 0.709727C5.93398 0.620195 6.12602 0.620195 6.27992 0.709727L11.8121 3.88973C11.966 3.97926 12.062 4.14238 12.062 4.3216V10.6796C12.062 10.8566 11.966 11.0219 11.8121 11.1114L6.27992 14.2893C6.20195 14.333 6.11602 14.3549 6.02992 14.3549ZM0.997734 10.3929L6.02992 13.2843L11.0623 10.3929V4.60801L6.02992 1.7166L0.997734 4.60801V10.3929ZM6.02992 7.99691C5.94602 7.99691 5.85992 7.97504 5.78008 7.92926L1.81742 5.65473C1.57758 5.51738 1.49555 5.21301 1.63352 4.9741C1.77148 4.73535 2.07742 4.65379 2.31727 4.79098L6.27992 7.06754C6.51977 7.20488 6.6018 7.50926 6.46383 7.74817C6.36992 7.90942 6.20195 7.99691 6.02992 7.99691ZM6.02992 12.5519C5.75398 12.5519 5.53008 12.3291 5.53008 12.0544V7.78801L1.82148 5.65473C1.82148 5.65473 1.81945 5.65473 1.81945 5.6527L0.249922 4.75129C0.0100782 4.61395 -0.0719531 4.30957 0.0660156 4.07066C0.203984 3.83176 0.509922 3.75035 0.749766 3.88754L6.28195 7.06754C6.43586 7.15707 6.5318 7.3202 6.5318 7.49941V12.0524C6.52977 12.3291 6.30586 12.5519 6.02992 12.5519ZM6.02992 14.3549C5.75398 14.3549 5.53008 14.1321 5.53008 13.8574V7.49941C5.53008 7.22473 5.75398 7.00191 6.02992 7.00191C6.30586 7.00191 6.52977 7.22473 6.52977 7.49941V13.8574C6.52977 14.1339 6.30586 14.3549 6.02992 14.3549ZM6.02992 7.99691C5.85805 7.99691 5.69008 7.90738 5.59602 7.74817C5.45805 7.50942 5.54008 7.20691 5.77992 7.06754L11.3121 3.88754C11.552 3.7502 11.8559 3.83176 11.9959 4.07066C12.1338 4.30941 12.0518 4.61191 11.812 4.75129L6.27992 7.93129C6.20195 7.97707 6.11602 7.99691 6.02992 7.99691Z'
+        fill={isActive ? '#ffffff' : '#718096'}
+      />
+    </svg>
+  )
+}
diff --git a/packages/client/dashboard/src/components/model/CompositeEditor.tsx b/packages/client/dashboard/src/components/model/CompositeEditor.tsx
index 77c68cac..aaa0ccf5 100644
--- a/packages/client/dashboard/src/components/model/CompositeEditor.tsx
+++ b/packages/client/dashboard/src/components/model/CompositeEditor.tsx
@@ -83,7 +83,7 @@ const Box = styled.div`
     justify-content: space-between;
     background-color: #14171a;
     margin-bottom: 20px;
-
+    height: 100%;
     > div {
       display: flex;
       align-items: center;
@@ -100,7 +100,6 @@ const Box = styled.div`
 `
 
 const EditorBox = styled.div`
-  height: calc(100vh - 300px);
   max-height: 800px;
   background: #14171a;
   border: 1px solid #39424c;
@@ -110,6 +109,7 @@ const EditorBox = styled.div`
   * {
     box-sizing: border-box;
   }
+  flex: 1;
 `
 
 const ResultBox = styled.div`
@@ -117,6 +117,7 @@ const ResultBox = styled.div`
   flex-direction: column;
   gap: 20px;
   margin-top: 20px;
+  flex: 0 0 100px;
   > div {
     background: #1b1e23;
     border: 1px solid #39424c;
diff --git a/packages/client/dashboard/src/components/model/CompositePlaygroundGraphiQL.tsx b/packages/client/dashboard/src/components/model/CompositePlaygroundGraphiQL.tsx
index 6c401cc2..39b7d46b 100644
--- a/packages/client/dashboard/src/components/model/CompositePlaygroundGraphiQL.tsx
+++ b/packages/client/dashboard/src/components/model/CompositePlaygroundGraphiQL.tsx
@@ -144,12 +144,8 @@ export default function CompositePlaygroundGraphiQL(
 const GraphiqlContainer = styled.div`
   border-radius: 20px;
   overflow: hidden;
-  height: calc(100vh - 200px);
+  height: 100%;
   > div {
     height: 100%;
-    .graphiql-container {
-      height: 100%;
-      width: 100%;
-    }
   }
 `
diff --git a/packages/client/dashboard/src/components/model/DappModelAndComposites.tsx b/packages/client/dashboard/src/components/model/DappModelAndComposites.tsx
index 9bb7f702..48872afc 100644
--- a/packages/client/dashboard/src/components/model/DappModelAndComposites.tsx
+++ b/packages/client/dashboard/src/components/model/DappModelAndComposites.tsx
@@ -195,7 +195,7 @@ export default function DappModelAndComposites ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [appId])
 
-  const isMetrics = location.pathname.endsWith('statistic')
+  const isMetrics = location.pathname.endsWith('metrics')
   const isSdk = location.pathname.endsWith('sdk')
 
   const [openModal, setOpenModal] = useState(OPEN_MODAL.NONE)
diff --git a/packages/client/dashboard/src/components/model/ModelInstance.tsx b/packages/client/dashboard/src/components/model/ModelInstance.tsx
index 1b18cfe7..0fe0d383 100644
--- a/packages/client/dashboard/src/components/model/ModelInstance.tsx
+++ b/packages/client/dashboard/src/components/model/ModelInstance.tsx
@@ -15,7 +15,7 @@ import PlusIcon from '../icons/PlusIcon'
 import ModelInstanceFormModal from './ModelInstanceFormModal'
 import ModelStreamList from './ModelStreamList'
 
-export default function Instance ({
+export default function ModelInstance ({
   streamId,
   network,
   schema,
@@ -271,7 +271,7 @@ export default function Instance ({
         onSubmit={() => submitStream()}
       />
       <ListHeading>
-        <h3>{name}</h3>
+        {/* <h3>{name}</h3> */}
         {composeClientAuthenticated && (
           <PlusButton
             onPress={() => {
diff --git a/packages/client/dashboard/src/components/model/ModelSDK.tsx b/packages/client/dashboard/src/components/model/ModelSDK.tsx
index f43a405e..00b0994a 100644
--- a/packages/client/dashboard/src/components/model/ModelSDK.tsx
+++ b/packages/client/dashboard/src/components/model/ModelSDK.tsx
@@ -176,6 +176,8 @@ export function Code({ name, content }: { name: string; content: string }) {
 }
 
 const SDKContainer = styled.div`
+  width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
   gap: 20px;
@@ -194,10 +196,12 @@ const SDKContainer = styled.div`
 `
 
 const SDKBox = styled.div`
+  height: 100%;
   padding: 12px 20px 0 20px;
   border-radius: 20px;
   border: 1px solid #39424c;
   background: #1b1e23;
+  overflow: scroll;
 `
 
 const CodeBox = styled.div`
diff --git a/packages/client/dashboard/src/components/model/ModelTabs.tsx b/packages/client/dashboard/src/components/model/ModelTabs.tsx
deleted file mode 100644
index 4daec5b0..00000000
--- a/packages/client/dashboard/src/components/model/ModelTabs.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- * @Author: bufan bufan@hotmail.com
- * @Date: 2023-12-15 10:06:03
- * @LastEditors: bufan bufan@hotmail.com
- * @LastEditTime: 2023-12-21 14:55:14
- * @FilePath: /s3/packages/client/dashboard/src/components/ModelTabs.tsx
- * @Description: 
- */
-import { Tab, TabList, TabPanel, Tabs } from 'react-aria-components'
-// import Definition from './Definition'
-import ModelSDK from './ModelSDK'
-
-export default function ModelTabs({
-  name,
-  modelId,
-}: {
-  name: string
-  modelId: string
-}) {
-  return (
-    <Tabs>
-      <div className="dapp-title-bar">
-        <span>{name}</span>
-        <TabList aria-label="History of Ancient Rome">
-          <Tab id="Definition">Model Definition</Tab>
-          <Tab id="model-sdk">Model SDK</Tab>
-        </TabList>
-      </div>
-      <TabPanel id="Definition">
-        {/* <Definition streamId={modelId} /> */}
-      </TabPanel>
-      <TabPanel id="model-sdk">
-        <ModelSDK modelId={modelId} modelName={name} />
-      </TabPanel>
-    </Tabs>
-  )
-}
diff --git a/packages/client/dashboard/src/components/nav/Nav.tsx b/packages/client/dashboard/src/components/nav/Nav.tsx
index aa217a5d..aca33598 100644
--- a/packages/client/dashboard/src/components/nav/Nav.tsx
+++ b/packages/client/dashboard/src/components/nav/Nav.tsx
@@ -14,6 +14,8 @@ import NodeIcon from '../icons/NodeIcon'
 import SdkIcon from '../icons/SdkIcon'
 import TerminalIcon from '../icons/TerminalIcon'
 import ChevronDown from '../icons/ChevronDown'
+import ModelIcon from '../icons/ModelIcon'
+import CompositeIcon from '../icons/CompositeIcon'
 
 type NavItem = {
   path?: string
@@ -39,15 +41,15 @@ export default function Nav ({ appId }: { appId: string }) {
           {
             path: `/dapp/${appId}/explore/model`,
             name: 'Models',
-            icon: ExploreIcon
+            icon: ModelIcon
           },
           {
             path: `/dapp/${appId}/explore/composite`,
             name: 'Composites',
-            icon: ExploreIcon
+            icon: CompositeIcon
           },
           {
-            path: `/dapp/${appId}/components`,
+            path: `/dapp/${appId}/explore/components`,
             name: 'Components',
             icon: ComponentIcon
           }
@@ -59,22 +61,22 @@ export default function Nav ({ appId }: { appId: string }) {
         icon: InfoIcon,
         items: [
           {
-            path: `/dapp/${appId}/model-editor`,
+            path: `/dapp/${appId}/build/editor`,
             name: 'Compose',
             icon: LayoutIcon
           },
           {
-            path: `/dapp/${appId}/model-playground`,
+            path: `/dapp/${appId}/build/playground`,
             name: 'Playground',
             icon: TerminalIcon
           },
           {
-            path: `/dapp/${appId}/model-sdk`,
+            path: `/dapp/${appId}/build/sdk`,
             name: 'SDK',
             icon: SdkIcon
           },
           {
-            path: `/dapp/${appId}/statistic`,
+            path: `/dapp/${appId}/build/metrics`,
             name: 'Metrics',
             icon: ChartIcon
           }
@@ -187,7 +189,7 @@ const NavContainer = styled.nav<{ open?: boolean }>`
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
-
+    z-index: 100;
     .item-container {
       display: flex;
       flex-direction: row;
diff --git a/packages/client/dashboard/src/container/Components.tsx b/packages/client/dashboard/src/container/Components.tsx
index 44ddbcb4..0e160033 100644
--- a/packages/client/dashboard/src/container/Components.tsx
+++ b/packages/client/dashboard/src/container/Components.tsx
@@ -70,7 +70,6 @@ export default function Components() {
 }
 
 const Box = styled.div`
-  margin: 25px 0;
   display: flex;
   flex-direction: column;
   gap: 20px;
@@ -110,7 +109,7 @@ const BannerDesc = styled.ul`
 
   font-weight: 500;
   font-size: 18px;
-  line-height: 21px;
+  line-height: 24px;
 
   color: #ffffff;
 
diff --git a/packages/client/dashboard/src/container/DappDataStatistic.tsx b/packages/client/dashboard/src/container/DappDataStatistic.tsx
deleted file mode 100644
index 6baddbd2..00000000
--- a/packages/client/dashboard/src/container/DappDataStatistic.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { useOutletContext } from 'react-router-dom'
-import Instance from '../components/model/ModelInstance'
-import useSelectedDapp from '../hooks/useSelectedDapp'
-import { ModelStream, Network } from '../types.d'
-
-export default function DappDataStatistic() {
-  const { selectModel } = useOutletContext<{
-    selectModel: ModelStream
-  }>()
-  const { selectedDapp } = useSelectedDapp()
-
-  if (selectModel) {
-    return (
-      <div className="list">
-        <Instance
-          streamId={selectModel.stream_id}
-          network={(selectedDapp?.network as Network) || Network.TESTNET}
-          schema={selectModel?.stream_content?.schema || {}}
-          name={selectModel?.stream_content?.name}
-        />
-      </div>
-    )
-  }
-  return null
-}
diff --git a/packages/client/dashboard/src/container/DappModelEditor.tsx b/packages/client/dashboard/src/container/DappEditor.tsx
similarity index 73%
rename from packages/client/dashboard/src/container/DappModelEditor.tsx
rename to packages/client/dashboard/src/container/DappEditor.tsx
index 36e37957..6dfff747 100644
--- a/packages/client/dashboard/src/container/DappModelEditor.tsx
+++ b/packages/client/dashboard/src/container/DappEditor.tsx
@@ -14,7 +14,7 @@ import {
 } from '../types.d'
 import { schemas } from '../utils/composedb-types/schemas'
 
-export default function DappModelEditor () {
+export default function DappEditor () {
   const { selectedDapp } = useSelectedDapp()
   const { selectModel, selectComposite } = useOutletContext<{
     selectModel: ModelStream
@@ -23,26 +23,31 @@ export default function DappModelEditor () {
 
   if (selectModel) {
     return (
-      <Box className='ops'>
-          <div className='dapp-title-bar'>
-            <span>{selectModel.stream_content?.name}</span>
-          </div>
-          <ModelEditor streamId={selectModel.stream_id} network={selectedDapp?.network} />
-      </Box>
+      <BuildContentBox>
+        <div className='title-bar'>
+          <span>{selectModel.stream_content?.name}</span>
+        </div>
+        <ModelEditor
+          streamId={selectModel.stream_id}
+          network={selectedDapp?.network}
+        />
+      </BuildContentBox>
     )
   }
   if (selectComposite) {
     return (
-      <Box className='ops'>
-        <div className='dapp-title-bar'>
+      <BuildContentBox>
+        <div className='title-bar'>
           <span>{selectComposite.name}</span>
           <CompositePublish composite={selectComposite} />
         </div>
-        <CompositeEditor
-          schema={selectComposite.graphql}
-          encodedDefinition={JSON.parse(selectComposite.composite)}
-        />
-      </Box>
+        <div className='content-box'>
+          <CompositeEditor
+            schema={selectComposite.graphql}
+            encodedDefinition={JSON.parse(selectComposite.composite)}
+          />
+        </div>
+      </BuildContentBox>
     )
   }
   return null
@@ -121,8 +126,26 @@ const Loading = styled.div`
   color: gray;
 `
 
-const Box = styled.div`
+export const BuildContentBox = styled.div`
   display: flex;
   flex-direction: column;
   gap: 20px;
+  padding-top: 10px;
+
+  .title-bar {
+    border-bottom: none;
+    position: relative;
+    top: 0;
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    height: 30px;
+    > span {
+      font-weight: 700;
+      font-size: 24px;
+    }
+  }
+  .content-box {
+    height: calc(100vh - 160px);
+  }
 `
diff --git a/packages/client/dashboard/src/container/DappMetrics.tsx b/packages/client/dashboard/src/container/DappMetrics.tsx
new file mode 100644
index 00000000..c64e14ce
--- /dev/null
+++ b/packages/client/dashboard/src/container/DappMetrics.tsx
@@ -0,0 +1,32 @@
+import { useOutletContext } from 'react-router-dom'
+import ModelInstance from '../components/model/ModelInstance'
+import useSelectedDapp from '../hooks/useSelectedDapp'
+import { ModelStream, Network } from '../types.d'
+import { BuildContentBox } from './DappEditor'
+
+export default function DappMetrics () {
+  const { selectModel } = useOutletContext<{
+    selectModel: ModelStream
+  }>()
+  const { selectedDapp } = useSelectedDapp()
+
+  if (selectModel) {
+    const name = selectModel.stream_content.name
+    return (
+      <BuildContentBox>
+        <div className='title-bar'>
+          <span>{name} Streams</span>
+        </div>
+        <div className='content-box'>
+          <ModelInstance
+            streamId={selectModel.stream_id}
+            network={(selectedDapp?.network as Network) || Network.TESTNET}
+            schema={selectModel?.stream_content?.schema || {}}
+            name={selectModel?.stream_content?.name}
+          />
+        </div>
+      </BuildContentBox>
+    )
+  }
+  return null
+}
diff --git a/packages/client/dashboard/src/container/DappModelPlayground.tsx b/packages/client/dashboard/src/container/DappPlayground.tsx
similarity index 76%
rename from packages/client/dashboard/src/container/DappModelPlayground.tsx
rename to packages/client/dashboard/src/container/DappPlayground.tsx
index 217fcb9a..64c083e4 100644
--- a/packages/client/dashboard/src/container/DappModelPlayground.tsx
+++ b/packages/client/dashboard/src/container/DappPlayground.tsx
@@ -12,8 +12,9 @@ import {
   Network
 } from '../types.d'
 import useSelectedDapp from '../hooks/useSelectedDapp'
+import { BuildContentBox } from './DappEditor'
 
-export default function DappModelPlayground () {
+export default function DappPlayground () {
   const { selectModel, selectComposite } = useOutletContext<{
     selectModel: ModelStream
     selectComposite: DappCompositeDto
@@ -22,23 +23,33 @@ export default function DappModelPlayground () {
   const { selectedDapp } = useSelectedDapp()
   if (selectModel) {
     return (
-      <div className='playground-ops'>
-        <ModelPlayground
-          streamId={selectModel.stream_id}
-          ceramicNodeURL={currCeramicNode?.serviceUrl + '/'}
-          network={selectedDapp?.network}
-        />
-      </div>
+      <BuildContentBox>
+        <div className='title-bar'>
+          <span>{selectModel.stream_content.name}</span>
+        </div>
+        <div className='content-box playground-ops'>
+          <ModelPlayground
+            streamId={selectModel.stream_id}
+            ceramicNodeURL={currCeramicNode?.serviceUrl + '/'}
+            network={selectedDapp?.network}
+          />
+        </div>
+      </BuildContentBox>
     )
   }
   if (selectComposite) {
     return (
-      <div className='playground-ops'>
-        <CompositePlayground
-          composite={selectComposite}
-          ceramicNodeURL={currCeramicNode?.serviceUrl + '/'}
-        />
-      </div>
+      <BuildContentBox>
+        <div className='title-bar'>
+          <span>{selectComposite.name}</span>
+        </div>
+        <div className='content-box playground-ops'>
+          <CompositePlayground
+            composite={selectComposite}
+            ceramicNodeURL={currCeramicNode?.serviceUrl + '/'}
+          />
+        </div>
+      </BuildContentBox>
     )
   }
   return null
diff --git a/packages/client/dashboard/src/container/DappModelSdk.tsx b/packages/client/dashboard/src/container/DappSdk.tsx
similarity index 51%
rename from packages/client/dashboard/src/container/DappModelSdk.tsx
rename to packages/client/dashboard/src/container/DappSdk.tsx
index a4c63ea6..910095b0 100644
--- a/packages/client/dashboard/src/container/DappModelSdk.tsx
+++ b/packages/client/dashboard/src/container/DappSdk.tsx
@@ -1,9 +1,9 @@
 import { useOutletContext } from 'react-router-dom'
-import styled from 'styled-components'
 import ModelSDK from '../components/model/ModelSDK'
-import { DappCompositeDto, ModelStream } from '../types.d'
+import { DappCompositeDto, ModelStream } from '../types'
+import { BuildContentBox } from './DappEditor'
 
-export default function DappModelSdk() {
+export default function DappSdk () {
   const { selectModel } = useOutletContext<{
     selectModel: ModelStream
     selectComposite: DappCompositeDto
@@ -14,22 +14,16 @@ export default function DappModelSdk() {
     const modelId = selectModel.stream_id
 
     return (
-      <div className="ops">
-        <SDKContainer>
-          <div className="dapp-title-bar">
-            <span>{name}SDK</span>
-          </div>
+      <BuildContentBox>
+        <div className='title-bar'>
+          <span>{name} SDK</span>
+        </div>
+        <div className='content-box'>
           <ModelSDK modelId={modelId} modelName={name} />
-        </SDKContainer>
-      </div>
+        </div>
+      </BuildContentBox>
     )
   }
 
   return null
 }
-
-const SDKContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-`
diff --git a/packages/client/dashboard/src/container/ExploreComposite.tsx b/packages/client/dashboard/src/container/ExploreComposite.tsx
index 19632cb1..1dab529c 100644
--- a/packages/client/dashboard/src/container/ExploreComposite.tsx
+++ b/packages/client/dashboard/src/container/ExploreComposite.tsx
@@ -1,8 +1,8 @@
 import { useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
-import styled from 'styled-components'
 import Search from '../components/common/Search'
 import { CompositeList } from '../components/model/ExploreCompositeList'
+import { ExploreContainer } from './ExploreModel'
 
 export default function ExploreComposite () {
   const [searchParams] = useSearchParams()
@@ -10,10 +10,8 @@ export default function ExploreComposite () {
     searchParams.get('searchText') || ''
   )
   return (
-    <ExploreModelContainer>
+    <ExploreContainer>
       <div className={'title-box'}>
-        {/* <div className='title'>ComposeDB Models</div> */}
-
         <div className='tools'>
           <Search
             text={searchText}
@@ -25,92 +23,6 @@ export default function ExploreComposite () {
         </div>
       </div>
       <CompositeList searchText={searchText} />
-    </ExploreModelContainer>
+    </ExploreContainer>
   )
 }
-
-const ExploreModelContainer = styled.div`
-  margin-top: 25px;
-  margin-bottom: 25px;
-  .no-more {
-    padding: 20px;
-    text-align: center;
-    color: gray;
-  }
-
-  .mobile-models-box {
-    margin-bottom: 20px;
-  }
-
-  .title-box {
-    display: flex;
-    align-items: center;
-    justify-content: end;
-    margin-bottom: 20px;
-    .tools {
-      display: flex;
-      align-items: center;
-      gap: 15px;
-
-      > button {
-        border-radius: 100px;
-        background: #14171a;
-        font-size: 14px;
-        line-height: 20px;
-        text-align: center;
-        font-weight: 400;
-        color: #a0aec0;
-        text-transform: capitalize;
-        background: #ffffff;
-        font-weight: 500;
-        color: #14171a;
-        cursor: pointer;
-        border: none;
-        outline: none;
-        /* width: 100px; */
-        padding: 0 15px;
-        height: 36px;
-
-        &.star-btn {
-          width: 52px;
-          height: 40px;
-
-          background: #1a1e23;
-          border: 1px solid #39424c;
-          border-radius: 100px;
-          display: inline-flex;
-          align-items: center;
-          justify-items: center;
-        }
-      }
-    }
-  }
-
-  .title {
-    > span {
-      font-size: 22px;
-      font-weight: 700;
-      line-height: 40px;
-    }
-
-    /* padding: 0 0 20px 0; */
-    position: sticky;
-    background-color: #14171a;
-    top: 0;
-    z-index: 100;
-
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-weight: 700;
-    font-size: 24px;
-    line-height: 28px;
-    font-style: italic;
-
-    color: #ffffff;
-  }
-
-  .react-aria-Button {
-    font-size: 18px;
-  }
-`
diff --git a/packages/client/dashboard/src/container/ExploreModel.tsx b/packages/client/dashboard/src/container/ExploreModel.tsx
index 47389326..2023a5f1 100644
--- a/packages/client/dashboard/src/container/ExploreModel.tsx
+++ b/packages/client/dashboard/src/container/ExploreModel.tsx
@@ -13,10 +13,8 @@ export default function ExploreModel () {
     searchParams.get('searchText') || ''
   )
   return (
-    <ExploreModelContainer>
+    <ExploreContainer>
       <div className={'title-box'}>
-        {/* <div className='title'>ComposeDB Models</div> */}
-
         <div className='tools'>
           <Search
             text={searchText}
@@ -28,92 +26,15 @@ export default function ExploreModel () {
         </div>
       </div>
       <ModelList searchText={searchText} filterStar={filterStar} />
-    </ExploreModelContainer>
+    </ExploreContainer>
   )
 }
 
-const ExploreModelContainer = styled.div`
-  margin-top: 25px;
-  margin-bottom: 25px;
-  .no-more {
-    padding: 20px;
-    text-align: center;
-    color: gray;
-  }
-
-  .mobile-models-box {
-    margin-bottom: 20px;
-  }
-
+export const ExploreContainer = styled.div`
   .title-box {
     display: flex;
     align-items: center;
-    justify-content: end;
+    justify-content: start;
     margin-bottom: 20px;
-    .tools {
-      display: flex;
-      align-items: center;
-      gap: 15px;
-
-      > button {
-        border-radius: 100px;
-        background: #14171a;
-        font-size: 14px;
-        line-height: 20px;
-        text-align: center;
-        font-weight: 400;
-        color: #a0aec0;
-        text-transform: capitalize;
-        background: #ffffff;
-        font-weight: 500;
-        color: #14171a;
-        cursor: pointer;
-        border: none;
-        outline: none;
-        /* width: 100px; */
-        padding: 0 15px;
-        height: 36px;
-
-        &.star-btn {
-          width: 52px;
-          height: 40px;
-
-          background: #1a1e23;
-          border: 1px solid #39424c;
-          border-radius: 100px;
-          display: inline-flex;
-          align-items: center;
-          justify-items: center;
-        }
-      }
-    }
-  }
-
-  .title {
-    > span {
-      font-size: 22px;
-      font-weight: 700;
-      line-height: 40px;
-    }
-
-    /* padding: 0 0 20px 0; */
-    position: sticky;
-    background-color: #14171a;
-    top: 0;
-    z-index: 100;
-
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-weight: 700;
-    font-size: 24px;
-    line-height: 28px;
-    font-style: italic;
-
-    color: #ffffff;
-  }
-
-  .react-aria-Button {
-    font-size: 18px;
   }
 `
diff --git a/packages/client/dashboard/src/hooks/useGuideSteps.ts b/packages/client/dashboard/src/hooks/useGuideSteps.ts
index b576d504..d04e70f3 100644
--- a/packages/client/dashboard/src/hooks/useGuideSteps.ts
+++ b/packages/client/dashboard/src/hooks/useGuideSteps.ts
@@ -100,28 +100,28 @@ export function useGuideStepsState(dapps: ClientDApp[], loadingDApps: boolean) {
   useEffect(() => {
     if (!validStep(1)) {
       if (!validStep2SubStep(0)) {
-        const isModelEditor = location.pathname.endsWith('model-editor')
+        const isModelEditor = location.pathname.endsWith('editor')
         if (isModelEditor) {
           completeStep2SubStep(0)
         }
       }
 
       if (!validStep2SubStep(1)) {
-        const isModelPlayground = location.pathname.endsWith('model-playground')
+        const isModelPlayground = location.pathname.endsWith('playground')
         if (isModelPlayground) {
           completeStep2SubStep(1)
         }
       }
 
       if (!validStep2SubStep(2)) {
-        const isModelSdk = location.pathname.endsWith('model-sdk')
+        const isModelSdk = location.pathname.endsWith('sdk')
         if (isModelSdk) {
           completeStep2SubStep(2)
         }
       }
 
       if (!validStep2SubStep(3)) {
-        const isStatistic = location.pathname.endsWith('statistic')
+        const isStatistic = location.pathname.endsWith('metrics')
         if (isStatistic) {
           completeStep2SubStep(3)
         }
diff --git a/packages/client/dashboard/src/index.css b/packages/client/dashboard/src/index.css
deleted file mode 100644
index c8ae0f5a..00000000
--- a/packages/client/dashboard/src/index.css
+++ /dev/null
@@ -1,289 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  background: #14171a;
-  color: #fff;
-}
-
-html,
-body,
-#root {
-  font-family: 'Rubik';
-}
-
-a,
-a:hover {
-  text-decoration: none;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
-
-*::-webkit-scrollbar {
-  display: none;
-}
-
-button {
-  background: none;
-  border: none;
-  outline: none;
-  cursor: pointer;
-  &:disabled {
-    cursor: default;
-  }
-}
-
-.react-aria-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;
-  }
-}
-
-.confirm-modal {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-}
-
-.react-aria-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);
-  }
-}
-
-@keyframes fade {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes zoom {
-  from {
-    transform: scale(0.8);
-  }
-
-  to {
-    transform: scale(1);
-  }
-}
-
-.react-aria-Dialog {
-  outline: none;
-
-  .react-aria-Heading {
-    line-height: 1em;
-    margin-top: 0;
-  }
-
-  .react-aria-Button {
-    margin-top: 20px;
-  }
-
-  .favorite {
-    margin: 0;
-  }
-}
-
-.react-aria-Button {
-  background: var(--spectrum-global-color-gray-50);
-  border: 1px solid var(--spectrum-global-color-gray-400);
-  border-radius: 4px;
-  color: var(--spectrum-alias-text-color);
-  appearance: none;
-  vertical-align: middle;
-  font-size: 1.2rem;
-  text-align: center;
-  margin: 0;
-  outline: none;
-  transition: border-color 200ms;
-
-  &[data-hovered] {
-    border-color: var(--spectrum-global-color-gray-500);
-  }
-
-  &[data-pressed] {
-    box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.1);
-    background: var(--spectrum-global-color-gray-100);
-    border-color: var(--spectrum-global-color-gray-600);
-  }
-
-  &[data-focus-visible] {
-    border-color: slateblue;
-    box-shadow: 0 0 0 1px slateblue;
-  }
-}
-
-.react-aria-TextField {
-  margin-bottom: 8px;
-
-  .react-aria-Label {
-    display: inline-block;
-    width: 5.357rem;
-  }
-
-  .react-aria-Input {
-    font-size: 16px;
-  }
-}
-
-/* Popover */
-.react-aria-Popover,
-.list-popover {
-  background: #1b1e23;
-  border: 1px solid #39424c;
-  border-radius: 10px;
-  z-index: 200;
-  outline: none;
-  width: 200px;
-
-  &[data-placement='top'] {
-    margin-bottom: 6px;
-    --origin: translateY(8px);
-  }
-
-  &[data-placement='bottom'] {
-    margin-top: 6px;
-    --origin: translateY(-8px);
-
-    & .react-aria-OverlayArrow svg {
-      transform: rotate(180deg);
-    }
-  }
-
-  &[data-placement='right'] {
-    margin-left: 6px;
-    --origin: translateX(-8px);
-
-    & .react-aria-OverlayArrow svg {
-      transform: rotate(90deg);
-    }
-  }
-
-  &[data-placement='left'] {
-    margin-right: 6px;
-    --origin: translateX(8px);
-
-    & .react-aria-OverlayArrow svg {
-      transform: rotate(-90deg);
-    }
-  }
-
-  &[data-entering] {
-    animation: slide 200ms;
-  }
-
-  &[data-exiting] {
-    animation: slide 200ms reverse ease-in;
-  }
-}
-
-.react-aria-Popover a {
-  text-decoration: none;
-}
-
-.react-aria-Popover .popover-item {
-  color: #718096;
-}
-
-.react-aria-Popover .popover-item button {
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 19px;
-  padding: 20px;
-  color: inherit;
-  margin: 0;
-  padding: 20px;
-  width: 100%;
-  height: 100%;
-  text-align: start;
-}
-
-.react-aria-Popover .popover-item:hover {
-  color: #ffffff;
-  background: #14171a;
-  border-radius: 20px;
-}
-
-@keyframes slide {
-  from {
-    transform: var(--origin);
-    opacity: 0;
-  }
-
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-.react-aria-Dialog {
-  outline: none;
-}
-
-.react-aria-Button {
-  background: var(--spectrum-global-color-gray-50);
-  border: 1px solid var(--spectrum-global-color-gray-400);
-  border-radius: 4px;
-  color: var(--spectrum-alias-text-color);
-  appearance: none;
-  vertical-align: middle;
-  font-size: 1.2rem;
-  text-align: center;
-  margin: 0;
-  outline: none;
-  padding: 6px;
-  transition: border-color 200ms;
-
-  &[data-hovered] {
-    border-color: var(--spectrum-global-color-gray-500);
-  }
-
-  &[data-pressed] {
-    box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.1);
-    background: var(--spectrum-global-color-gray-100);
-    border-color: var(--spectrum-global-color-gray-600);
-  }
-
-  &[data-focus-visible] {
-    border-color: slateblue;
-    box-shadow: 0 0 0 1px slateblue;
-  }
-}
-
-@media (forced-colors: active) {
-  .react-aria-Popover {}
-}
\ No newline at end of file
diff --git a/packages/client/dashboard/src/index.tsx b/packages/client/dashboard/src/index.tsx
index 26d7472d..42975897 100644
--- a/packages/client/dashboard/src/index.tsx
+++ b/packages/client/dashboard/src/index.tsx
@@ -1,19 +1,15 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { BrowserRouter } from 'react-router-dom'
-
 import App from './App'
 import reportWebVitals from './reportWebVitals'
 
-import './index.css'
-import './styles/tab.css'
-import './styles/playground.css'
-import './styles/menu.css'
-import './styles/checkbox.css'
-import './styles/prism-vsc-dark-plus.css'
+import './styles/index.css'
+import './styles/react-aria/index.css'
 
 import '@graphiql/plugin-explorer/dist/style.css'
 import 'graphiql/graphiql.css'
+import './styles/prism-vsc-dark-plus.css'
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
 root.render(
diff --git a/packages/client/dashboard/src/styles/index.css b/packages/client/dashboard/src/styles/index.css
new file mode 100644
index 00000000..0fe8edad
--- /dev/null
+++ b/packages/client/dashboard/src/styles/index.css
@@ -0,0 +1,48 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: #14171a;
+  color: #fff;
+}
+
+html,
+body,
+#root {
+  font-family: 'Rubik';
+}
+
+a,
+a:hover {
+  text-decoration: none;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+
+*::-webkit-scrollbar {
+  display: none;
+}
+
+button {
+  background: none;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  &:disabled {
+    cursor: default;
+  }
+}
+
+.confirm-modal {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
diff --git a/packages/client/dashboard/src/styles/playground.css b/packages/client/dashboard/src/styles/playground.css
deleted file mode 100644
index a7c7b818..00000000
--- a/packages/client/dashboard/src/styles/playground.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.graphiql-container {
-    height: 100%;
-    width: 100%;
-  }
-  
\ No newline at end of file
diff --git a/packages/client/dashboard/src/styles/react-aria/button.css b/packages/client/dashboard/src/styles/react-aria/button.css
new file mode 100644
index 00000000..386f105b
--- /dev/null
+++ b/packages/client/dashboard/src/styles/react-aria/button.css
@@ -0,0 +1,25 @@
+.react-aria-Button {
+    background: var(--spectrum-global-color-gray-50);
+    border: 1px solid var(--spectrum-global-color-gray-400);
+    color: var(--spectrum-alias-text-color);
+    border-radius: 4px;
+    appearance: none;
+    vertical-align: middle;
+    font-size: 1.2rem;
+    text-align: center;
+    margin: 0;
+    outline: none;
+    padding: 0.286rem 0.857rem;
+  
+    &[data-pressed] {
+      box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.1);
+      background: var(--spectrum-global-color-gray-100);
+      border-color: var(--spectrum-global-color-gray-500);
+    }
+  
+    &[data-focus-visible] {
+      border-color: #14171a;
+      box-shadow: 0 0 0 1px #14171a;
+    }
+  }
+  
\ No newline at end of file
diff --git a/packages/client/dashboard/src/styles/checkbox.css b/packages/client/dashboard/src/styles/react-aria/checkbox.css
similarity index 100%
rename from packages/client/dashboard/src/styles/checkbox.css
rename to packages/client/dashboard/src/styles/react-aria/checkbox.css
diff --git a/packages/client/dashboard/src/styles/react-aria/dialog.css b/packages/client/dashboard/src/styles/react-aria/dialog.css
new file mode 100644
index 00000000..abf39807
--- /dev/null
+++ b/packages/client/dashboard/src/styles/react-aria/dialog.css
@@ -0,0 +1,17 @@
+/* Dialog */
+.react-aria-Dialog {
+  outline: none;
+
+  .react-aria-Heading {
+    line-height: 1em;
+    margin-top: 0;
+  }
+
+  .react-aria-Button {
+    margin-top: 20px;
+  }
+
+  .favorite {
+    margin: 0;
+  }
+}
diff --git a/packages/client/dashboard/src/styles/react-aria/index.css b/packages/client/dashboard/src/styles/react-aria/index.css
new file mode 100644
index 00000000..5b3fddc3
--- /dev/null
+++ b/packages/client/dashboard/src/styles/react-aria/index.css
@@ -0,0 +1,10 @@
+
+@import "theme.css";
+@import "button.css";
+@import "checkbox.css";
+@import 'dialog.css';
+@import 'menu.css';
+@import 'modal.css';
+@import 'popover.css';
+@import 'tabs.css';
+@import 'textfield.css';
diff --git a/packages/client/dashboard/src/styles/menu.css b/packages/client/dashboard/src/styles/react-aria/menu.css
similarity index 76%
rename from packages/client/dashboard/src/styles/menu.css
rename to packages/client/dashboard/src/styles/react-aria/menu.css
index 27a2e61b..6fd7eff3 100644
--- a/packages/client/dashboard/src/styles/menu.css
+++ b/packages/client/dashboard/src/styles/react-aria/menu.css
@@ -1,28 +1,3 @@
-.react-aria-Button {
-    background: var(--spectrum-global-color-gray-50);
-    border: 1px solid var(--spectrum-global-color-gray-400);
-    color: var(--spectrum-alias-text-color);
-    border-radius: 4px;
-    appearance: none;
-    vertical-align: middle;
-    font-size: 1.2rem;
-    text-align: center;
-    margin: 0;
-    outline: none;
-    padding: 0.286rem 0.857rem;
-  
-    &[data-pressed] {
-      box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.1);
-      background: var(--spectrum-global-color-gray-100);
-      border-color: var(--spectrum-global-color-gray-500);
-    }
-  
-    &[data-focus-visible] {
-      border-color: #14171a;
-      box-shadow: 0 0 0 1px #14171a;
-    }
-  }
-  
   .react-aria-Menu {
     --highlight-background: #14171a;
     --highlight-foreground: white;
diff --git a/packages/client/dashboard/src/styles/react-aria/modal.css b/packages/client/dashboard/src/styles/react-aria/modal.css
new file mode 100644
index 00000000..55ee1c40
--- /dev/null
+++ b/packages/client/dashboard/src/styles/react-aria/modal.css
@@ -0,0 +1,54 @@
+/* Modal */
+.react-aria-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;
+  }
+}
+
+.react-aria-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);
+  }
+}
+
+@keyframes fade {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes zoom {
+  from {
+    transform: scale(0.8);
+  }
+
+  to {
+    transform: scale(1);
+  }
+}
diff --git a/packages/client/dashboard/src/styles/react-aria/popover.css b/packages/client/dashboard/src/styles/react-aria/popover.css
new file mode 100644
index 00000000..ccc9d2dd
--- /dev/null
+++ b/packages/client/dashboard/src/styles/react-aria/popover.css
@@ -0,0 +1,100 @@
+/* Popover */
+.react-aria-Popover,
+.list-popover {
+  background: #1b1e23;
+  border: 1px solid #39424c;
+  border-radius: 10px;
+  z-index: 200;
+  outline: none;
+  width: 200px;
+
+  &[data-placement='top'] {
+    margin-bottom: 6px;
+    --origin: translateY(8px);
+  }
+
+  &[data-placement='bottom'] {
+    margin-top: 6px;
+    --origin: translateY(-8px);
+
+    & .react-aria-OverlayArrow svg {
+      transform: rotate(180deg);
+    }
+  }
+
+  &[data-placement='right'] {
+    margin-left: 6px;
+    --origin: translateX(-8px);
+
+    & .react-aria-OverlayArrow svg {
+      transform: rotate(90deg);
+    }
+  }
+
+  &[data-placement='left'] {
+    margin-right: 6px;
+    --origin: translateX(8px);
+
+    & .react-aria-OverlayArrow svg {
+      transform: rotate(-90deg);
+    }
+  }
+
+  &[data-entering] {
+    animation: slide 200ms;
+  }
+
+  &[data-exiting] {
+    animation: slide 200ms reverse ease-in;
+  }
+}
+
+.react-aria-Popover a {
+  text-decoration: none;
+}
+
+.react-aria-Popover .popover-item {
+  color: #718096;
+}
+
+.react-aria-Popover .popover-item button {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 19px;
+  padding: 20px;
+  color: inherit;
+  margin: 0;
+  padding: 20px;
+  width: 100%;
+  height: 100%;
+  text-align: start;
+}
+
+.react-aria-Popover .popover-item:hover {
+  color: #ffffff;
+  background: #14171a;
+  border-radius: 20px;
+}
+
+@keyframes slide {
+  from {
+    transform: var(--origin);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@media (forced-colors: active) {
+  .react-aria-Popover {}
+}
+
+:root {
+  --origin: translateY(8px);
+  --text-color-base: white;
+  --text-color: white;
+  --text-color-hover: white;
+}
\ No newline at end of file
diff --git a/packages/client/dashboard/src/styles/react-aria/tabs.css b/packages/client/dashboard/src/styles/react-aria/tabs.css
new file mode 100644
index 00000000..d8958d0e
--- /dev/null
+++ b/packages/client/dashboard/src/styles/react-aria/tabs.css
@@ -0,0 +1,66 @@
+/* Tabs */
+.react-aria-Tabs {
+  position: relative;
+  --text-color-base:black;
+  --highlight-background: white;
+  width: 100%;
+}
+
+.react-aria-TabList {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+
+  &[data-orientation=horizontal] {
+    border: 1px solid var(--border-color);
+    border-radius: 999px;
+  }
+}
+
+.react-aria-Tab {
+  padding: 10px 20px;
+  cursor: default;
+  outline: none;
+  position: relative;
+  color: var(--text-color-base);
+  transition: color 200ms;
+  --border-color: transparent;
+  forced-color-adjust: none;
+  border-radius: 999px;
+  a {
+    color: var(--text-color);
+  }
+
+  &[data-hovered],
+  &[data-focused] {
+    color: var(--text-color-hover);
+  }
+
+  &[data-selected] {
+    background-color: var(--highlight-background);
+    color: var(--text-color-base);
+    a {
+      color: var(--text-color-base);
+    }
+  }
+
+  &[data-disabled] {
+    color: var(--text-color-disabled);
+    &[data-selected] {
+      --border-color: var(--text-color-disabled);
+    }
+  }
+
+  &[data-focus-visible]:after {
+    content: '';
+    position: absolute;
+    inset: 4px;
+    border-radius: 4px;
+    border: 2px solid var(--focus-ring-color);
+  }
+}
+
+.react-aria-TabPanel {
+
+}
\ No newline at end of file
diff --git a/packages/client/dashboard/src/styles/react-aria/textfield.css b/packages/client/dashboard/src/styles/react-aria/textfield.css
new file mode 100644
index 00000000..66a6accd
--- /dev/null
+++ b/packages/client/dashboard/src/styles/react-aria/textfield.css
@@ -0,0 +1,13 @@
+/* TextField */
+.react-aria-TextField {
+  margin-bottom: 8px;
+
+  .react-aria-Label {
+    display: inline-block;
+    width: 5.357rem;
+  }
+
+  .react-aria-Input {
+    font-size: 16px;
+  }
+}
\ No newline at end of file
diff --git a/packages/client/dashboard/src/styles/react-aria/theme.css b/packages/client/dashboard/src/styles/react-aria/theme.css
new file mode 100644
index 00000000..5777da1f
--- /dev/null
+++ b/packages/client/dashboard/src/styles/react-aria/theme.css
@@ -0,0 +1,118 @@
+/* color themes for dark and light modes, generated with Leonardo.
+ * Light: https://leonardocolor.io/theme.html?name=Light&config=%7B%22baseScale%22%3A%22Gray%22%2C%22colorScales%22%3A%5B%7B%22name%22%3A%22Gray%22%2C%22colorKeys%22%3A%5B%22%23000000%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22Purple%22%2C%22colorKeys%22%3A%5B%22%235e30eb%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22Red%22%2C%22colorKeys%22%3A%5B%22%23e32400%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%5D%2C%22lightness%22%3A98%2C%22contrast%22%3A1%2C%22saturation%22%3A100%2C%22formula%22%3A%22wcag2%22%7D */
+ :root {
+    --background-color: #f8f8f8;
+    --gray-50: #ffffff;
+    --gray-100: #d0d0d0;
+    --gray-200: #afafaf;
+    --gray-300: #8f8f8f;
+    --gray-400: #717171;
+    --gray-500: #555555;
+    --gray-600: #393939;
+    --purple-100: #d5c9fa;
+    --purple-200: #b8a3f6;
+    --purple-300: #997cf2;
+    --purple-400: #7a54ef;
+    --purple-500: #582ddc;
+    --purple-600: #3c1e95;
+    --red-100: #f7c4ba;
+    --red-200: #f29887;
+    --red-300: #eb664d;
+    --red-400: #de2300;
+    --red-500: #a81b00;
+    --red-600: #731200;
+    --highlight-hover: rgb(0 0 0 / 0.07);
+    --highlight-pressed: rgb(0 0 0 / 0.15);
+  }
+  
+  /* Dark: https://leonardocolor.io/theme.html?name=Dark&config=%7B%22baseScale%22%3A%22Gray%22%2C%22colorScales%22%3A%5B%7B%22name%22%3A%22Gray%22%2C%22colorKeys%22%3A%5B%22%23000000%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22Purple%22%2C%22colorKeys%22%3A%5B%22%235e30eb%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22Red%22%2C%22colorKeys%22%3A%5B%22%23e32400%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%5D%2C%22lightness%22%3A11%2C%22contrast%22%3A1%2C%22saturation%22%3A100%2C%22formula%22%3A%22wcag2%22%7D */
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --background-color: #1d1d1d;
+      --gray-50: #101010;
+      --gray-100: #393939;
+      --gray-200: #4f4f4f;
+      --gray-300: #686868;
+      --gray-400: #848484;
+      --gray-500: #a7a7a7;
+      --gray-600: #cfcfcf;
+      --purple-100: #3c1e95;
+      --purple-200: #522acd;
+      --purple-300: #6f46ed;
+      --purple-400: #8e6ef1;
+      --purple-500: #b099f5;
+      --purple-600: #d5c8fa;
+      --red-100: #721200;
+      --red-200: #9c1900;
+      --red-300: #cc2000;
+      --red-400: #e95034;
+      --red-500: #f08c79;
+      --red-600: #f7c3ba;
+      --highlight-hover: rgb(255 255 255 / 0.1);
+      --highlight-pressed: rgb(255 255 255 / 0.2);
+    }
+  }
+  
+  /* Semantic colors */
+  :root {
+    --focus-ring-color: var(--purple-400);
+    --text-color: var(--gray-600);
+    --text-color-base: var(--gray-500);
+    --text-color-hover: var(--gray-600);
+    --text-color-disabled: var(--gray-200);
+    --text-color-placeholder: var(--gray-400);
+    --link-color: var(--purple-500);
+    --link-color-secondary: var(--gray-500);
+    --link-color-pressed: var(--purple-600);
+    --border-color: var(--gray-300);
+    --border-color-hover: var(--gray-400);
+    --border-color-pressed: var(--gray-400);
+    --border-color-disabled: var(--gray-100);
+    --field-background: var(--gray-50);
+    --field-text-color: var(--gray-600);
+    --overlay-background: var(--gray-50);
+    --button-background: var(--gray-50);
+    --button-background-pressed: var(--background-color);
+    /* these colors are the same between light and dark themes
+     * to ensure contrast with the foreground color */
+    --highlight-background: #6f46ed; /* purple-300 from dark theme, 3.03:1 against background-color */
+    --highlight-background-pressed: #522acd; /* purple-200 from dark theme */
+    --highlight-background-invalid: #cc2000; /* red-300 from dark theme */
+    --highlight-foreground: white; /* 5.56:1 against highlight-background */
+    --highlight-foreground-pressed: #ddd;
+    --highlight-overlay: rgb(from #6f46ed r g b / 15%);
+    --invalid-color: var(--red-400);
+    --invalid-color-pressed: var(--red-500);
+  }
+  
+  /* Windows high contrast mode overrides */
+  @media (forced-colors: active) {
+    :root {
+      --background-color: Canvas;
+      --focus-ring-color: Highlight;
+      --text-color: ButtonText;
+      --text-color-base: ButtonText;
+      --text-color-hover: ButtonText;
+      --text-color-disabled: GrayText;
+      --text-color-placeholder: ButtonText;
+      --link-color: LinkText;
+      --link-color-secondary: LinkText;
+      --link-color-pressed: LinkText;
+      --border-color: ButtonBorder;
+      --border-color-hover: ButtonBorder;
+      --border-color-pressed: ButtonBorder;
+      --border-color-disabled: GrayText;
+      --field-background: Field;
+      --field-text-color: FieldText;
+      --overlay-background: Canvas;
+      --button-background: ButtonFace;
+      --button-background-pressed: ButtonFace;
+      --highlight-background: Highlight;
+      --highlight-background-pressed: Highlight;
+      --highlight-background-invalid: LinkText;
+      --highlight-foreground: HighlightText;
+      --highlight-foreground-pressed: HighlightText;
+      --invalid-color: LinkText;
+      --invalid-color-pressed: LinkText;
+    }
+  }
\ No newline at end of file
diff --git a/packages/client/dashboard/src/styles/tab.css b/packages/client/dashboard/src/styles/tab.css
deleted file mode 100644
index a1f0cdf3..00000000
--- a/packages/client/dashboard/src/styles/tab.css
+++ /dev/null
@@ -1,153 +0,0 @@
-.react-aria-Tabs {
-  --highlight-color: #fff;
-  --text-color: var(--spectrum-global-color-gray-700);
-  --text-color-hover: var(--spectrum-global-color-gray-800);
-  --text-color-selected: var(--spectrum-global-color-gray-900);
-  --text-color-disabled: var(--spectrum-alias-text-color-disabled);
-
-  display: flex;
-  height: 100%;
-
-  &[data-orientation='horizontal'] {
-    flex-direction: column;
-  }
-
-  &[data-orientation='vertical'] {
-    flex-direction: row;
-  }
-}
-
-.title-bar,
-.dapp-title-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-bottom: 1px solid #39424c;
-  position: sticky;
-  top: 60px;
-  z-index: 100;
-  background-color: #14171a;
-}
-
-.dapp-title-bar {
-  border-bottom: none;
-  position: relative;
-  top: 0;
-}
-
-.title-bar > span,
-.dapp-title-bar > span {
-  font-style: italic;
-  font-weight: 700;
-  font-size: 24px;
-  line-height: 28px;
-  color: #ffffff;
-}
-
-.react-aria-TabList {
-  display: flex;
-
-  &[aria-orientation='horizontal'] {
-    .react-aria-Tab {
-      border-bottom: 3px solid var(--border-color, transparent);
-    }
-  }
-
-  &[aria-orientation='vertical'] {
-    flex-direction: column;
-    /* border-right: 1px solid gray; */
-
-    .react-aria-Tab {
-      border-right: 3px solid var(--border-color, transparent);
-    }
-  }
-}
-
-.dapp-title-bar .react-aria-TabList {
-  border: 1px solid #39424c;
-  border-radius: 100px;
-  padding: 2px;
-
-  &[aria-orientation='horizontal'] {
-    .react-aria-Tab {
-      border-bottom: none;
-    }
-  }
-}
-
-.react-aria-Tab {
-  padding: 10px;
-  cursor: default;
-  outline: none;
-  position: relative;
-  font-weight: 700;
-  font-size: 18px;
-  line-height: 21px;
-  color: #718096;
-  cursor: pointer;
-  transition: color 200ms;
-  padding: 20px 15px;
-
-  &[data-hovered],
-  &:focus {
-    color: var(--text-color-hover);
-  }
-
-  &[aria-selected='true'] {
-    --border-color: var(--highlight-color);
-    color: var(--text-color-selected);
-  }
-
-  &[aria-disabled] {
-    color: var(--text-color-disabled);
-    &[aria-selected='true'] {
-      --border-color: var(--text-color-disabled);
-    }
-  }
-
-  &[data-focus-visible]:after {
-    content: '';
-    position: absolute;
-    inset: 4px;
-    border-radius: 4px;
-    border: 2px solid var(--highlight-color);
-  }
-}
-
-.dapp-title-bar .react-aria-Tab {
-  padding: 6px 20px;
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 24px;
-  &[aria-selected='true'] {
-    color: #14171A;
-    background-color: #FFFFFF;
-    border-radius: 100px;
-  }
-}
-
-.react-aria-TabPanel {
-  margin-top: 4px;
-  padding: 20px 0 0 0;
-  border-radius: 4px;
-  outline: none;
-  flex-grow: 1;
-
-  &[data-focus-visible] {
-    box-shadow: inset 0 0 0 2px var(--highlight-color);
-  }
-}
-
-@media (forced-colors: active) {
-  .react-aria-Tabs {
-    forced-color-adjust: none;
-    color: CanvasText;
-
-    --highlight-color: Highlight;
-    --text-color: ButtonText;
-    --text-color-hover: ButtonText;
-    --text-color-selected: ButtonText;
-    --text-color-disabled: GrayText;
-  }
-}
-