diff --git a/packages/studio-components/src/EmptyCanvas/image.tsx b/packages/studio-components/src/EmptyCanvas/image.tsx
index 58b003154..cc1ce516b 100644
--- a/packages/studio-components/src/EmptyCanvas/image.tsx
+++ b/packages/studio-components/src/EmptyCanvas/image.tsx
@@ -1,14 +1,16 @@
 import React from 'react';
+import { theme } from 'antd';
 
-export default ({ isDark }: { isDark: boolean }) => {
-  const stroke = isDark ? '#272727' : '#E6E9EE';
+export default () => {
+  const { token } = theme.useToken();
+  const stroke = token.colorBgBase;
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 915 866" fill="none">
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M552.085 623.067C491.189 655.842 482.589 745.72 418.484 770.756C352.941 796.353 259.359 798.915 226.164 750.352C189.108 696.141 291.287 607.551 265.559 547.035C237.793 481.726 101.961 496.952 88.3682 426.238C76.2288 363.085 150.831 297.41 208.118 248.21C263.376 200.753 332.496 162.372 402.856 156.147C468.399 150.348 511.091 201.87 571.612 216.049C633.101 230.454 738.7 185.557 759.412 239.679C782.973 301.247 654.143 363.856 654.328 432.195C654.506 498.496 794.484 523.038 760.348 586.766C727.485 648.115 617.062 588.097 552.085 623.067Z"
-        fill={isDark ? '#272727' : '#EEF1F6'}
+        fill={token.colorText}
       />
       <circle cx="595.876" cy="255.218" r="12.5406" transform="rotate(30 595.876 255.218)" fill={stroke} />
       <circle cx="724.312" cy="289.146" r="12.5406" transform="rotate(30 724.312 289.146)" fill={stroke} />
diff --git a/packages/studio-components/src/EmptyCanvas/index.tsx b/packages/studio-components/src/EmptyCanvas/index.tsx
index b99d20c6e..2cb4c5188 100644
--- a/packages/studio-components/src/EmptyCanvas/index.tsx
+++ b/packages/studio-components/src/EmptyCanvas/index.tsx
@@ -1,18 +1,19 @@
 import * as React from 'react';
-import { Typography } from 'antd';
+import { Typography, theme, Flex } from 'antd';
 import Image from './image';
-import { isDarkTheme } from '../Utils';
+
 interface IEmptyProps {
   description?: string | React.ReactNode;
-  isLight?: boolean;
 }
 
 const Empty: React.FunctionComponent<IEmptyProps> = props => {
-  const { description, isLight } = props;
-  const isDark = isLight || isDarkTheme();
+  const { description } = props;
 
   return (
-    <div
+    <Flex
+      vertical
+      align="center"
+      justify="center"
       style={{
         fontSize: '14px',
         height: '100%',
@@ -22,7 +23,7 @@ const Empty: React.FunctionComponent<IEmptyProps> = props => {
         alignItems: 'center',
       }}
     >
-      <Image isDark={isDark} />
+      <Image />
       <Typography.Text
         type="secondary"
         style={{
@@ -31,7 +32,7 @@ const Empty: React.FunctionComponent<IEmptyProps> = props => {
       >
         {description}
       </Typography.Text>
-    </div>
+    </Flex>
   );
 };
 
diff --git a/packages/studio-components/src/Icons/FileYaml.tsx b/packages/studio-components/src/Icons/FileYaml.tsx
index 927a07afc..05501525b 100644
--- a/packages/studio-components/src/Icons/FileYaml.tsx
+++ b/packages/studio-components/src/Icons/FileYaml.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
+import { theme } from 'antd';
 const FileYaml = ({ style = {} }: { style?: React.CSSProperties }) => {
-  const { fontSize = '16px', color = '#000' } = style as { fontSize: string; color: string };
+  const { token } = theme.useToken();
+  const { fontSize = 16, color = token.colorText } = style;
   return (
     <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width={fontSize} height={fontSize}>
       <path
diff --git a/packages/studio-components/src/layout/index.tsx b/packages/studio-components/src/layout/index.tsx
index 23f8ee187..9f913f740 100644
--- a/packages/studio-components/src/layout/index.tsx
+++ b/packages/studio-components/src/layout/index.tsx
@@ -3,7 +3,7 @@ import { Outlet } from 'react-router-dom';
 import Section from '../Section';
 import Header from './header';
 import Sidebar from './sidebar';
-import { Button, Space } from 'antd';
+import { Button, Space, theme } from 'antd';
 import { ReadOutlined, GithubOutlined } from '@ant-design/icons';
 import { getCurrentNav } from '../Utils';
 
@@ -24,18 +24,22 @@ const Layout: React.FunctionComponent<ILayoutProps> = props => {
     sideStyle = {},
     github = 'https://github.com/GraphScope/portal',
     sideMenu,
-    style,
+    style = {},
     collapsedConfig = {},
     onMenuClick,
   } = props;
   const { width = 220, collapsedWidth = 56 } = sideStyle;
   const activeKey = getCurrentNav();
+  const { token } = theme.useToken();
 
   const leftSideCollapsed = collapsedConfig[activeKey] || false;
 
   return (
     <Section
-      style={style}
+      style={{
+        background: token.colorBgContainer,
+        ...style,
+      }}
       leftSide={
         <>
           <Sidebar sideStyle={{ width, collapsedWidth }} sideMenu={sideMenu} onMenuClick={onMenuClick} />
diff --git a/packages/studio-importor/src/app/elements/arrow-marker/index.tsx b/packages/studio-importor/src/app/elements/arrow-marker/index.tsx
index 920821836..74b689c49 100644
--- a/packages/studio-importor/src/app/elements/arrow-marker/index.tsx
+++ b/packages/studio-importor/src/app/elements/arrow-marker/index.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react';
-import ReactDOM from 'react-dom';
+
 import { theme } from 'antd';
-const { useToken } = theme;
 
 interface IArrowMarkerProps {
   selectedColor?: string;
@@ -9,7 +8,8 @@ interface IArrowMarkerProps {
 }
 
 const ArrowMarker: React.FunctionComponent<IArrowMarkerProps> = props => {
-  const { selectedColor = 'red', color = '#000' } = props;
+  const { token } = theme.useToken();
+  const { selectedColor = token.colorPrimary, color = token.colorText } = props;
 
   return (
     <svg
diff --git a/packages/studio-importor/src/app/graph-canvas/index.tsx b/packages/studio-importor/src/app/graph-canvas/index.tsx
index eb5f32d0e..4ae6ebe73 100644
--- a/packages/studio-importor/src/app/graph-canvas/index.tsx
+++ b/packages/studio-importor/src/app/graph-canvas/index.tsx
@@ -6,6 +6,7 @@ import { edgeTypes } from '../elements/edge-types';
 import ConnectionLine from '../elements/connection-line';
 import ArrowMarker from '../elements/arrow-marker';
 import { PlayCircleOutlined } from '@ant-design/icons';
+import { theme } from 'antd';
 
 import useInteractive from './useInteractive';
 import { FormattedMessage } from 'react-intl';
@@ -20,15 +21,16 @@ const fakeSnapshot = obj => {
 const GraphEditor: React.FunctionComponent<IGraphEditorProps> = props => {
   const { store, onDoubleClick, onEdgesChange, onNodesChange, onConnectStart, onConnectEnd, onReactFlowInit } =
     useInteractive();
-  const { nodes, edges, theme, collapsed, appMode, nodePositionChange } = store;
+  const { nodes, edges, collapsed, appMode, nodePositionChange } = store;
 
   const [state, updateState] = useState({
     isLocked: false,
   });
 
-  const { isLight } = useStudioProvier();
+  const { token } = theme.useToken();
+
   const isEmpty = nodes.length === 0;
-  const rfBG = !isLight ? '#161616' : collapsed.left && collapsed.right ? '#fff' : '#f4f5f5';
+
   const description = (
     <FormattedMessage
       id="Start sketching a model, a vertex label is a named grouping or categorization of nodes within the graph dataset"
@@ -42,7 +44,7 @@ const GraphEditor: React.FunctionComponent<IGraphEditorProps> = props => {
 
   return (
     <div style={{ height: '100%', width: '100%' }}>
-      <div style={{ height: '100%', width: '100%', position: 'absolute' }}>
+      <div style={{ height: '100%', width: '100%', position: 'absolute', background: token.colorBgContainer }}>
         <ReactFlow
           nodes={_nodes}
           edges={edges}
@@ -60,18 +62,10 @@ const GraphEditor: React.FunctionComponent<IGraphEditorProps> = props => {
           minZoom={0.01}
           onInit={onReactFlowInit}
         >
-          <ArrowMarker selectedColor={theme.primaryColor} color={!isLight ? '#d7d7d7' : '#000'} />
-
-          {!IS_PURE && (
-            <Background
-              style={{
-                // background: '#f4f5f5',
-                background: rfBG,
-              }}
-            />
-          )}
-          {isEmpty && <EmptyCanvas description={description} isLight={!isLight} />}
-          {!IS_PURE && <MiniMap style={{ backgroundColor: !isLight ? '#161616' : '' }} />}
+          <ArrowMarker />
+          {!IS_PURE && <Background style={{ background: token.colorBgBase }} />}
+          {isEmpty && <EmptyCanvas description={description} />}
+          {!IS_PURE && <MiniMap style={{ backgroundColor: token.colorBgBase }} />}
         </ReactFlow>
       </div>
     </div>
diff --git a/packages/studio-website/src/app.tsx b/packages/studio-website/src/app.tsx
index 518d10baf..24f8947cf 100644
--- a/packages/studio-website/src/app.tsx
+++ b/packages/studio-website/src/app.tsx
@@ -1,19 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import Pages from './pages';
-import { installSlot, unInstallSlot } from './slots';
-
-import { Utils } from '@graphscope/studio-components';
-
-import { ROUTES, SIDE_MENU } from '@graphscope/graphy-website';
-
-if (Utils.storage.get('PORTAL_PLUGIN_GRAPHY')) {
-  installSlot('SIDE_MEU', 'graphy', SIDE_MENU);
-  installSlot('ROUTES', 'graphy', ROUTES);
-} else {
-  unInstallSlot('SIDE_MEU', 'graphy');
-  unInstallSlot('ROUTES', 'graphy');
-}
+import PortalSite from './index';
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
-root.render(<Pages />);
+root.render(<PortalSite />);
diff --git a/packages/studio-website/src/index.tsx b/packages/studio-website/src/index.tsx
index 84e451a32..feadc863c 100644
--- a/packages/studio-website/src/index.tsx
+++ b/packages/studio-website/src/index.tsx
@@ -1,4 +1,29 @@
 import GraphScopePortal from './pages';
 export { installSlot, unInstallSlot, getSlots } from './slots';
 
+import { installSlot, unInstallSlot } from './slots';
+
+import { Utils } from '@graphscope/studio-components';
+
+import { ROUTES as GRAPHY_ROUTES, SIDE_MENU as GRAPGY_SIDE_MENU } from '@graphscope/graphy-website';
+import { ROUTES } from './pages/index';
+import { SIDE_MENU } from './layouts/const';
+import { togglePlugin } from './pages/explore/slot';
+
+/** Portal 内置模块 */
+installSlot('SIDE_MEU', 'studio', SIDE_MENU);
+installSlot('ROUTES', 'studio', ROUTES);
+
+/** Explore 模块 */
+togglePlugin();
+
+/**  实验性质的模块：Graphy */
+if (Utils.storage.get('PORTAL_PLUGIN_GRAPHY')) {
+  installSlot('SIDE_MEU', 'graphy', GRAPGY_SIDE_MENU);
+  installSlot('ROUTES', 'graphy', GRAPHY_ROUTES);
+} else {
+  unInstallSlot('SIDE_MEU', 'graphy');
+  unInstallSlot('ROUTES', 'graphy');
+}
+
 export default GraphScopePortal;
diff --git a/packages/studio-website/src/layouts/const.tsx b/packages/studio-website/src/layouts/const.tsx
index 44a7ac733..886598315 100644
--- a/packages/studio-website/src/layouts/const.tsx
+++ b/packages/studio-website/src/layouts/const.tsx
@@ -8,9 +8,7 @@ import {
   faDiagramProject,
   faListCheck,
   faPuzzlePiece,
-  faBell,
   faCoins,
-  faMagnifyingGlassChart,
 } from '@fortawesome/free-solid-svg-icons';
 
 import { MenuProps } from 'antd';
@@ -41,12 +39,6 @@ export const TOOLS_MENU = [
     value: '/querying',
     icon: <FontAwesomeIcon icon={faMagnifyingGlass} />,
   },
-  {
-    label: <FormattedMessage id="Explore" />,
-    key: '/explore',
-    value: '/explore',
-    icon: <FontAwesomeIcon icon={faMagnifyingGlassChart} />,
-  },
 ];
 
 export const SYSTEM_MENU = [
diff --git a/packages/studio-website/src/layouts/index.tsx b/packages/studio-website/src/layouts/index.tsx
index 41e22f99a..324c78a74 100644
--- a/packages/studio-website/src/layouts/index.tsx
+++ b/packages/studio-website/src/layouts/index.tsx
@@ -102,7 +102,6 @@ export default function StudioLayout() {
 
   const _SIDE = getSlots('SIDE_MEU');
 
-  const { layoutBackground } = useCustomToken();
   const handleMenuClick = key => {
     if (key === '/querying' || key === '/importing' || key === '/modeling') {
       updateStore(draft => {
@@ -121,7 +120,6 @@ export default function StudioLayout() {
       <Layout
         onMenuClick={handleMenuClick}
         sideMenu={[_SIDE, SETTING_MENU]}
-        style={{ background: layoutBackground }}
         collapsedConfig={{
           '/querying': true,
           '/explore': true,
diff --git a/packages/studio-website/src/pages/explore/index.tsx b/packages/studio-website/src/pages/explore/index.tsx
index 4da4efcd3..f1f358511 100644
--- a/packages/studio-website/src/pages/explore/index.tsx
+++ b/packages/studio-website/src/pages/explore/index.tsx
@@ -12,8 +12,6 @@ export interface IExplorePageState {
   isReady: boolean;
 }
 const ExplorePage = () => {
-  const { store, id } = useContext();
-  const { token } = theme.useToken();
   return (
     <Section
       breadcrumb={[
diff --git a/packages/studio-website/src/pages/explore/slot.tsx b/packages/studio-website/src/pages/explore/slot.tsx
new file mode 100644
index 000000000..b188e3859
--- /dev/null
+++ b/packages/studio-website/src/pages/explore/slot.tsx
@@ -0,0 +1,55 @@
+import React, { Suspense } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faMagnifyingGlassChart } from '@fortawesome/free-solid-svg-icons';
+import { installSlot, unInstallSlot } from '../../slots';
+import { Utils } from '@graphscope/studio-components';
+import { Route } from 'react-router-dom';
+
+/**  实验性质的模块 */
+export const SIDE_MENU = [
+  {
+    label: <FormattedMessage id="Explore" />,
+    key: '/explore',
+    value: '/explore',
+    icon: <FontAwesomeIcon icon={faMagnifyingGlassChart} />,
+  },
+];
+
+export const ROUTES = [{ path: '/explore', component: React.lazy(() => import('./index')) }].map((item, index) => {
+  const { path, component: Component } = item;
+  return (
+    <Route
+      key={index}
+      path={path}
+      element={
+        <Suspense fallback={<></>}>
+          {/** @ts-ignore */}
+          <Component />
+        </Suspense>
+      }
+    />
+  );
+});
+
+export const PLUGIN_ID = 'EXPLORE';
+export const PLUGIN_LOCAL_STORAGE_KEY = `PORTAL_PLUGIN_${PLUGIN_ID}`;
+
+/**  实验性质的模块：Explore */
+
+export function togglePlugin(enable?: boolean) {
+  let _enable = enable;
+  if (enable === undefined) {
+    _enable = Utils.storage.get(PLUGIN_LOCAL_STORAGE_KEY) || false;
+  }
+
+  if (_enable) {
+    installSlot('SIDE_MEU', PLUGIN_ID, SIDE_MENU);
+    installSlot('ROUTES', PLUGIN_ID, ROUTES);
+  } else {
+    unInstallSlot('SIDE_MEU', PLUGIN_ID);
+    unInstallSlot('ROUTES', PLUGIN_ID);
+  }
+  Utils.storage.set(PLUGIN_LOCAL_STORAGE_KEY, _enable);
+  return _enable;
+}
diff --git a/packages/studio-website/src/pages/index.tsx b/packages/studio-website/src/pages/index.tsx
index 6f47310fa..4fab69b48 100644
--- a/packages/studio-website/src/pages/index.tsx
+++ b/packages/studio-website/src/pages/index.tsx
@@ -4,8 +4,8 @@ import { StudioProvier, GlobalSpin } from '@graphscope/studio-components';
 import Layout from '../layouts';
 import StoreProvider from '@graphscope/use-zustand';
 import { initialStore } from '../layouts/useContext';
-import { getSlots, installSlot } from '../slots';
-import { SIDE_MENU } from '../layouts/const';
+import { getSlots } from '../slots';
+
 import locales from '../locales';
 
 interface IPagesProps {
@@ -20,7 +20,6 @@ const routes = [
   { path: '/modeling', component: React.lazy(() => import('./modeling')) },
   { path: '/importing', component: React.lazy(() => import('./importing')) },
   { path: '/querying', component: React.lazy(() => import('./query')) },
-  { path: '/explore', component: React.lazy(() => import('./explore')) },
 
   { path: '/setting', component: React.lazy(() => import('./setting')) },
   { path: '/job', component: React.lazy(() => import('./job')) },
@@ -46,9 +45,6 @@ export const ROUTES = routes.map(({ path, redirect, component: Component }, inde
     />
   );
 });
-/** 注册默认的 */
-installSlot('SIDE_MEU', 'studio', SIDE_MENU);
-installSlot('ROUTES', 'studio', ROUTES);
 
 const Pages: React.FunctionComponent<IPagesProps> = props => {
   const { children } = props;
diff --git a/packages/studio-website/src/pages/setting/index.tsx b/packages/studio-website/src/pages/setting/index.tsx
index 7f168c5fb..f7d07fb3c 100644
--- a/packages/studio-website/src/pages/setting/index.tsx
+++ b/packages/studio-website/src/pages/setting/index.tsx
@@ -10,6 +10,7 @@ import QuerySetting from './query-setting';
 import { FormattedMessage } from 'react-intl';
 import Coordinator from './coordinator';
 import GraphyPlugin from './plugins/graphy';
+import ExplorePlugin from './plugins/explore';
 
 const Setting: React.FunctionComponent = () => {
   return (
@@ -69,7 +70,11 @@ const Setting: React.FunctionComponent = () => {
                 </Typography.Title>
               }
             >
-              <GraphyPlugin />
+              <Flex vertical gap={24}>
+                <ExplorePlugin />
+                <Divider />
+                <GraphyPlugin />
+              </Flex>
             </Card>
           </Flex>
         </Col>
diff --git a/packages/studio-website/src/pages/setting/plugins/explore.tsx b/packages/studio-website/src/pages/setting/plugins/explore.tsx
new file mode 100644
index 000000000..ed1ca4cde
--- /dev/null
+++ b/packages/studio-website/src/pages/setting/plugins/explore.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { Typography, Tooltip, Switch, Input, Flex, Space, Card } from 'antd';
+import { QuestionCircleOutlined } from '@ant-design/icons';
+import { togglePlugin } from '../../explore/slot';
+export const PLUGIN_ID = 'EXPLORE';
+export const PLUGIN_LOCAL_STORAGE_KEY = `PORTAL_PLUGIN_${PLUGIN_ID}`;
+
+const ExplorePlugin = () => {
+  const defaultChecked = togglePlugin();
+  const onChange = (checked: boolean) => {
+    togglePlugin(checked);
+    window.location.reload();
+  };
+
+  return (
+    <Flex gap={32} vertical>
+      <Flex vertical gap={12} flex={1}>
+        <Space>
+          <Typography.Title level={5}>Explore</Typography.Title>
+          <Tooltip title={`Explor is a tool that allows you to explore the graph data in a more visual way.`}>
+            <QuestionCircleOutlined />
+          </Tooltip>
+        </Space>
+
+        <Typography.Text type="secondary">
+          Explor is a tool that allows you to explore the graph data in a more visual way.
+        </Typography.Text>
+        <Space>
+          Enable:
+          <Switch defaultChecked={defaultChecked} onChange={onChange} />
+        </Space>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default ExplorePlugin;
diff --git a/packages/studio-website/src/pages/setting/plugins/graphy.tsx b/packages/studio-website/src/pages/setting/plugins/graphy.tsx
index 8ebaddf1a..e68dfbf46 100644
--- a/packages/studio-website/src/pages/setting/plugins/graphy.tsx
+++ b/packages/studio-website/src/pages/setting/plugins/graphy.tsx
@@ -4,7 +4,6 @@ import { QuestionCircleOutlined } from '@ant-design/icons';
 import { Utils, Illustration } from '@graphscope/studio-components';
 import { ROUTES, SIDE_MENU } from '@graphscope/graphy-website';
 import { installSlot, unInstallSlot } from '../../../slots';
-import { useContext } from '../../../layouts/useContext';
 
 interface IGraphyPluginProps {}
 
@@ -27,12 +26,7 @@ const GraphyPlugin: React.FunctionComponent<IGraphyPluginProps> = props => {
   };
 
   return (
-    <Flex gap={32}>
-      {/* <Illustration.Experiment style={{ width: '150px', height: '150px' }} /> */}
-      <img
-        style={{ width: '230px', height: '130px' }}
-        src="https://img.alicdn.com/imgextra/i3/O1CN01hUJCmP1j73JF9cicq_!!6000000004500-2-tps-1393-797.png"
-      />
+    <Flex gap={32} vertical>
       <Flex vertical gap={12} flex={1}>
         <Space>
           <Typography.Title level={5}>Graphy'ourData</Typography.Title>