diff --git a/packages/devtools/client/.vscode/settings.json b/packages/devtools/client/.vscode/settings.json
new file mode 100644
index 000000000000..5633c879fb64
--- /dev/null
+++ b/packages/devtools/client/.vscode/settings.json
@@ -0,0 +1,9 @@
+{
+  "cssVariables.lookupFiles": [
+    "./node_modules/@radix-ui/themes/styles.css",
+    "./src/**/*.css",
+    "./src/**/*.scss",
+    "./src/**/*.sass",
+    "./src/**/*.less"
+  ]
+}
diff --git a/packages/devtools/client/modern.config.ts b/packages/devtools/client/modern.config.ts
index 5d3dcd01eeac..93e0d16523bd 100644
--- a/packages/devtools/client/modern.config.ts
+++ b/packages/devtools/client/modern.config.ts
@@ -14,14 +14,21 @@ export default defineConfig<'rspack'>({
     port: 8780,
   },
   source: {
-    preEntry: [require.resolve('modern-normalize/modern-normalize.css')],
+    preEntry: [
+      require.resolve('modern-normalize/modern-normalize.css'),
+      './src/styles/theme.scss',
+    ],
     globalVars: {
       'process.env.PKG_VERSION': version,
     },
   },
   output: {
     assetPrefix: ROUTE_BASENAME,
-    enableCssModuleTSDeclaration: true,
+  },
+  tools: {
+    postcss: (config, { addPlugins }) => {
+      addPlugins(require('postcss-custom-media'));
+    },
   },
   plugins: [appTools({ bundler: 'experimental-rspack' })],
 });
diff --git a/packages/devtools/client/package.json b/packages/devtools/client/package.json
index accd824c346d..b783d50c85f3 100644
--- a/packages/devtools/client/package.json
+++ b/packages/devtools/client/package.json
@@ -16,42 +16,46 @@
     "node": ">=14.0.0"
   },
   "devDependencies": {
-    "birpc": "0.2.13",
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
+    "@modern-js-app/eslint-config": "workspace:*",
+    "@modern-js/app-tools": "workspace:*",
+    "@modern-js/builder-rspack-provider": "workspace:*",
+    "@modern-js/builder-shared": "workspace:*",
     "@modern-js/devtools-kit": "workspace:*",
+    "@modern-js/eslint-config": "workspace:*",
+    "@modern-js/plugin-proxy": "workspace:*",
     "@modern-js/runtime": "workspace:*",
+    "@modern-js/tsconfig": "workspace:*",
     "@modern-js/types": "workspace:*",
     "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-icons": "^1.3.0",
-    "@radix-ui/react-popover": "^1.0.6",
+    "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-tabs": "^1.0.4",
-    "@radix-ui/themes": "^1.1.2",
+    "@radix-ui/themes": "^2.0.0",
+    "@types/jest": "~29.2.4",
+    "@types/lodash": "^4.14.196",
+    "@types/node": "~16.11.7",
+    "@types/react": "~18.0.26",
+    "@types/react-dom": "~18.0.10",
+    "birpc": "0.2.13",
+    "clsx": "^1.2.1",
     "lodash": "^4.17.21",
     "p-defer": "3.0.0",
+    "postcss-custom-media": "^10.0.1",
     "react": "~18.2.0",
     "react-base16-styling": "^0.9.1",
     "react-dom": "~18.2.0",
+    "react-icons": "^4.11.0",
     "react-json-tree": "^0.18.0",
     "react-json-view": "^1.21.3",
     "react-use": "^17.4.0",
-    "suspend-react": "^0.1.3",
-    "ufo": "^1.2.0",
-    "valtio": "^1.11.1",
-    "@modern-js-app/eslint-config": "workspace:*",
-    "@modern-js/app-tools": "workspace:*",
-    "@modern-js/builder-shared": "workspace:*",
-    "@modern-js/builder-rspack-provider": "workspace:*",
-    "@modern-js/eslint-config": "workspace:*",
-    "@modern-js/plugin-proxy": "workspace:*",
-    "@modern-js/tsconfig": "workspace:*",
-    "@types/jest": "~29.2.4",
-    "@types/lodash": "^4.14.196",
-    "@types/node": "~16.11.7",
-    "@types/react": "~18.0.26",
-    "@types/react-dom": "~18.0.10",
     "rimraf": "~3.0.2",
+    "suspend-react": "^0.1.3",
     "type-fest": "^4.1.0",
-    "typescript": "~5.0.4"
+    "typescript": "~5.0.4",
+    "ufo": "^1.2.0",
+    "valtio": "^1.11.1"
+  },
+  "dependencies": {
+    "thumbhash": "^0.1.1"
   }
 }
diff --git a/packages/devtools/client/src/components/Breadcrumbs.module.scss b/packages/devtools/client/src/components/Breadcrumbs.module.scss
new file mode 100644
index 000000000000..65f635197ec2
--- /dev/null
+++ b/packages/devtools/client/src/components/Breadcrumbs.module.scss
@@ -0,0 +1,9 @@
+.link {
+  color: var(--gray-10);
+}
+
+.connector {
+  width: var(--font-size-2);
+  height: var(--font-size-2);
+  color: var(--gray-6);
+}
diff --git a/packages/devtools/client/src/components/Breadcrumbs.tsx b/packages/devtools/client/src/components/Breadcrumbs.tsx
index f46d72b6579e..45fcad85465b 100644
--- a/packages/devtools/client/src/components/Breadcrumbs.tsx
+++ b/packages/devtools/client/src/components/Breadcrumbs.tsx
@@ -1,43 +1,56 @@
-import React from 'react';
-import styled from '@emotion/styled';
-import { Button, Flex } from '@radix-ui/themes';
+import React, { ReactNode } from 'react';
+import _ from 'lodash';
+import { Flex } from '@radix-ui/themes';
 import { ChevronRightIcon } from '@radix-ui/react-icons';
-import type { ButtonProps } from '@radix-ui/themes/dist/cjs/components/button';
+import type { FlexProps } from '@radix-ui/themes/dist/cjs/components/flex';
+import { useMatches } from '@modern-js/runtime/router';
+import styles from './Breadcrumbs.module.scss';
+import { Link } from './Link';
 
-export type BreadcrumbButtonProps = ButtonProps &
-  React.RefAttributes<HTMLButtonElement>;
+export type BreadcrumbProps = FlexProps & React.RefAttributes<HTMLDivElement>;
 
-export const BreadcrumbButton: React.FC<BreadcrumbButtonProps> = props => {
-  return <Button color="gray" size="1" variant="ghost" {...props} />;
-};
+export const Breadcrumbs: React.FC<BreadcrumbProps> = props => {
+  const elements: React.ReactElement[] = [];
+  const items: { pathname: string; title: ReactNode; id: string }[] = [];
 
-export interface BreadcrumbsProps {
-  children?: React.ReactElement[];
-}
+  for (const match of useMatches()) {
+    const raw: unknown = _.get(match, 'handle.breadcrumb');
+    if (!raw) continue;
+    const breadcrumbs = _.castArray(raw).filter(_.isObject);
+    for (const breadcrumb of breadcrumbs) {
+      if (!('title' in breadcrumb)) continue;
+      const pathname =
+        'pathname' in breadcrumb && _.isString(breadcrumb.pathname)
+          ? breadcrumb.pathname
+          : match.pathname;
+      items.push({
+        title: breadcrumb.title as any,
+        pathname,
+        id: match.id,
+      });
+    }
+  }
 
-export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ children = [] }) => {
-  const elements: React.ReactElement[] = [];
-  for (const child of children) {
-    elements.push(child);
-    if (child !== children.at(-1)) {
-      elements.push(<Connector key={`${child.key}__connector`} />);
+  for (const [i, item] of Object.entries(items)) {
+    const keyParts = [item.id, item.pathname, i];
+    elements.push(
+      <Link key={keyParts.join('_')} color="gray" size="2" to={item.pathname}>
+        {item.title}
+      </Link>,
+    );
+    if (item !== items.at(-1)) {
+      keyParts.push('#connector');
+      elements.push(
+        <ChevronRightIcon
+          key={keyParts.join('_')}
+          className={styles.connector}
+        />,
+      );
     }
   }
   return (
-    <Flex align="center" gap="1">
+    <Flex align="center" height="8" gap="1" px="4" {...props}>
       {elements}
     </Flex>
   );
 };
-
-(Breadcrumbs as any).Button = BreadcrumbButton;
-
-export default Breadcrumbs as typeof Breadcrumbs & {
-  Button: typeof BreadcrumbButton;
-};
-
-const Connector = styled(ChevronRightIcon)({
-  width: 'var(--font-size-2)',
-  height: 'var(--font-size-2)',
-  color: 'var(--gray-6)',
-});
diff --git a/packages/devtools/client/src/components/Link.tsx b/packages/devtools/client/src/components/Link.tsx
new file mode 100644
index 000000000000..a1564d7e00f2
--- /dev/null
+++ b/packages/devtools/client/src/components/Link.tsx
@@ -0,0 +1,15 @@
+import {
+  Link as RouterLink,
+  LinkProps as RouterLinkProps,
+} from '@modern-js/runtime/router';
+import { Link as BaseLink } from '@radix-ui/themes';
+import type { LinkProps as BaseLinkProps } from '@radix-ui/themes/dist/esm/components/link';
+
+// @ts-expect-error
+export interface LinkProps extends BaseLinkProps, RouterLinkProps {}
+
+export const Link: React.FC<LinkProps> = ({ to, children, ...props }) => (
+  <BaseLink {...props} asChild>
+    <RouterLink to={to}>{children}</RouterLink>
+  </BaseLink>
+);
diff --git a/packages/devtools/client/src/components/NavLink.tsx b/packages/devtools/client/src/components/NavLink.tsx
new file mode 100644
index 000000000000..a059cefc555a
--- /dev/null
+++ b/packages/devtools/client/src/components/NavLink.tsx
@@ -0,0 +1,20 @@
+import {
+  NavLink as RouterNavLink,
+  NavLinkProps as RouterNavLinkProps,
+} from '@modern-js/runtime/router';
+import { Link as BaseLink } from '@radix-ui/themes';
+import type { LinkProps as BaseLinkProps } from '@radix-ui/themes/dist/esm/components/link';
+import React from 'react';
+
+// @ts-expect-error
+export interface NavLinkProps extends RouterNavLinkProps, BaseLinkProps {}
+
+export const NavLink: React.FC<NavLinkProps> = React.forwardRef(
+  ({ to, children, ...props }, ref) => (
+    <BaseLink {...(props as any)} asChild>
+      <RouterNavLink ref={ref} to={to}>
+        {children}
+      </RouterNavLink>
+    </BaseLink>
+  ),
+);
diff --git a/packages/devtools/client/src/components/ObjectInspector.module.scss b/packages/devtools/client/src/components/ObjectInspector.module.scss
new file mode 100644
index 000000000000..0efbce1b274f
--- /dev/null
+++ b/packages/devtools/client/src/components/ObjectInspector.module.scss
@@ -0,0 +1,3 @@
+.container {
+  font-size: var(--font-size-2);
+}
diff --git a/packages/devtools/client/src/components/ObjectInspector.tsx b/packages/devtools/client/src/components/ObjectInspector.tsx
index 200e3d0802c7..2dc5638ef2a7 100644
--- a/packages/devtools/client/src/components/ObjectInspector.tsx
+++ b/packages/devtools/client/src/components/ObjectInspector.tsx
@@ -1,7 +1,7 @@
-import styled from '@emotion/styled';
 import { Box } from '@radix-ui/themes';
 import type { Theme } from 'react-base16-styling';
 import { JSONTree } from 'react-json-tree';
+import styles from './ObjectInspector.module.scss';
 
 const theme: Theme = {
   scheme: 'tomorrow',
@@ -24,14 +24,10 @@ const theme: Theme = {
   base0F: '#a3685a',
 };
 
-const Container = styled(Box)({
-  fontSize: 'var(--font-size-2)',
-});
-
 export const ObjectInspector: typeof JSONTree = props => {
   return (
-    <Container>
+    <Box className={styles.container}>
       <JSONTree theme={theme} {...props} />
-    </Container>
+    </Box>
   );
 };
diff --git a/packages/devtools/client/src/components/SelectLink.tsx b/packages/devtools/client/src/components/SelectLink.tsx
new file mode 100644
index 000000000000..21f58ab0f282
--- /dev/null
+++ b/packages/devtools/client/src/components/SelectLink.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Select } from '@radix-ui/themes';
+import {
+  NavigateOptions,
+  matchPath,
+  useLocation,
+  useNavigate,
+} from '@modern-js/runtime/router';
+
+export interface SelectLinkProps {
+  items: { to: string; options?: NavigateOptions; title: string }[];
+}
+
+export const SelectLink: React.FC<SelectLinkProps> = ({ items }) => {
+  const navigate = useNavigate();
+  const loc = useLocation();
+  const active = items.find(item => matchPath(item.to, loc.pathname));
+
+  return (
+    <Select.Root size="1" value={active?.to} onValueChange={navigate}>
+      <Select.Trigger />
+      <Select.Content position="popper">
+        {items.map(({ title, to }) => (
+          <Select.Item key={to} value={to}>
+            {title}
+          </Select.Item>
+        ))}
+      </Select.Content>
+    </Select.Root>
+  );
+};
diff --git a/packages/devtools/client/src/components/ServerRoute/Base.module.scss b/packages/devtools/client/src/components/ServerRoute/Base.module.scss
new file mode 100644
index 000000000000..41f94617a1b8
--- /dev/null
+++ b/packages/devtools/client/src/components/ServerRoute/Base.module.scss
@@ -0,0 +1,70 @@
+.container {
+  background-color: var(--gray-1);
+  border-radius: var(--radius-2);
+  box-shadow: var(--shadow-4);
+}
+
+.trigger {
+  all: unset;
+  width: 100%;
+  display: flex;
+  gap: var(--space-2);
+  align-items: center;
+  cursor: pointer;
+  & * {
+    cursor: pointer;
+  }
+}
+
+.content {
+  padding-top: var(--space-2);
+  overflow: hidden;
+  &[data-state='open'] {
+    animation: slideDown 150ms ease-out;
+  }
+  &[data-state='closed'] {
+    animation: slideUp 150ms ease-out;
+  }
+
+  @keyframes slideDown {
+    from {
+      height: 0;
+      opacity: 0;
+    }
+    to {
+      height: var(--radix-collapsible-content-height);
+      opacity: 1;
+    }
+  }
+
+  @keyframes slideUp {
+    from {
+      height: var(--radix-collapsible-content-height);
+      opacity: 1;
+    }
+    to {
+      height: 0;
+      opacity: 0;
+    }
+  }
+}
+
+.url-text {
+  color: var(--gray-12);
+  font-size: var(--font-size-2);
+  transition: color 200ms;
+}
+
+.mark {
+  height: var(--font-size-5);
+  width: var(--font-size-5);
+  border-radius: var(--radius-2);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: background-color 100ms;
+  background-color: transparent;
+  &[data-open='true'] {
+    background-color: var(--gray-4);
+  }
+}
diff --git a/packages/devtools/client/src/components/ServerRoute/Base.tsx b/packages/devtools/client/src/components/ServerRoute/Base.tsx
new file mode 100644
index 000000000000..9f6092ebefc7
--- /dev/null
+++ b/packages/devtools/client/src/components/ServerRoute/Base.tsx
@@ -0,0 +1,54 @@
+import React, { useContext, useState } from 'react';
+import type { ServerRoute as IServerRoute } from '@modern-js/types';
+import * as Collapsible from '@radix-ui/react-collapsible';
+import { Box, Text } from '@radix-ui/themes';
+import { CaretSortIcon } from '@radix-ui/react-icons';
+import styles from './Base.module.scss';
+import { MatchUrlContext } from './Context';
+
+export interface BaseRouteProps extends React.PropsWithChildren {
+  badge: React.ReactElement;
+  route: IServerRoute;
+  title: string;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export const BaseRoute: React.FC<BaseRouteProps> = ({
+  badge,
+  route,
+  title,
+  children,
+  open,
+  onOpenChange,
+}) => {
+  const { matched } = useContext(MatchUrlContext);
+  const [_open, _setOpen] = useState(false);
+
+  const isMatching = Boolean(matched);
+  const isMatched = matched === route;
+  const isOpen = isMatched || (open ?? _open);
+
+  return (
+    <Box p="3" className={styles.container}>
+      <Collapsible.Root open={isOpen} onOpenChange={onOpenChange ?? _setOpen}>
+        <Collapsible.Trigger className={styles.trigger}>
+          {badge}
+          <Text
+            className={styles.urlText}
+            style={{ opacity: isMatching && !isMatched ? 0.5 : 1 }}
+          >
+            {title}
+          </Text>
+          <Box grow="1" />
+          <Box className={styles.mark} data-open={isOpen}>
+            <CaretSortIcon />
+          </Box>
+        </Collapsible.Trigger>
+        <Collapsible.Content className={styles.content}>
+          {children}
+        </Collapsible.Content>
+      </Collapsible.Root>
+    </Box>
+  );
+};
diff --git a/packages/devtools/client/src/components/ServerRoute/Context.tsx b/packages/devtools/client/src/components/ServerRoute/Context.tsx
new file mode 100644
index 000000000000..d07b256515c2
--- /dev/null
+++ b/packages/devtools/client/src/components/ServerRoute/Context.tsx
@@ -0,0 +1,11 @@
+import { ServerRoute } from '@modern-js/types';
+import { createContext } from 'react';
+
+export interface MatchServerRouteValue {
+  url: string;
+  matched?: ServerRoute;
+}
+
+export const MatchUrlContext = createContext<MatchServerRouteValue>({
+  url: '',
+});
diff --git a/packages/devtools/client/src/routes/pages/EntryRoute/ClientRouteStats/LegacyRouteStats.tsx b/packages/devtools/client/src/components/ServerRoute/EntryRoute/ClientRoute/LegacyRoute/Stats.tsx
similarity index 100%
rename from packages/devtools/client/src/routes/pages/EntryRoute/ClientRouteStats/LegacyRouteStats.tsx
rename to packages/devtools/client/src/components/ServerRoute/EntryRoute/ClientRoute/LegacyRoute/Stats.tsx
diff --git a/packages/devtools/client/src/routes/pages/EntryRoute/MatchRemixRouteContext.ts b/packages/devtools/client/src/components/ServerRoute/EntryRoute/ClientRoute/RemixRoute/Context.ts
similarity index 79%
rename from packages/devtools/client/src/routes/pages/EntryRoute/MatchRemixRouteContext.ts
rename to packages/devtools/client/src/components/ServerRoute/EntryRoute/ClientRoute/RemixRoute/Context.ts
index 694bae5dd005..8e7cc5935180 100644
--- a/packages/devtools/client/src/routes/pages/EntryRoute/MatchRemixRouteContext.ts
+++ b/packages/devtools/client/src/components/ServerRoute/EntryRoute/ClientRoute/RemixRoute/Context.ts
@@ -2,5 +2,5 @@ import { RouteMatch, RouteObject } from '@modern-js/runtime/router';
 import { createContext } from 'react';
 
 export const MatchRemixRouteContext = createContext<
-  RouteMatch<string, RouteObject>[]
+  RouteMatch<string, RouteObject>[] | false
 >([]);
diff --git a/packages/devtools/client/src/components/ServerRoute/EntryRoute/ClientRoute/RemixRoute/Route.module.scss b/packages/devtools/client/src/components/ServerRoute/EntryRoute/ClientRoute/RemixRoute/Route.module.scss
new file mode 100644
index 000000000000..3fd2b17ee72c
--- /dev/null
+++ b/packages/devtools/client/src/components/ServerRoute/EntryRoute/ClientRoute/RemixRoute/Route.module.scss
@@ -0,0 +1,26 @@
+.endpoint-tag {
+  font-size: var(--font-size-2);
+  &[data-compose='head'] {
+    padding-right: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  &[data-compose='tail'] {
+    padding-left: 0;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}
+
+.shy-link {
+  color: var(--gray-9);
+  font-size: var(--font-size-1);
+}
+
+.endpoint-container {
+  display: flex;
+  transition: opacity 200ms;
+  &[data-matched='false'] {
+    opacity: 0.5;
+  }
+}
diff --git a/packages/devtools/client/src/routes/pages/EntryRoute/ClientRouteStats/RemixRoute.tsx b/packages/devtools/client/src/components/ServerRoute/EntryRoute/ClientRoute/RemixRoute/Route.tsx
similarity index 54%
rename from packages/devtools/client/src/routes/pages/EntryRoute/ClientRouteStats/RemixRoute.tsx
rename to packages/devtools/client/src/components/ServerRoute/EntryRoute/ClientRoute/RemixRoute/Route.tsx
index 82779b48c9b5..f0cb716c2e24 100644
--- a/packages/devtools/client/src/routes/pages/EntryRoute/ClientRouteStats/RemixRoute.tsx
+++ b/packages/devtools/client/src/components/ServerRoute/EntryRoute/ClientRoute/RemixRoute/Route.tsx
@@ -1,11 +1,11 @@
 import React, { useContext, useRef } from 'react';
 import { RouteObject } from '@modern-js/runtime/router';
 import { Box, Flex, Link, Code } from '@radix-ui/themes';
-import styled from '@emotion/styled';
 import _ from 'lodash';
 import { resolveURL } from 'ufo';
 import { useHoverDirty } from 'react-use';
-import { MatchRemixRouteContext } from '../MatchRemixRouteContext';
+import { MatchRemixRouteContext } from './Context';
+import styles from './Route.module.scss';
 
 export interface RemixRouteProps {
   route: RouteObject | RouteObject[];
@@ -23,8 +23,10 @@ export const RemixRoute: React.FC<RemixRouteProps> = ({ route }) => {
   const isIndex = curr.index ?? false;
   const isRoot = displayPath === '/';
   const matched = useContext(MatchRemixRouteContext);
-  const isMatching = matched.length > 0;
-  const isMatched = _.find(matched, { route: { id: curr.id } });
+  const isMatching = matched === false || matched.length > 0;
+  const isMatched = matched
+    ? Boolean(_.find(matched, { route: { id: curr.id } }))
+    : false;
 
   const ref = useRef<HTMLDivElement>(null);
   const hovered = useHoverDirty(ref);
@@ -32,19 +34,36 @@ export const RemixRoute: React.FC<RemixRouteProps> = ({ route }) => {
   return (
     <Box ref={ref}>
       <Flex gap="2" align="center" mb={curr.children && '1'}>
-        <EndpointContainer data-miss-matched={isMatching && !isMatched}>
+        <Box
+          className={styles.endpointContainer}
+          data-matched={!isMatching || isMatched}
+        >
           {(isIndex && isRoot) || (
-            <EndpointTag data-compose={isIndex && 'head'}>
+            <Code
+              className={styles.endpointTag}
+              data-compose={isIndex && 'head'}
+            >
               {displayPath}
-            </EndpointTag>
+            </Code>
           )}
           {isIndex && (
-            <EndpointTag color="purple" data-compose={!isRoot && 'tail'}>
+            <Code
+              className={styles.endpointTag}
+              color="purple"
+              data-compose={!isRoot && 'tail'}
+            >
               /(index)
-            </EndpointTag>
+            </Code>
           )}
-        </EndpointContainer>
-        {hovered && componentFile && <ShyLink>{componentFile}</ShyLink>}
+        </Box>
+        {componentFile && (
+          <Link
+            className={styles.shyLink}
+            style={{ visibility: hovered ? 'visible' : 'hidden' }}
+          >
+            {componentFile}
+          </Link>
+        )}
       </Flex>
       <Flex direction="column" gap="1">
         {curr.children?.map(route => (
@@ -54,30 +73,3 @@ export const RemixRoute: React.FC<RemixRouteProps> = ({ route }) => {
     </Box>
   );
 };
-
-const EndpointTag = styled(Code)({
-  fontSize: 'var(--font-size-2)',
-  '&[data-compose="head"]': {
-    paddingRight: '0',
-    borderTopRightRadius: '0',
-    borderBottomRightRadius: '0',
-  },
-  '&[data-compose="tail"]': {
-    paddingLeft: '0',
-    borderTopLeftRadius: '0',
-    borderBottomLeftRadius: '0',
-  },
-});
-
-const ShyLink = styled(Link)({
-  color: 'var(--gray-9)',
-  fontSize: 'var(--font-size-1)',
-});
-
-const EndpointContainer = styled(Box)({
-  display: 'flex',
-  transition: 'opacity 200ms',
-  '&[data-miss-matched="true"]': {
-    opacity: '0.5',
-  },
-});
diff --git a/packages/devtools/client/src/routes/pages/EntryRoute/ClientRouteStats/RemixRouteStats.tsx b/packages/devtools/client/src/components/ServerRoute/EntryRoute/ClientRoute/RemixRoute/Stats.tsx
similarity index 50%
rename from packages/devtools/client/src/routes/pages/EntryRoute/ClientRouteStats/RemixRouteStats.tsx
rename to packages/devtools/client/src/components/ServerRoute/EntryRoute/ClientRoute/RemixRoute/Stats.tsx
index 6413b0e3e743..d1f6792d4ca4 100644
--- a/packages/devtools/client/src/routes/pages/EntryRoute/ClientRouteStats/RemixRouteStats.tsx
+++ b/packages/devtools/client/src/components/ServerRoute/EntryRoute/ClientRoute/RemixRoute/Stats.tsx
@@ -6,10 +6,10 @@ import {
 import type { ServerRoute } from '@modern-js/types';
 import { Flex } from '@radix-ui/themes';
 import React, { useContext, useMemo } from 'react';
-import { resolveURL, cleanDoubleSlashes } from 'ufo';
-import { MatchUrlContext } from '../../MatchUrl';
-import { MatchRemixRouteContext } from '../MatchRemixRouteContext';
-import { RemixRoute } from './RemixRoute';
+import { cleanDoubleSlashes } from 'ufo';
+import { MatchUrlContext } from '../../../Context';
+import { MatchRemixRouteContext } from './Context';
+import { RemixRoute } from './Route';
 
 export interface RemixRouteStatsProps {
   remixRoutes: RouteObject[];
@@ -20,13 +20,19 @@ export const RemixRouteStats: React.FC<RemixRouteStatsProps> = ({
   remixRoutes,
   route,
 }) => {
-  const testingUrl = useContext(MatchUrlContext);
+  const { matched: matchedServerRoute, url } = useContext(MatchUrlContext);
   const matchedRoutes = useMemo(() => {
-    if (!testingUrl || !remixRoutes) return [];
-    const location = cleanDoubleSlashes(testingUrl.replace(route.urlPath, '/'));
-    const matched = matchRemixRoutes(remixRoutes, location) ?? [];
-    return matched as RouteMatch<string, RouteObject>[];
-  }, [remixRoutes, testingUrl]);
+    if (matchedServerRoute === route) {
+      if (!remixRoutes) return [];
+      const location = cleanDoubleSlashes(url.replace(route.urlPath, '/'));
+      const matched = matchRemixRoutes(remixRoutes, location) ?? [];
+      return matched.length
+        ? (matched as RouteMatch<string, RouteObject>[])
+        : false;
+    } else {
+      return matchedServerRoute ? false : [];
+    }
+  }, [remixRoutes, matchedServerRoute, url]);
 
   if (!remixRoutes.length) return null;
 
@@ -34,10 +40,7 @@ export const RemixRouteStats: React.FC<RemixRouteStatsProps> = ({
     <MatchRemixRouteContext.Provider value={matchedRoutes}>
       <Flex gap="2" direction="column">
         {remixRoutes.map(r => (
-          <RemixRoute
-            key={r.id}
-            route={{ ...r, path: resolveURL(route.urlPath, r.path ?? '') }}
-          />
+          <RemixRoute key={r.id} route={r} />
         ))}
       </Flex>
     </MatchRemixRouteContext.Provider>
diff --git a/packages/devtools/client/src/routes/pages/EntryRoute/ClientRouteStats/ClientRouteStats.tsx b/packages/devtools/client/src/components/ServerRoute/EntryRoute/ClientRoute/Stats.tsx
similarity index 91%
rename from packages/devtools/client/src/routes/pages/EntryRoute/ClientRouteStats/ClientRouteStats.tsx
rename to packages/devtools/client/src/components/ServerRoute/EntryRoute/ClientRoute/Stats.tsx
index 0e3988acc356..6842fb5119d9 100644
--- a/packages/devtools/client/src/routes/pages/EntryRoute/ClientRouteStats/ClientRouteStats.tsx
+++ b/packages/devtools/client/src/components/ServerRoute/EntryRoute/ClientRoute/Stats.tsx
@@ -3,8 +3,8 @@ import type { RouteLegacy, ServerRoute } from '@modern-js/types';
 import _ from 'lodash';
 import React from 'react';
 import { useSnapshot } from 'valtio';
-import { LegacyRouteStats } from './LegacyRouteStats';
-import { RemixRouteStats } from './RemixRouteStats';
+import { LegacyRouteStats } from './LegacyRoute/Stats';
+import { RemixRouteStats } from './RemixRoute/Stats';
 import { useStore } from '@/stores';
 
 export interface ClientRouteStatsProps {
diff --git a/packages/devtools/client/src/components/ServerRoute/EntryRoute/ClientRoute/index.ts b/packages/devtools/client/src/components/ServerRoute/EntryRoute/ClientRoute/index.ts
new file mode 100644
index 000000000000..c1e298afdb09
--- /dev/null
+++ b/packages/devtools/client/src/components/ServerRoute/EntryRoute/ClientRoute/index.ts
@@ -0,0 +1 @@
+export * from './Stats';
diff --git a/packages/devtools/client/src/components/ServerRoute/EntryRoute/Route.tsx b/packages/devtools/client/src/components/ServerRoute/EntryRoute/Route.tsx
new file mode 100644
index 000000000000..f403aadfafa3
--- /dev/null
+++ b/packages/devtools/client/src/components/ServerRoute/EntryRoute/Route.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Badge, Flex, ScrollArea } from '@radix-ui/themes';
+import { ServerRoute } from '@modern-js/types';
+import { BaseRoute } from '../Base';
+import { EntryStats } from './Stats';
+import { ClientRouteStats } from './ClientRoute';
+
+export interface EntryRouteProps {
+  route: ServerRoute;
+}
+
+export const EntryRoute: React.FC<EntryRouteProps> = ({ route }) => {
+  return (
+    <BaseRoute badge={badge} route={route} title={route.urlPath}>
+      <Flex direction="column" gap="2">
+        <ScrollArea scrollbars="horizontal">
+          <EntryStats route={route} />
+        </ScrollArea>
+        <ScrollArea scrollbars="horizontal">
+          <ClientRouteStats route={route} />
+        </ScrollArea>
+      </Flex>
+    </BaseRoute>
+  );
+};
+
+const badge = <Badge color="cyan">Entry</Badge>;
diff --git a/packages/devtools/client/src/components/ServerRoute/EntryRoute/Stats.module.scss b/packages/devtools/client/src/components/ServerRoute/EntryRoute/Stats.module.scss
new file mode 100644
index 000000000000..ddb3f74933c1
--- /dev/null
+++ b/packages/devtools/client/src/components/ServerRoute/EntryRoute/Stats.module.scss
@@ -0,0 +1,5 @@
+.stats {
+  font-size: var(--font-size-1);
+  white-space: nowrap;
+  color: var(--gray-10);
+}
diff --git a/packages/devtools/client/src/routes/pages/EntryRoute/EntryStats.tsx b/packages/devtools/client/src/components/ServerRoute/EntryRoute/Stats.tsx
similarity index 59%
rename from packages/devtools/client/src/routes/pages/EntryRoute/EntryStats.tsx
rename to packages/devtools/client/src/components/ServerRoute/EntryRoute/Stats.tsx
index c5a1bd8192e2..5d5f13661e06 100644
--- a/packages/devtools/client/src/routes/pages/EntryRoute/EntryStats.tsx
+++ b/packages/devtools/client/src/components/ServerRoute/EntryRoute/Stats.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import _ from 'lodash';
 import { useSnapshot } from 'valtio';
 import type { ServerRoute } from '@modern-js/types';
-import { Box, Card, Flex, Strong, Text } from '@radix-ui/themes';
-import styled from '@emotion/styled';
+import { Box, Flex, Strong, Text } from '@radix-ui/themes';
+import styles from './Stats.module.scss';
 import { useStore } from '@/stores';
 
 export interface EntryStatsProps {
@@ -24,21 +24,15 @@ export const EntryStats: React.FC<EntryStatsProps> = ({ route }) => {
   }
 
   return (
-    <Stats>
-      <Box>
-        <Flex gap="1">
-          <Strong>Directory: </Strong>
-          <Text>{entrypoint.absoluteEntryDir}</Text>
-        </Flex>
-        <Flex gap="1">
-          <Strong>Entry:</Strong>
-          <Text>{entrypoint.entry}</Text>
-        </Flex>
-      </Box>
-    </Stats>
+    <Box className={styles.stats}>
+      <Flex gap="1">
+        <Strong>Directory: </Strong>
+        <Text>{entrypoint.absoluteEntryDir}</Text>
+      </Flex>
+      <Flex gap="1">
+        <Strong>Entry:</Strong>
+        <Text>{entrypoint.entry}</Text>
+      </Flex>
+    </Box>
   );
 };
-
-const Stats = styled(Card)({
-  fontSize: 'var(--font-size-1)',
-});
diff --git a/packages/devtools/client/src/components/ServerRoute/EntryRoute/index.ts b/packages/devtools/client/src/components/ServerRoute/EntryRoute/index.ts
new file mode 100644
index 000000000000..1985efdddd3e
--- /dev/null
+++ b/packages/devtools/client/src/components/ServerRoute/EntryRoute/index.ts
@@ -0,0 +1 @@
+export * from './Route';
diff --git a/packages/devtools/client/src/routes/pages/ServerRoute.tsx b/packages/devtools/client/src/components/ServerRoute/Route.tsx
similarity index 67%
rename from packages/devtools/client/src/routes/pages/ServerRoute.tsx
rename to packages/devtools/client/src/components/ServerRoute/Route.tsx
index 21f2e9b11464..13dcfc9de54b 100644
--- a/packages/devtools/client/src/routes/pages/ServerRoute.tsx
+++ b/packages/devtools/client/src/components/ServerRoute/Route.tsx
@@ -1,18 +1,14 @@
 import React from 'react';
 import type { ServerRoute as IServerRoute } from '@modern-js/types';
 import _ from 'lodash';
-import EntryRoute from './EntryRoute/EntryRoute';
-import UnknownRoute from './UnknownRoute';
+import { EntryRoute } from './EntryRoute';
+import { UnknownRoute } from './Unknown';
 
 export interface ServerRouteProps {
   route: IServerRoute;
 }
 
 export const ServerRoute: React.FC<ServerRouteProps> = ({ route }) => {
-  return dispatchServerRoute(route);
-};
-
-const dispatchServerRoute = (route: IServerRoute) => {
   if (_.isString(route.entryName)) {
     return <EntryRoute route={route} />;
   } else {
diff --git a/packages/devtools/client/src/routes/pages/UnknownRoute.tsx b/packages/devtools/client/src/components/ServerRoute/Unknown.tsx
similarity index 73%
rename from packages/devtools/client/src/routes/pages/UnknownRoute.tsx
rename to packages/devtools/client/src/components/ServerRoute/Unknown.tsx
index 3d38851d2e69..7ffa5c7a12ef 100644
--- a/packages/devtools/client/src/routes/pages/UnknownRoute.tsx
+++ b/packages/devtools/client/src/components/ServerRoute/Unknown.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import { Badge, Card } from '@radix-ui/themes';
 import { ServerRoute } from '@modern-js/types';
-import { BaseRoute } from './BaseRoute';
+import { BaseRoute } from './Base';
 
 export interface UnknownRouteProps {
   route: ServerRoute;
 }
 
-const UnknownRoute: React.FC<UnknownRouteProps> = ({ route }) => {
+export const UnknownRoute: React.FC<UnknownRouteProps> = ({ route }) => {
   return (
     <BaseRoute badge={badge} route={route} title={route.urlPath}>
       <Card>Unknown route type.</Card>
@@ -15,6 +15,4 @@ const UnknownRoute: React.FC<UnknownRouteProps> = ({ route }) => {
   );
 };
 
-export default UnknownRoute;
-
 const badge = <Badge color="gray">Unknown</Badge>;
diff --git a/packages/devtools/client/src/components/Theme.tsx b/packages/devtools/client/src/components/Theme.tsx
new file mode 100644
index 000000000000..24731a665277
--- /dev/null
+++ b/packages/devtools/client/src/components/Theme.tsx
@@ -0,0 +1,38 @@
+import React, { useEffect } from 'react';
+import { Theme as OriginalTheme, useThemeContext } from '@radix-ui/themes';
+import type { ThemeProps } from '@radix-ui/themes/dist/cjs/theme';
+import { getQuery } from 'ufo';
+import _ from 'lodash';
+
+const isAppearance = (value: string): value is 'inherit' | 'light' | 'dark' =>
+  ['inherit', 'light', 'dark'].includes(value);
+
+const ThemeGuard: React.FC<React.PropsWithChildren> = ({ children }) => {
+  const { appearance } = useThemeContext();
+  useEffect(() => {
+    localStorage.setItem('__modern_js_devtools_appearance', appearance);
+    if (appearance !== 'inherit') {
+      document.documentElement.classList.remove('dark', 'light');
+      document.documentElement.classList.add(appearance);
+    }
+  }, [appearance]);
+  return <>{children}</>;
+};
+
+export const Theme: React.FC<
+  ThemeProps & React.RefAttributes<HTMLDivElement>
+> = ({ appearance, children, ...props }) => {
+  const initialAppearance =
+    appearance ||
+    _.castArray(getQuery(location.href).appearance)[0] ||
+    localStorage.getItem('__modern_js_devtools_appearance') ||
+    'light';
+  if (!isAppearance(initialAppearance)) {
+    throw new Error('Initial appearance value is invalid.');
+  }
+  return (
+    <OriginalTheme {...props} appearance={initialAppearance}>
+      <ThemeGuard>{children}</ThemeGuard>
+    </OriginalTheme>
+  );
+};
diff --git a/packages/devtools/client/src/constants.tsx b/packages/devtools/client/src/constants.tsx
index 8b43d2a62947..c2341d44d13e 100644
--- a/packages/devtools/client/src/constants.tsx
+++ b/packages/devtools/client/src/constants.tsx
@@ -1,34 +1,34 @@
 import {
-  HomeIcon,
-  MixerHorizontalIcon,
-  FileTextIcon,
-  CubeIcon,
-} from '@radix-ui/react-icons';
+  HiOutlineHome,
+  HiOutlineAdjustmentsHorizontal,
+  HiOutlineRectangleGroup,
+  HiOutlineCube,
+} from 'react-icons/hi2';
 import { InternalTab } from './types';
 
 export const getDefaultTabs = (): InternalTab[] => [
   {
     name: 'overview',
     title: 'Overview',
-    icon: <HomeIcon />,
+    icon: <HiOutlineHome />,
     view: { type: 'builtin', url: '/overview' },
   },
   {
     name: 'config',
     title: 'Config',
-    icon: <MixerHorizontalIcon />,
+    icon: <HiOutlineAdjustmentsHorizontal />,
     view: { type: 'builtin', url: '/config' },
   },
   {
     name: 'pages',
     title: 'Pages',
-    icon: <FileTextIcon />,
+    icon: <HiOutlineRectangleGroup />,
     view: { type: 'builtin', url: '/pages' },
   },
   {
     name: 'context',
     title: 'Context',
-    icon: <CubeIcon />,
+    icon: <HiOutlineCube />,
     view: { type: 'builtin', url: '/context' },
   },
 ];
diff --git a/packages/devtools/client/src/routes/RootTabs.tsx b/packages/devtools/client/src/routes/RootTabs.tsx
deleted file mode 100644
index 517c989b9015..000000000000
--- a/packages/devtools/client/src/routes/RootTabs.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import { Suspense } from 'react';
-import styled from '@emotion/styled';
-import { useSnapshot } from 'valtio';
-import { Outlet, useNavigate, useLocation } from '@modern-js/runtime/router';
-import { Box } from '@radix-ui/themes';
-import _ from 'lodash';
-import { HomeIcon } from '@radix-ui/react-icons';
-import { useStore } from '@/stores';
-import { InternalTab } from '@/types';
-import Breadcrumbs from '@/components/Breadcrumbs';
-
-export const RootTabs: React.FC = () => {
-  const $store = useStore();
-  const tabs = useSnapshot($store.tabs);
-
-  const navigate = useNavigate();
-  const location = useLocation();
-  const currentTabName = location.pathname.split('/').filter(Boolean)[0];
-  const currentTab = _.find(tabs, { name: currentTabName });
-
-  const handleClick = (tab: InternalTab) => {
-    if (tab.view.type === 'builtin') {
-      navigate(tab.view.url);
-    } else {
-      throw new Error('Unimplemented.');
-    }
-  };
-
-  return (
-    <TabRoot>
-      <TabNavigator>
-        <TabList style={{ touchAction: 'none' }}>
-          <TabBrand>
-            <IconBox>🌰</IconBox>
-            DevTools
-          </TabBrand>
-        </TabList>
-        <TabList>
-          {tabs.map(tab => (
-            <TabTrigger
-              key={tab.name}
-              value={tab.name}
-              onClick={() => handleClick(tab as any)}
-            >
-              <IconBox>{tab.icon as any}</IconBox>
-              {tab.title}
-            </TabTrigger>
-          ))}
-        </TabList>
-        <Box grow="1" />
-      </TabNavigator>
-      <TabContent>
-        <Box grow="0">
-          <Breadcrumbs>
-            <Breadcrumbs.Button onClick={() => navigate('overview')}>
-              <HomeIcon />
-            </Breadcrumbs.Button>
-            <Breadcrumbs.Button>{currentTab?.title}</Breadcrumbs.Button>
-          </Breadcrumbs>
-        </Box>
-        <Box grow="1" style={{ overflow: 'hidden' }}>
-          <Suspense fallback={<div>loading...</div>}>
-            <Outlet />
-          </Suspense>
-        </Box>
-      </TabContent>
-    </TabRoot>
-  );
-};
-
-const IconBox = styled(Box)({
-  width: '2rem',
-  height: '2rem',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-});
-
-const TabNavigator = styled(Box)({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 'var(--block-gap)',
-});
-
-const TabRoot = styled(Box)({
-  '--block-gap': '0.5rem',
-  '--block-color': '#121212',
-  display: 'flex',
-  padding: 'var(--block-gap)',
-  gap: 'var(--block-gap)',
-  alignItems: 'stretch',
-  height: '100%',
-  width: '100%',
-});
-
-const TabList = styled(Box)({
-  flex: 'none',
-  width: '10rem',
-  height: 'min-content',
-  backgroundColor: 'var(--block-color)',
-  borderRadius: 'var(--radius-4)',
-});
-
-const TabTrigger = styled.button({
-  border: 'none',
-  backgroundColor: 'transparent',
-  display: 'flex',
-  alignItems: 'center',
-  height: '3rem',
-  width: '100%',
-  color: 'var(--gray-11)',
-  fontSize: 'var(--font-size-2)',
-  transition: 'color 200ms',
-  fontWeight: 'bold',
-  cursor: 'pointer',
-  ':focus': {
-    color: 'white',
-  },
-});
-
-const TabBrand = styled(TabTrigger)({
-  color: 'var(--gray-10)',
-  cursor: 'default',
-  ':focus': {
-    color: 'var(--gray-10)',
-  },
-});
-
-const TabContent = styled(Box)({
-  flex: 1,
-  flexDirection: 'column',
-  alignItems: 'stretch',
-  display: 'flex',
-  gap: 'var(--space-3)',
-  overflow: 'hidden',
-  backgroundColor: 'var(--block-color)',
-  borderRadius: 'var(--radius-4)',
-  padding: '1rem',
-});
diff --git a/packages/devtools/client/src/routes/config/[toolkit].[type]/page.loader.ts b/packages/devtools/client/src/routes/config/[toolkit].[type]/page.loader.ts
new file mode 100644
index 000000000000..5b712e626607
--- /dev/null
+++ b/packages/devtools/client/src/routes/config/[toolkit].[type]/page.loader.ts
@@ -0,0 +1,13 @@
+import { LoaderFunctionArgs, redirect } from '@modern-js/runtime/router';
+
+export default ({ params }: LoaderFunctionArgs) => {
+  if (!params.toolkit || !params.type) {
+    return redirect('/404');
+  } else if (!['framework', 'builder', 'bundler'].includes(params.toolkit)) {
+    return redirect('/404');
+  } else if (!['resolved', 'transformed'].includes(params.type)) {
+    return redirect('/404');
+  } else {
+    return null;
+  }
+};
diff --git a/packages/devtools/client/src/routes/config/bundler/transformed/page.tsx b/packages/devtools/client/src/routes/config/[toolkit].[type]/page.tsx
similarity index 52%
rename from packages/devtools/client/src/routes/config/bundler/transformed/page.tsx
rename to packages/devtools/client/src/routes/config/[toolkit].[type]/page.tsx
index ae3b4acef1b4..c9634a1b4d05 100644
--- a/packages/devtools/client/src/routes/config/bundler/transformed/page.tsx
+++ b/packages/devtools/client/src/routes/config/[toolkit].[type]/page.tsx
@@ -1,16 +1,19 @@
 import React from 'react';
 import { useSnapshot } from 'valtio';
+import { useParams } from '@modern-js/runtime/router';
 import { useStore } from '@/stores';
 import { ObjectInspector } from '@/components/ObjectInspector';
 
 const Page: React.FC = () => {
   const $store = useStore();
   const store = useSnapshot($store);
+  const { toolkit, type } = useParams() as {
+    toolkit: 'framework' | 'builder' | 'bundler';
+    type: 'resolved' | 'transformed';
+  };
+
   return (
-    <ObjectInspector
-      data={store.bundler.config.transformed}
-      sortObjectKeys={true}
-    />
+    <ObjectInspector data={store[toolkit].config[type]} sortObjectKeys={true} />
   );
 };
 
diff --git a/packages/devtools/client/src/routes/config/builder/resolved/page.tsx b/packages/devtools/client/src/routes/config/builder/resolved/page.tsx
deleted file mode 100644
index a4e7c381a02f..000000000000
--- a/packages/devtools/client/src/routes/config/builder/resolved/page.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import { useSnapshot } from 'valtio';
-import { useStore } from '@/stores';
-import { ObjectInspector } from '@/components/ObjectInspector';
-
-const Page: React.FC = () => {
-  const $store = useStore();
-  const store = useSnapshot($store);
-  return (
-    <ObjectInspector
-      data={store.builder.config.resolved}
-      sortObjectKeys={true}
-    />
-  );
-};
-
-export default Page;
diff --git a/packages/devtools/client/src/routes/config/builder/transformed/page.tsx b/packages/devtools/client/src/routes/config/builder/transformed/page.tsx
deleted file mode 100644
index d6a8d745e8fa..000000000000
--- a/packages/devtools/client/src/routes/config/builder/transformed/page.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import { useSnapshot } from 'valtio';
-import { useStore } from '@/stores';
-import { ObjectInspector } from '@/components/ObjectInspector';
-
-const Page: React.FC = () => {
-  const $store = useStore();
-  const store = useSnapshot($store);
-  return (
-    <ObjectInspector
-      data={store.builder.config.transformed}
-      sortObjectKeys={true}
-    />
-  );
-};
-
-export default Page;
diff --git a/packages/devtools/client/src/routes/config/bundler/resolved/page.tsx b/packages/devtools/client/src/routes/config/bundler/resolved/page.tsx
deleted file mode 100644
index d55115c70448..000000000000
--- a/packages/devtools/client/src/routes/config/bundler/resolved/page.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import { useSnapshot } from 'valtio';
-import { useStore } from '@/stores';
-import { ObjectInspector } from '@/components/ObjectInspector';
-
-const Page: React.FC = () => {
-  const $store = useStore();
-  const store = useSnapshot($store);
-  return (
-    <ObjectInspector
-      data={store.bundler.config.resolved}
-      sortObjectKeys={true}
-    />
-  );
-};
-
-export default Page;
diff --git a/packages/devtools/client/src/routes/config/framework/resolved/page.tsx b/packages/devtools/client/src/routes/config/framework/resolved/page.tsx
deleted file mode 100644
index 3ff10075edbf..000000000000
--- a/packages/devtools/client/src/routes/config/framework/resolved/page.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import { useSnapshot } from 'valtio';
-import { useStore } from '@/stores';
-import { ObjectInspector } from '@/components/ObjectInspector';
-
-const Page: React.FC = () => {
-  const $store = useStore();
-  const store = useSnapshot($store);
-  return (
-    <ObjectInspector
-      data={store.framework.config.resolved}
-      sortObjectKeys={true}
-    />
-  );
-};
-
-export default Page;
diff --git a/packages/devtools/client/src/routes/config/framework/transformed/page.tsx b/packages/devtools/client/src/routes/config/framework/transformed/page.tsx
deleted file mode 100644
index 0926a274fee1..000000000000
--- a/packages/devtools/client/src/routes/config/framework/transformed/page.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import { useSnapshot } from 'valtio';
-import { useStore } from '@/stores';
-import { ObjectInspector } from '@/components/ObjectInspector';
-
-const Page: React.FC = () => {
-  const $store = useStore();
-  const store = useSnapshot($store);
-  return (
-    <ObjectInspector
-      data={store.framework.config.transformed}
-      sortObjectKeys={true}
-    />
-  );
-};
-
-export default Page;
diff --git a/packages/devtools/client/src/routes/config/layout.config.tsx b/packages/devtools/client/src/routes/config/layout.config.tsx
new file mode 100644
index 000000000000..1cc85813b1e8
--- /dev/null
+++ b/packages/devtools/client/src/routes/config/layout.config.tsx
@@ -0,0 +1,117 @@
+import React from 'react';
+import { Select, Tooltip, Text, Box } from '@radix-ui/themes';
+import { useLocation, useNavigate } from '@modern-js/runtime/router';
+import _ from 'lodash';
+import styles from './layout.module.scss';
+
+const TooltipSelectItem: React.FC<{ name: string; describe: string[] }> = ({
+  name,
+  describe,
+}) => (
+  <Tooltip
+    key={name}
+    className={styles.tooltip}
+    side="right"
+    content={describe.map(line => (
+      <Text key={line} style={{ display: 'block' }}>
+        {line}
+      </Text>
+    ))}
+  >
+    <Select.Item value={name}>
+      <Box>{_.startCase(name)}</Box>
+    </Select.Item>
+  </Tooltip>
+);
+
+const TOOLKIT_LIST = [
+  {
+    name: 'framework',
+    describe: [
+      'Framework config is a superset of Builder config, ',
+      'extending it with additional configurations that ',
+      'include server-side capabilities and so on.',
+    ],
+  },
+  {
+    name: 'builder',
+    describe: [
+      'Builder provides wrapped building capabilities for scheduling Bundler, ',
+      'as well as other plugins and tools.',
+    ],
+  },
+  {
+    name: 'bundler',
+    describe: [
+      'Bundler is typically a low-level build tool like webpack or Rspack, ',
+      'and their configuration options differ significantly from higher-level tools.',
+    ],
+  },
+];
+
+const SelectToolkit: React.FC = () => {
+  const loc = useLocation();
+  const navigate = useNavigate();
+  const [toolkit, type] = loc.pathname.split('/').slice(2);
+
+  const handleValueChange = (value: string) => {
+    navigate(`/config/${value}/${type}`);
+  };
+
+  return (
+    <Select.Root size="1" value={toolkit} onValueChange={handleValueChange}>
+      <Select.Trigger>{toolkit}</Select.Trigger>
+      <Select.Content>
+        {TOOLKIT_LIST.map(({ name, describe }) => (
+          <TooltipSelectItem key={name} name={name} describe={describe} />
+        ))}
+      </Select.Content>
+    </Select.Root>
+  );
+};
+
+const CONFIG_TYPE = [
+  {
+    name: 'resolved',
+    describe: [
+      'The configuration content passed by the user or superior tools,',
+      'usually exposed to the plugin API for modification.',
+    ],
+  },
+  {
+    name: 'transformed',
+    describe: [
+      'The modified and frozen configuration objects,',
+      'typically exposed to the plugin API for consumption.',
+    ],
+  },
+];
+
+const SelectType: React.FC = () => {
+  const loc = useLocation();
+  const navigate = useNavigate();
+  const [toolkit, type] = loc.pathname.split('/').slice(2);
+
+  const handleValueChange = (value: string) => {
+    navigate(`/config/${toolkit}/${value}`);
+  };
+
+  return (
+    <Select.Root size="1" value={type} onValueChange={handleValueChange}>
+      <Select.Trigger>{type}</Select.Trigger>
+      <Select.Content>
+        {CONFIG_TYPE.map(({ name, describe }) => (
+          <TooltipSelectItem key={name} name={name} describe={describe} />
+        ))}
+      </Select.Content>
+    </Select.Root>
+  );
+};
+
+export const handle = {
+  breadcrumb: [
+    { title: 'Config' },
+    { title: <SelectToolkit /> },
+    { title: <SelectType /> },
+  ],
+};
diff --git a/packages/devtools/client/src/routes/config/layout.module.scss b/packages/devtools/client/src/routes/config/layout.module.scss
new file mode 100644
index 000000000000..9ad3b2a24d32
--- /dev/null
+++ b/packages/devtools/client/src/routes/config/layout.module.scss
@@ -0,0 +1,3 @@
+.tooltip {
+  --radix-tooltip-content-available-height: 20rem;
+}
diff --git a/packages/devtools/client/src/routes/config/layout.tsx b/packages/devtools/client/src/routes/config/layout.tsx
index 84c0fb334b6b..ce86038aba8e 100644
--- a/packages/devtools/client/src/routes/config/layout.tsx
+++ b/packages/devtools/client/src/routes/config/layout.tsx
@@ -1,68 +1,10 @@
-import { Suspense } from 'react';
-import { Outlet, useNavigate } from '@modern-js/runtime/router';
-import { Box, ScrollArea, Select } from '@radix-ui/themes';
-import styled from '@emotion/styled';
+import { Outlet } from '@modern-js/runtime/router';
+import { Box } from '@radix-ui/themes';
 
 export default function Layout() {
-  const navigate = useNavigate();
-  const handleSelect = (route: string) => {
-    navigate(route);
-  };
   return (
-    <Container>
-      <Box grow="0">
-        <Select.Root
-          onValueChange={handleSelect}
-          defaultValue="builder/transformed"
-        >
-          <Select.Trigger />
-          <Select.Content position="popper">
-            <Select.Group>
-              <Select.Label>Framework</Select.Label>
-              <Select.Item value="framework/resolved">
-                Resolved Framework Config
-              </Select.Item>
-              <Select.Item value="framework/transformed">
-                Transformed Framework Config
-              </Select.Item>
-            </Select.Group>
-            <Select.Separator />
-            <Select.Group>
-              <Select.Label>Builder</Select.Label>
-              <Select.Item value="builder/resolved">
-                Resolved Builder Config
-              </Select.Item>
-              <Select.Item value="builder/transformed">
-                Transformed Builder Config
-              </Select.Item>
-            </Select.Group>
-            <Select.Separator />
-            <Select.Group>
-              <Select.Label>Bundler</Select.Label>
-              <Select.Item value="bundler/resolved">
-                Resolved Bundler Configs
-              </Select.Item>
-              <Select.Item value="bundler/transformed">
-                Transformed Bundler Configs
-              </Select.Item>
-            </Select.Group>
-          </Select.Content>
-        </Select.Root>
-      </Box>
-      <Box grow="1" asChild>
-        <ScrollArea scrollbars="both">
-          <Suspense fallback={'loading...'}>
-            <Outlet />
-          </Suspense>
-        </ScrollArea>
-      </Box>
-    </Container>
+    <Box px="4">
+      <Outlet />
+    </Box>
   );
 }
-
-const Container = styled(Box)({
-  height: '100%',
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'stretch',
-});
diff --git a/packages/devtools/client/src/routes/context/layout.config.tsx b/packages/devtools/client/src/routes/context/layout.config.tsx
new file mode 100644
index 000000000000..5738b2434b16
--- /dev/null
+++ b/packages/devtools/client/src/routes/context/layout.config.tsx
@@ -0,0 +1,17 @@
+import { SelectLink } from '@/components/SelectLink';
+
+export const handle = {
+  breadcrumb: [
+    { title: 'Context' },
+    {
+      title: (
+        <SelectLink
+          items={[
+            { to: '/context/builder', title: 'Builder' },
+            { to: '/context/framework', title: 'Framework' },
+          ]}
+        />
+      ),
+    },
+  ],
+};
diff --git a/packages/devtools/client/src/routes/context/layout.tsx b/packages/devtools/client/src/routes/context/layout.tsx
index 3e381cbe0bd3..ce86038aba8e 100644
--- a/packages/devtools/client/src/routes/context/layout.tsx
+++ b/packages/devtools/client/src/routes/context/layout.tsx
@@ -1,38 +1,10 @@
-import { Suspense } from 'react';
-import { Outlet, useNavigate } from '@modern-js/runtime/router';
-import { Box, ScrollArea, Select } from '@radix-ui/themes';
-import styled from '@emotion/styled';
+import { Outlet } from '@modern-js/runtime/router';
+import { Box } from '@radix-ui/themes';
 
 export default function Layout() {
-  const navigate = useNavigate();
-  const handleSelect = (route: string) => {
-    navigate(route);
-  };
   return (
-    <Container>
-      <Box grow="0">
-        <Select.Root onValueChange={handleSelect} defaultValue="builder">
-          <Select.Trigger />
-          <Select.Content position="popper">
-            <Select.Item value="framework">Framework Context</Select.Item>
-            <Select.Item value="builder">Builder Context</Select.Item>
-          </Select.Content>
-        </Select.Root>
-      </Box>
-      <Box grow="1" asChild>
-        <ScrollArea scrollbars="both">
-          <Suspense fallback={'loading...'}>
-            <Outlet />
-          </Suspense>
-        </ScrollArea>
-      </Box>
-    </Container>
+    <Box px="4">
+      <Outlet />
+    </Box>
   );
 }
-
-const Container = styled(Box)({
-  height: '100%',
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'stretch',
-});
diff --git a/packages/devtools/client/src/routes/layout.config.tsx b/packages/devtools/client/src/routes/layout.config.tsx
new file mode 100644
index 000000000000..09bfcb914e69
--- /dev/null
+++ b/packages/devtools/client/src/routes/layout.config.tsx
@@ -0,0 +1,8 @@
+import { HiHomeModern } from 'react-icons/hi2';
+
+export const handle = {
+  breadcrumb: {
+    title: <HiHomeModern />,
+    pathname: '/overview',
+  },
+};
diff --git a/packages/devtools/client/src/routes/layout.module.scss b/packages/devtools/client/src/routes/layout.module.scss
new file mode 100644
index 000000000000..4d99a8b90543
--- /dev/null
+++ b/packages/devtools/client/src/routes/layout.module.scss
@@ -0,0 +1,77 @@
+@import '@/styles/theme.scss';
+
+.wrapper {
+  --navigator-width: var(--space-8);
+  --breadcrumb-height: var(--space-7);
+}
+
+.inner {
+  width: 100vw;
+  min-height: 100vh;
+  padding-left: var(--navigator-width);
+}
+
+.inner-right {
+  padding-top: var(--breadcrumb-height);
+  background-color: var(--gray-2);
+}
+
+.container {
+  min-height: calc(100vh - var(--breadcrumb-height));
+}
+
+.navigator {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: var(--navigator-width);
+  border-right: solid 1px var(--gray-3);
+  padding: var(--space-1) 0;
+}
+
+.breadcrumbs {
+  position: fixed;
+  top: 0;
+  left: var(--navigator-width);
+  right: 0;
+  width: auto;
+  height: var(--breadcrumb-height);
+  background-image: linear-gradient(
+    to bottom,
+    var(--color-panel-solid),
+    85%,
+    transparent
+  );
+}
+
+.tab-button {
+  display: flex;
+  width: var(--space-8);
+  padding: var(--space-1) var(--space-2);
+  gap: var(--space-1);
+  color: var(--gray-8);
+  transition: color 100ms;
+  align-items: center;
+  cursor: pointer;
+  &:global(.active), &:hover {
+    color: var(--gray-11);
+  }
+}
+
+.tab-button-inner {
+  border-radius: var(--radius-3);
+  transition: background-color 300ms;
+  .tab-button:global(.active) & {
+    background-color: var(--gray-4);
+  }
+}
+
+.fading-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+  background: linear-gradient(to bottom, var(--color-background), transparent);
+}
diff --git a/packages/devtools/client/src/routes/layout.tsx b/packages/devtools/client/src/routes/layout.tsx
index 204555596445..9daee57a45b8 100644
--- a/packages/devtools/client/src/routes/layout.tsx
+++ b/packages/devtools/client/src/routes/layout.tsx
@@ -1,25 +1,109 @@
-import '@radix-ui/themes/styles.css';
 import './layout.css';
-import styled from '@emotion/styled';
-import { Box, Theme } from '@radix-ui/themes';
-import { RootTabs } from './RootTabs';
-import { StoreContextProvider } from '@/stores';
+import React from 'react';
+import { NavLink, Outlet } from '@modern-js/runtime/router';
+import {
+  Box,
+  Flex,
+  ThemePanel,
+  Tooltip,
+  useThemeContext,
+  updateThemeAppearanceClass,
+} from '@radix-ui/themes';
+import { HiOutlineMoon, HiOutlineSun } from 'react-icons/hi2';
+import styles from './layout.module.scss';
+import { StoreContextProvider, useStoreSnapshot } from '@/stores';
+import { Theme } from '@/components/Theme';
+import { InternalTab } from '@/types';
+import { Breadcrumbs } from '@/components/Breadcrumbs';
+
+const NavigateButton: React.FC<{ tab: InternalTab }> = ({ tab }) => {
+  let to = '';
+  if (tab.view.type === 'builtin') {
+    to = tab.view.url;
+  } else if (tab.view.type === 'iframe') {
+    to = `/external/${tab.view.src}`;
+  } else {
+    throw new Error(`Invalid tab view of "${tab.name}".`);
+  }
+
+  return (
+    <Tooltip content={tab.title} side="right">
+      <NavLink to={to} className={styles.tabButton}>
+        <Flex
+          justify="center"
+          align="center"
+          p="1"
+          className={styles.tabButtonInner}
+        >
+          <Box height="5" width="5" asChild>
+            {tab.icon}
+          </Box>
+        </Flex>
+      </NavLink>
+    </Tooltip>
+  );
+};
+
+const AppearanceButton = () => {
+  const { appearance } = useThemeContext();
+
+  const handleClick = () => {
+    updateThemeAppearanceClass(appearance === 'light' ? 'dark' : 'light');
+  };
+
+  return (
+    <Tooltip content="Appearance" side="right">
+      <Box className={styles.tabButton} onClick={handleClick}>
+        <Flex
+          justify="center"
+          align="center"
+          p="1"
+          className={styles.tabButtonInner}
+        >
+          <Box height="5" width="5" asChild>
+            {appearance === 'dark' ? <HiOutlineMoon /> : <HiOutlineSun />}
+          </Box>
+        </Flex>
+      </Box>
+    </Tooltip>
+  );
+};
+
+const Navigator: React.FC = () => {
+  const { tabs } = useStoreSnapshot();
+
+  return (
+    <Flex direction="column" shrink="0" className={styles.navigator}>
+      {tabs.map(tab => (
+        <NavigateButton key={tab.name} tab={tab as any} />
+      ))}
+      <Box grow="1" />
+      <AppearanceButton />
+    </Flex>
+  );
+};
 
 export default function Layout() {
   return (
     <StoreContextProvider>
-      <Theme appearance="dark" className="dark">
-        <AppContainer>
-          <RootTabs />
-        </AppContainer>
+      <Theme
+        className={styles.wrapper}
+        accentColor="blue"
+        panelBackground="solid"
+      >
+        <Box className={styles.inner}>
+          <Box className={styles.innerRight}>
+            <Box className={styles.container}>
+              <Outlet />
+            </Box>
+          </Box>
+        </Box>
+        {process.env.NODE_ENV === 'development' && (
+          <ThemePanel defaultOpen={false} />
+        )}
+        <Navigator />
+        <Breadcrumbs className={styles.breadcrumbs} />
       </Theme>
     </StoreContextProvider>
   );
 }
-
-const AppContainer = styled(Box)({
-  width: '100vw',
-  height: '100vh',
-  overflow: 'hidden',
-  backgroundColor: '#090909',
-});
diff --git a/packages/devtools/client/src/routes/overview/heading.svg b/packages/devtools/client/src/routes/overview/heading.svg
index a496282e72bc..c25179e14745 100644
--- a/packages/devtools/client/src/routes/overview/heading.svg
+++ b/packages/devtools/client/src/routes/overview/heading.svg
@@ -1,5 +1,5 @@
 <svg width="455.127" height="76.954" viewBox="0 0 455.127 76.954" xmlns="http://www.w3.org/2000/svg">
-  <g id="svgGroup" stroke-linecap="round" fill-rule="evenodd" font-size="9pt" stroke="#d6d8db" stroke-width="0.25mm" fill="#d6d8db" style="stroke:#d6d8db;stroke-width:0.25mm;fill:#d6d8db">
+  <g id="svgGroup" stroke-linecap="round" fill="white" fill-rule="evenodd" font-size="9pt">
     <path d="M 23.096 75.977 L 0 75.977 L 0 4.59 L 24.707 4.59 A 55.919 55.919 0 0 1 33.49 5.243 Q 38.313 6.01 42.334 7.681 A 32.184 32.184 0 0 1 44.238 8.545 Q 52.246 12.5 56.421 20.117 A 32.438 32.438 0 0 1 59.678 29.175 Q 60.481 33.044 60.581 37.488 A 56.775 56.775 0 0 1 60.596 38.77 A 55.441 55.441 0 0 1 59.943 47.517 Q 58.856 54.315 55.957 59.473 Q 51.318 67.725 42.896 71.851 Q 34.473 75.977 23.096 75.977 Z M 24.902 20.166 L 19.287 20.166 L 19.287 60.156 L 23.584 60.156 A 23.978 23.978 0 0 0 28.389 59.707 Q 33.591 58.641 36.475 55.054 A 15.925 15.925 0 0 0 39.053 50.244 Q 40.576 45.85 40.576 39.453 A 40.21 40.21 0 0 0 40.342 34.984 Q 39.94 31.39 38.843 28.687 A 14.688 14.688 0 0 0 36.837 25.153 A 11.922 11.922 0 0 0 33.643 22.29 A 13.658 13.658 0 0 0 29.587 20.664 Q 27.856 20.259 25.845 20.184 A 24.996 24.996 0 0 0 24.902 20.166 Z" id="0" vector-effect="non-scaling-stroke"/>
     <path d="M 123.291 44.971 L 123.291 53.467 L 89.16 53.467 A 10.988 10.988 0 0 0 90.044 57.31 A 9.877 9.877 0 0 0 92.407 60.596 Q 95.41 63.379 101.27 63.379 Q 106.445 63.379 110.767 62.354 A 42.981 42.981 0 0 0 116.273 60.633 A 52.544 52.544 0 0 0 119.678 59.18 L 119.678 72.9 Q 115.674 75 110.938 75.977 A 41.172 41.172 0 0 1 107.079 76.567 Q 103.519 76.953 98.975 76.953 A 40.077 40.077 0 0 1 90.603 76.113 A 32.226 32.226 0 0 1 84.033 73.975 A 22.906 22.906 0 0 1 73.657 64.746 Q 70.368 59.314 69.938 51.19 A 47.413 47.413 0 0 1 69.873 48.682 Q 69.873 38.721 73.291 32.3 A 22.599 22.599 0 0 1 78.792 25.436 A 21.455 21.455 0 0 1 82.861 22.778 A 28.536 28.536 0 0 1 91.334 20.114 A 37.588 37.588 0 0 1 97.168 19.678 Q 105.083 19.678 110.877 22.388 A 24.328 24.328 0 0 1 111.084 22.485 Q 116.943 25.293 120.117 30.908 A 23.114 23.114 0 0 1 122.498 37.231 Q 123.13 40.033 123.258 43.284 A 42.733 42.733 0 0 1 123.291 44.971 Z M 89.551 41.455 L 105.957 41.455 A 11.664 11.664 0 0 0 105.553 38.576 A 10.108 10.108 0 0 0 104.98 37.012 Q 104.053 35.01 102.271 33.838 A 6.912 6.912 0 0 0 99.862 32.861 A 9.817 9.817 0 0 0 97.852 32.666 A 8.801 8.801 0 0 0 94.934 33.133 A 7.628 7.628 0 0 0 92.212 34.79 A 7.286 7.286 0 0 0 90.54 37.211 Q 90.08 38.257 89.817 39.557 A 16.942 16.942 0 0 0 89.551 41.455 Z" id="1" vector-effect="non-scaling-stroke"/>
     <path d="M 167.48 75.977 L 148.584 75.977 L 127.49 20.654 L 147.412 20.654 L 156.787 53.369 Q 156.924 53.78 157.254 55.389 A 112.258 112.258 0 0 1 157.3 55.615 A 19.061 19.061 0 0 1 157.591 57.518 A 14.863 14.863 0 0 1 157.666 58.984 L 158.008 58.984 A 14.573 14.573 0 0 1 158.26 56.239 A 13.298 13.298 0 0 1 158.35 55.811 Q 158.611 54.652 158.787 53.893 A 136.744 136.744 0 0 1 158.887 53.467 L 168.701 20.654 L 188.574 20.654 L 167.48 75.977 Z" id="2" vector-effect="non-scaling-stroke"/>
diff --git a/packages/devtools/client/src/routes/overview/layout.config.tsx b/packages/devtools/client/src/routes/overview/layout.config.tsx
new file mode 100644
index 000000000000..be375a242c40
--- /dev/null
+++ b/packages/devtools/client/src/routes/overview/layout.config.tsx
@@ -0,0 +1,5 @@
+export const handle = {
+  breadcrumb: {
+    title: 'Overview',
+  },
+};
diff --git a/packages/devtools/client/src/routes/overview/page.module.scss b/packages/devtools/client/src/routes/overview/page.module.scss
new file mode 100644
index 000000000000..0b8449ee201e
--- /dev/null
+++ b/packages/devtools/client/src/routes/overview/page.module.scss
@@ -0,0 +1,79 @@
+.container {
+  max-width: 40rem;
+}
+
+.bottom-tip {
+  opacity: 0.3;
+  transition: opacity 300ms;
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.indicate-card {
+  border-radius: var(--radius-6);
+  box-shadow: var(--shadow-4);
+  padding: var(--space-5);
+  :global(.dark) & {
+    background-color: var(--gray-1);
+  }
+}
+
+.primary-card {
+  flex: 4;
+  min-width: max-content;
+  background-color: var(--blue-9);
+  :global(.dark) & {
+    background-color: var(--blue-10);
+  }
+  button {
+    border: none;
+    border-radius: var(--radius-thumb);
+    font-size: var(--font-size-1);
+    font-weight: var(--font-weight-medium);
+    padding: var(--space-1) var(--space-2);
+    overflow: hidden;
+    background-color: var(--black-a2);
+    &:hover,
+    &:active {
+      background-color: var(--black-a1);
+    }
+  }
+}
+
+.compile-time-card {
+  flex: 2;
+}
+
+.plugin-card {
+  flex: 2;
+  min-width: 15rem;
+}
+
+.info-card {
+  flex: 2;
+  min-width: 15rem;
+}
+
+.indicate-bar {
+  font-size: var(--font-size-1);
+  color: var(--gray-9);
+  min-width: var(--space-1);
+  white-space: nowrap;
+  flex: 1;
+
+  &::before {
+    content: '';
+    display: block;
+    height: var(--space-1);
+    width: 100%;
+    border-radius: var(--radius-thumb);
+    text-align: center;
+  }
+  &:nth-child(odd)::before {
+    background-color: var(--blue-9);
+  }
+  &:nth-child(even)::before {
+    background-color: var(--red-9);
+  }
+}
diff --git a/packages/devtools/client/src/routes/overview/page.tsx b/packages/devtools/client/src/routes/overview/page.tsx
index 808666cce88d..7d4ccbca4da8 100644
--- a/packages/devtools/client/src/routes/overview/page.tsx
+++ b/packages/devtools/client/src/routes/overview/page.tsx
@@ -1,14 +1,17 @@
+import { Box, Flex, Kbd, Link, Text, Theme } from '@radix-ui/themes';
+import type { BoxProps } from '@radix-ui/themes/dist/cjs/components/box';
+import { clsx } from 'clsx';
 import React from 'react';
-import { Box, Card, Flex, Text } from '@radix-ui/themes';
 import {
-  ArchiveIcon,
-  CubeIcon,
-  MixIcon,
-  GlobeIcon,
-} from '@radix-ui/react-icons';
+  HiOutlineDocumentText,
+  HiLink,
+  HiOutlineClock,
+  HiOutlinePuzzlePiece,
+} from 'react-icons/hi2';
+import { parseURL } from 'ufo';
 import { useSnapshot } from 'valtio';
-import styled from '@emotion/styled';
 import srcHeading from './heading.svg';
+import styles from './page.module.scss';
 import { useStore } from '@/stores';
 
 const BUNDLER_PACKAGE_NAMES = {
@@ -16,9 +19,20 @@ const BUNDLER_PACKAGE_NAMES = {
   rspack: '@rspack/core',
 } as const;
 
+const IndicateCard: React.FC<
+  BoxProps & React.RefAttributes<HTMLDivElement>
+> = ({ children, className, ...props }) => {
+  return (
+    <Box {...props} className={clsx(styles.indicateCard, className)}>
+      {children}
+    </Box>
+  );
+};
+
 const Page: React.FC = () => {
   const $store = useStore();
   const store = useSnapshot($store);
+  const isMacOS = window.navigator.userAgent.includes('Mac OS');
   const { toolsType } = store.framework.context;
   if (toolsType !== 'app-tools') {
     throw Error();
@@ -27,102 +41,108 @@ const Page: React.FC = () => {
   const toolsPackageVer = store.dependencies[toolsPackage]!;
 
   const { bundlerType } = store.builder.context;
-  const bundlerVer = store.dependencies[BUNDLER_PACKAGE_NAMES[bundlerType]];
+  const bundlerPackage = BUNDLER_PACKAGE_NAMES[bundlerType];
+  const bundlerPackageVer = store.dependencies[bundlerPackage];
 
-  const numFrameworkPlugin = store.framework.config.transformed.plugins.length;
+  // const numFrameworkPlugin = store.framework.config.transformed.plugins.length;
 
   return (
-    <Flex direction="column" align="center">
-      <Flex gap="2">
-        <LogoImage src={store.assets.logo} />
-        <LogoHeading src={srcHeading} />
-      </Flex>
-      <Description>
-        {store.name.formalName} DevTools v{store.version}
-      </Description>
-      <Flex wrap="wrap" gap="3" mt="7" width="100%" justify="center">
-        <Box>
-          <Indicator icon={<ArchiveIcon width="36" height="36" color="gray" />}>
-            Compiled with {(store.compileTimeCost / 1000).toFixed(2)}s
-          </Indicator>
-        </Box>
-        <Box>
-          <Indicator
-            title="Tools"
-            icon={<CubeIcon width="36" height="36" color="gray" />}
-          >
-            <Text color="gray" size="2">
-              <Box>
-                {toolsType}@{toolsPackageVer}
-              </Box>
-              <Box>
-                {bundlerType}@{bundlerVer}
-              </Box>
-              <Box>react@{store.dependencies.react}</Box>
-            </Text>
-          </Indicator>
-        </Box>
-        <Box>
-          <Indicator
-            title="Plugin"
-            icon={<MixIcon width="36" height="36" color="gray" />}
-          >
+    <Flex direction="column" align="center" p="4">
+      <Flex
+        wrap="wrap"
+        gap="4"
+        mb="8"
+        justify="center"
+        className={styles.container}
+      >
+        <IndicateCard className={styles.primaryCard}>
+          <Theme appearance="dark" hasBackground={false} asChild>
+            <Flex
+              gap="2"
+              height="100%"
+              justify="center"
+              direction="column"
+              align="start"
+            >
+              <img src={srcHeading} style={{ width: '8rem' }} />
+              <Flex gap="2">
+                <button type="button">v2.35.1</button>
+              </Flex>
+              <Text as="p" size="1">
+                Powered by {toolsPackage}@{toolsPackageVer}
+              </Text>
+            </Flex>
+          </Theme>
+        </IndicateCard>
+        <IndicateCard className={styles.infoCard}>
+          <Flex justify="between" align="center" height="100%">
             <Box>
-              <Text size="2" color="gray">
-                {numFrameworkPlugin} framework plugins
+              <Text color="gray">Visit our website</Text>
+              <Flex align="center" asChild>
+                <Link
+                  href={store.announcement.fallback}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <HiLink />
+                  <Text>{parseURL(store.announcement.fallback).host}</Text>
+                </Link>
+              </Flex>
+            </Box>
+            <Box color="gray" asChild>
+              <HiOutlineDocumentText size="50" color="var(--gray-6)" />
+            </Box>
+          </Flex>
+        </IndicateCard>
+        <IndicateCard className={styles.pluginCard}>
+          <Flex align="center" justify="between" height="100%" gap="6">
+            <Box>
+              <Text
+                as="p"
+                size="8"
+                weight="bold"
+                style={{ color: 'var(--gray-11)' }}
+                mb="2"
+              >
+                {store.framework.context.plugins.length}
+              </Text>
+              <Text as="p" size="1" color="gray">
+                Framework Plugins
               </Text>
             </Box>
+            <HiOutlinePuzzlePiece size="50" color="var(--gray-6)" />
+          </Flex>
+        </IndicateCard>
+        <IndicateCard className={styles.compileTimeCard}>
+          <Flex align="center" justify="between" height="100%" gap="6">
             <Box>
-              <Text size="2" color="gray">
-                {store.framework.context.plugins.length} builder plugins
+              <Text
+                as="p"
+                size="8"
+                weight="bold"
+                style={{ color: 'var(--gray-11)' }}
+              >
+                {(store.compileTimeCost / 1000).toFixed(2)}s
+              </Text>
+              <Text as="p" size="1" color="gray">
+                Compiled in {bundlerPackage}@{bundlerPackageVer}
               </Text>
             </Box>
-          </Indicator>
-        </Box>
-        <Box>
-          <Indicator icon={<GlobeIcon width="36" height="36" color="gray" />}>
-            {store.framework.context.serverRoutes.length} Endpoints
-          </Indicator>
-        </Box>
+            <HiOutlineClock size="50" color="var(--gray-6)" />
+          </Flex>
+        </IndicateCard>
+      </Flex>
+      <Flex align="center" className={styles.bottomTip}>
+        <Text color="gray" size="2">
+          Use
+        </Text>
+        <Kbd mx="2">Shift + {isMacOS ? 'Opt' : 'Alt'} + D</Kbd>
+        <Text color="gray" size="2">
+          to open DevTools
+        </Text>
       </Flex>
     </Flex>
   );
 };
 
 export default Page;
-
-interface IndicatorProps extends React.PropsWithChildren {
-  title?: string;
-  icon: React.ReactElement;
-}
-
-const Indicator: React.FC<IndicatorProps> = ({ title, icon, children }) => {
-  return (
-    <Card>
-      <Flex gap="4" p="2">
-        <Flex align="center" direction="column" gap="1">
-          {icon}
-          <Text size="1" color="gray">
-            {title ?? children}
-          </Text>
-        </Flex>
-        {title && <Box>{children}</Box>}
-      </Flex>
-    </Card>
-  );
-};
-
-const Description = styled(Text)({
-  fontSize: 'var(--font-size-1)',
-  color: 'var(--gray-7)',
-});
-
-const LogoHeading = styled.img({
-  width: '10rem',
-});
-
-const LogoImage = styled.img({
-  width: '2rem',
-  height: '2rem',
-  objectFit: 'contain',
-});
diff --git a/packages/devtools/client/src/routes/pages/BaseRoute.tsx b/packages/devtools/client/src/routes/pages/BaseRoute.tsx
deleted file mode 100644
index fac45014c31b..000000000000
--- a/packages/devtools/client/src/routes/pages/BaseRoute.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import React, { useContext, useState } from 'react';
-import type { ServerRoute as IServerRoute } from '@modern-js/types';
-import * as Collapsible from '@radix-ui/react-collapsible';
-import { Box, Card, Text } from '@radix-ui/themes';
-import { CaretSortIcon } from '@radix-ui/react-icons';
-import { parseURL } from 'ufo';
-import styled from '@emotion/styled';
-import { MatchUrlContext } from './MatchUrl';
-
-export interface BaseRouteProps extends React.PropsWithChildren {
-  badge: React.ReactElement;
-  route: IServerRoute;
-  title: string;
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
-}
-
-export const BaseRoute: React.FC<BaseRouteProps> = ({
-  badge,
-  route,
-  title,
-  children,
-  open,
-  onOpenChange,
-}) => {
-  const url = useContext(MatchUrlContext);
-  const [_open, _setOpen] = useState(false);
-  const isMatching = Boolean(url);
-  const { pathname } = parseURL(url);
-  const isMatched =
-    pathname === route.urlPath || pathname.startsWith(`${route.urlPath}/`);
-  const isOpen = isMatched || (open ?? _open);
-
-  return (
-    <Container>
-      <Collapsible.Root open={isOpen} onOpenChange={onOpenChange ?? _setOpen}>
-        <CollapsibleTrigger>
-          {badge}
-          <UrlText data-miss-matched={isMatching && !isMatched}>
-            {title}
-          </UrlText>
-          <Box grow="1" />
-          <CollapsedMark open={isOpen}>
-            <CaretSortIcon />
-          </CollapsedMark>
-        </CollapsibleTrigger>
-        <CollapsibleContent>{children}</CollapsibleContent>
-      </Collapsible.Root>
-    </Container>
-  );
-};
-
-const Container = styled(Card)({
-  backgroundColor: '#181818',
-});
-
-const CollapsibleTrigger = styled(Collapsible.Trigger)({
-  all: 'unset',
-  width: '100%',
-  display: 'flex',
-  gap: 'var(--space-2)',
-  alignItems: 'center',
-});
-
-const CollapsibleContent = styled(Collapsible.Content)({
-  paddingTop: 'var(--space-2)',
-});
-
-const UrlText = styled(Text)({
-  color: 'var(--gray-12)',
-  fontSize: 'var(--font-size-2)',
-  transition: 'color 200ms',
-  '&[data-miss-matched="true"]': {
-    color: 'var(--gray-10)',
-  },
-});
-
-const CollapsedMark = styled(Box)<{ open?: boolean }>(props => ({
-  backgroundColor: props.open ? 'var(--gray-4)' : 'transparent',
-  height: 'var(--font-size-5)',
-  width: 'var(--font-size-5)',
-  borderRadius: 'var(--radius-2)',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  transition: 'background-color 100ms',
-}));
diff --git a/packages/devtools/client/src/routes/pages/EntryRoute/ClientRouteStats/index.ts b/packages/devtools/client/src/routes/pages/EntryRoute/ClientRouteStats/index.ts
deleted file mode 100644
index 4dbc78ebd1c4..000000000000
--- a/packages/devtools/client/src/routes/pages/EntryRoute/ClientRouteStats/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './ClientRouteStats';
diff --git a/packages/devtools/client/src/routes/pages/EntryRoute/EntryRoute.tsx b/packages/devtools/client/src/routes/pages/EntryRoute/EntryRoute.tsx
deleted file mode 100644
index d1a1cafd84e5..000000000000
--- a/packages/devtools/client/src/routes/pages/EntryRoute/EntryRoute.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import { Badge, Flex, Box } from '@radix-ui/themes';
-import { ServerRoute } from '@modern-js/types';
-import { BaseRoute } from '../BaseRoute';
-import { EntryStats } from './EntryStats';
-import { ClientRouteStats } from './ClientRouteStats';
-
-export interface EntryRouteProps {
-  route: ServerRoute;
-}
-
-const EntryRoute: React.FC<EntryRouteProps> = ({ route }) => {
-  return (
-    <BaseRoute badge={badge} route={route} title={route.urlPath}>
-      <Flex direction="column" gap="2">
-        <EntryStats route={route} />
-        <Box style={{ overflow: 'scroll hidden' }}>
-          <ClientRouteStats route={route} />
-        </Box>
-      </Flex>
-    </BaseRoute>
-  );
-};
-
-export default EntryRoute;
-
-const badge = <Badge color="cyan">Entry</Badge>;
diff --git a/packages/devtools/client/src/routes/pages/EntryRoute/index.ts b/packages/devtools/client/src/routes/pages/EntryRoute/index.ts
deleted file mode 100644
index 4fb5e28ea1f8..000000000000
--- a/packages/devtools/client/src/routes/pages/EntryRoute/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './EntryRoute';
diff --git a/packages/devtools/client/src/routes/pages/MatchUrl.tsx b/packages/devtools/client/src/routes/pages/MatchUrl.tsx
deleted file mode 100644
index 8aa564d303e5..000000000000
--- a/packages/devtools/client/src/routes/pages/MatchUrl.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import { createContext } from 'react';
-
-export const MatchUrlContext = createContext<string>('');
diff --git a/packages/devtools/client/src/routes/pages/layout.config.ts b/packages/devtools/client/src/routes/pages/layout.config.ts
new file mode 100644
index 000000000000..8ac5d6ebe059
--- /dev/null
+++ b/packages/devtools/client/src/routes/pages/layout.config.ts
@@ -0,0 +1,5 @@
+export const handle = {
+  breadcrumb: {
+    title: 'Pages',
+  },
+};
diff --git a/packages/devtools/client/src/routes/pages/layout.module.scss b/packages/devtools/client/src/routes/pages/layout.module.scss
new file mode 100644
index 000000000000..ad00e6524fa5
--- /dev/null
+++ b/packages/devtools/client/src/routes/pages/layout.module.scss
@@ -0,0 +1,3 @@
+.container {
+  max-width: 40rem;
+}
\ No newline at end of file
diff --git a/packages/devtools/client/src/routes/pages/layout.tsx b/packages/devtools/client/src/routes/pages/layout.tsx
new file mode 100644
index 000000000000..8b7c134c0e74
--- /dev/null
+++ b/packages/devtools/client/src/routes/pages/layout.tsx
@@ -0,0 +1,11 @@
+import { Outlet } from '@modern-js/runtime/router';
+import { Box } from '@radix-ui/themes';
+import styles from './layout.module.scss';
+
+export default function Layout() {
+  return (
+    <Box px="4" mx="auto" pb="4" className={styles.container}>
+      <Outlet />
+    </Box>
+  );
+}
diff --git a/packages/devtools/client/src/routes/pages/page.module.scss b/packages/devtools/client/src/routes/pages/page.module.scss
new file mode 100644
index 000000000000..18f397337f57
--- /dev/null
+++ b/packages/devtools/client/src/routes/pages/page.module.scss
@@ -0,0 +1,9 @@
+.input {
+  position: fixed;
+  padding-top: var(--breadcrumb-height);
+  padding-bottom: 10px;
+  top: 0;
+  left: var(--navigator-width);
+  right: 0;
+  background-image: linear-gradient(to bottom, var(--gray-2), 95%, transparent);
+}
diff --git a/packages/devtools/client/src/routes/pages/page.tsx b/packages/devtools/client/src/routes/pages/page.tsx
index 1468f7811f84..4fe28392083d 100644
--- a/packages/devtools/client/src/routes/pages/page.tsx
+++ b/packages/devtools/client/src/routes/pages/page.tsx
@@ -1,62 +1,73 @@
-import styled from '@emotion/styled';
-import { Box, Text, TextField } from '@radix-ui/themes';
+import { Box, Flex, TextField } from '@radix-ui/themes';
 import React, { useState } from 'react';
 import { useSnapshot } from 'valtio';
-import { MatchUrlContext } from './MatchUrl';
-import { ServerRoute } from './ServerRoute';
+import { parseURL, withTrailingSlash } from 'ufo';
+import { HiOutlineArrowsRightLeft } from 'react-icons/hi2';
+import styles from './page.module.scss';
 import { useStore } from '@/stores';
+import {
+  MatchServerRouteValue,
+  MatchUrlContext,
+} from '@/components/ServerRoute/Context';
+import { ServerRoute } from '@/components/ServerRoute/Route';
 
 const Page: React.FC = () => {
   const $store = useStore();
   const store = useSnapshot($store);
   const { serverRoutes } = store.framework.context;
 
-  const [testingUrl, setTestingUrl] = useState<string>('');
+  const [matchContext, setMatchContext] = useState<MatchServerRouteValue>({
+    url: '',
+  });
+  const handleUrlInput = (url: string) => {
+    const { pathname } = parseURL(url);
+    const matched = serverRoutes.find(
+      route =>
+        pathname === route.urlPath ||
+        pathname.startsWith(withTrailingSlash(route.urlPath)),
+    );
+    setMatchContext({ url, matched });
+  };
 
   return (
-    <MatchUrlContext.Provider value={testingUrl}>
-      <Container>
-        <Box>
-          <TextField.Root>
-            <TextField.Slot>
-              <Text size="2">test:</Text>
-            </TextField.Slot>
-            <TextField.Input
-              placeholder="/foo?bar#baz"
-              onChange={e => setTestingUrl(e.target.value)}
-              type="search"
-              autoComplete="false"
-              autoCapitalize="false"
-              autoCorrect="false"
-            />
-          </TextField.Root>
+    <MatchUrlContext.Provider value={matchContext}>
+      <Flex
+        position="relative"
+        direction="column"
+        gap="2"
+        align="stretch"
+        justify="between"
+        pt="8"
+      >
+        {serverRoutes.map(route => (
+          <ServerRoute key={route.entryPath} route={route} />
+        ))}
+        <Box mb="2" className={styles.input}>
+          <Box
+            style={{
+              maxWidth: '40rem',
+              margin: '0 auto',
+              padding: '0 var(--space-4)',
+            }}
+          >
+            <TextField.Root>
+              <TextField.Slot>
+                <HiOutlineArrowsRightLeft />
+              </TextField.Slot>
+              <TextField.Input
+                placeholder="/foo?bar#baz"
+                onChange={e => handleUrlInput(e.target.value)}
+                type="url"
+                autoComplete="false"
+                autoCapitalize="false"
+                autoCorrect="false"
+              />
+            </TextField.Root>
+          </Box>
         </Box>
-        <Box height="2" />
-        <Box style={{ overflow: 'hidden scroll' }}>
-          <RoutesContainer>
-            {serverRoutes.map(route => (
-              <ServerRoute key={route.entryPath} route={route} />
-            ))}
-          </RoutesContainer>
-        </Box>
-      </Container>
+      </Flex>
     </MatchUrlContext.Provider>
   );
 };
 
 export default Page;
-
-const Container = styled(Box)({
-  display: 'flex',
-  flexDirection: 'column',
-  height: '100%',
-});
-
-const RoutesContainer = styled(Box)({
-  display: 'flex',
-  flex: '0',
-  flexDirection: 'column',
-  alignItems: 'stretch',
-  gap: 'var(--space-2)',
-  justifyContent: 'space-between',
-});
diff --git a/packages/devtools/client/src/stores/index.tsx b/packages/devtools/client/src/stores/index.tsx
index 9008010da24f..d7461ad46912 100644
--- a/packages/devtools/client/src/stores/index.tsx
+++ b/packages/devtools/client/src/stores/index.tsx
@@ -95,6 +95,10 @@ export const StoreContextProvider: FC<{ children: ReactElement }> = ({
     name: deferred.clientDefinition.promise.then(def => def.name),
     packages: deferred.clientDefinition.promise.then(def => def.packages),
     assets: deferred.clientDefinition.promise.then(def => def.assets),
+    announcement: deferred.clientDefinition.promise.then(
+      def => def.announcement,
+    ),
+    breadcrumb: [],
   }));
 
   useAsync(async () => {
diff --git a/packages/devtools/client/src/styles/breakpoints.scss b/packages/devtools/client/src/styles/breakpoints.scss
new file mode 100644
index 000000000000..0757a56dff67
--- /dev/null
+++ b/packages/devtools/client/src/styles/breakpoints.scss
@@ -0,0 +1,5 @@
+@custom-media --xs (min-width: 520px);
+@custom-media --sm (min-width: 768px);
+@custom-media --md (min-width: 1024px);
+@custom-media --lg (min-width: 1280px);
+@custom-media --xl (min-width: 1640px);
diff --git a/packages/devtools/client/src/styles/theme.scss b/packages/devtools/client/src/styles/theme.scss
new file mode 100644
index 000000000000..27713af91bd1
--- /dev/null
+++ b/packages/devtools/client/src/styles/theme.scss
@@ -0,0 +1,6 @@
+@import '@radix-ui/themes/styles.css';
+@import './breakpoints.scss';
+
+button {
+  cursor: pointer;
+}
\ No newline at end of file
diff --git a/packages/devtools/client/src/types/index.ts b/packages/devtools/client/src/types/index.ts
index c53efdfafb42..b178e3b38275 100644
--- a/packages/devtools/client/src/types/index.ts
+++ b/packages/devtools/client/src/types/index.ts
@@ -12,9 +12,14 @@ import type {
   TransformedFrameworkConfig,
 } from '@modern-js/devtools-kit';
 import { FrameworkConfig } from '@modern-js/devtools-kit';
-import { ReactElement } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import { Promisable } from 'type-fest';
 
+export interface BreadcrumbItem {
+  title: ReactNode;
+  to: string;
+}
+
 export interface StoreContextValue {
   dataSource: string;
   framework: {
@@ -45,6 +50,11 @@ export interface StoreContextValue {
   name: Promise<NameDefinition>;
   packages: Promise<PackageDefinition>;
   assets: Promise<AssetDefinition>;
+  breadcrumb: BreadcrumbItem[];
+  announcement: Promise<{
+    src: string;
+    fallback: string;
+  }>;
 }
 
 export interface BuiltinTabView {
diff --git a/packages/devtools/kit/package.json b/packages/devtools/kit/package.json
index cffb5661d9cd..9c9226ba2f97 100644
--- a/packages/devtools/kit/package.json
+++ b/packages/devtools/kit/package.json
@@ -17,21 +17,34 @@
   ],
   "version": "2.36.0",
   "jsnext:source": "./src/index.ts",
-  "types": "./src/index.ts",
+  "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "exports": {
     ".": {
       "jsnext:source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
+    "./runtime": {
+      "jsnext:source": "./src/runtime/index.ts",
+      "types": "./dist/runtime/index.d.ts",
+      "default": "./dist/runtime/index.js"
+    },
     "./package.json": {
       "default": "./package.json"
     }
   },
+  "typesVersions": {
+    "*": {
+      "runtime": [
+        "./dist/runtime/index.d.ts"
+      ]
+    }
+  },
   "scripts": {
     "prepublishOnly": "only-allow-pnpm",
     "new": "modern-lib new",
-    "dev": "SKIP_DTS=true modern-lib build --watch",
+    "dev": "modern-lib build --watch",
     "build": "modern-lib build",
     "test": "jest --passWithNoTests"
   },
@@ -39,6 +52,7 @@
     "@geist-ui/core": "^2.3.8",
     "@modern-js/types": "workspace:*",
     "@modern-js/utils": "workspace:*",
+    "@radix-ui/themes": "^2.0.0",
     "ufo": "^1.2.0",
     "ws": "8.13.0"
   },
diff --git a/packages/devtools/kit/src/client.ts b/packages/devtools/kit/src/client.ts
index e53c5f761282..da5a2b2ad893 100644
--- a/packages/devtools/kit/src/client.ts
+++ b/packages/devtools/kit/src/client.ts
@@ -32,12 +32,21 @@ export class AssetDefinition {
   logo: string = logo;
 }
 
+export class AnnouncementDefinition {
+  src: string =
+    'https://raw.githubusercontent.com/web-infra-dev/modern.js/main/ANNOUNCEMENT.md';
+
+  fallback: string = 'https://modernjs.dev/';
+}
+
 export class ClientDefinition {
   name: NameDefinition = new NameDefinition();
 
   packages: PackageDefinition = new PackageDefinition();
 
   assets: AssetDefinition = new AssetDefinition();
+
+  announcement: AnnouncementDefinition = new AnnouncementDefinition();
 }
 
 export interface IframeTabView {
diff --git a/packages/devtools/mount/modern.config.ts b/packages/devtools/mount/modern.config.ts
index c1c04ae6f4fb..5fee5db647cd 100644
--- a/packages/devtools/mount/modern.config.ts
+++ b/packages/devtools/mount/modern.config.ts
@@ -13,6 +13,10 @@ export default defineConfig<'rspack'>({
         disableMount: true,
       },
     },
+    preEntry: [
+      require.resolve('modern-normalize/modern-normalize.css'),
+      require.resolve('@radix-ui/themes/styles.css'),
+    ],
     globalVars: {
       'process.env.VERSION': packageMeta.version,
       'process.env.DEVTOOLS_MARK': DEVTOOLS_MARK,
@@ -23,7 +27,6 @@ export default defineConfig<'rspack'>({
     legalComments: 'linked',
     disableCssExtract: true,
     disableFilenameHash: true,
-    enableCssModuleTSDeclaration: true,
     distPath: {
       js: './',
     },
diff --git a/packages/devtools/mount/package.json b/packages/devtools/mount/package.json
index 1fee48acf847..ea5d9377c44c 100644
--- a/packages/devtools/mount/package.json
+++ b/packages/devtools/mount/package.json
@@ -16,8 +16,10 @@
   "engines": {
     "node": ">=14.0.0"
   },
-  "dependencies": {},
+  "dependencies": {
+  },
   "devDependencies": {
+    "modern-normalize": "^2.0.0",
     "@modern-js-app/eslint-config": "workspace:*",
     "@modern-js/app-tools": "workspace:*",
     "@modern-js/builder-rspack-provider": "workspace:*",
@@ -25,14 +27,14 @@
     "@modern-js/eslint-config": "workspace:*",
     "@modern-js/runtime": "workspace:*",
     "@modern-js/tsconfig": "workspace:*",
-    "@radix-ui/themes": "^1.1.2",
+    "@radix-ui/themes": "^2.0.0",
     "@stitches/react": "^1.2.8",
     "@types/jest": "~29.2.4",
-    "lodash-es": "^4.17.21",
     "@types/lodash-es": "^4.17.9",
     "@types/node": "~16.11.7",
     "@types/react": "~18.0.26",
     "@types/react-dom": "~18.0.10",
+    "lodash-es": "^4.17.21",
     "nanoid": "3.3.4",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
diff --git a/packages/devtools/mount/src/components/Devtools/Action.module.scss b/packages/devtools/mount/src/components/Devtools/Action.module.scss
index e0f67a1dfc9a..09987a469a70 100644
--- a/packages/devtools/mount/src/components/Devtools/Action.module.scss
+++ b/packages/devtools/mount/src/components/Devtools/Action.module.scss
@@ -19,16 +19,13 @@
   right: 10px;
   width: max-content;
   height: max-content;
-  padding: 0.25rem 0.5rem;
-  font-size: 0.75rem;
   display: flex;
-  gap: 0.25rem;
-  border: 1px solid #011c64;
-  background: linear-gradient(to bottom, #212121, #1e1e1e, #212121);
-  box-shadow: 0 0 3px #011c64;
-  color: #b8b9bb;
+  border: none;
+  background-color: var(--gray-2);
+  box-shadow: var(--shadow-5);
   border-radius: 999px;
-  align-items: center;
+  cursor: pointer;
+  touch-action: none;
 }
 
 .fab :global(*) {
@@ -40,4 +37,11 @@
   width: 1.5rem;
   height: 1.5rem;
   object-fit: contain;
-}
\ No newline at end of file
+}
+
+.heading {
+  width: 3.25rem;
+  height: 1rem;
+  color: var(--gray-a10);
+  margin: 0 var(--space-2);
+}
diff --git a/packages/devtools/mount/src/components/Devtools/Action.module.scss.d.ts b/packages/devtools/mount/src/components/Devtools/Action.module.scss.d.ts
deleted file mode 100644
index 393606ce4692..000000000000
--- a/packages/devtools/mount/src/components/Devtools/Action.module.scss.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  container: string;
-  fab: string;
-  logo: string;
-}
-export const cssExports: CssExports;
-export default cssExports;
diff --git a/packages/devtools/mount/src/components/Devtools/Action.tsx b/packages/devtools/mount/src/components/Devtools/Action.tsx
index ee151e5f7f74..2e94a43e45ba 100644
--- a/packages/devtools/mount/src/components/Devtools/Action.tsx
+++ b/packages/devtools/mount/src/components/Devtools/Action.tsx
@@ -1,10 +1,12 @@
 import { ROUTE_BASENAME, SetupClientOptions } from '@modern-js/devtools-kit';
-import React from 'react';
-import { useToggle } from 'react-use';
+import React, { useState } from 'react';
+import { useEvent, useToggle } from 'react-use';
+import { Flex, Theme } from '@radix-ui/themes';
 import { parseURL, stringifyParsedURL, withQuery } from 'ufo';
 import Visible from '../Visible';
 import styles from './Action.module.scss';
-import FrameBox from './FrameBox';
+import { FrameBox } from './FrameBox';
+import { ReactComponent as DevToolsIcon } from './heading.svg';
 import { useStickyDraggable } from '@/utils/draggable';
 
 const parseDataSource = (url: string) => {
@@ -31,25 +33,44 @@ const DevtoolsAction: React.FC<SetupClientOptions> = props => {
 
   const draggable = useStickyDraggable({ clamp: true });
 
+  const [appearance, setAppearance] = useState<'light' | 'dark'>(() => {
+    const ret =
+      localStorage.getItem('__modern_js_devtools_appearance') ?? 'light';
+    localStorage.setItem('__modern_js_devtools_appearance', ret);
+    return ret as any;
+  });
+  useEvent('storage', (e: StorageEvent) => {
+    if (e.key === '__modern_js_devtools_appearance') {
+      setAppearance((e.newValue as any) || undefined);
+    }
+  });
+
+  useEvent('keydown', (e: KeyboardEvent) => {
+    e.shiftKey && e.altKey && e.code === 'KeyD' && toggleDevtools();
+  });
+
   return (
-    <>
+    <Theme appearance={appearance} className={appearance}>
       <Visible when={showDevtools} keepAlive={true}>
         <div className={styles.container}>
           <FrameBox
             src={src}
+            onClose={() => toggleDevtools(false)}
             style={{ pointerEvents: draggable.isDragging ? 'none' : 'auto' }}
           />
         </div>
       </Visible>
-      <button
-        className={styles.fab}
-        onClick={() => toggleDevtools()}
-        {...draggable.props}
-      >
-        <img className={styles.logo} src={logoSrc} alt="" />
-        <span>Toggle DevTools</span>
-      </button>
-    </>
+      <Flex asChild py="1" px="2" align="center">
+        <button
+          className={styles.fab}
+          onClick={() => toggleDevtools()}
+          {...draggable.props}
+        >
+          <img className={styles.logo} src={logoSrc} alt="" />
+          <DevToolsIcon className={styles.heading} />
+        </button>
+      </Flex>
+    </Theme>
   );
 };
 
diff --git a/packages/devtools/mount/src/components/Devtools/FrameBox.module.scss b/packages/devtools/mount/src/components/Devtools/FrameBox.module.scss
index 35ff1a027e44..5ea490e969a1 100644
--- a/packages/devtools/mount/src/components/Devtools/FrameBox.module.scss
+++ b/packages/devtools/mount/src/components/Devtools/FrameBox.module.scss
@@ -1,12 +1,25 @@
 .container {
-  border-radius: 0.75rem;
   overflow: hidden;
-  position: relative;
-  width: 40rem;
-  height: 30rem;
-  background-color: white;
-  border: 1px solid #082577;
-  box-shadow: 0 0 5px #082577;
+  box-shadow: var(--shadow-5);
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  @media (min-width: 520px) {
+    position: relative;
+    height: 35rem;
+    width: 50rem;
+    border-radius: 0.75rem;
+  }
+}
+
+.close-button {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  color: var(--gray-8);
+  cursor: pointer;
 }
 
 .frame {
@@ -16,7 +29,7 @@
 }
 
 .backdrop {
-  background-color: #090909;
+  background-color: var(--gray-2);
   position: absolute;
   top: 0;
   bottom: 0;
diff --git a/packages/devtools/mount/src/components/Devtools/FrameBox.module.scss.d.ts b/packages/devtools/mount/src/components/Devtools/FrameBox.module.scss.d.ts
deleted file mode 100644
index 4da089f82aeb..000000000000
--- a/packages/devtools/mount/src/components/Devtools/FrameBox.module.scss.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  backdrop: string;
-  container: string;
-  frame: string;
-  loading: string;
-  rotate: string;
-}
-export const cssExports: CssExports;
-export default cssExports;
diff --git a/packages/devtools/mount/src/components/Devtools/FrameBox.tsx b/packages/devtools/mount/src/components/Devtools/FrameBox.tsx
index bc3bf990a3f3..fd3e3f7f8f83 100644
--- a/packages/devtools/mount/src/components/Devtools/FrameBox.tsx
+++ b/packages/devtools/mount/src/components/Devtools/FrameBox.tsx
@@ -1,34 +1,38 @@
 import React, { useState } from 'react';
+import { Box } from '@radix-ui/themes';
+import type { BoxProps } from '@radix-ui/themes/dist/cjs/components/box';
 import { LoaderIcon } from '../LoadingIcon';
 import styles from './FrameBox.module.scss';
+import { ReactComponent as XMarkIcon } from './xmark.svg';
 
-export interface FrameBoxProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface FrameBoxProps
+  extends BoxProps,
+    React.RefAttributes<HTMLDivElement> {
   src?: string;
+  onClose?: () => void;
 }
 
-const FrameBox: React.FC<FrameBoxProps> = ({ src, ...props }) => {
+export const FrameBox: React.FC<FrameBoxProps> = ({
+  src,
+  onClose,
+  ...props
+}) => {
   const [showFrame, setShowFrame] = useState(false);
 
-  const handleFrameMount = (el: HTMLIFrameElement | null) => {
-    const handleLoad = () => setShowFrame(true);
-    el?.addEventListener('load', handleLoad, { once: true });
-  };
-
   return (
-    <div className={styles.container} {...props}>
+    <Box className={styles.container} {...props}>
+      <iframe
+        className={styles.frame}
+        onLoad={() => setShowFrame(true)}
+        src={src}
+      ></iframe>
+      <XMarkIcon className={styles.closeButton} onClick={() => onClose?.()} />
       <div
         className={styles.backdrop}
         style={{ display: showFrame ? 'none' : undefined }}
       >
         <LoaderIcon className={styles.loading} />
       </div>
-      <iframe
-        className={styles.frame}
-        ref={handleFrameMount}
-        src={src}
-      ></iframe>
-    </div>
+    </Box>
   );
 };
-
-export default FrameBox;
diff --git a/packages/devtools/mount/src/components/Devtools/heading.svg b/packages/devtools/mount/src/components/Devtools/heading.svg
new file mode 100644
index 000000000000..f6a6bea50701
--- /dev/null
+++ b/packages/devtools/mount/src/components/Devtools/heading.svg
@@ -0,0 +1,12 @@
+<svg width="455.127" height="76.954" viewBox="0 0 455.127 76.954" xmlns="http://www.w3.org/2000/svg">
+  <g id="svgGroup" stroke-linecap="round" fill="currentColor" fill-rule="evenodd" font-size="9pt">
+    <path d="M 23.096 75.977 L 0 75.977 L 0 4.59 L 24.707 4.59 A 55.919 55.919 0 0 1 33.49 5.243 Q 38.313 6.01 42.334 7.681 A 32.184 32.184 0 0 1 44.238 8.545 Q 52.246 12.5 56.421 20.117 A 32.438 32.438 0 0 1 59.678 29.175 Q 60.481 33.044 60.581 37.488 A 56.775 56.775 0 0 1 60.596 38.77 A 55.441 55.441 0 0 1 59.943 47.517 Q 58.856 54.315 55.957 59.473 Q 51.318 67.725 42.896 71.851 Q 34.473 75.977 23.096 75.977 Z M 24.902 20.166 L 19.287 20.166 L 19.287 60.156 L 23.584 60.156 A 23.978 23.978 0 0 0 28.389 59.707 Q 33.591 58.641 36.475 55.054 A 15.925 15.925 0 0 0 39.053 50.244 Q 40.576 45.85 40.576 39.453 A 40.21 40.21 0 0 0 40.342 34.984 Q 39.94 31.39 38.843 28.687 A 14.688 14.688 0 0 0 36.837 25.153 A 11.922 11.922 0 0 0 33.643 22.29 A 13.658 13.658 0 0 0 29.587 20.664 Q 27.856 20.259 25.845 20.184 A 24.996 24.996 0 0 0 24.902 20.166 Z" id="0" vector-effect="non-scaling-stroke"/>
+    <path d="M 123.291 44.971 L 123.291 53.467 L 89.16 53.467 A 10.988 10.988 0 0 0 90.044 57.31 A 9.877 9.877 0 0 0 92.407 60.596 Q 95.41 63.379 101.27 63.379 Q 106.445 63.379 110.767 62.354 A 42.981 42.981 0 0 0 116.273 60.633 A 52.544 52.544 0 0 0 119.678 59.18 L 119.678 72.9 Q 115.674 75 110.938 75.977 A 41.172 41.172 0 0 1 107.079 76.567 Q 103.519 76.953 98.975 76.953 A 40.077 40.077 0 0 1 90.603 76.113 A 32.226 32.226 0 0 1 84.033 73.975 A 22.906 22.906 0 0 1 73.657 64.746 Q 70.368 59.314 69.938 51.19 A 47.413 47.413 0 0 1 69.873 48.682 Q 69.873 38.721 73.291 32.3 A 22.599 22.599 0 0 1 78.792 25.436 A 21.455 21.455 0 0 1 82.861 22.778 A 28.536 28.536 0 0 1 91.334 20.114 A 37.588 37.588 0 0 1 97.168 19.678 Q 105.083 19.678 110.877 22.388 A 24.328 24.328 0 0 1 111.084 22.485 Q 116.943 25.293 120.117 30.908 A 23.114 23.114 0 0 1 122.498 37.231 Q 123.13 40.033 123.258 43.284 A 42.733 42.733 0 0 1 123.291 44.971 Z M 89.551 41.455 L 105.957 41.455 A 11.664 11.664 0 0 0 105.553 38.576 A 10.108 10.108 0 0 0 104.98 37.012 Q 104.053 35.01 102.271 33.838 A 6.912 6.912 0 0 0 99.862 32.861 A 9.817 9.817 0 0 0 97.852 32.666 A 8.801 8.801 0 0 0 94.934 33.133 A 7.628 7.628 0 0 0 92.212 34.79 A 7.286 7.286 0 0 0 90.54 37.211 Q 90.08 38.257 89.817 39.557 A 16.942 16.942 0 0 0 89.551 41.455 Z" id="1" vector-effect="non-scaling-stroke"/>
+    <path d="M 167.48 75.977 L 148.584 75.977 L 127.49 20.654 L 147.412 20.654 L 156.787 53.369 Q 156.924 53.78 157.254 55.389 A 112.258 112.258 0 0 1 157.3 55.615 A 19.061 19.061 0 0 1 157.591 57.518 A 14.863 14.863 0 0 1 157.666 58.984 L 158.008 58.984 A 14.573 14.573 0 0 1 158.26 56.239 A 13.298 13.298 0 0 1 158.35 55.811 Q 158.611 54.652 158.787 53.893 A 136.744 136.744 0 0 1 158.887 53.467 L 168.701 20.654 L 188.574 20.654 L 167.48 75.977 Z" id="2" vector-effect="non-scaling-stroke"/>
+    <path d="M 227.783 20.361 L 227.783 75.977 L 208.496 75.977 L 208.496 20.361 L 191.064 20.361 L 191.064 4.59 L 245.166 4.59 L 245.166 20.361 L 227.783 20.361 Z" id="3" vector-effect="non-scaling-stroke"/>
+    <path d="M 306.662 54.35 A 43.23 43.23 0 0 0 307.08 48.193 Q 307.08 43.89 306.302 40.21 A 26.737 26.737 0 0 0 303.54 32.666 A 23.91 23.91 0 0 0 293.799 22.998 A 27.016 27.016 0 0 0 287.599 20.615 A 32.596 32.596 0 0 0 279.639 19.678 A 37.958 37.958 0 0 0 272.777 20.269 A 27.435 27.435 0 0 0 264.771 22.998 A 22.673 22.673 0 0 0 255.2 32.666 A 24.588 24.588 0 0 0 254.552 33.991 Q 251.855 39.95 251.855 48.193 A 41.077 41.077 0 0 0 252.243 53.961 A 30.674 30.674 0 0 0 253.882 60.498 A 28.789 28.789 0 0 0 254.738 62.531 A 24.022 24.022 0 0 0 259.619 69.531 A 24.539 24.539 0 0 0 268.335 75.073 A 28.236 28.236 0 0 0 272.567 76.29 A 33.502 33.502 0 0 0 279.346 76.953 A 39.162 39.162 0 0 0 284.365 76.643 A 30.239 30.239 0 0 0 290.918 75.073 A 26.901 26.901 0 0 0 291.395 74.893 A 23.287 23.287 0 0 0 299.658 69.531 Q 303.271 65.869 305.176 60.498 A 32.011 32.011 0 0 0 306.662 54.35 Z M 271.24 48.193 Q 271.24 52.93 272.07 56.177 Q 272.9 59.424 274.731 61.108 A 6.244 6.244 0 0 0 277.833 62.637 A 8.91 8.91 0 0 0 279.541 62.793 A 8.544 8.544 0 0 0 281.524 62.575 A 5.857 5.857 0 0 0 284.277 61.108 A 7.765 7.765 0 0 0 285.716 59.186 Q 286.195 58.303 286.547 57.212 A 15.643 15.643 0 0 0 286.841 56.177 A 24.171 24.171 0 0 0 287.332 53.532 Q 287.527 52.055 287.601 50.353 A 49.717 49.717 0 0 0 287.646 48.193 A 46.12 46.12 0 0 0 287.536 44.893 Q 287.348 42.279 286.841 40.283 Q 286.035 37.109 284.253 35.498 A 6.007 6.007 0 0 0 281.618 34.133 Q 280.696 33.904 279.609 33.888 A 11.184 11.184 0 0 0 279.443 33.887 A 8.132 8.132 0 0 0 276.824 34.285 Q 274.568 35.049 273.292 37.277 A 8.551 8.551 0 0 0 273.169 37.5 A 13.288 13.288 0 0 0 272.091 40.319 Q 271.24 43.492 271.24 48.193 Z" id="4" vector-effect="non-scaling-stroke"/>
+    <path d="M 370.382 54.35 A 43.23 43.23 0 0 0 370.801 48.193 Q 370.801 43.89 370.023 40.21 A 26.737 26.737 0 0 0 367.261 32.666 A 23.91 23.91 0 0 0 357.52 22.998 A 27.016 27.016 0 0 0 351.32 20.615 A 32.596 32.596 0 0 0 343.359 19.678 A 37.958 37.958 0 0 0 336.497 20.269 A 27.435 27.435 0 0 0 328.491 22.998 A 22.673 22.673 0 0 0 318.921 32.666 A 24.588 24.588 0 0 0 318.273 33.991 Q 315.576 39.95 315.576 48.193 A 41.077 41.077 0 0 0 315.964 53.961 A 30.674 30.674 0 0 0 317.603 60.498 A 28.789 28.789 0 0 0 318.458 62.531 A 24.022 24.022 0 0 0 323.34 69.531 A 24.539 24.539 0 0 0 332.056 75.073 A 28.236 28.236 0 0 0 336.287 76.29 A 33.502 33.502 0 0 0 343.066 76.953 A 39.162 39.162 0 0 0 348.086 76.643 A 30.239 30.239 0 0 0 354.639 75.073 A 26.901 26.901 0 0 0 355.116 74.893 A 23.287 23.287 0 0 0 363.379 69.531 Q 366.992 65.869 368.896 60.498 A 32.011 32.011 0 0 0 370.382 54.35 Z M 334.961 48.193 Q 334.961 52.93 335.791 56.177 Q 336.621 59.424 338.452 61.108 A 6.244 6.244 0 0 0 341.553 62.637 A 8.91 8.91 0 0 0 343.262 62.793 A 8.544 8.544 0 0 0 345.245 62.575 A 5.857 5.857 0 0 0 347.998 61.108 A 7.765 7.765 0 0 0 349.437 59.186 Q 349.916 58.303 350.268 57.212 A 15.643 15.643 0 0 0 350.562 56.177 A 24.171 24.171 0 0 0 351.052 53.532 Q 351.248 52.055 351.322 50.353 A 49.717 49.717 0 0 0 351.367 48.193 A 46.12 46.12 0 0 0 351.256 44.893 Q 351.068 42.279 350.562 40.283 Q 349.756 37.109 347.974 35.498 A 6.007 6.007 0 0 0 345.339 34.133 Q 344.416 33.904 343.329 33.888 A 11.184 11.184 0 0 0 343.164 33.887 A 8.132 8.132 0 0 0 340.545 34.285 Q 338.289 35.049 337.013 37.277 A 8.551 8.551 0 0 0 336.89 37.5 A 13.288 13.288 0 0 0 335.811 40.319 Q 334.961 43.492 334.961 48.193 Z" id="5" vector-effect="non-scaling-stroke"/>
+    <path d="M 400.781 0 L 400.781 75.977 L 381.689 75.977 L 381.689 0 L 400.781 0 Z" id="6" vector-effect="non-scaling-stroke"/>
+    <path d="M 411.719 73.877 L 411.719 58.594 A 46.942 46.942 0 0 0 422.363 62.036 Q 426.83 62.901 429.739 63.053 A 22.453 22.453 0 0 0 430.908 63.086 A 23.338 23.338 0 0 0 432.541 63.033 Q 434.538 62.892 435.62 62.378 A 3.273 3.273 0 0 0 436.357 61.909 A 2.089 2.089 0 0 0 437.109 60.254 Q 437.109 59.033 436.108 58.179 A 6.393 6.393 0 0 0 435.444 57.691 Q 434.691 57.202 433.504 56.638 A 34.704 34.704 0 0 0 432.544 56.201 Q 430.581 55.341 427.402 54.024 A 655.312 655.312 0 0 0 425.342 53.174 Q 420.752 51.27 417.7 49.023 A 15.29 15.29 0 0 1 414.486 45.872 A 13.596 13.596 0 0 1 413.135 43.652 A 14.224 14.224 0 0 1 412.024 40.293 Q 411.703 38.727 411.638 36.922 A 25.946 25.946 0 0 1 411.621 35.986 A 16.624 16.624 0 0 1 412.394 30.782 A 13.104 13.104 0 0 1 417.871 23.779 Q 423.083 20.359 431.115 19.791 A 46.937 46.937 0 0 1 434.424 19.678 A 44.511 44.511 0 0 1 441.957 20.296 A 38.904 38.904 0 0 1 444.727 20.874 A 56.912 56.912 0 0 1 451.218 22.917 A 69.134 69.134 0 0 1 454.736 24.365 L 449.512 36.67 Q 445.41 34.814 441.211 33.691 Q 437.323 32.652 434.9 32.575 A 11.911 11.911 0 0 0 434.521 32.568 Q 432.275 32.568 431.055 33.154 A 2.789 2.789 0 0 0 430.465 33.526 A 1.672 1.672 0 0 0 429.834 34.863 A 2.288 2.288 0 0 0 430.42 36.394 A 3.206 3.206 0 0 0 430.688 36.67 Q 431.337 37.263 432.872 37.997 A 28.563 28.563 0 0 0 433.936 38.477 Q 436.328 39.502 440.918 41.357 A 51.888 51.888 0 0 1 444.568 42.989 Q 446.261 43.83 447.675 44.717 A 27.253 27.253 0 0 1 448.901 45.532 A 14.95 14.95 0 0 1 452.141 48.593 A 13.247 13.247 0 0 1 453.589 50.928 A 14.028 14.028 0 0 1 454.64 54.032 Q 455.127 56.238 455.127 58.984 A 20.16 20.16 0 0 1 454.465 64.243 A 16.821 16.821 0 0 1 452.783 68.311 A 14.139 14.139 0 0 1 448.563 72.827 A 19.641 19.641 0 0 1 445.288 74.658 A 23.27 23.27 0 0 1 440.768 76.101 Q 438.568 76.58 435.986 76.79 A 52.548 52.548 0 0 1 431.738 76.953 A 94.534 94.534 0 0 1 426.473 76.814 Q 423.644 76.656 421.167 76.318 A 42.222 42.222 0 0 1 413.509 74.513 A 48.282 48.282 0 0 1 411.719 73.877 Z" id="7" vector-effect="non-scaling-stroke"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/packages/devtools/mount/src/components/Devtools/xmark.svg b/packages/devtools/mount/src/components/Devtools/xmark.svg
new file mode 100644
index 000000000000..b4726edd484a
--- /dev/null
+++ b/packages/devtools/mount/src/components/Devtools/xmark.svg
@@ -0,0 +1,3 @@
+<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 20 20" aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" data-darkreader-inline-fill="" data-darkreader-inline-stroke="" style="--darkreader-inline-fill: currentColor; --darkreader-inline-stroke: currentColor;">
+  <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"></path>
+</svg>
\ No newline at end of file
diff --git a/packages/devtools/mount/src/utils/draggable.ts b/packages/devtools/mount/src/utils/draggable.ts
index ad0e4d8d516d..5691c3f5bc1c 100644
--- a/packages/devtools/mount/src/utils/draggable.ts
+++ b/packages/devtools/mount/src/utils/draggable.ts
@@ -77,7 +77,8 @@ export const useStickyDraggable = (options?: StickyDraggableOptions) => {
     });
   };
 
-  const handleMouseMove = (e: MouseEvent) => {
+  const handleMouseMove = (raw: MouseEvent | TouchEvent) => {
+    const e = 'touches' in raw ? raw.touches[0] : raw;
     if (!state?.moveable) {
       return;
     }
@@ -117,15 +118,24 @@ export const useStickyDraggable = (options?: StickyDraggableOptions) => {
 
   useEvent('blur', handleRelease);
   useEvent('mouseup', handleRelease);
+  useEvent('touchend', handleRelease);
   useEvent('mousemove', handleMouseMove);
+  useEvent('touchmove', handleMouseMove);
 
-  const onMouseDown = (e: React.MouseEvent<HTMLElement>) => {
+  const onMouseDown = (
+    raw: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>,
+  ) => {
+    const e = 'touches' in raw ? raw.touches[0] : raw;
+    const el = raw.currentTarget;
+    const rect = el.getBoundingClientRect();
+    const offsetX = e.clientX - rect.left;
+    const offsetY = e.clientY - rect.top;
     setState({
-      el: e.currentTarget,
+      el,
       clickable: true,
       moveable: true,
-      offsetX: e.nativeEvent.offsetX,
-      offsetY: e.nativeEvent.offsetY,
+      offsetX,
+      offsetY,
       startX: e.clientX,
       startY: e.clientY,
     });
@@ -139,6 +149,7 @@ export const useStickyDraggable = (options?: StickyDraggableOptions) => {
     isDragging: Boolean(state),
     props: {
       onMouseDown,
+      onTouchStart: onMouseDown,
       onClickCapture,
     },
   };
diff --git a/packages/devtools/plugin/src/rpc/index.ts b/packages/devtools/plugin/src/rpc/index.ts
index ed4610042f21..8f61a0cdb221 100644
--- a/packages/devtools/plugin/src/rpc/index.ts
+++ b/packages/devtools/plugin/src/rpc/index.ts
@@ -1,15 +1,12 @@
 import _ from '@modern-js/utils/lodash';
 import {
-  NameDefinition,
+  ClientDefinition,
   type BuilderConfig,
   type BundlerConfig,
-  type ClientDefinition,
   type ClientFunctions,
   type FileSystemRoutes,
   type NormalizedBuilderConfig,
   type ServerFunctions,
-  PackageDefinition,
-  AssetDefinition,
 } from '@modern-js/devtools-kit';
 import type { JsonValue, PartialDeep } from 'type-fest';
 import { createBirpc, BirpcOptions } from 'birpc';
@@ -136,11 +133,7 @@ export const setupClientConnection = async (
       return deferred.compileTimeCost.promise;
     },
     async getClientDefinition() {
-      const ret: ClientDefinition = {
-        name: new NameDefinition(),
-        packages: new PackageDefinition(),
-        assets: new AssetDefinition(),
-      };
+      const ret = new ClientDefinition();
       Object.assign(ret.name, def.name);
       Object.assign(ret.packages, def.packages);
       Object.assign(ret.assets, def.assets);
diff --git a/packages/devtools/plugin/src/runtime.ts b/packages/devtools/plugin/src/runtime.ts
index dc90b79fa07c..985e27e5c9ce 100644
--- a/packages/devtools/plugin/src/runtime.ts
+++ b/packages/devtools/plugin/src/runtime.ts
@@ -2,6 +2,11 @@ import type { SetupClientOptions } from '@modern-js/devtools-kit';
 import { mountDevTools } from '@modern-js/devtools-mount';
 import { parseQuery } from 'ufo';
 
-const opts = parseQuery(__resourceQuery);
-
-mountDevTools(opts as SetupClientOptions);
+try {
+  const opts = parseQuery(__resourceQuery);
+  mountDevTools(opts as SetupClientOptions);
+} catch (err: unknown) {
+  const e = new Error('Failed to execute mount point of DevTools.');
+  e.cause = err;
+  console.error(e);
+}
diff --git a/packages/devtools/plugin/src/utils/module.ts b/packages/devtools/plugin/src/utils/module.ts
index dfc9eb84afff..13e5d2aa07a2 100644
--- a/packages/devtools/plugin/src/utils/module.ts
+++ b/packages/devtools/plugin/src/utils/module.ts
@@ -10,7 +10,6 @@ export const getRequire = (): NodeRequire => {
   const issuer = new Error().stack
     ?.split('\n')[2]
     .match(/\s*at .+? \((.*)\)$/)?.[1];
-  console.log('issuer: ', issuer);
   if (issuer && path.isAbsolute(issuer)) {
     // eslint-disable-next-line node/no-unsupported-features/node-builtins
     return module.createRequire(issuer);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7c67066a51ba..c4cfa5577942 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1397,13 +1397,11 @@ importers:
         version: 5.0.4
 
   packages/devtools/client:
+    dependencies:
+      thumbhash:
+        specifier: ^0.1.1
+        version: 0.1.1
     devDependencies:
-      '@emotion/react':
-        specifier: ^11.11.1
-        version: 11.11.1(@types/react@18.0.21)(react@18.2.0)
-      '@emotion/styled':
-        specifier: ^11.11.0
-        version: 11.11.0(@emotion/react@11.11.1)(@types/react@18.0.21)(react@18.2.0)
       '@modern-js-app/eslint-config':
         specifier: workspace:*
         version: link:../../review/eslint-config-app
@@ -1441,14 +1439,14 @@ importers:
         specifier: ^1.3.0
         version: 1.3.0(react@18.2.0)
       '@radix-ui/react-popover':
-        specifier: ^1.0.6
-        version: 1.0.6(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^1.0.7
+        version: 1.0.7(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-tabs':
         specifier: ^1.0.4
         version: 1.0.4(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/themes':
-        specifier: ^1.1.2
-        version: 1.1.2(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^2.0.0
+        version: 2.0.0(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@types/jest':
         specifier: ~29.2.4
         version: 29.2.6
@@ -1467,12 +1465,18 @@ importers:
       birpc:
         specifier: 0.2.13
         version: 0.2.13
+      clsx:
+        specifier: ^1.2.1
+        version: 1.2.1
       lodash:
         specifier: ^4.17.21
         version: 4.17.21
       p-defer:
         specifier: 3.0.0
         version: 3.0.0
+      postcss-custom-media:
+        specifier: ^10.0.1
+        version: 10.0.2(postcss@8.4.31)
       react:
         specifier: ~18.2.0
         version: 18.2.0
@@ -1482,6 +1486,9 @@ importers:
       react-dom:
         specifier: ~18.2.0
         version: 18.2.0(react@18.2.0)
+      react-icons:
+        specifier: ^4.11.0
+        version: 4.11.0(react@18.2.0)
       react-json-tree:
         specifier: ^0.18.0
         version: 0.18.0(@types/react@18.0.21)(react@18.2.0)
@@ -1521,6 +1528,9 @@ importers:
       '@modern-js/utils':
         specifier: workspace:*
         version: link:../../toolkit/utils
+      '@radix-ui/themes':
+        specifier: ^2.0.0
+        version: 2.0.0(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       ufo:
         specifier: ^1.2.0
         version: 1.3.0
@@ -1592,8 +1602,8 @@ importers:
         specifier: workspace:*
         version: link:../../review/tsconfig
       '@radix-ui/themes':
-        specifier: ^1.1.2
-        version: 1.1.2(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^2.0.0
+        version: 2.0.0(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@stitches/react':
         specifier: ^1.2.8
         version: 1.2.8(react@18.2.0)
@@ -1615,6 +1625,9 @@ importers:
       lodash-es:
         specifier: ^4.17.21
         version: 4.17.21
+      modern-normalize:
+        specifier: ^2.0.0
+        version: 2.0.0
       nanoid:
         specifier: 3.3.4
         version: 3.3.4
@@ -10620,6 +10633,17 @@ packages:
       '@csstools/css-tokenizer': 2.1.1
     dev: true
 
+  /@csstools/cascade-layer-name-parser@1.0.5(@csstools/css-parser-algorithms@2.3.2)(@csstools/css-tokenizer@2.2.1):
+    resolution: {integrity: sha512-v/5ODKNBMfBl0us/WQjlfsvSlYxfZLhNMVIsuCPib2ulTwGKYbKJbwqw671+qH9Y4wvWVnu7LBChvml/wBKjFg==}
+    engines: {node: ^14 || ^16 || >=18}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^2.3.2
+      '@csstools/css-tokenizer': ^2.2.1
+    dependencies:
+      '@csstools/css-parser-algorithms': 2.3.2(@csstools/css-tokenizer@2.2.1)
+      '@csstools/css-tokenizer': 2.2.1
+    dev: true
+
   /@csstools/css-parser-algorithms@2.1.1(@csstools/css-tokenizer@2.1.1):
     resolution: {integrity: sha512-viRnRh02AgO4mwIQb2xQNJju0i+Fh9roNgmbR5xEuG7J3TGgxjnE95HnBLgsFJOJOksvcfxOUCgODcft6Y07cA==}
     engines: {node: ^14 || ^16 || >=18}
@@ -10629,11 +10653,36 @@ packages:
       '@csstools/css-tokenizer': 2.1.1
     dev: true
 
+  /@csstools/css-parser-algorithms@2.3.2(@csstools/css-tokenizer@2.2.1):
+    resolution: {integrity: sha512-sLYGdAdEY2x7TSw9FtmdaTrh2wFtRJO5VMbBrA8tEqEod7GEggFmxTSK9XqExib3yMuYNcvcTdCZIP6ukdjAIA==}
+    engines: {node: ^14 || ^16 || >=18}
+    peerDependencies:
+      '@csstools/css-tokenizer': ^2.2.1
+    dependencies:
+      '@csstools/css-tokenizer': 2.2.1
+    dev: true
+
   /@csstools/css-tokenizer@2.1.1:
     resolution: {integrity: sha512-GbrTj2Z8MCTUv+52GE0RbFGM527xuXZ0Xa5g0Z+YN573uveS4G0qi6WNOMyz3yrFM/jaILTTwJ0+umx81EzqfA==}
     engines: {node: ^14 || ^16 || >=18}
     dev: true
 
+  /@csstools/css-tokenizer@2.2.1:
+    resolution: {integrity: sha512-Zmsf2f/CaEPWEVgw29odOj+WEVoiJy9s9NOv5GgNY9mZ1CZ7394By6wONrONrTsnNDv6F9hR02nvFihrGVGHBg==}
+    engines: {node: ^14 || ^16 || >=18}
+    dev: true
+
+  /@csstools/media-query-list-parser@2.1.5(@csstools/css-parser-algorithms@2.3.2)(@csstools/css-tokenizer@2.2.1):
+    resolution: {integrity: sha512-IxVBdYzR8pYe89JiyXQuYk4aVVoCPhMJkz6ElRwlVysjwURTsTk/bmY/z4FfeRE+CRBMlykPwXEVUg8lThv7AQ==}
+    engines: {node: ^14 || ^16 || >=18}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^2.3.2
+      '@csstools/css-tokenizer': ^2.2.1
+    dependencies:
+      '@csstools/css-parser-algorithms': 2.3.2(@csstools/css-tokenizer@2.2.1)
+      '@csstools/css-tokenizer': 2.2.1
+    dev: true
+
   /@csstools/selector-specificity@3.0.0(postcss-selector-parser@6.0.13):
     resolution: {integrity: sha512-hBI9tfBtuPIi885ZsZ32IMEU/5nlZH/KOVYJCOh7gyMxaVLGmLedYqFN6Ui1LXkI8JlC8IsuC0rF0btcRZKd5g==}
     engines: {node: ^14 || ^16 || >=18}
@@ -10651,40 +10700,10 @@ packages:
     resolution: {integrity: sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==}
     engines: {node: '>=10.0.0'}
 
-  /@emotion/babel-plugin@11.11.0:
-    resolution: {integrity: sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==}
-    dependencies:
-      '@babel/helper-module-imports': 7.22.15
-      '@babel/runtime': 7.23.2
-      '@emotion/hash': 0.9.1
-      '@emotion/memoize': 0.8.1
-      '@emotion/serialize': 1.1.2
-      babel-plugin-macros: 3.1.0
-      convert-source-map: 1.8.0
-      escape-string-regexp: 4.0.0
-      find-root: 1.1.0
-      source-map: 0.5.7
-      stylis: 4.2.0
-    dev: true
-
-  /@emotion/cache@11.11.0:
-    resolution: {integrity: sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==}
-    dependencies:
-      '@emotion/memoize': 0.8.1
-      '@emotion/sheet': 1.2.2
-      '@emotion/utils': 1.2.1
-      '@emotion/weak-memoize': 0.3.1
-      stylis: 4.2.0
-    dev: true
-
   /@emotion/hash@0.8.0:
     resolution: {integrity: sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==}
     dev: false
 
-  /@emotion/hash@0.9.1:
-    resolution: {integrity: sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==}
-    dev: true
-
   /@emotion/is-prop-valid@1.2.1:
     resolution: {integrity: sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==}
     dependencies:
@@ -10693,88 +10712,12 @@ packages:
   /@emotion/memoize@0.8.1:
     resolution: {integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==}
 
-  /@emotion/react@11.11.1(@types/react@18.0.21)(react@18.2.0):
-    resolution: {integrity: sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==}
-    peerDependencies:
-      '@types/react': '*'
-      react: '>=16.8.0'
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.23.2
-      '@emotion/babel-plugin': 11.11.0
-      '@emotion/cache': 11.11.0
-      '@emotion/serialize': 1.1.2
-      '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.2.0)
-      '@emotion/utils': 1.2.1
-      '@emotion/weak-memoize': 0.3.1
-      '@types/react': 18.0.21
-      hoist-non-react-statics: 3.3.2
-      react: 18.2.0
-    dev: true
-
-  /@emotion/serialize@1.1.2:
-    resolution: {integrity: sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==}
-    dependencies:
-      '@emotion/hash': 0.9.1
-      '@emotion/memoize': 0.8.1
-      '@emotion/unitless': 0.8.1
-      '@emotion/utils': 1.2.1
-      csstype: 3.1.2
-    dev: true
-
-  /@emotion/sheet@1.2.2:
-    resolution: {integrity: sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==}
-    dev: true
-
-  /@emotion/styled@11.11.0(@emotion/react@11.11.1)(@types/react@18.0.21)(react@18.2.0):
-    resolution: {integrity: sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==}
-    peerDependencies:
-      '@emotion/react': ^11.0.0-rc.0
-      '@types/react': '*'
-      react: '>=16.8.0'
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.23.2
-      '@emotion/babel-plugin': 11.11.0
-      '@emotion/is-prop-valid': 1.2.1
-      '@emotion/react': 11.11.1(@types/react@18.0.21)(react@18.2.0)
-      '@emotion/serialize': 1.1.2
-      '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.2.0)
-      '@emotion/utils': 1.2.1
-      '@types/react': 18.0.21
-      react: 18.2.0
-    dev: true
-
   /@emotion/stylis@0.8.5:
     resolution: {integrity: sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==}
 
   /@emotion/unitless@0.7.5:
     resolution: {integrity: sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==}
 
-  /@emotion/unitless@0.8.1:
-    resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==}
-    dev: true
-
-  /@emotion/use-insertion-effect-with-fallbacks@1.0.1(react@18.2.0):
-    resolution: {integrity: sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==}
-    peerDependencies:
-      react: '>=16.8.0'
-    dependencies:
-      react: 18.2.0
-    dev: true
-
-  /@emotion/utils@1.2.1:
-    resolution: {integrity: sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==}
-    dev: true
-
-  /@emotion/weak-memoize@0.3.1:
-    resolution: {integrity: sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==}
-    dev: true
-
   /@esbuild-kit/cjs-loader@2.4.2:
     resolution: {integrity: sha512-BDXFbYOJzT/NBEtp71cvsrGPwGAMGRB/349rwKuoxNSiKjPraNNnlK6MIIabViCjqZugu6j+xeMDlEkWdHHJSg==}
     dependencies:
@@ -11218,14 +11161,12 @@ packages:
     resolution: {integrity: sha512-jk3WqquEJRlcyu7997NtR5PibI+y5bi+LS3hPmguVClypenMsCY3CBa3LAQnozRCtCrYWSEtAdiskpamuJRFOQ==}
     dependencies:
       '@floating-ui/utils': 0.1.2
-    dev: true
 
   /@floating-ui/dom@1.5.2:
     resolution: {integrity: sha512-6ArmenS6qJEWmwzczWyhvrXRdI/rI78poBcW0h/456+onlabit+2G+QxHx5xTOX60NBJQXjsCLFbW2CmsXpUog==}
     dependencies:
       '@floating-ui/core': 1.4.1
       '@floating-ui/utils': 0.1.2
-    dev: true
 
   /@floating-ui/react-dom@2.0.2(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==}
@@ -11236,11 +11177,9 @@ packages:
       '@floating-ui/dom': 1.5.2
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-    dev: true
 
   /@floating-ui/utils@0.1.2:
     resolution: {integrity: sha512-ou3elfqG/hZsbmF4bxeJhPHIf3G2pm0ujc39hYEZrfVqt7Vk/Zji6CXc3W0pmYM8BW1g40U+akTl9DKZhFhInQ==}
-    dev: true
 
   /@formatjs/ecma402-abstract@1.4.0:
     resolution: {integrity: sha512-Mv027hcLFjE45K8UJ8PjRpdDGfR0aManEFj1KzoN8zXNveHGEygpZGfFf/FTTMl+QEVSrPAUlyxaCApvmv47AQ==}
@@ -12753,21 +12692,18 @@ packages:
       - supports-color
     dev: true
 
-  /@radix-ui/colors@2.1.0:
-    resolution: {integrity: sha512-gcBnxjS2u2c6thQz/9K1+Pt2ZYcm5WKU4SLi0emYkRmYbVUw+37rlc5wgLtYOsSsRP9nxVtbJJYj6WVO7UUmZg==}
-    dev: true
+  /@radix-ui/colors@3.0.0:
+    resolution: {integrity: sha512-FUOsGBkHrYJwCSEtWRCIfQbZG7q1e6DgxCIOe1SUQzDe/7rXXeA47s8yCn6fuTNQAj1Zq4oTFi9Yjp3wzElcxg==}
 
   /@radix-ui/number@1.0.1:
     resolution: {integrity: sha512-T5gIdVO2mmPW3NNhjNgEP3cqMXjXL9UbO0BzWcXfvdBs+BohbQxvd/K5hSVKmn9/lbTdsQVKbUcP5WLCwvUbBg==}
     dependencies:
       '@babel/runtime': 7.23.2
-    dev: true
 
   /@radix-ui/primitive@1.0.1:
     resolution: {integrity: sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==}
     dependencies:
       '@babel/runtime': 7.23.2
-    dev: true
 
   /@radix-ui/react-accessible-icon@1.0.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-duVGKeWPSUILr/MdlPxV+GeULTc2rS1aihGdQ3N2qCUPMgxYLxvAsHJM3mCVLF8d5eK+ympmB22mb1F3a5biNw==}
@@ -12788,10 +12724,9 @@ packages:
       '@types/react-dom': 18.0.6
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-    dev: true
 
-  /@radix-ui/react-alert-dialog@1.0.4(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-jbfBCRlKYlhbitueOAv7z74PXYeIQmWpKwm3jllsdkw7fGWNkxqP3v0nY9WmOzcPqpQuoorNtvViBgL46n5gVg==}
+  /@radix-ui/react-alert-dialog@1.0.5(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-OrVIOcZL0tl6xibeuGt5/+UxoT2N27KCFOPjFyfXMnchxSHZ/OW7cCX2nGlIYJrbHK/fczPcFzAwvNBB6XBNMA==}
     peerDependencies:
       '@types/react': ^18
       '@types/react-dom': ^18
@@ -12807,14 +12742,13 @@ packages:
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.0.21)(react@18.2.0)
       '@radix-ui/react-context': 1.0.1(@types/react@18.0.21)(react@18.2.0)
-      '@radix-ui/react-dialog': 1.0.4(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-dialog': 1.0.5(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-slot': 1.0.2(@types/react@18.0.21)(react@18.2.0)
       '@types/react': 18.0.21
       '@types/react-dom': 18.0.6
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-    dev: true
 
   /@radix-ui/react-arrow@1.0.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==}
@@ -12835,7 +12769,6 @@ packages:
       '@types/react-dom': 18.0.6
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-    dev: true
 
   /@radix-ui/react-aspect-ratio@1.0.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-fXR5kbMan9oQqMuacfzlGG/SQMcmMlZ4wrvpckv8SgUulD0MMpspxJrxg/Gp/ISV3JfV1AeSWTYK9GvxA4ySwA==}
@@ -12856,10 +12789,9 @@ packages:
       '@types/react-dom': 18.0.6
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-    dev: true
 
-  /@radix-ui/react-avatar@1.0.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-9ToF7YNex3Ste45LrAeTlKtONI9yVRt/zOS158iilIkW5K/Apeyb/TUQlcEFTEFvWr8Kzdi2ZYrm1/suiXPajQ==}
+  /@radix-ui/react-avatar@1.0.4(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-kVK2K7ZD3wwj3qhle0ElXhOjbezIgyl2hVvgwfIdexL3rN6zJmy5AqqIf+D31lxVppdzV8CjAfZ6PklkmInZLw==}
     peerDependencies:
       '@types/react': ^18
       '@types/react-dom': ^18
@@ -12880,7 +12812,6 @@ packages:
       '@types/react-dom': 18.0.6
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-    dev: true
 
   /@radix-ui/react-checkbox@1.0.4(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-CBuGQa52aAYnADZVt/KBQzXrwx6TqnlwtcIPGtVt5JkkzQwMOLJjPukimhfKEr4GQNd43C+djUh5Ikopj8pSLg==}
@@ -12908,7 +12839,6 @@ packages:
       '@types/react-dom': 18.0.6
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-    dev: true
 
   /@radix-ui/react-collapsible@1.0.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==}
@@ -12960,7 +12890,6 @@ packages:
       '@types/react-dom': 18.0.6
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-    dev: true
 
   /@radix-ui/react-compose-refs@1.0.1(@types/react@18.0.21)(react@18.2.0):
     resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==}
@@ -12974,10 +12903,9 @@ packages:
       '@babel/runtime': 7.23.2
       '@types/react': 18.0.21
       react: 18.2.0
-    dev: true
 
-  /@radix-ui/react-context-menu@2.1.4(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-HVHLUtZOBiR2Fh5l07qQ9y0IgX4dGZF0S9Gwdk4CVA+DL9afSphvFNa4nRiw6RNgb6quwLV4dLPF/gFDvNaOcQ==}
+  /@radix-ui/react-context-menu@2.1.5(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-R5XaDj06Xul1KGb+WP8qiOh7tKJNz2durpLBXAGZjSVtctcRFCuEvy2gtMwRJGePwQQE5nV77gs4FwRi8T+r2g==}
     peerDependencies:
       '@types/react': ^18
       '@types/react-dom': ^18
@@ -12992,7 +12920,7 @@ packages:
       '@babel/runtime': 7.23.2
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-context': 1.0.1(@types/react@18.0.21)(react@18.2.0)
-      '@radix-ui/react-menu': 2.0.5(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-menu': 2.0.6(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.0.21)(react@18.2.0)
       '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.0.21)(react@18.2.0)
@@ -13000,7 +12928,6 @@ packages:
       '@types/react-dom': 18.0.6
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-    dev: true
 
   /@radix-ui/react-context@1.0.1(@types/react@18.0.21)(react@18.2.0):
     resolution: {integrity: sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==}
@@ -13014,10 +12941,9 @@ packages:
       '@babel/runtime': 7.23.2
       '@types/react': 18.0.21
       react: 18.2.0
-    dev: true
 
-  /@radix-ui/react-dialog@1.0.4(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-hJtRy/jPULGQZceSAP2Re6/4NpKo8im6V8P2hUqZsdFiSL8l35kYsw3qbRI6Ay5mQd2+wlLqje770eq+RJ3yZg==}
+  /@radix-ui/react-dialog@1.0.5(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==}
     peerDependencies:
       '@types/react': ^18
       '@types/react-dom': ^18
@@ -13033,11 +12959,11 @@ packages:
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.0.21)(react@18.2.0)
       '@radix-ui/react-context': 1.0.1(@types/react@18.0.21)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.0.4(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.0.21)(react@18.2.0)
-      '@radix-ui/react-focus-scope': 1.0.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-focus-scope': 1.0.4(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-id': 1.0.1(@types/react@18.0.21)(react@18.2.0)
-      '@radix-ui/react-portal': 1.0.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-slot': 1.0.2(@types/react@18.0.21)(react@18.2.0)
@@ -13048,7 +12974,6 @@ packages:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       react-remove-scroll: 2.5.5(@types/react@18.0.21)(react@18.2.0)
-    dev: true
 
   /@radix-ui/react-direction@1.0.1(@types/react@18.0.21)(react@18.2.0):
     resolution: {integrity: sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==}
@@ -13062,10 +12987,9 @@ packages:
       '@babel/runtime': 7.23.2
       '@types/react': 18.0.21
       react: 18.2.0
-    dev: true
 
-  /@radix-ui/react-dismissable-layer@1.0.4(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-7UpBa/RKMoHJYjie1gkF1DlK8l1fdU/VKDpoS3rCCo8YBJR294GwcEHyxHw72yvphJ7ld0AXEcSLAzY2F/WyCg==}
+  /@radix-ui/react-dismissable-layer@1.0.5(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==}
     peerDependencies:
       '@types/react': ^18
       '@types/react-dom': ^18
@@ -13087,10 +13011,9 @@ packages:
       '@types/react-dom': 18.0.6
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-    dev: true
 
-  /@radix-ui/react-dropdown-menu@2.0.5(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-xdOrZzOTocqqkCkYo8yRPCib5OkTkqN7lqNCdxwPOdE466DOaNl4N8PkUIlsXthQvW5Wwkd+aEmWpfWlBoDPEw==}
+  /@radix-ui/react-dropdown-menu@2.0.6(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-i6TuFOoWmLWq+M/eCLGd/bQ2HfAX1RJgvrBQ6AQLmzfvsLdefxbWu8G9zczcPFfcSPehz9GcpF6K9QYreFV8hA==}
     peerDependencies:
       '@types/react': ^18
       '@types/react-dom': ^18
@@ -13107,14 +13030,13 @@ packages:
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.0.21)(react@18.2.0)
       '@radix-ui/react-context': 1.0.1(@types/react@18.0.21)(react@18.2.0)
       '@radix-ui/react-id': 1.0.1(@types/react@18.0.21)(react@18.2.0)
-      '@radix-ui/react-menu': 2.0.5(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-menu': 2.0.6(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.0.21)(react@18.2.0)
       '@types/react': 18.0.21
       '@types/react-dom': 18.0.6
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-    dev: true
 
   /@radix-ui/react-focus-guards@1.0.1(@types/react@18.0.21)(react@18.2.0):
     resolution: {integrity: sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==}
@@ -13128,10 +13050,9 @@ packages:
       '@babel/runtime': 7.23.2
       '@types/react': 18.0.21
       react: 18.2.0
-    dev: true
 
-  /@radix-ui/react-focus-scope@1.0.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-upXdPfqI4islj2CslyfUBNlaJCPybbqRHAi1KER7Isel9Q2AtSJ0zRBZv8mWQiFXD2nyAJ4BhC3yXgZ6kMBSrQ==}
+  /@radix-ui/react-focus-scope@1.0.4(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==}
     peerDependencies:
       '@types/react': ^18
       '@types/react-dom': ^18
@@ -13151,7 +13072,6 @@ packages:
       '@types/react-dom': 18.0.6
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-    dev: true
 
   /@radix-ui/react-form@0.0.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-kgE+Z/haV6fxE5WqIXj05KkaXa3OkZASoTDy25yX2EIp/x0c54rOH/vFr5nOZTg7n7T1z8bSyXmiVIFP9bbhPQ==}
@@ -13177,10 +13097,9 @@ packages:
       '@types/react-dom': 18.0.6
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-    dev: true
 
-  /@radix-ui/react-hover-card@1.0.6(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-2K3ToJuMk9wjwBOa+jdg2oPma+AmLdcEyTNsG/iC4BDVG3E0/mGCjbY8PEDSLxJcUi+nJi2QII+ec/4kWd88DA==}
+  /@radix-ui/react-hover-card@1.0.7(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-OcUN2FU0YpmajD/qkph3XzMcK/NmSk9hGWnjV68p6QiZMgILugusgQwnLSDs3oFSJYGKf3Y49zgFedhGh04k9A==}
     peerDependencies:
       '@types/react': ^18
       '@types/react-dom': ^18
@@ -13196,9 +13115,9 @@ packages:
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.0.21)(react@18.2.0)
       '@radix-ui/react-context': 1.0.1(@types/react@18.0.21)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.0.4(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-popper': 1.1.2(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-portal': 1.0.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-popper': 1.1.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.0.21)(react@18.2.0)
@@ -13206,7 +13125,6 @@ packages:
       '@types/react-dom': 18.0.6
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-    dev: true
 
   /@radix-ui/react-icons@1.3.0(react@18.2.0):
     resolution: {integrity: sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==}
@@ -13229,7 +13147,6 @@ packages:
       '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.0.21)(react@18.2.0)
       '@types/react': 18.0.21
       react: 18.2.0
-    dev: true
 
   /@radix-ui/react-label@2.0.2(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-N5ehvlM7qoTLx7nWPodsPYPgMzA5WM8zZChQg8nyFJKnDO5WHdba1vv5/H6IO5LtJMfD2Q3wh1qHFGNtK0w3bQ==}
@@ -13250,10 +13167,9 @@ packages:
       '@types/react-dom': 18.0.6
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-    dev: true
 
-  /@radix-ui/react-menu@2.0.5(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-Gw4f9pwdH+w5w+49k0gLjN0PfRDHvxmAgG16AbyJZ7zhwZ6PBHKtWohvnSwfusfnK3L68dpBREHpVkj8wEM7ZA==}
+  /@radix-ui/react-menu@2.0.6(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-BVkFLS+bUC8HcImkRKPSiVumA1VPOOEC5WBMiT+QAVsPzW1FJzI9KnqgGxVDPBcql5xXrHkD3JOVoXWEXD8SYA==}
     peerDependencies:
       '@types/react': ^18
       '@types/react-dom': ^18
@@ -13271,12 +13187,12 @@ packages:
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.0.21)(react@18.2.0)
       '@radix-ui/react-context': 1.0.1(@types/react@18.0.21)(react@18.2.0)
       '@radix-ui/react-direction': 1.0.1(@types/react@18.0.21)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.0.4(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.0.21)(react@18.2.0)
-      '@radix-ui/react-focus-scope': 1.0.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-focus-scope': 1.0.4(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-id': 1.0.1(@types/react@18.0.21)(react@18.2.0)
-      '@radix-ui/react-popper': 1.1.2(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-portal': 1.0.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-popper': 1.1.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-roving-focus': 1.0.4(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
@@ -13288,10 +13204,9 @@ packages:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       react-remove-scroll: 2.5.5(@types/react@18.0.21)(react@18.2.0)
-    dev: true
 
-  /@radix-ui/react-popover@1.0.6(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-cZ4defGpkZ0qTRtlIBzJLSzL6ht7ofhhW4i1+pkemjV1IKXm0wgCRnee154qlV6r9Ttunmh2TNZhMfV2bavUyA==}
+  /@radix-ui/react-popover@1.0.7(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-shtvVnlsxT6faMnK/a7n0wptwBD23xc1Z5mdrtKLwVEfsEMXodS0r5s0/g5P0hX//EKYZS2sxUjqfzlg52ZSnQ==}
     peerDependencies:
       '@types/react': ^18
       '@types/react-dom': ^18
@@ -13307,12 +13222,12 @@ packages:
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.0.21)(react@18.2.0)
       '@radix-ui/react-context': 1.0.1(@types/react@18.0.21)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.0.4(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.0.21)(react@18.2.0)
-      '@radix-ui/react-focus-scope': 1.0.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-focus-scope': 1.0.4(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-id': 1.0.1(@types/react@18.0.21)(react@18.2.0)
-      '@radix-ui/react-popper': 1.1.2(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-portal': 1.0.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-popper': 1.1.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-slot': 1.0.2(@types/react@18.0.21)(react@18.2.0)
@@ -13323,10 +13238,9 @@ packages:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       react-remove-scroll: 2.5.5(@types/react@18.0.21)(react@18.2.0)
-    dev: true
 
-  /@radix-ui/react-popper@1.1.2(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-1CnGGfFi/bbqtJZZ0P/NQY20xdG3E0LALJaLUEoKwPLwl6PPPfbeiCqMVQnhoFRAxjJj4RpBRJzDmUgsex2tSg==}
+  /@radix-ui/react-popper@1.1.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==}
     peerDependencies:
       '@types/react': ^18
       '@types/react-dom': ^18
@@ -13353,10 +13267,9 @@ packages:
       '@types/react-dom': 18.0.6
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-    dev: true
 
-  /@radix-ui/react-portal@1.0.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-xLYZeHrWoPmA5mEKEfZZevoVRK/Q43GfzRXkWV6qawIWWK8t6ifIiLQdd7rmQ4Vk1bmI21XhqF9BN3jWf+phpA==}
+  /@radix-ui/react-portal@1.0.4(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==}
     peerDependencies:
       '@types/react': ^18
       '@types/react-dom': ^18
@@ -13374,7 +13287,6 @@ packages:
       '@types/react-dom': 18.0.6
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-    dev: true
 
   /@radix-ui/react-presence@1.0.1(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==}
@@ -13396,7 +13308,6 @@ packages:
       '@types/react-dom': 18.0.6
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-    dev: true
 
   /@radix-ui/react-primitive@1.0.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==}
@@ -13417,7 +13328,6 @@ packages:
       '@types/react-dom': 18.0.6
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-    dev: true
 
   /@radix-ui/react-radio-group@1.1.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-x+yELayyefNeKeTx4fjK6j99Fs6c4qKm3aY38G3swQVTN6xMpsrbigC0uHs2L//g8q4qR7qOcww8430jJmi2ag==}
@@ -13447,7 +13357,6 @@ packages:
       '@types/react-dom': 18.0.6
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-    dev: true
 
   /@radix-ui/react-roving-focus@1.0.4(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==}
@@ -13476,10 +13385,9 @@ packages:
       '@types/react-dom': 18.0.6
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-    dev: true
 
-  /@radix-ui/react-scroll-area@1.0.4(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-OIClwBkwPG+FKvC4OMTRaa/3cfD069nkKFFL/TQzRzaO42Ce5ivKU9VMKgT7UU6UIkjcQqKBrDOIzWtPGw6e6w==}
+  /@radix-ui/react-scroll-area@1.0.5(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-b6PAgH4GQf9QEn8zbT2XUHpW5z8BzqEc7Kl11TwDrvuTrxlkcjTD5qa/bxgKr+nmuXKu4L/W5UZ4mlP/VG/5Gw==}
     peerDependencies:
       '@types/react': ^18
       '@types/react-dom': ^18
@@ -13505,10 +13413,9 @@ packages:
       '@types/react-dom': 18.0.6
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-    dev: true
 
-  /@radix-ui/react-select@1.2.2(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-zI7McXr8fNaSrUY9mZe4x/HC0jTLY9fWNhO1oLWYMQGDXuV4UCivIGTxwioSzO0ZCYX9iSLyWmAh/1TOmX3Cnw==}
+  /@radix-ui/react-select@2.0.0(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-RH5b7af4oHtkcHS7pG6Sgv5rk5Wxa7XI8W5gvB1N/yiuDGZxko1ynvOiVhFM7Cis2A8zxF9bTOUVbRDzPepe6w==}
     peerDependencies:
       '@types/react': ^18
       '@types/react-dom': ^18
@@ -13527,12 +13434,12 @@ packages:
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.0.21)(react@18.2.0)
       '@radix-ui/react-context': 1.0.1(@types/react@18.0.21)(react@18.2.0)
       '@radix-ui/react-direction': 1.0.1(@types/react@18.0.21)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.0.4(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.0.21)(react@18.2.0)
-      '@radix-ui/react-focus-scope': 1.0.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-focus-scope': 1.0.4(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-id': 1.0.1(@types/react@18.0.21)(react@18.2.0)
-      '@radix-ui/react-popper': 1.1.2(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-portal': 1.0.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-popper': 1.1.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-slot': 1.0.2(@types/react@18.0.21)(react@18.2.0)
       '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.0.21)(react@18.2.0)
@@ -13546,7 +13453,6 @@ packages:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       react-remove-scroll: 2.5.5(@types/react@18.0.21)(react@18.2.0)
-    dev: true
 
   /@radix-ui/react-separator@1.0.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-itYmTy/kokS21aiV5+Z56MZB54KrhPgn6eHDKkFeOLR34HMN2s8PaN47qZZAGnvupcjxHaFZnW4pQEh0BvvVuw==}
@@ -13567,7 +13473,6 @@ packages:
       '@types/react-dom': 18.0.6
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-    dev: true
 
   /@radix-ui/react-slider@1.1.2(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-NKs15MJylfzVsCagVSWKhGGLNR1W9qWs+HtgbmjjVUB3B9+lb3PYoXxVju3kOrpf0VKyVCtZp+iTwVoqpa1Chw==}
@@ -13598,7 +13503,6 @@ packages:
       '@types/react-dom': 18.0.6
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-    dev: true
 
   /@radix-ui/react-slot@1.0.2(@types/react@18.0.21)(react@18.2.0):
     resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==}
@@ -13613,7 +13517,6 @@ packages:
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.0.21)(react@18.2.0)
       '@types/react': 18.0.21
       react: 18.2.0
-    dev: true
 
   /@radix-ui/react-switch@1.0.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-mxm87F88HyHztsI7N+ZUmEoARGkC22YVW5CaC+Byc+HRpuvCrOBPTAnXgf+tZ/7i0Sg/eOePGdMhUKhPaQEqow==}
@@ -13640,7 +13543,6 @@ packages:
       '@types/react-dom': 18.0.6
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-    dev: true
 
   /@radix-ui/react-tabs@1.0.4(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-egZfYY/+wRNCflXNHx+dePvnz9FbmssDTJBtgRfDY7e8SE5oIo3Py2eCB1ckAbh1Q7cQ/6yJZThJ++sgbxibog==}
@@ -13668,10 +13570,9 @@ packages:
       '@types/react-dom': 18.0.6
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-    dev: true
 
-  /@radix-ui/react-tooltip@1.0.6(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-DmNFOiwEc2UDigsYj6clJENma58OelxD24O4IODoZ+3sQc3Zb+L8w1EP+y9laTuKCLAysPw4fD6/v0j4KNV8rg==}
+  /@radix-ui/react-tooltip@1.0.7(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-lPh5iKNFVQ/jav/j6ZrWq3blfDJ0OH9R6FlNUHPMqdLuQ9vwDgFsRxvl8b7Asuy5c8xmoojHUxKHQSOAvMHxyw==}
     peerDependencies:
       '@types/react': ^18
       '@types/react-dom': ^18
@@ -13687,10 +13588,10 @@ packages:
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.0.21)(react@18.2.0)
       '@radix-ui/react-context': 1.0.1(@types/react@18.0.21)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.0.4(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-id': 1.0.1(@types/react@18.0.21)(react@18.2.0)
-      '@radix-ui/react-popper': 1.1.2(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-portal': 1.0.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-popper': 1.1.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-slot': 1.0.2(@types/react@18.0.21)(react@18.2.0)
@@ -13700,7 +13601,6 @@ packages:
       '@types/react-dom': 18.0.6
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-    dev: true
 
   /@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.0.21)(react@18.2.0):
     resolution: {integrity: sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==}
@@ -13714,7 +13614,6 @@ packages:
       '@babel/runtime': 7.23.2
       '@types/react': 18.0.21
       react: 18.2.0
-    dev: true
 
   /@radix-ui/react-use-controllable-state@1.0.1(@types/react@18.0.21)(react@18.2.0):
     resolution: {integrity: sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==}
@@ -13729,7 +13628,6 @@ packages:
       '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.0.21)(react@18.2.0)
       '@types/react': 18.0.21
       react: 18.2.0
-    dev: true
 
   /@radix-ui/react-use-escape-keydown@1.0.3(@types/react@18.0.21)(react@18.2.0):
     resolution: {integrity: sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==}
@@ -13744,7 +13642,6 @@ packages:
       '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.0.21)(react@18.2.0)
       '@types/react': 18.0.21
       react: 18.2.0
-    dev: true
 
   /@radix-ui/react-use-layout-effect@1.0.1(@types/react@18.0.21)(react@18.2.0):
     resolution: {integrity: sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==}
@@ -13758,7 +13655,6 @@ packages:
       '@babel/runtime': 7.23.2
       '@types/react': 18.0.21
       react: 18.2.0
-    dev: true
 
   /@radix-ui/react-use-previous@1.0.1(@types/react@18.0.21)(react@18.2.0):
     resolution: {integrity: sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==}
@@ -13772,7 +13668,6 @@ packages:
       '@babel/runtime': 7.23.2
       '@types/react': 18.0.21
       react: 18.2.0
-    dev: true
 
   /@radix-ui/react-use-rect@1.0.1(@types/react@18.0.21)(react@18.2.0):
     resolution: {integrity: sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==}
@@ -13787,7 +13682,6 @@ packages:
       '@radix-ui/rect': 1.0.1
       '@types/react': 18.0.21
       react: 18.2.0
-    dev: true
 
   /@radix-ui/react-use-size@1.0.1(@types/react@18.0.21)(react@18.2.0):
     resolution: {integrity: sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==}
@@ -13802,7 +13696,6 @@ packages:
       '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.0.21)(react@18.2.0)
       '@types/react': 18.0.21
       react: 18.2.0
-    dev: true
 
   /@radix-ui/react-visually-hidden@1.0.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==}
@@ -13823,16 +13716,14 @@ packages:
       '@types/react-dom': 18.0.6
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-    dev: true
 
   /@radix-ui/rect@1.0.1:
     resolution: {integrity: sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==}
     dependencies:
       '@babel/runtime': 7.23.2
-    dev: true
 
-  /@radix-ui/themes@1.1.2(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-VnNeanSxHQurSgwQe5Z3zNZP5SrwhRY+RW97FPZe7TOJGpa+rpDHLDR9vourSsEGxsgrtTXHJaoII1pyIXDi8A==}
+  /@radix-ui/themes@2.0.0(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-XIJkXLzIOerrmk24wpyYnPnHC+z4KdH4uFGKBcMqKSSAly9GuBDWpscdxaEja1AvOJJChpmONsD768M/GOVpfg==}
     peerDependencies:
       '@types/react': ^18
       '@types/react-dom': ^18
@@ -13844,37 +13735,37 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/colors': 2.1.0
+      '@radix-ui/colors': 3.0.0
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-accessible-icon': 1.0.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-alert-dialog': 1.0.4(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-alert-dialog': 1.0.5(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-aspect-ratio': 1.0.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-avatar': 1.0.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-avatar': 1.0.4(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-checkbox': 1.0.4(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-context-menu': 2.1.4(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-dialog': 1.0.4(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-context-menu': 2.1.5(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-dialog': 1.0.5(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-direction': 1.0.1(@types/react@18.0.21)(react@18.2.0)
-      '@radix-ui/react-dropdown-menu': 2.0.5(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-dropdown-menu': 2.0.6(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-form': 0.0.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-hover-card': 1.0.6(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-popover': 1.0.6(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-portal': 1.0.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-hover-card': 1.0.7(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-popover': 1.0.7(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-radio-group': 1.1.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-scroll-area': 1.0.4(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-select': 1.2.2(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-scroll-area': 1.0.5(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-select': 2.0.0(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-separator': 1.0.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-slider': 1.1.2(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-slot': 1.0.2(@types/react@18.0.21)(react@18.2.0)
       '@radix-ui/react-switch': 1.0.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-tabs': 1.0.4(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-tooltip': 1.0.6(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-tooltip': 1.0.7(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.0.21)(react@18.2.0)
       '@radix-ui/react-visually-hidden': 1.0.3(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.2.0)(react@18.2.0)
       '@types/react': 18.0.21
       '@types/react-dom': 18.0.6
       classnames: 2.3.2
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-    dev: true
 
   /@rc-component/context@1.3.0(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-6QdaCJ7Wn5UZLJs15IEfqy4Ru3OaL5ctqpQYWd5rlfV9wwzrzdt6+kgAQZV/qdB0MUPN4nhyBfRembQCIvBf+w==}
@@ -18363,7 +18254,6 @@ packages:
     engines: {node: '>=10'}
     dependencies:
       tslib: 2.4.0
-    dev: true
 
   /aria-query@5.0.0:
     resolution: {integrity: sha512-V+SM7AbUwJ+EBnB8+DXs0hPZHO0W6pqBcc0dW90OwtVG02PswOu/teuARoLQjdDOH+t9pJgGnW5/Qmouf3gPJg==}
@@ -18817,6 +18707,7 @@ packages:
       '@babel/runtime': 7.23.2
       cosmiconfig: 7.0.1
       resolve: 1.22.4
+    dev: false
 
   /babel-plugin-named-exports-order@0.0.2:
     resolution: {integrity: sha512-OgOYHOLoRK+/mvXU9imKHlG6GkPLYrUCvFXG/CM93R/aNNO8pOOF4aS+S8CCHMDQoNSeiOYEZb/G6RwL95Jktw==}
@@ -22807,10 +22698,6 @@ packages:
       - supports-color
     dev: true
 
-  /find-root@1.1.0:
-    resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}
-    dev: true
-
   /find-up@1.1.2:
     resolution: {integrity: sha512-jvElSjyuo4EMQGoTwo1uJU5pQMwTW5lS1x05zzfJuTIyLR3zwO27LYrxNg+dlvKpGOuGy/MzBdXh80g0ve5+HA==}
     engines: {node: '>=0.10.0'}
@@ -23324,7 +23211,6 @@ packages:
   /get-nonce@1.0.1:
     resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
     engines: {node: '>=6'}
-    dev: true
 
   /get-package-type@0.1.0:
     resolution: {integrity: sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==}
@@ -27536,6 +27422,11 @@ packages:
     engines: {node: '>=6'}
     dev: false
 
+  /modern-normalize@2.0.0:
+    resolution: {integrity: sha512-CxBoEVKh5U4DH3XuNbc5ONLF6dQBc8dSc7pdZ1957FGbIO5JBqGqqchhET9dTexri8/pk9xBL6+5ceOtCIp1QA==}
+    engines: {node: '>=6'}
+    dev: true
+
   /moment@2.29.3:
     resolution: {integrity: sha512-c6YRvhEo//6T2Jz/vVtYzqBzwvPT95JBQ+smCytzf7c50oMZRsR/a4w88aD34I+/QVSfnoAnSBFPJHItlOMJVw==}
 
@@ -28867,6 +28758,19 @@ packages:
       postcss-value-parser: 4.2.0
     dev: false
 
+  /postcss-custom-media@10.0.2(postcss@8.4.31):
+    resolution: {integrity: sha512-zcEFNRmDm2fZvTPdI1pIW3W//UruMcLosmMiCdpQnrCsTRzWlKQPYMa1ud9auL0BmrryKK1+JjIGn19K0UjO/w==}
+    engines: {node: ^14 || ^16 || >=18}
+    peerDependencies:
+      postcss: ^8.4
+    dependencies:
+      '@csstools/cascade-layer-name-parser': 1.0.5(@csstools/css-parser-algorithms@2.3.2)(@csstools/css-tokenizer@2.2.1)
+      '@csstools/css-parser-algorithms': 2.3.2(@csstools/css-tokenizer@2.2.1)
+      '@csstools/css-tokenizer': 2.2.1
+      '@csstools/media-query-list-parser': 2.1.5(@csstools/css-parser-algorithms@2.3.2)(@csstools/css-tokenizer@2.2.1)
+      postcss: 8.4.31
+    dev: true
+
   /postcss-custom-properties@13.1.5(postcss@8.4.31):
     resolution: {integrity: sha512-98DXk81zTGqMVkGANysMHbGIg3voH383DYo3/+c+Abzay3nao+vM/f4Jgzsakk9S7BDsEw5DiW7sFy5G4W2wLA==}
     engines: {node: ^14 || ^16 || >=18}
@@ -31039,6 +30943,14 @@ packages:
       react-side-effect: 2.1.2(react@18.2.0)
     dev: false
 
+  /react-icons@4.11.0(react@18.2.0):
+    resolution: {integrity: sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==}
+    peerDependencies:
+      react: '*'
+    dependencies:
+      react: 18.2.0
+    dev: true
+
   /react-inspector@5.1.1(react@18.2.0):
     resolution: {integrity: sha512-GURDaYzoLbW8pMGXwYPDBIv6nqei4kK7LPRZ9q9HCZF54wqXz/dnylBp/kfE9XmekBhHvLDdcYeyIwSrvtOiWg==}
     peerDependencies:
@@ -31130,7 +31042,6 @@ packages:
       react: 18.2.0
       react-style-singleton: 2.2.1(@types/react@18.0.21)(react@18.2.0)
       tslib: 2.4.0
-    dev: true
 
   /react-remove-scroll@2.5.5(@types/react@18.0.21)(react@18.2.0):
     resolution: {integrity: sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==}
@@ -31149,7 +31060,6 @@ packages:
       tslib: 2.4.0
       use-callback-ref: 1.3.0(@types/react@18.0.21)(react@18.2.0)
       use-sidecar: 1.1.2(@types/react@18.0.21)(react@18.2.0)
-    dev: true
 
   /react-router-dom@5.3.4(react@18.2.0):
     resolution: {integrity: sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==}
@@ -31227,7 +31137,6 @@ packages:
       invariant: 2.2.4
       react: 18.2.0
       tslib: 2.4.0
-    dev: true
 
   /react-syntax-highlighter@15.5.0(react@18.2.0):
     resolution: {integrity: sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==}
@@ -32586,6 +32495,7 @@ packages:
   /source-map@0.5.7:
     resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==}
     engines: {node: '>=0.10.0'}
+    dev: false
 
   /source-map@0.6.1:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
@@ -33666,6 +33576,10 @@ packages:
   /through@2.3.8:
     resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
 
+  /thumbhash@0.1.1:
+    resolution: {integrity: sha512-kH5pKeIIBPQXAOni2AiY/Cu/NKdkFREdpH+TLdM0g6WA7RriCv0kPLgP731ady67MhTAqrVG/4mnEeibVuCJcg==}
+    dev: false
+
   /timers-browserify@2.0.12:
     resolution: {integrity: sha512-9phl76Cqm6FhSX9Xe1ZUAMLtm1BLkKj2Qd5ApyWkXzsMRaA7dgr81kf4wJmQf/hAvg8EEyJxDo3du/0KlhPiKQ==}
     engines: {node: '>=0.6.0'}