diff --git a/manifest/backend.ai-white-text.svg b/manifest/backend.ai-white-text.svg
new file mode 100644
index 0000000000..431c69c6d6
--- /dev/null
+++ b/manifest/backend.ai-white-text.svg
@@ -0,0 +1,24 @@
+<svg width="159" height="26" viewBox="0 0 159 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="white logo_&#236;&#136;&#152;&#236;&#160;&#149;">
+<g id="Group 399">
+<g id="logo_white">
+<path id="Vector" d="M134.75 7.66086H137.108L135.916 4.47021L134.75 7.66086Z" fill="white"/>
+<path id="Vector_2" d="M140.607 0.946289H134.453C131.146 0.946289 128.409 3.72076 128.409 7.13336V7.43856C128.409 10.8234 131.119 13.6256 134.453 13.6256H140.607C143.914 13.6256 146.651 10.8512 146.651 7.43856V7.13336C146.651 3.7485 143.941 0.946289 140.607 0.946289ZM138.086 10.3518L137.462 8.63158H134.399L133.776 10.3518H132.502L135.212 3.44331H136.703L139.441 10.3518H138.086ZM141.637 10.3518H140.417V3.44331H141.637V10.3518Z" fill="white"/>
+<path id="Vector_3" d="M0 24.5357V2.83936H3.71359V11.135L3.06303 13.4101H4.01176C4.71653 11.2737 6.31581 9.41486 9.78544 9.41486C13.2551 9.41486 16.3181 12.8275 16.3181 17.1279C16.3181 21.4283 13.9869 24.8409 9.78544 24.8409C5.58393 24.8409 4.71653 22.982 4.01176 20.8734H3.06303L3.71359 23.1207V24.5357H0ZM8.18616 21.5393C10.8697 21.5393 12.5774 20.2076 12.5774 17.1279C12.5774 14.0482 10.8697 12.7165 8.18616 12.7165C5.50261 12.7165 3.71359 14.0482 3.71359 17.1279C3.71359 20.2076 5.52972 21.5393 8.18616 21.5393Z" fill="white"/>
+<path id="Vector_4" d="M34.9146 24.5857H31.2281V23.1707L31.8787 20.9234H30.93C30.2252 23.032 28.4362 24.8909 25.1563 24.8909C21.8764 24.8909 18.2441 21.4783 18.2441 17.1779C18.2441 12.8774 20.7922 9.46484 25.1563 9.46484C29.5204 9.46484 30.2252 11.3237 30.93 13.4601H31.8787L31.2281 11.185V9.77003H34.9146V24.5857ZM26.5387 12.7942C23.8552 12.7942 21.9577 14.015 21.9577 17.2056C21.9577 20.3963 23.8552 21.617 26.5387 21.617C29.2223 21.617 31.201 20.3963 31.201 17.2056C31.201 14.015 29.1681 12.7942 26.5387 12.7942Z" fill="white"/>
+<path id="Vector_5" d="M44.4834 9.46484C48.0072 9.46484 51.5853 11.4347 51.8835 15.7074H48.1699C47.8717 13.793 46.4622 12.7942 44.5105 12.7942C42.5588 12.7942 40.5259 14.6254 40.5259 17.2056C40.5259 19.7859 41.8541 21.617 44.5105 21.617C47.1669 21.617 47.8988 20.6182 48.1699 18.7038H51.8835C51.5853 22.9488 48.0072 24.9464 44.4834 24.9464C40.9596 24.9464 36.7852 21.9222 36.7852 17.2334C36.7852 12.5445 39.8482 9.52032 44.4834 9.52032V9.46484Z" fill="white"/>
+<path id="Vector_6" d="M78.4479 9.46484C82.785 9.46484 85.7396 12.1838 85.7396 16.7062V17.9547H74.5717C74.6259 20.1188 75.8728 21.7835 78.8816 21.7835C81.8904 21.7835 82.1615 20.9512 82.541 19.3974H86.2546C85.848 21.5893 83.7066 24.8909 78.8545 24.8909C74.0025 24.8909 71.0479 21.2286 71.0479 17.0114C71.0479 12.7942 74.1109 9.49258 78.4479 9.49258V9.46484ZM82.2157 15.6519C82.2157 14.015 81.1315 12.6 78.4479 12.6C75.7644 12.6 74.5717 14.015 74.5717 15.6519H82.2157Z" fill="white"/>
+<path id="Vector_7" d="M92.4904 18.6484V24.558H88.7769V9.74229H92.4904V11.8509L91.8399 14.126H92.7886C93.3578 11.4625 95.174 9.46484 98.2912 9.46484C101.408 9.46484 104.011 11.7677 104.011 16.1791V24.5857H100.324V16.734C100.324 13.8763 99.3755 12.7665 97.0714 12.7665C94.7674 12.7665 92.5175 14.5699 92.5175 18.6761L92.4904 18.6484Z" fill="white"/>
+<path id="Vector_8" d="M122.635 24.5357H118.921V23.1207L119.626 20.8734H118.65C117.945 22.982 116.373 24.8409 112.876 24.8409C109.38 24.8409 106.344 21.4283 106.344 17.1279C106.344 12.8275 108.675 9.41486 112.876 9.41486C117.078 9.41486 117.945 11.2737 118.65 13.4101H119.626L118.921 11.135V2.83936H122.635V24.5357ZM114.449 12.7442C111.765 12.7442 110.057 14.076 110.057 17.1556C110.057 20.2353 111.765 21.567 114.449 21.567C117.132 21.567 118.921 20.2353 118.921 17.1556C118.921 14.076 117.132 12.7442 114.449 12.7442Z" fill="white"/>
+<path id="Vector_9" d="M64.7319 9.82552L57.9824 15.7074V9.46484H54.2417V24.6412H57.9824V20.313L60.6659 18.0102L65.7077 24.6412H70.1803L63.3224 15.7351L70.1803 9.82552H64.7319Z" fill="white"/>
+</g>
+<g id="WebUI">
+<path id="Vector_10" d="M158.755 17.126V24.9463H157.718V17.126H158.755Z" fill="white"/>
+<path id="Vector_11" d="M154.984 17.126H156.016V22.4165C156.016 23.0037 155.885 23.4925 155.624 23.8828C155.362 24.2731 155.015 24.5667 154.582 24.7637C154.152 24.957 153.685 25.0537 153.18 25.0537C152.65 25.0537 152.17 24.957 151.74 24.7637C151.314 24.5667 150.976 24.2731 150.725 23.8828C150.478 23.4925 150.354 23.0037 150.354 22.4165V17.126H151.38V22.4165C151.38 22.8247 151.456 23.1613 151.606 23.4263C151.756 23.6912 151.966 23.8882 152.234 24.0171C152.507 24.146 152.822 24.2104 153.18 24.2104C153.541 24.2104 153.856 24.146 154.125 24.0171C154.397 23.8882 154.608 23.6912 154.759 23.4263C154.909 23.1613 154.984 22.8247 154.984 22.4165V17.126Z" fill="white"/>
+<path id="Vector_12" d="M144.178 16.6963H145.177V23.8184L145.091 24.9463H144.178V16.6963ZM149.103 21.9922V22.105C149.103 22.5275 149.053 22.9196 148.953 23.2812C148.852 23.6393 148.706 23.9508 148.512 24.2158C148.319 24.4808 148.083 24.6867 147.803 24.8335C147.524 24.9803 147.203 25.0537 146.842 25.0537C146.473 25.0537 146.149 24.991 145.87 24.8657C145.594 24.7368 145.361 24.5524 145.171 24.3125C144.982 24.0726 144.829 23.7826 144.715 23.4424C144.604 23.1022 144.527 22.7191 144.484 22.293V21.7988C144.527 21.3691 144.604 20.9842 144.715 20.644C144.829 20.3039 144.982 20.0138 145.171 19.7739C145.361 19.5304 145.594 19.346 145.87 19.2207C146.145 19.0918 146.466 19.0273 146.831 19.0273C147.196 19.0273 147.52 19.099 147.803 19.2422C148.086 19.3818 148.322 19.5824 148.512 19.8438C148.706 20.1051 148.852 20.4185 148.953 20.7837C149.053 21.1453 149.103 21.5482 149.103 21.9922ZM148.104 22.105V21.9922C148.104 21.7021 148.077 21.43 148.023 21.1758C147.97 20.918 147.884 20.6924 147.766 20.499C147.647 20.3021 147.492 20.1481 147.298 20.0371C147.105 19.9225 146.867 19.8652 146.584 19.8652C146.333 19.8652 146.115 19.9082 145.929 19.9941C145.746 20.0801 145.59 20.1965 145.461 20.3433C145.333 20.4865 145.227 20.6512 145.145 20.8374C145.066 21.02 145.007 21.2098 144.967 21.4067V22.7012C145.025 22.9518 145.118 23.1935 145.247 23.4263C145.379 23.6554 145.555 23.8434 145.773 23.9902C145.995 24.137 146.269 24.2104 146.595 24.2104C146.863 24.2104 147.092 24.1567 147.282 24.0493C147.476 23.9383 147.631 23.7861 147.75 23.5928C147.871 23.3994 147.961 23.1756 148.018 22.9214C148.075 22.6672 148.104 22.395 148.104 22.105Z" fill="white"/>
+<path id="Vector_13" d="M140.762 25.0537C140.357 25.0537 139.99 24.9857 139.661 24.8496C139.335 24.71 139.054 24.5148 138.817 24.2642C138.585 24.0135 138.406 23.7163 138.28 23.3726C138.155 23.0288 138.092 22.6528 138.092 22.2446V22.019C138.092 21.5464 138.162 21.1257 138.302 20.7568C138.441 20.3844 138.631 20.0693 138.871 19.8115C139.111 19.5537 139.383 19.3586 139.688 19.2261C139.992 19.0936 140.307 19.0273 140.633 19.0273C141.048 19.0273 141.406 19.099 141.707 19.2422C142.011 19.3854 142.26 19.5859 142.454 19.8438C142.647 20.098 142.79 20.3988 142.883 20.7461C142.976 21.0898 143.023 21.4658 143.023 21.874V22.3198H138.683V21.5088H142.029V21.4336C142.015 21.1758 141.961 20.9251 141.868 20.6816C141.779 20.4382 141.635 20.2376 141.438 20.0801C141.242 19.9225 140.973 19.8438 140.633 19.8438C140.407 19.8438 140.2 19.8921 140.01 19.9888C139.82 20.0819 139.657 20.2215 139.521 20.4077C139.385 20.5939 139.279 20.8213 139.204 21.0898C139.129 21.3584 139.091 21.6681 139.091 22.019V22.2446C139.091 22.5203 139.129 22.7799 139.204 23.0234C139.283 23.2633 139.396 23.4746 139.542 23.6572C139.693 23.8398 139.874 23.9831 140.085 24.0869C140.3 24.1908 140.543 24.2427 140.815 24.2427C141.166 24.2427 141.464 24.1711 141.707 24.0278C141.951 23.8846 142.164 23.693 142.346 23.4531L142.948 23.9312C142.822 24.1209 142.663 24.3018 142.47 24.4736C142.276 24.6455 142.038 24.7852 141.755 24.8926C141.476 25 141.145 25.0537 140.762 25.0537Z" fill="white"/>
+<path id="Vector_14" d="M130.965 22.583L132.517 17.126H133.269L132.834 19.2476L131.164 24.9463H130.417L130.965 22.583ZM129.359 17.126L130.594 22.4756L130.965 24.9463H130.224L128.328 17.126H129.359ZM135.278 22.4702L136.486 17.126H137.523L135.632 24.9463H134.891L135.278 22.4702ZM133.382 17.126L134.891 22.583L135.439 24.9463H134.692L133.081 19.2476L132.641 17.126H133.382Z" fill="white"/>
+</g>
+</g>
+</g>
+</svg>
diff --git a/react/src/App.tsx b/react/src/App.tsx
index 3e2da8daf0..75ef657d21 100644
--- a/react/src/App.tsx
+++ b/react/src/App.tsx
@@ -29,13 +29,15 @@ const EndpointDetailPage = React.lazy(
   () => import('./pages/EndpointDetailPage'),
 );
 // const SummaryPage = React.lazy(() => import('./pages/SummaryPage'));
+const StartPage = React.lazy(() => import('./pages/StartPage'));
 const EnvironmentPage = React.lazy(() => import('./pages/EnvironmentPage'));
 const MyEnvironmentPage = React.lazy(() => import('./pages/MyEnvironmentPage'));
 const StorageHostSettingPage = React.lazy(
   () => import('./pages/StorageHostSettingPage'),
 );
 const UserSettingsPage = React.lazy(() => import('./pages/UserSettingsPage'));
-const SessionListPage = React.lazy(() => import('./pages/SessionListPage'));
+// const SessionListPage = React.lazy(() => import('./pages/SessionListPage'));
+const NeoSessionPage = React.lazy(() => import('./pages/NeoSessionPage'));
 const SessionLauncherPage = React.lazy(
   () => import('./pages/SessionLauncherPage'),
 );
@@ -61,9 +63,9 @@ const ComputeSessionList = React.lazy(
   () => import('./components/ComputeSessionList'),
 );
 
-const RedirectToSummary = () => {
+const RedirectToStart = () => {
   useSuspendedBackendaiClient();
-  const pathName = '/summary';
+  const pathName = '/start';
   document.dispatchEvent(
     new CustomEvent('move-to-from-react', {
       detail: {
@@ -72,7 +74,7 @@ const RedirectToSummary = () => {
       },
     }),
   );
-  return <Navigate to="/summary" replace />;
+  return <Navigate to="/start" replace />;
 };
 
 const router = createBrowserRouter([
@@ -109,20 +111,20 @@ const router = createBrowserRouter([
     children: [
       {
         path: '/',
-        element: <RedirectToSummary />,
+        element: <RedirectToStart />,
       },
       {
         //for electron dev mode
         path: '/build/electron-app/app/index.html',
-        element: <RedirectToSummary />,
+        element: <RedirectToStart />,
       },
       {
         //for electron prod mode
         path: '/app/index.html',
-        element: <RedirectToSummary />,
+        element: <RedirectToStart />,
       },
       {
-        path: '/summary',
+        path: '/start',
         Component: () => {
           const { token } = theme.useToken();
           return (
@@ -135,10 +137,11 @@ const router = createBrowserRouter([
                 closable
               />
               {/* <SummaryPage /> */}
+              <StartPage />
             </>
           );
         },
-        handle: { labelKey: 'webui.menu.Summary' },
+        handle: { labelKey: 'start' },
       },
       {
         path: '/job',
@@ -308,7 +311,8 @@ const router = createBrowserRouter([
       {
         path: '/session',
         handle: { labelKey: 'webui.menu.Sessions' },
-        Component: SessionListPage,
+        Component: NeoSessionPage,
+        // Component: SessionListPage,
       },
       {
         path: '/session/start',
diff --git a/react/src/components/AllocatedResourcesCard.tsx b/react/src/components/AllocatedResourcesCard.tsx
new file mode 100644
index 0000000000..b03eda4946
--- /dev/null
+++ b/react/src/components/AllocatedResourcesCard.tsx
@@ -0,0 +1,127 @@
+import { useCurrentProjectValue } from '../hooks/useCurrentProject';
+import Flex from './Flex';
+import ResourceGroupSelect from './ResourceGroupSelect';
+import ResourceUnit, { ResourceUnitProps } from './ResourceUnit';
+import { SyncOutlined } from '@ant-design/icons';
+import {
+  Button,
+  Card,
+  CardProps,
+  ConfigProvider,
+  Divider,
+  Switch,
+  theme,
+  Typography,
+} from 'antd';
+import _ from 'lodash';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface AllocatedResourcesCardProps extends CardProps {}
+
+const AllocatedResourcesCard: React.FC<AllocatedResourcesCardProps> = ({
+  ...cardProps
+}) => {
+  const { token } = theme.useToken();
+  const { t } = useTranslation();
+  const currentProject = useCurrentProjectValue();
+
+  const resourceUnitMockData: Array<ResourceUnitProps> = [
+    {
+      name: 'CPU',
+      displayUnit: 'Core',
+      value: 12,
+      percentage: (4 / 12) * 100,
+    },
+    {
+      name: 'RAM',
+      displayUnit: 'GiB',
+      value: 256,
+      percentage: (8 / 12) * 100,
+    },
+    {
+      name: 'FGPU',
+      displayUnit: 'GiB',
+      value: 3.5,
+      percentage: (4 / 12) * 100,
+    },
+    {
+      name: 'ATOM',
+      displayUnit: 'Unit',
+      value: 2,
+      percentage: (2 / 12) * 100,
+    },
+  ];
+  return (
+    <ConfigProvider
+      theme={{
+        components: {
+          Button: {
+            onlyIconSizeLG: 20,
+          },
+        },
+      }}
+    >
+      <Card
+        {...cardProps}
+        style={{
+          width: '100%',
+          height: 240,
+          // width: 936,
+          // height: 192,
+        }}
+      >
+        <Flex justify="between" style={{ marginBottom: 26 }}>
+          <Flex gap={10}>
+            <Typography.Title
+              level={4}
+              style={{
+                margin: 0,
+              }}
+            >
+              Allocated Resources
+            </Typography.Title>
+            <Switch defaultChecked />
+          </Flex>
+          <Flex>
+            <ResourceGroupSelect
+              placeholder={t('session.ResourceGroup')}
+              variant="borderless"
+              style={{ minWidth: 151, fontSize: token.fontSizeLG, padding: 0 }}
+              dropdownStyle={{ color: '#999999' }}
+              projectName={currentProject?.name}
+              value={currentProject?.name}
+            />
+            <Button
+              type="link"
+              size="large"
+              icon={<SyncOutlined />}
+              style={{ padding: 0, color: '#5DD2AD' }}
+            />
+          </Flex>
+        </Flex>
+        <Flex justify="between" style={{ maxWidth: 630 }}>
+          {_.map(
+            resourceUnitMockData,
+            (resourceUnit: ResourceUnitProps, index) => (
+              <>
+                <ResourceUnit
+                  key={index}
+                  name={resourceUnit.name}
+                  displayUnit={resourceUnit.displayUnit}
+                  value={resourceUnit.value}
+                  percentage={resourceUnit.percentage}
+                />
+                {index < resourceUnitMockData.length - 1 && (
+                  <Divider type="vertical" style={{ height: 70 }} />
+                )}
+              </>
+            ),
+          )}
+        </Flex>
+      </Card>
+    </ConfigProvider>
+  );
+};
+
+export default AllocatedResourcesCard;
diff --git a/react/src/components/BAIMenu.tsx b/react/src/components/BAIMenu.tsx
index 397124b750..e91fea70a6 100644
--- a/react/src/components/BAIMenu.tsx
+++ b/react/src/components/BAIMenu.tsx
@@ -1,11 +1,10 @@
 import { ConfigProvider, Menu, MenuProps, theme } from 'antd';
 import React from 'react';
 
-// interface BAIMenuProps extends MenuProps {
-
-// }
-
-const BAIMenu: React.FC<MenuProps> = ({ ...props }) => {
+interface BAIMenuProps extends MenuProps {
+  isAdminMenu?: boolean;
+}
+const BAIMenu: React.FC<BAIMenuProps> = ({ ...props }) => {
   const { token } = theme.useToken();
   return (
     <>
@@ -13,7 +12,6 @@ const BAIMenu: React.FC<MenuProps> = ({ ...props }) => {
         {`
           .bai-menu li.ant-menu-item.ant-menu-item-selected {
             overflow: visible;
-            font-weight: 600;
           }
           
           .bai-menu li.ant-menu-item.ant-menu-item-selected::before {
@@ -22,7 +20,6 @@ const BAIMenu: React.FC<MenuProps> = ({ ...props }) => {
             bottom: 0;
             position: absolute;
             right: auto;
-            border-right: 3px solid ${token.colorPrimary};
             transform: scaleY(1);
             opacity: 1;
             content: "";
@@ -33,8 +30,23 @@ const BAIMenu: React.FC<MenuProps> = ({ ...props }) => {
         theme={{
           components: {
             Menu: {
-              itemBorderRadius: 2,
+              itemBorderRadius: 20,
               itemMarginInline: 0,
+              colorPrimaryBorder: props.isAdminMenu
+                ? token.colorSuccess
+                : token.colorInfoHover,
+              itemHoverBg: props.isAdminMenu
+                ? token.colorSuccessBgHover
+                : token.colorInfoHover,
+              itemHoverColor: props.isAdminMenu
+                ? token.colorSuccessHover
+                : token.colorPrimaryBg,
+              itemSelectedBg: props.isAdminMenu
+                ? token.colorSuccessBgHover
+                : token.colorInfoHover,
+              itemSelectedColor: props.isAdminMenu
+                ? token.colorSuccessHover
+                : token.colorPrimaryBg,
             },
           },
         }}
diff --git a/react/src/components/BAINotificationButton.tsx b/react/src/components/BAINotificationButton.tsx
index 453c10efcb..92d63a636a 100644
--- a/react/src/components/BAINotificationButton.tsx
+++ b/react/src/components/BAINotificationButton.tsx
@@ -10,7 +10,9 @@ import { atom, useAtom } from 'jotai';
 import _ from 'lodash';
 import React, { useEffect } from 'react';
 
-interface Props extends ButtonProps {}
+interface Props extends ButtonProps {
+  iconColor?: string;
+}
 export const isOpenDrawerState = atom(false);
 
 const BAINotificationButton: React.FC<Props> = ({ ...props }) => {
@@ -37,7 +39,7 @@ const BAINotificationButton: React.FC<Props> = ({ ...props }) => {
         size="large"
         icon={
           <Badge dot={hasRunningBackgroundTask}>
-            <BellOutlined />
+            <BellOutlined style={{ color: props.iconColor ?? 'inherit' }} />
           </Badge>
         }
         type="text"
diff --git a/react/src/components/BAISider.tsx b/react/src/components/BAISider.tsx
index 568a899a62..3ff7b890fb 100644
--- a/react/src/components/BAISider.tsx
+++ b/react/src/components/BAISider.tsx
@@ -1,4 +1,5 @@
 import Flex from './Flex';
+import { DRAWER_WIDTH } from './WEBUINotificationDrawer';
 import { ConfigProvider, Grid, SiderProps, Typography, theme } from 'antd';
 import Sider from 'antd/es/layout/Sider';
 import _ from 'lodash';
@@ -56,7 +57,7 @@ const BAISider: React.FC<BAISiderProps> = ({
         `}
       </style>
       <Sider
-        width={221}
+        width={DRAWER_WIDTH}
         breakpoint="md"
         style={{
           overflowX: 'hidden',
@@ -65,7 +66,7 @@ const BAISider: React.FC<BAISiderProps> = ({
           position: 'sticky',
           top: 0,
           left: 0,
-          borderRight: '1px solid',
+          background: '#FFF',
           borderColor: token.colorBorder,
           paddingTop: token.paddingContentVerticalSM,
           scrollbarColor: 'auto',
@@ -86,7 +87,7 @@ const BAISider: React.FC<BAISiderProps> = ({
             algorithm: siderTheme === 'dark' ? theme.darkAlgorithm : undefined,
           }}
         >
-          <Flex
+          {/* <Flex
             direction="column"
             justify="start"
             align="start"
@@ -120,7 +121,7 @@ const BAISider: React.FC<BAISiderProps> = ({
                 {otherProps.collapsed ? logoTitleCollapsed : logoTitle}
               </Typography.Text>
             </div>
-          </Flex>
+          </Flex> */}
           {children}
           {bottomText && (
             <>
diff --git a/react/src/components/BAIStartBasicCard.tsx b/react/src/components/BAIStartBasicCard.tsx
new file mode 100644
index 0000000000..73a2048dc6
--- /dev/null
+++ b/react/src/components/BAIStartBasicCard.tsx
@@ -0,0 +1,127 @@
+import Flex from './Flex';
+import {
+  Button,
+  ButtonProps,
+  Card,
+  CardProps,
+  ConfigProvider,
+  Divider,
+  theme,
+  Typography,
+} from 'antd';
+
+export interface BAIStartBasicCardProps extends CardProps {
+  icon: React.ReactNode;
+  title: React.ReactNode;
+  footerButtonProps: ButtonProps;
+  description?: string;
+  secondary?: Boolean;
+}
+
+const BAIStartBasicCard: React.FC<BAIStartBasicCardProps> = ({
+  icon,
+  title,
+  footerButtonProps,
+  description,
+  secondary,
+  ...cardProps
+}) => {
+  const { token } = theme.useToken();
+
+  return (
+    <ConfigProvider
+      theme={{
+        components: {
+          Button: {
+            defaultBorderColor: 'none',
+            defaultColor: secondary ? '#E8FAF6' : '#FFF6E8',
+            defaultBg: secondary ? '#00BD9B' : token.colorPrimaryBg,
+            defaultHoverColor: secondary ? '#00BD9B' : token.colorPrimary,
+            defaultHoverBorderColor: secondary ? '#00BD9B' : token.colorPrimary,
+          },
+        },
+      }}
+    >
+      <Card
+        {...cardProps}
+        styles={{
+          body: {
+            paddingTop: token.paddingSM,
+            paddingBottom: token.paddingSM,
+            paddingLeft: token.paddingMD,
+            paddingRight: token.paddingMD,
+            width: 210,
+            height: 308,
+          },
+        }}
+      >
+        <Flex
+          direction="column"
+          justify="between"
+          align="stretch"
+          style={{ height: '100%' }}
+        >
+          <Flex
+            align="center"
+            direction="column"
+            gap={16}
+            style={{
+              minHeight: 202,
+            }}
+          >
+            <Flex
+              align="center"
+              justify="center"
+              style={{
+                width: 50,
+                height: 50,
+                padding: 0,
+                border: 0,
+                color: secondary ? '#00BD9B' : '#FF7A00',
+                background: secondary ? '#E8FAF6' : '#FFF6E8',
+                fontSize: token.sizeLG,
+                borderRadius: '50%',
+              }}
+            >
+              {icon}
+            </Flex>
+            <Typography.Text
+              strong
+              style={{
+                fontSize: token.fontSizeLG,
+                color: secondary ? '#00BD9B' : token.colorLink,
+                textAlign: 'center',
+              }}
+            >
+              {title}
+            </Typography.Text>
+            {description && (
+              <Typography.Paragraph
+                style={{
+                  color: token.colorTextDescription,
+                  fontSize: token.fontSize - 4,
+                  textAlign: 'center',
+                }}
+              >
+                {description}
+              </Typography.Paragraph>
+            )}
+          </Flex>
+          <Flex direction="column">
+            <Divider style={{ margin: 0, marginBottom: token.margin }} />
+            <Button
+              {...footerButtonProps}
+              size="large"
+              block
+              style={{
+                borderRadius: token.borderRadiusLG,
+              }}
+            />
+          </Flex>
+        </Flex>
+      </Card>
+    </ConfigProvider>
+  );
+};
+
+export default BAIStartBasicCard;
diff --git a/react/src/components/BAIStartSimpleCard.tsx b/react/src/components/BAIStartSimpleCard.tsx
new file mode 100644
index 0000000000..7b385a4be3
--- /dev/null
+++ b/react/src/components/BAIStartSimpleCard.tsx
@@ -0,0 +1,111 @@
+import Flex from './Flex';
+import {
+  Button,
+  ButtonProps,
+  Card,
+  CardProps,
+  ConfigProvider,
+  theme,
+  Typography,
+} from 'antd';
+
+export interface BAIStartSimpleCardProps extends CardProps {
+  icon: React.ReactNode;
+  title: React.ReactNode;
+  footerButtonProps: ButtonProps;
+  description?: string;
+  secondary?: Boolean;
+}
+
+const BAIStartSimpleCard: React.FC<BAIStartSimpleCardProps> = ({
+  icon,
+  title,
+  footerButtonProps,
+  description,
+  secondary,
+  ...cardProps
+}) => {
+  const { token } = theme.useToken();
+
+  return (
+    <ConfigProvider
+      theme={{
+        components: {
+          Button: {
+            defaultBorderColor: 'none',
+            defaultColor: secondary ? '#E8FAF6' : '#FFF6E8',
+            defaultBg: secondary ? '#00BD9B' : token.colorPrimary,
+            defaultHoverColor: secondary ? '#00BD9B' : token.colorPrimary,
+            defaultHoverBorderColor: secondary ? '#00BD9B' : token.colorPrimary,
+          },
+        },
+      }}
+    >
+      <Card
+        styles={{
+          body: {
+            width: 194,
+            height: 192,
+          },
+        }}
+        {...cardProps}
+      >
+        <Flex
+          direction="column"
+          justify="center"
+          align="stretch"
+          style={{ height: '100%' }}
+        >
+          <Flex align="center" direction="column" gap={16}>
+            <Flex
+              align="center"
+              justify="center"
+              style={{
+                width: 50,
+                height: 50,
+                padding: 0,
+                border: 0,
+                color: secondary ? '#00BD9B' : '#FF7A00',
+                background: secondary ? '#E8FAF6' : '#FFF6E8',
+                fontSize: token.sizeLG,
+                borderRadius: '50%',
+              }}
+            >
+              {icon}
+            </Flex>
+            <Typography.Text
+              strong
+              style={{
+                fontSize: token.fontSizeSM,
+                color: '#333333',
+                textAlign: 'center',
+              }}
+            >
+              {title}
+            </Typography.Text>
+            {description && (
+              <Typography.Paragraph
+                style={{
+                  color: token.colorTextDescription,
+                  fontSize: token.fontSize - 4,
+                  textAlign: 'center',
+                }}
+              >
+                {description}
+              </Typography.Paragraph>
+            )}
+            <Button
+              {...footerButtonProps}
+              block
+              style={{
+                borderRadius: token.borderRadiusLG,
+              }}
+            />
+          </Flex>
+        </Flex>
+      </Card>
+    </ConfigProvider>
+  );
+};
+
+export default BAIStartSimpleCard;
diff --git a/react/src/components/DefaultProviders.tsx b/react/src/components/DefaultProviders.tsx
index 2f78904084..f3a05690d8 100644
--- a/react/src/components/DefaultProviders.tsx
+++ b/react/src/components/DefaultProviders.tsx
@@ -229,6 +229,7 @@ const DefaultProvidersForWebComponent: React.FC<DefaultProvidersProps> = ({
                         algorithm: isDarkMode
                           ? theme.darkAlgorithm
                           : theme.defaultAlgorithm,
+                        cssVar: true,
                       }}
                     >
                       <App {...commonAppProps}>
diff --git a/react/src/components/MainLayout/MainLayout.tsx b/react/src/components/MainLayout/MainLayout.tsx
index c161e72b25..d4de1a6ed6 100644
--- a/react/src/components/MainLayout/MainLayout.tsx
+++ b/react/src/components/MainLayout/MainLayout.tsx
@@ -6,7 +6,6 @@ import BAIErrorBoundary from '../BAIErrorBoundary';
 import BAISider from '../BAISider';
 import Flex from '../Flex';
 import ForceTOTPChecker from '../ForceTOTPChecker';
-import NetworkStatusBanner from '../NetworkStatusBanner';
 import PasswordChangeRequestAlert from '../PasswordChangeRequestAlert';
 import { DRAWER_WIDTH } from '../WEBUINotificationDrawer';
 import WebUIHeader from './WebUIHeader';
@@ -122,16 +121,9 @@ function MainLayout() {
           </>
         }
       >
-        <WebUISider
-          collapsed={sideCollapsed}
-          onBreakpoint={(broken) => {
-            if (broken) {
-              setSideCollapsed(true);
-            } else {
-              !compactSidebarActive && setSideCollapsed(false);
-            }
-          }}
-          webuiplugins={webUIPlugins}
+        <WebUIHeader
+          onClickMenuIcon={() => setSideCollapsed((v) => !v)}
+          containerElement={contentScrollFlexRef.current}
         />
       </Suspense>
       <Layout
@@ -139,44 +131,52 @@ function MainLayout() {
           backgroundColor: 'transparent',
         }}
       >
+        <Suspense
+          fallback={
+            <div>
+              <Layout.Header style={{ visibility: 'hidden', height: 62 }} />
+            </div>
+          }
+        >
+          <WebUISider
+            collapsed={sideCollapsed}
+            onBreakpoint={(broken) => {
+              if (broken) {
+                setSideCollapsed(true);
+              } else {
+                !compactSidebarActive && setSideCollapsed(false);
+              }
+            }}
+            webuiplugins={webUIPlugins}
+          />
+        </Suspense>
         <BAIContentWithDrawerArea drawerWidth={DRAWER_WIDTH}>
           <Flex
             ref={contentScrollFlexRef}
-            direction="column"
+            direction="row"
             align="stretch"
+            gap="lg"
             style={{
-              paddingLeft: token.paddingContentHorizontalLG,
-              paddingRight: token.paddingContentHorizontalLG,
+              // paddingLeft: token.paddingContentHorizontalLG,
+              // paddingRight: token.paddingContentHorizontalLG,
+              marginTop: 24,
               paddingBottom: token.paddingContentVertical,
               height: '100vh',
               overflow: 'auto',
             }}
           >
             <BAIErrorBoundary>
-              <Suspense
-                fallback={
-                  <div>
-                    <Layout.Header
-                      style={{ visibility: 'hidden', height: 62 }}
-                    />
-                  </div>
-                }
+              <Flex
+                direction="row"
+                align="stretch"
+                gap="lg"
+                style={{ marginTop: 100 }}
               >
-                <div
-                  style={{
-                    margin: `0 -${token.paddingContentHorizontalLG}px 0 -${token.paddingContentHorizontalLG}px`,
-                    position: 'sticky',
-                    top: 0,
-                    zIndex: HEADER_Z_INDEX_IN_MAIN_LAYOUT,
-                  }}
-                >
-                  <NetworkStatusBanner />
-                  <WebUIHeader
-                    onClickMenuIcon={() => setSideCollapsed((v) => !v)}
-                    containerElement={contentScrollFlexRef.current}
-                  />
-                </div>
-              </Suspense>
+                <Suspense>
+                  {/* @ts-ignore */}
+                  <backend-ai-webui id="webui-shell" ref={webUIRef} />
+                </Suspense>
+              </Flex>
               {/* <Flex direction="column"> */}
 
               {/* TODO: Breadcrumb */}
@@ -219,10 +219,6 @@ function MainLayout() {
               <Suspense>
                 <Outlet />
               </Suspense>
-              {/* To match paddig to 16 (2+14) */}
-              {/* </Flex> */}
-              {/* @ts-ignore */}
-              <backend-ai-webui id="webui-shell" ref={webUIRef} />
             </BAIErrorBoundary>
           </Flex>
         </BAIContentWithDrawerArea>
diff --git a/react/src/components/MainLayout/WebUIHeader.tsx b/react/src/components/MainLayout/WebUIHeader.tsx
index 616599249c..6376b685b6 100644
--- a/react/src/components/MainLayout/WebUIHeader.tsx
+++ b/react/src/components/MainLayout/WebUIHeader.tsx
@@ -1,25 +1,28 @@
-import { useCurrentDomainValue } from '../../hooks';
-import { useSuspendedBackendaiClient } from '../../hooks';
+import { useCustomThemeConfig } from '../../helper/customThemeConfig';
+import {
+  useCurrentDomainValue,
+  useSuspendedBackendaiClient,
+} from '../../hooks';
+import { useWebUINavigate } from '../../hooks';
 import {
   useCurrentProjectValue,
   useSetCurrentProject,
 } from '../../hooks/useCurrentProject';
 import { useScrollBreakPoint } from '../../hooks/useScrollBreackPoint';
+import { useThemeMode } from '../../hooks/useThemeMode';
 import BAINotificationButton from '../BAINotificationButton';
 import Flex, { FlexProps } from '../Flex';
 import LoginSessionExtendButton from '../LoginSessionExtendButton';
 import ProjectSelect from '../ProjectSelect';
 import UserDropdownMenu from '../UserDropdownMenu';
 import WEBUIHelpButton from '../WEBUIHelpButton';
+import { DRAWER_WIDTH } from '../WEBUINotificationDrawer';
 import WebUIThemeToggleButton from '../WebUIThemeToggleButton';
 // @ts-ignore
 import rawCss from './WebUIHeader.css?raw';
-import { MenuOutlined } from '@ant-design/icons';
-import { theme, Button, Typography, Grid, Divider } from 'antd';
-import _ from 'lodash';
+import { theme, Typography, Divider, Grid } from 'antd';
 import { Suspense, useState, useTransition } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useMatches } from 'react-router-dom';
 
 export interface WebUIHeaderProps extends FlexProps {
   onClickMenuIcon?: () => void;
@@ -33,11 +36,10 @@ const WebUIHeader: React.FC<WebUIHeaderProps> = ({
 }) => {
   const { token } = theme.useToken();
   const { t } = useTranslation();
+  const baiClient = useSuspendedBackendaiClient();
   const currentDomainName = useCurrentDomainValue();
   const currentProject = useCurrentProjectValue();
   const setCurrentProject = useSetCurrentProject();
-  const baiClient = useSuspendedBackendaiClient();
-  const matches = useMatches();
   const { y: scrolled } = useScrollBreakPoint(
     {
       y: 1,
@@ -45,6 +47,14 @@ const WebUIHeader: React.FC<WebUIHeaderProps> = ({
     containerElement,
   );
   const gridBreakpoint = Grid.useBreakpoint();
+  const themeConfig = useCustomThemeConfig();
+  const webuiNavigate = useWebUINavigate();
+  const { isDarkMode } = useThemeMode();
+  const mergedSiderTheme = themeConfig?.sider?.theme
+    ? themeConfig.sider.theme
+    : isDarkMode
+      ? 'dark'
+      : 'light';
 
   const { md } = Grid.useBreakpoint();
 
@@ -61,56 +71,78 @@ const WebUIHeader: React.FC<WebUIHeaderProps> = ({
       style={{
         height: HEADER_HEIGHT,
         paddingRight: token.marginMD,
-        paddingLeft: token.marginMD,
-        backgroundColor: scrolled ? token.colorBgElevated : 'transparent',
+        backgroundColor: token.colorLinkHover,
         boxShadow: scrolled ? `0 5px 6px -6px ${token.colorBorder}` : 'none',
         transition: 'background-color 0.2s ease-in-out',
       }}
       className={'webui-header-container'}
     >
       <style>{rawCss}</style>
-      <Flex direction="row" gap={'sm'}>
-        <Button
-          icon={<MenuOutlined />}
-          type="text"
-          onClick={() => {
-            onClickMenuIcon?.();
+      <Flex align="center" justify="start" direction="row" gap={'lg'}>
+        <div
+          style={{
+            width: DRAWER_WIDTH,
+            paddingTop: 18,
+            paddingBottom: 18,
+            paddingRight: 30,
+            paddingLeft: 30,
+            backgroundColor: token.colorPrimaryBg,
           }}
-          className="non-draggable"
-        />
-        <Typography.Title level={5} style={{ margin: 0 }}>
-          {/* @ts-ignore */}
-          {t(_.last(matches)?.handle?.labelKey) || ''}
-        </Typography.Title>
-      </Flex>
-      <Flex gap={md ? 'sm' : 'xs'}>
-        <Typography.Text type="secondary">
-          {t('webui.menu.Project')}
-        </Typography.Text>
-        <Suspense>
-          <ProjectSelect
-            popupMatchSelectWidth={false}
-            style={{
-              minWidth: 100,
-              maxWidth: gridBreakpoint.lg ? undefined : 100,
-            }}
-            loading={isPendingProjectChanged}
-            disabled={isPendingProjectChanged}
-            className="non-draggable"
-            showSearch
-            domain={currentDomainName}
-            size={gridBreakpoint.lg ? 'large' : 'middle'}
-            value={
-              isPendingProjectChanged ? optimisticProjectId : currentProject?.id
+        >
+          <img
+            className="logo-wide"
+            alt={themeConfig?.logo?.alt || 'Backend.AI Logo'}
+            src={
+              mergedSiderTheme === 'dark' && themeConfig?.logo?.srcDark
+                ? themeConfig?.logo?.srcDark ||
+                  '/manifest/backend.ai-text-bgdark.svg'
+                : themeConfig?.logo?.src || '/manifest/backend.ai-text.svg'
             }
-            onSelectProject={(projectInfo) => {
-              setOptimisticProjectId(projectInfo.projectId);
-              startProjectChangedTransition(() => {
-                setCurrentProject(projectInfo);
-              });
+            style={{
+              width: themeConfig?.logo?.size?.width || 158.75,
+              height: themeConfig?.logo?.size?.height || 24,
+              cursor: 'pointer',
+              backgroundColor: token.colorPrimaryBg,
             }}
+            onClick={() => webuiNavigate(themeConfig?.logo?.href || '/summary')}
           />
+        </div>
+        <Suspense>
+          <Flex gap={md ? 'sm' : 'xs'}>
+            <Typography.Text
+              type="secondary"
+              style={{ color: 'white', fontSize: '1rem' }}
+            >
+              {t('webui.menu.Project')}
+            </Typography.Text>
+            <ProjectSelect
+              popupMatchSelectWidth={false}
+              style={{
+                minWidth: 100,
+                maxWidth: gridBreakpoint.lg ? undefined : 100,
+              }}
+              loading={isPendingProjectChanged}
+              disabled={isPendingProjectChanged}
+              className="non-draggable"
+              showSearch
+              domain={currentDomainName}
+              size={gridBreakpoint.lg ? 'large' : 'middle'}
+              value={
+                isPendingProjectChanged
+                  ? optimisticProjectId
+                  : currentProject?.id
+              }
+              onSelectProject={(projectInfo) => {
+                setOptimisticProjectId(projectInfo.projectId);
+                startProjectChangedTransition(() => {
+                  setCurrentProject(projectInfo);
+                });
+              }}
+            />
+          </Flex>
         </Suspense>
+      </Flex>
+      <Flex gap={md ? 'sm' : 'xs'}>
         <Flex direction="row" className="non-draggable">
           <BAINotificationButton />
           <WebUIThemeToggleButton />
diff --git a/react/src/components/MainLayout/WebUISider.tsx b/react/src/components/MainLayout/WebUISider.tsx
index ae2351eeaf..b3dc735ac2 100644
--- a/react/src/components/MainLayout/WebUISider.tsx
+++ b/react/src/components/MainLayout/WebUISider.tsx
@@ -7,10 +7,13 @@ import BAIMenu from '../BAIMenu';
 import BAISider, { BAISiderProps } from '../BAISider';
 import Flex from '../Flex';
 import SignoutModal from '../SignoutModal';
+import EndpointsIcon from '../icons/EndpointsIcon';
+import ExamplesIcon from '../icons/ExamplesIcon';
+import ModelsIcon from '../icons/ModelsIcon';
+import TrailsIcon from '../icons/TrailsIcon';
 import { PluginPage, WebUIPluginType } from './MainLayout';
 import {
   ApiOutlined,
-  BarChartOutlined,
   BarsOutlined,
   CloudUploadOutlined,
   ControlOutlined,
@@ -19,6 +22,7 @@ import {
   FileDoneOutlined,
   HddOutlined,
   InfoCircleOutlined,
+  PlayCircleOutlined,
   RocketOutlined,
   SolutionOutlined,
   ToolOutlined,
@@ -28,7 +32,6 @@ import { useToggle } from 'ahooks';
 import { theme, MenuProps, Typography } from 'antd';
 import { ItemType } from 'antd/lib/menu/interface';
 import _ from 'lodash';
-import { PlayIcon } from 'lucide-react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
@@ -58,7 +61,6 @@ const WebUISider: React.FC<WebUISiderProps> = (props) => {
   const location = useLocation();
   const baiClient = useSuspendedBackendaiClient();
 
-  const isHideAgents = baiClient?._config?.hideAgents ?? true;
   const fasttrackEndpoint = baiClient?._config?.fasttrackEndpoint ?? null;
   const blockList = baiClient?._config?.blockList ?? null;
   const inactiveList = baiClient?._config?.inactiveList ?? null;
@@ -71,69 +73,122 @@ const WebUISider: React.FC<WebUISiderProps> = (props) => {
 
   const generalMenu = filterEmptyItem<ItemType>([
     {
-      label: t('webui.menu.Summary'),
-      icon: <DashboardOutlined />,
-      key: 'summary',
+      label: 'Start', // t('webui.menu.Summary'),
+      icon: <PlayCircleOutlined style={{ color: token.colorPrimaryBg }} />,
+      key: 'start', // 'summary',
     },
     {
-      label: t('webui.menu.Sessions'),
-      icon: <BarsOutlined />,
-      key: 'job',
-    },
-    supportServing && {
-      label: t('webui.menu.Serving'),
-      icon: <RocketOutlined />,
-      key: 'serving',
+      label: 'Dashboard',
+      icon: <DashboardOutlined style={{ color: token.colorPrimaryBg }} />,
+      key: 'dashboard',
     },
     {
-      label: t('webui.menu.Import&Run'),
-      icon: <PlayIcon />,
-      key: 'import',
+      key: 'storage',
+      label: 'Storage',
+      type: 'group',
+      children: [
+        {
+          label: t('webui.menu.Data&Storage'),
+          icon: <CloudUploadOutlined style={{ color: token.colorPrimaryBg }} />,
+          key: 'data',
+        },
+      ],
     },
     {
-      label: t('webui.menu.Data&Storage'),
-      icon: <CloudUploadOutlined />,
-      key: 'data',
-    },
-    supportUserCommittedImage && {
-      label: t('webui.menu.MyEnvironments'),
-      icon: <FileDoneOutlined />,
-      key: 'my-environment',
-    },
-    !isHideAgents && {
-      label: t('webui.menu.AgentSummary'),
-      icon: <HddOutlined />,
-      key: 'agent-summary',
+      key: 'workload',
+      label: 'Workload',
+      type: 'group',
+      children: [
+        {
+          label: t('webui.menu.Sessions'),
+          icon: <BarsOutlined style={{ color: token.colorPrimaryBg }} />,
+          key: 'session',
+        },
+        supportUserCommittedImage && {
+          label: t('webui.menu.MyEnvironments'),
+          icon: <FileDoneOutlined style={{ color: token.colorPrimaryBg }} />,
+          key: 'my-environment',
+        },
+        {
+          label: 'Examples',
+          icon: <ExamplesIcon style={{ color: token.colorPrimaryBg }} />,
+          key: 'examples',
+        },
+      ],
     },
     {
-      label: t('webui.menu.Statistics'),
-      icon: <BarChartOutlined />,
-      key: 'statistics',
+      key: 'service',
+      label: 'Service',
+      type: 'group',
+      children: [
+        supportServing && {
+          label: 'Endpoints', //t('webui.menu.Serving'),
+          icon: <EndpointsIcon style={{ color: token.colorPrimaryBg }} />, // <RocketOutlined />,
+          key: 'serving',
+        },
+        {
+          label: 'Models',
+          icon: <ModelsIcon style={{ color: token.colorPrimaryBg }} />,
+          key: 'models',
+        },
+      ],
     },
-    !!fasttrackEndpoint && {
-      label: t('webui.menu.FastTrack'),
-      icon: <ExportOutlined />,
-      key: 'pipeline',
-      onClick: () => {
-        window.open(fasttrackEndpoint, '_blank', 'noopener noreferrer');
-      },
+    {
+      key: 'fasttrack',
+      label: 'FastTrack',
+      type: 'group',
+      children: [
+        !!fasttrackEndpoint && {
+          label: 'Pipelines', // t('webui.menu.FastTrack'),
+          icon: <ExportOutlined style={{ color: token.colorPrimaryBg }} />, // TODO: change to custom Pipelines icon
+          key: 'pipeline',
+          onClick: () => {
+            window.open(fasttrackEndpoint, '_blank', 'noopener noreferrer');
+          },
+        },
+        {
+          label: 'Trails',
+          icon: <TrailsIcon style={{ color: token.colorPrimaryBg }} />,
+          key: 'trails',
+        },
+      ],
     },
+    // {
+    //   label: t('webui.menu.Import&Run'),
+    //   icon: <PlayIcon />,
+    //   key: 'import',
+    // },
+    // !isHideAgents && {
+    //   label: t('webui.menu.AgentSummary'),
+    //   icon: <HddOutlined />,
+    //   key: 'agent-summary',
+    // },
+    // {
+    //   label: t('webui.menu.Statistics'),
+    //   icon: <BarChartOutlined />,
+    //   key: 'statistics',
+    // },
   ]);
 
   const adminMenu: MenuProps['items'] = [
+    {
+      label: 'System Dashboard',
+      icon: <DashboardOutlined style={{ color: token.colorSuccess }} />,
+      key: 'system_overview',
+    },
     {
       label: t('webui.menu.Users'),
-      icon: <UserOutlined />,
+      icon: <UserOutlined style={{ color: token.colorSuccess }} />,
       key: 'credential',
     },
     {
       label: t('webui.menu.Environments'),
-      icon: <FileDoneOutlined />,
+      icon: <FileDoneOutlined style={{ color: token.colorSuccess }} />,
       key: 'environment',
     },
     {
       label: t('webui.menu.ResourcePolicy'),
-      icon: <SolutionOutlined />,
+      icon: <SolutionOutlined style={{ color: token.colorSuccess }} />,
       key: 'resource-policy',
     },
   ];
@@ -141,22 +196,22 @@ const WebUISider: React.FC<WebUISiderProps> = (props) => {
   const superAdminMenu: MenuProps['items'] = [
     {
       label: t('webui.menu.Resources'),
-      icon: <HddOutlined />,
+      icon: <HddOutlined style={{ color: token.colorSuccess }} />,
       key: 'agent',
     },
     {
       label: t('webui.menu.Configurations'),
-      icon: <ControlOutlined />,
+      icon: <ControlOutlined style={{ color: token.colorSuccess }} />,
       key: 'settings',
     },
     {
       label: t('webui.menu.Maintenance'),
-      icon: <ToolOutlined />,
+      icon: <ToolOutlined style={{ color: token.colorSuccess }} />,
       key: 'maintenance',
     },
     {
       label: t('webui.menu.Information'),
-      icon: <InfoCircleOutlined />,
+      icon: <InfoCircleOutlined style={{ color: token.colorSuccess }} />,
       key: 'information',
     },
   ];
@@ -325,8 +380,33 @@ const WebUISider: React.FC<WebUISiderProps> = (props) => {
       {...props}
     >
       <BAIMenu
+        isAdminMenu={false}
+        selectedKeys={[
+          location.pathname.split('/')[1] || 'start',
+          // TODO: After matching first path of 'storage-settings' and 'agent', remove this code
+          location.pathname.split('/')[1] === 'storage-settings' ? 'agent' : '',
+          // TODO: After 'SessionListPage' is completed and used as the main page, remove this code
+          //       and change 'job' key to 'session'
+          location.pathname.split('/')[1] === 'session' ? 'job' : '',
+        ]}
+        items={[...generalMenu]}
+        /**
+         * Etc menu
+         */
+        // {
+        //   label: '404',
+        //   icon: <QuestionOutlined />,
+        //   key: '404',
+        // },
+        // ]}
+        onClick={({ key, keyPath }) => {
+          webuiNavigate('/' + keyPath.join('/'));
+        }}
+      />
+      <BAIMenu
+        isAdminMenu={true}
         selectedKeys={[
-          location.pathname.split('/')[1] || 'summary',
+          location.pathname.split('/')[1] || 'start',
           // TODO: After matching first path of 'storage-settings' and 'agent', remove this code
           location.pathname.split('/')[1] === 'storage-settings' ? 'agent' : '',
           // TODO: After 'SessionListPage' is completed and used as the main page, remove this code
@@ -337,13 +417,10 @@ const WebUISider: React.FC<WebUISiderProps> = (props) => {
           // TODO: add plugin menu
           currentUserRole === 'superadmin'
             ? [
-                ...generalMenu,
                 {
                   type: 'group',
                   label: (
-                    <Flex
-                      style={{ borderBottom: `1px solid ${token.colorBorder}` }}
-                    >
+                    <Flex>
                       {!props.collapsed && (
                         <Typography.Text type="secondary" ellipsis>
                           {t('webui.menu.Administration')}
@@ -375,7 +452,7 @@ const WebUISider: React.FC<WebUISiderProps> = (props) => {
                     children: [...adminMenu],
                   },
                 ]
-              : [...generalMenu]
+              : []
         }
         /**
          * Etc menu
diff --git a/react/src/components/NeoSessionList.tsx b/react/src/components/NeoSessionList.tsx
new file mode 100644
index 0000000000..e158248bfa
--- /dev/null
+++ b/react/src/components/NeoSessionList.tsx
@@ -0,0 +1,283 @@
+import {
+  filterNonNullItems,
+  iSizeToSize,
+  localeCompare,
+  transformSorterToOrderString,
+} from '../helper';
+import { useUpdatableState } from '../hooks';
+import { useBAIPaginationOptionState } from '../hooks/reactPaginationQueryOptions';
+import { useCurrentProjectValue } from '../hooks/useCurrentProject';
+import Flex from './Flex';
+import { NeoSessionListQuery } from './__generated__/NeoSessionListQuery.graphql';
+import { SearchOutlined } from '@ant-design/icons';
+import { Input, Progress, Radio, Table, Tag, theme, Typography } from 'antd';
+import { AnyObject } from 'antd/es/_util/type';
+import { TableRowSelection } from 'antd/es/table/interface';
+import graphql from 'babel-plugin-relay/macro';
+import dayjs from 'dayjs';
+import _ from 'lodash';
+import React, { useTransition } from 'react';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLazyLoadQuery } from 'react-relay';
+
+interface NeoSessionListProps {
+  sessionType: string;
+}
+
+const NeoSessionList: React.FC<NeoSessionListProps> = ({
+  sessionType: status,
+  ...props
+}) => {
+  const { t } = useTranslation();
+  const { token } = theme.useToken();
+  const { id: projectId } = useCurrentProjectValue();
+
+  const [
+    sessionFetchKey,
+    // setSessionFetchKey
+  ] = useUpdatableState('initial-fetch');
+  const {
+    baiPaginationOption,
+    tablePaginationOption,
+    setTablePaginationOption,
+  } = useBAIPaginationOptionState({
+    current: 1,
+    pageSize: 10,
+  });
+  const [
+    ,
+    // isPendingPageChange
+    startPageChangeTransition,
+  ] = useTransition();
+  const [order, setOrder] = useState<string>();
+  // TODO: refactor with useControllableState
+  const [selectedRowKeys, setSelectedRowKeys] = useState<Array<React.Key>>([]);
+  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
+    setSelectedRowKeys(newSelectedRowKeys);
+  };
+  const rowSelection: TableRowSelection<AnyObject> = {
+    selectedRowKeys,
+    onChange: onSelectChange,
+  };
+
+  const statusTagColor = {
+    //prepare
+    RESTARTING: 'magenta',
+    PREPARING: 'magenta',
+    PULLING: 'magenta',
+    //running and pending
+    RUNNING: 'success',
+    RUNNING_DEGRADED: 'success',
+    PENDING: 'success',
+    SCHEDULED: 'success',
+    //error
+    ERROR: 'error',
+    //finished return undefined
+  };
+
+  // if (
+  //   !baiClient.supports('avoid-hol-blocking') &&
+  //   status.includes('SCHEDULED')
+  // ) {
+  //   status = status?.filter((e) => e !== 'SCHEDULED');
+  // }
+
+  const { compute_session_list } = useLazyLoadQuery<NeoSessionListQuery>(
+    graphql`
+      query NeoSessionListQuery(
+        $limit: Int!
+        $offset: Int!
+        $group_id: String
+        $status: String
+        $order: String
+      ) {
+        compute_session_list(
+          limit: $limit
+          offset: $offset
+          group_id: $group_id
+          status: $status
+          order: $order
+        ) {
+          items {
+            id
+            type
+            session_id
+            name
+            created_at
+            terminated_at
+            status
+            occupied_slots
+            resource_opts
+          }
+          total_count
+        }
+      }
+    `,
+    {
+      limit: baiPaginationOption.limit,
+      offset: baiPaginationOption.offset,
+      group_id: projectId,
+      order,
+    },
+    {
+      fetchKey:
+        sessionFetchKey === 'initial-fetch'
+          ? 'store-and-network'
+          : 'network-only',
+      fetchPolicy: 'network-only',
+    },
+  );
+
+  return (
+    <Flex direction="column" align="stretch" gap={16}>
+      <Flex gap={16} direction="row">
+        <Radio.Group
+          options={[
+            { label: t('session.Running'), value: 'running' },
+            { label: t('session.Finished'), value: 'finished' },
+          ]}
+          optionType="button"
+          buttonStyle="solid"
+          defaultValue="running"
+        />
+        <Input
+          style={{ width: 222 }}
+          placeholder={t('propertyFilter.placeHolder')}
+          suffix={<SearchOutlined />}
+        />
+      </Flex>
+      <Table
+        scroll={{ x: 'max-content' }}
+        showSorterTooltip={false}
+        sortDirections={['descend', 'ascend', 'descend']}
+        dataSource={filterNonNullItems(compute_session_list?.items)}
+        rowKey={'id'}
+        rowSelection={rowSelection}
+        pagination={{
+          pageSize: tablePaginationOption.pageSize,
+          total: compute_session_list?.total_count,
+          current: tablePaginationOption.current,
+          style: { marginRight: token.marginXS },
+        }}
+        onChange={({ pageSize, current }, filters, sorter) => {
+          startPageChangeTransition(() => {
+            if (_.isNumber(current) && _.isNumber(pageSize)) {
+              setTablePaginationOption({
+                current,
+                pageSize,
+              });
+            }
+            setOrder(transformSorterToOrderString(sorter));
+          });
+        }}
+        columns={[
+          {
+            title: '#',
+            fixed: 'left',
+            render: (id, record, index) => {
+              return (
+                index +
+                1 +
+                (tablePaginationOption.current - 1) *
+                  tablePaginationOption.pageSize
+              );
+            },
+          },
+          {
+            title: 'Name',
+            dataIndex: 'name',
+            sorter: (a, b) => localeCompare(a.name, b.name),
+            render: (value) => (
+              <Typography.Text style={{ maxWidth: 122 }} ellipsis>
+                {value}
+              </Typography.Text>
+            ),
+          },
+          {
+            title: t('session.Status'),
+            dataIndex: 'status',
+            sorter: (a, b) => localeCompare(a.status, b.status),
+            render: (value) => (
+              <Tag color={_.get(statusTagColor, value)}>{value}</Tag>
+            ),
+          },
+          {
+            title: 'Utils.',
+            render: () => (
+              <Flex direction="column" justify="start" gap={4}>
+                <Progress
+                  percent={5}
+                  strokeLinecap="butt"
+                  size={[107, 11]}
+                  strokeColor="#999"
+                />
+                <Progress
+                  percent={100}
+                  strokeLinecap="butt"
+                  status="normal"
+                  size={[107, 11]}
+                  strokeColor="#999"
+                />
+                <Progress
+                  percent={22}
+                  strokeLinecap="butt"
+                  size={[107, 11]}
+                  strokeColor="#999"
+                />
+              </Flex>
+            ),
+          },
+          {
+            title: t('session.launcher.AIAccelerator'),
+            render: () => 'CUDA FGPU',
+          },
+          {
+            title: t('session.CPU'),
+            // FIXME: parse occupied slots initially
+            dataIndex: 'occupied_slots',
+            render: (value) => {
+              return _.get(JSON.parse(value), 'cpu', '-');
+            },
+            sorter: (a, b) => {
+              return (
+                _.get(JSON.parse(a.occupied_slots), 'cpu', 0) -
+                _.get(JSON.parse(b.occupied_slots), 'cpu', 0)
+              );
+            },
+          },
+          {
+            title: 'RAM',
+            // FIXME: parse occupied slots initially
+            dataIndex: 'occupied_slots',
+            render: (value) => {
+              const mem = _.get(JSON.parse(value), 'mem', '-');
+              return mem === '-'
+                ? mem
+                : iSizeToSize(mem, 'G')?.numberUnit + 'iB';
+            },
+            sorter: (a, b) => {
+              return (
+                _.get(JSON.parse(a.occupied_slots), 'mem', 0) -
+                _.get(JSON.parse(b.occupied_slots), 'mem', 0)
+              );
+            },
+          },
+          {
+            title: 'Elapsed',
+            render: (value, record) => {
+              const createdAt = dayjs(record.created_at);
+              const terminatedAt = dayjs(record.terminated_at);
+              const diff = terminatedAt.diff(createdAt, 'second');
+              const diffDuration = dayjs.duration(diff);
+              const formattedDiff = `${diffDuration.hours().toString().padStart(2, '0')}:${diffDuration.minutes().toString().padStart(2, '0')}:${diffDuration.seconds().toString().padStart(2, '0')}`;
+              return formattedDiff;
+            },
+          },
+        ]}
+      />
+    </Flex>
+  );
+};
+
+export default NeoSessionList;
diff --git a/react/src/components/ResourceUnit.tsx b/react/src/components/ResourceUnit.tsx
new file mode 100644
index 0000000000..f9521c8e67
--- /dev/null
+++ b/react/src/components/ResourceUnit.tsx
@@ -0,0 +1,70 @@
+import Flex from './Flex';
+import { Typography, Progress, theme } from 'antd';
+import React from 'react';
+
+export interface ResourceUnitProps {
+  name: string;
+  displayUnit: string;
+  value: number;
+  percentage: number;
+}
+
+const ResourceUnit: React.FC<ResourceUnitProps> = ({
+  name,
+  displayUnit,
+  value,
+  percentage,
+}) => {
+  const { token } = theme.useToken();
+  return (
+    <Flex
+      direction="column"
+      style={{
+        // width: 88,
+        // height: 70,
+        marginTop: 14,
+      }}
+      align="start"
+      justify="center"
+    >
+      <Typography.Text
+        style={{
+          marginBottom: token.margin,
+          fontSize: token.fontSizeLG,
+          fontWeight: token.fontWeightStrong,
+        }}
+      >
+        {name}
+      </Typography.Text>
+      <Flex direction="column" align="start" justify="start" gap={8}>
+        <Flex align="baseline">
+          <Typography.Text
+            style={{
+              fontSize: token.sizeXL,
+              fontWeight: token.fontWeightStrong,
+              color: '#00BD9B',
+            }}
+          >
+            {value}
+          </Typography.Text>
+          <Typography.Text
+            style={{
+              fontSize: token.fontSize,
+            }}
+          >
+            {displayUnit}
+          </Typography.Text>
+        </Flex>
+        <Progress
+          percent={percentage}
+          steps={12}
+          showInfo={false}
+          size={[5, 12]}
+          strokeColor="#00BD9B"
+        />
+      </Flex>
+    </Flex>
+  );
+};
+
+export default ResourceUnit;
diff --git a/react/src/components/UserDropdownMenu.tsx b/react/src/components/UserDropdownMenu.tsx
index 9117a7cc6a..e4f2c91148 100644
--- a/react/src/components/UserDropdownMenu.tsx
+++ b/react/src/components/UserDropdownMenu.tsx
@@ -6,6 +6,7 @@ import {
 } from '../hooks/backendai';
 import { UserProfileQuery } from './UserProfileSettingModalQuery';
 import { UserProfileSettingModalQuery } from './__generated__/UserProfileSettingModalQuery.graphql';
+import UserOutlinedIcon from './icons/UserOutlinedIcon';
 import {
   UserOutlined,
   MailOutlined,
@@ -36,7 +37,12 @@ const UserProfileSettingModal = React.lazy(
   () => import('./UserProfileSettingModal'),
 );
 
-const UserDropdownMenu: React.FC = () => {
+interface UserDropdownMenuProps {
+  iconColor?: string;
+  color?: string;
+}
+
+const UserDropdownMenu: React.FC<UserDropdownMenuProps> = ({ ...props }) => {
   const { t } = useTranslation();
   const { token } = theme.useToken();
   const [userInfo] = useCurrentUserInfo();
@@ -194,17 +200,15 @@ const UserDropdownMenu: React.FC = () => {
             justifyContent: 'center',
             marginTop: -2,
             fontSize: token.fontSize,
+            color: token.colorIcon,
           }}
-          // icon={<UserOutlined />}
           icon={
             <Avatar
-              size={20}
-              icon={<UserOutlined style={{ fontSize: 13 }} />}
-              style={
-                {
-                  // border: 1,
-                }
-              }
+              size={17}
+              icon={<UserOutlinedIcon style={{ fontSize: 20 }} />}
+              style={{
+                border: 1,
+              }}
             ></Avatar>
           }
         >
diff --git a/react/src/components/WEBUIHelpButton.tsx b/react/src/components/WEBUIHelpButton.tsx
index 742ec0d3e2..e51c45412e 100644
--- a/react/src/components/WEBUIHelpButton.tsx
+++ b/react/src/components/WEBUIHelpButton.tsx
@@ -4,7 +4,9 @@ import { Button, ButtonProps } from 'antd';
 import React from 'react';
 import { useLocation } from 'react-router-dom';
 
-interface WEBUIHelpButtonProps extends ButtonProps {}
+interface WEBUIHelpButtonProps extends ButtonProps {
+  iconColor?: string;
+}
 const WEBUIHelpButton: React.FC<WEBUIHelpButtonProps> = ({ ...props }) => {
   const [lang] = useCurrentLanguage();
   const location = useLocation();
@@ -36,7 +38,11 @@ const WEBUIHelpButton: React.FC<WEBUIHelpButtonProps> = ({ ...props }) => {
   return (
     <Button
       size="large"
-      icon={<QuestionCircleOutlined />}
+      icon={
+        <QuestionCircleOutlined
+          style={{ color: props.iconColor ?? 'inherit' }}
+        />
+      }
       type="text"
       target="_blank"
       href={URL}
diff --git a/react/src/components/WEBUINotificationDrawer.tsx b/react/src/components/WEBUINotificationDrawer.tsx
index 74be3280ac..8f2d7f816e 100644
--- a/react/src/components/WEBUINotificationDrawer.tsx
+++ b/react/src/components/WEBUINotificationDrawer.tsx
@@ -19,7 +19,7 @@ import { useTranslation } from 'react-i18next';
 type NotificationCategory = 'all' | 'in progress';
 interface Props extends DrawerProps {}
 
-export const DRAWER_WIDTH = 280;
+export const DRAWER_WIDTH = 220;
 const WEBUINotificationDrawer: React.FC<Props> = ({ ...drawerProps }) => {
   const { t } = useTranslation();
   const { token } = theme.useToken();
diff --git a/react/src/components/WebUIThemeToggleButton.tsx b/react/src/components/WebUIThemeToggleButton.tsx
index a074030670..ca6e4a5eea 100644
--- a/react/src/components/WebUIThemeToggleButton.tsx
+++ b/react/src/components/WebUIThemeToggleButton.tsx
@@ -3,7 +3,9 @@ import { MoonOutlined, SunOutlined } from '@ant-design/icons';
 import { Button, ButtonProps } from 'antd';
 import React from 'react';
 
-interface WebUIThemeToggleButtonProps extends ButtonProps {}
+interface WebUIThemeToggleButtonProps extends ButtonProps {
+  iconColor?: string;
+}
 
 const WebUIThemeToggleButton: React.FC<WebUIThemeToggleButtonProps> = ({
   ...props
@@ -14,7 +16,13 @@ const WebUIThemeToggleButton: React.FC<WebUIThemeToggleButtonProps> = ({
     <Button
       size="large"
       type="text"
-      icon={isDarkMode ? <SunOutlined /> : <MoonOutlined />}
+      icon={
+        isDarkMode ? (
+          <SunOutlined style={{ color: props.iconColor ?? 'inherit' }} />
+        ) : (
+          <MoonOutlined style={{ color: props.iconColor ?? 'inherit' }} />
+        )
+      }
       onClick={() => {
         setIsDarkMode(!isDarkMode);
       }}
diff --git a/react/src/components/icons/BatchSession.svg b/react/src/components/icons/BatchSession.svg
new file mode 100644
index 0000000000..0d6ebf8ff0
--- /dev/null
+++ b/react/src/components/icons/BatchSession.svg
@@ -0,0 +1,5 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 430">
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M10.999 0.297852C10.6476 0.297852 10.3025 0.390123 9.9981 0.565414L6.12961 2.77597L6.12614 2.77797C5.82154 2.95383 5.56854 3.2067 5.39252 3.51122C5.2165 3.81573 5.12365 4.1621 5.12329 4.51383L5.12329 8.93756C5.12333 8.978 5.1246 9.01836 5.12707 9.05858C5.09207 9.07609 5.05753 9.09464 5.02349 9.11424L1.155 11.3248L1.15153 11.3268C0.84693 11.5027 0.593928 11.7555 0.417909 12.06C0.24189 12.3646 0.149042 12.7109 0.148682 13.0627V17.4864C0.149043 17.8381 0.24189 18.1836 0.417909 18.4881C0.593928 18.7926 0.84693 19.0455 1.15153 19.2213L1.15501 19.2233L5.02149 21.4327L5.02351 21.4339C5.30679 21.597 5.62533 21.6882 5.9513 21.7001C5.97537 21.702 5.9997 21.703 6.02427 21.703C6.04879 21.703 6.07308 21.702 6.09711 21.7001C6.42319 21.6883 6.74184 21.597 7.02522 21.4339L7.0272 21.4327L10.8937 19.2233L10.8972 19.2213C10.9321 19.2011 10.9664 19.18 10.9999 19.1578C11.0335 19.18 11.0678 19.2011 11.1027 19.2213L11.1062 19.2233L14.9727 21.4327L14.9747 21.4339C15.258 21.597 15.5765 21.6882 15.9025 21.7001C15.9265 21.702 15.9509 21.703 15.9754 21.703C16 21.703 16.0243 21.702 16.0483 21.7001C16.3744 21.6883 16.693 21.597 16.9764 21.4339L16.9784 21.4327L20.8449 19.2233L20.8483 19.2213C21.1529 19.0455 21.4059 18.7926 21.582 18.4881C21.758 18.1836 21.8508 17.8372 21.8512 17.4855V13.0617C21.8508 12.71 21.758 12.3646 21.582 12.06C21.4059 11.7555 21.1529 11.5027 20.8483 11.3268L16.9784 9.11539L16.9764 9.11426C16.9417 9.09429 16.9065 9.07541 16.8708 9.05761C16.8733 9.01739 16.8746 8.97705 16.8746 8.93664V4.5129C16.8743 4.16118 16.7814 3.81573 16.6054 3.51122C16.4294 3.2067 16.1764 2.95383 15.8718 2.77796L12.0018 0.566565L11.9998 0.565431C11.6954 0.39013 11.3503 0.297852 10.999 0.297852ZM11.9 17.4919C11.9012 17.5254 11.9106 17.5582 11.9275 17.5873C11.9453 17.6182 11.9709 17.6438 12.0016 17.6619L12.0027 17.6625L15.0754 19.4183V15.7951L11.9 13.9702V17.4855C11.9 17.4876 11.9 17.4898 11.9 17.4919ZM16.8754 19.4184L19.9483 17.6625L19.9494 17.6618C19.9802 17.6438 20.0057 17.6181 20.0236 17.5873C20.0415 17.5562 20.0511 17.5209 20.0512 17.485V13.9699L16.8754 15.795V19.4184ZM19.1345 12.4206L15.9753 14.2362L12.8164 12.4207L15.8692 10.6762L15.8727 10.6742C15.9039 10.6562 15.9394 10.6467 15.9755 10.6467C16.0116 10.6467 16.0471 10.6562 16.0784 10.6742L19.1345 12.4206ZM10.0999 13.97L6.92427 15.795V19.4184L9.99716 17.6625L9.99824 17.6618C10.029 17.6438 10.0546 17.6181 10.0724 17.5873C10.0892 17.5582 10.0986 17.5255 10.0999 17.492C10.0999 17.4901 10.0999 17.4883 10.0999 17.4864V13.97ZM6.12719 10.6742L9.18334 12.4206L6.02417 14.2362L2.86518 12.4207L5.91802 10.6762L5.92149 10.6742C5.95276 10.6562 5.98824 10.6467 6.02435 10.6467C6.06045 10.6467 6.09592 10.6562 6.12719 10.6742ZM1.94868 17.4848V13.9701L5.12427 15.7951V19.4183L2.05153 17.6625L2.05047 17.6619C2.0197 17.6438 1.99414 17.6182 1.97629 17.5873C1.95829 17.5561 1.94877 17.5208 1.94868 17.4848ZM11.8989 10.8696L14.9718 9.11365L14.9728 9.11302C15.0036 9.09501 15.0292 9.06932 15.047 9.03845C15.065 9.00735 15.0745 8.97208 15.0746 8.93617L15.0746 5.42105L11.8989 7.24619V10.8696ZM14.158 3.87178L11.1018 2.12542C11.0705 2.10736 11.0351 2.09785 10.999 2.09785C10.9628 2.09785 10.9274 2.10736 10.8961 2.12541L10.8926 2.12741L7.83979 3.87189L10.9988 5.6874L14.158 3.87178ZM6.92329 5.42126V8.936C6.92338 8.97197 6.9329 9.0073 6.9509 9.03845C6.96875 9.06932 6.99431 9.09502 7.02508 9.11303L7.02614 9.11365L10.0989 10.8695V7.24631L6.92329 5.42126Z" fill="#FF7A00"/>
+</g>
+</svg>
diff --git a/react/src/components/icons/BatchSessionIcon.tsx b/react/src/components/icons/BatchSessionIcon.tsx
new file mode 100644
index 0000000000..a624b5243b
--- /dev/null
+++ b/react/src/components/icons/BatchSessionIcon.tsx
@@ -0,0 +1,12 @@
+import { ReactComponent as logo } from './BatchSession.svg';
+import Icon from '@ant-design/icons';
+import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
+
+interface BatchSessionIconProps
+  extends Omit<CustomIconComponentProps, 'width' | 'height' | 'fill'> {}
+
+const BatchSessionIcon: React.FC<BatchSessionIconProps> = (props) => {
+  return <Icon component={logo} {...props} />;
+};
+
+export default BatchSessionIcon;
diff --git a/react/src/components/icons/Endpoints.svg b/react/src/components/icons/Endpoints.svg
new file mode 100644
index 0000000000..591d5b4609
--- /dev/null
+++ b/react/src/components/icons/Endpoints.svg
@@ -0,0 +1,6 @@
+<svg width="14" height="17" viewBox="0 0 14 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 423">
+<path id="Vector" d="M5.86724 9.19554V10.4507C5.86724 10.5614 5.99605 10.6225 6.08193 10.5547L8.42545 8.70503C8.44124 8.69268 8.45402 8.67688 8.4628 8.65886C8.47158 8.64083 8.47615 8.62104 8.47615 8.60099C8.47615 8.58094 8.47158 8.56115 8.4628 8.54312C8.45402 8.52509 8.44124 8.5093 8.42545 8.49694L6.08193 6.64723C5.99605 6.57787 5.86724 6.64062 5.86724 6.75128V8.00644H0.681439C0.608771 8.00644 0.549316 8.06589 0.549316 8.13856V9.06342C0.549316 9.13608 0.608771 9.19554 0.681439 9.19554H5.86724Z" fill="currentColor"/>
+<path id="Subtract" fill-rule="evenodd" clip-rule="evenodd" d="M1.8917 4.03667C3.56442 4.03667 5.54711 3.05961 6.90005 1.87894C6.94765 1.83898 7.00783 1.81706 7.07002 1.81706C7.13218 1.81706 7.19233 1.83896 7.23992 1.87888C8.60081 3.06744 10.5761 4.03667 12.2483 4.03667C12.2851 4.03667 12.3204 4.05128 12.3464 4.07727C12.3723 4.10326 12.3869 4.13852 12.3869 4.17528V9.3536C12.3869 11.0442 11.8023 12.2813 10.8783 13.2292C9.93875 14.1933 8.62139 14.8844 7.12707 15.4056C7.0973 15.4153 7.06511 15.4147 7.03574 15.4037C7.03122 15.402 7.02668 15.4004 7.02212 15.3988C5.5232 14.8812 4.20312 14.1916 3.26225 13.2279C2.76961 12.7234 2.37348 12.1365 2.11088 11.4425C2.07589 11.35 1.98844 11.2869 1.88957 11.2869H1.10061C0.948173 11.2869 0.837401 11.432 0.884336 11.577C1.19961 12.5513 1.72488 13.3744 2.40199 14.0679C3.5255 15.2186 5.04004 15.9857 6.62379 16.5333C6.91073 16.6381 7.22497 16.6419 7.51447 16.5438L7.5194 16.5421C9.10109 15.9908 10.6157 15.2212 11.7393 14.0684C12.8793 12.8988 13.5893 11.3618 13.5893 9.3536V4.17528C13.5893 3.81964 13.448 3.47858 13.1965 3.22711C12.945 2.97564 12.604 2.83436 12.2483 2.83436C10.9629 2.83436 9.25608 2.04456 8.02792 0.970791L8.02273 0.966309C7.75716 0.739411 7.41932 0.614746 7.07002 0.614746C6.72072 0.614746 6.38288 0.739411 6.11731 0.966309L6.11231 0.970629C4.89095 2.03756 3.17668 2.83436 1.8917 2.83436C1.53606 2.83436 1.195 2.97564 0.943527 3.22711C0.692056 3.47858 0.550781 3.81964 0.550781 4.17528V5.68325C0.550781 5.81095 0.654299 5.91447 0.781995 5.91447H1.52188C1.64958 5.91447 1.75309 5.81095 1.75309 5.68325V4.17528C1.75309 4.13852 1.7677 4.10326 1.79369 4.07727C1.81968 4.05128 1.85494 4.03667 1.8917 4.03667Z" fill="currentColor"/>
+</g>
+</svg>
diff --git a/react/src/components/icons/EndpointsIcon.tsx b/react/src/components/icons/EndpointsIcon.tsx
new file mode 100644
index 0000000000..e3d23f95a9
--- /dev/null
+++ b/react/src/components/icons/EndpointsIcon.tsx
@@ -0,0 +1,12 @@
+import { ReactComponent as logo } from './Endpoints.svg';
+import Icon from '@ant-design/icons';
+import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
+
+interface EndpointsIconProps
+  extends Omit<CustomIconComponentProps, 'width' | 'height' | 'fill'> {}
+
+const EndpointsIcon: React.FC<EndpointsIconProps> = (props) => {
+  return <Icon component={logo} {...props} />;
+};
+
+export default EndpointsIcon;
diff --git a/react/src/components/icons/ExampleStart.svg b/react/src/components/icons/ExampleStart.svg
new file mode 100644
index 0000000000..efcd298b1d
--- /dev/null
+++ b/react/src/components/icons/ExampleStart.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.7281 0.566727V2.00127C16.7281 2.13277 16.6123 2.24036 16.4708 2.24036H4.12297C3.98148 2.24036 3.86572 2.13277 3.86572 2.00127V0.566727C3.86572 0.435227 3.98148 0.327637 4.12297 0.327637H16.4708C16.6123 0.327637 16.7281 0.435227 16.7281 0.566727Z" fill="#00BD9B"/>
+<path d="M2.17171 2.14954L3.60625 2.14954C3.73775 2.14954 3.84534 2.30881 3.84534 2.50348L3.84534 19.4927C3.84534 19.6874 3.73775 19.8467 3.60625 19.8467L2.17171 19.8467C2.04021 19.8467 1.93262 19.6874 1.93262 19.4927L1.93262 2.50348C1.93262 2.30881 2.04021 2.14954 2.17171 2.14954Z" fill="#00BD9B"/>
+<path d="M10.0708 21.1076L7.71641 21.1091L7.71709 6.09215H18.856V11.4614C18.856 11.5792 18.9524 11.6757 19.0703 11.6757H20.5703C20.6881 11.6757 20.7845 11.5792 20.7845 11.4614V5.02072C20.7845 4.54661 20.4015 4.16357 19.9274 4.16357H6.64567C6.17156 4.16357 5.78852 4.54661 5.78852 5.02072L5.78784 22.1806C5.78784 22.6547 6.17088 23.0377 6.64498 23.0377L10.0708 23.0361C10.1887 23.0361 10.2851 22.9397 10.2851 22.8219V21.3219C10.2851 21.204 10.1887 21.1076 10.0708 21.1076ZM22.008 22.4886L19.5089 19.9895C20.1062 19.1993 20.4624 18.2136 20.4624 17.1448C20.4624 14.5413 18.3517 12.4306 15.7481 12.4306C13.1446 12.4306 11.0339 14.5413 11.0339 17.1448C11.0339 19.7484 13.1446 21.8591 15.7481 21.8591C16.7071 21.8591 17.5964 21.5725 18.341 21.0824L20.8776 23.619C20.9205 23.6618 20.974 23.6806 21.0276 23.6806C21.0812 23.6806 21.1374 23.6591 21.1776 23.619L22.008 22.7886C22.0277 22.7689 22.0434 22.7456 22.0541 22.7198C22.0648 22.6941 22.0703 22.6665 22.0703 22.6386C22.0703 22.6107 22.0648 22.5831 22.0541 22.5574C22.0434 22.5316 22.0277 22.5083 22.008 22.4886ZM15.7481 20.1448C14.0901 20.1448 12.7481 18.8029 12.7481 17.1448C12.7481 15.4868 14.0901 14.1448 15.7481 14.1448C17.4062 14.1448 18.7481 15.4868 18.7481 17.1448C18.7481 18.8029 17.4062 20.1448 15.7481 20.1448Z" fill="#00BD9B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.84644 2.98096H3.85826V2.24791H4.66345V2.23828H16.472C16.6135 2.23828 16.7293 2.13069 16.7293 1.99919V0.564651C16.7293 0.433152 16.6135 0.325562 16.472 0.325562H4.66345V0.319336H2.78683C2.31272 0.319336 1.92969 0.702372 1.92969 1.17648V2.98096H1.93372L1.93372 19.4907C1.93372 19.6853 2.04131 19.8446 2.17281 19.8446H3.60735C3.73885 19.8446 3.84644 19.6853 3.84644 19.4907L3.84644 2.98096Z" fill="#00BD9B"/>
+</svg>
diff --git a/react/src/components/icons/ExampleStart.tsx b/react/src/components/icons/ExampleStart.tsx
new file mode 100644
index 0000000000..9dbe2cc24c
--- /dev/null
+++ b/react/src/components/icons/ExampleStart.tsx
@@ -0,0 +1,12 @@
+import { ReactComponent as logo } from './ExampleStart.svg';
+import Icon from '@ant-design/icons';
+import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
+
+interface ExampleStartIconProps
+  extends Omit<CustomIconComponentProps, 'width' | 'height' | 'fill'> {}
+
+const ExampleStartIcon: React.FC<ExampleStartIconProps> = (props) => {
+  return <Icon component={logo} {...props} />;
+};
+
+export default ExampleStartIcon;
diff --git a/react/src/components/icons/Examples.svg b/react/src/components/icons/Examples.svg
new file mode 100644
index 0000000000..aac2e68a75
--- /dev/null
+++ b/react/src/components/icons/Examples.svg
@@ -0,0 +1,6 @@
+<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 422">
+<path id="Vector" d="M5.54186 13.9342L3.97224 13.9352L3.97269 3.9239H11.3986V7.50338C11.3986 7.58195 11.4629 7.64624 11.5415 7.64624H12.5415C12.62 7.64624 12.6843 7.58195 12.6843 7.50338V3.20961C12.6843 2.89354 12.429 2.63818 12.1129 2.63818H3.25841C2.94233 2.63818 2.68698 2.89354 2.68698 3.20961L2.68652 14.6495C2.68652 14.9656 2.94188 15.2209 3.25795 15.2209L5.54186 15.2199C5.62043 15.2199 5.68471 15.1556 5.68471 15.077V14.077C5.68471 13.9985 5.62043 13.9342 5.54186 13.9342ZM13.4999 14.8549L11.8339 13.1888C12.2321 12.662 12.4696 12.0049 12.4696 11.2924C12.4696 9.55665 11.0624 8.14951 9.32673 8.14951C7.59101 8.14951 6.18387 9.55665 6.18387 11.2924C6.18387 13.0281 7.59101 14.4352 9.32673 14.4352C9.96601 14.4352 10.5589 14.2442 11.0553 13.9174L12.7464 15.6084C12.7749 15.637 12.8107 15.6495 12.8464 15.6495C12.8821 15.6495 12.9196 15.6352 12.9464 15.6084L13.4999 15.0549C13.5131 15.0418 13.5236 15.0262 13.5307 15.009C13.5378 14.9919 13.5415 14.9735 13.5415 14.9549C13.5415 14.9363 13.5378 14.9179 13.5307 14.9007C13.5236 14.8836 13.5131 14.868 13.4999 14.8549ZM9.32673 13.2924C8.22137 13.2924 7.32673 12.3977 7.32673 11.2924C7.32673 10.187 8.22137 9.29237 9.32673 9.29237C10.4321 9.29237 11.3267 10.187 11.3267 11.2924C11.3267 12.3977 10.4321 13.2924 9.32673 13.2924Z" fill="currentColor"/>
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M1.39209 1.8501H1.39997V1.3614H1.93677V1.35498H9.80915C9.90348 1.35498 9.98065 1.28325 9.98065 1.19559V0.239227C9.98065 0.151561 9.90348 0.079834 9.80915 0.079834H1.93677V0.0756836H0.685686C0.369615 0.0756836 0.114258 0.331041 0.114258 0.647112V1.8501H0.116943L0.116943 12.8566C0.116943 12.9863 0.18867 13.0925 0.276337 13.0925H1.2327C1.32036 13.0925 1.39209 12.9863 1.39209 12.8566L1.39209 1.8501Z" fill="currentColor"/>
+</g>
+</svg>
diff --git a/react/src/components/icons/ExamplesIcon.tsx b/react/src/components/icons/ExamplesIcon.tsx
new file mode 100644
index 0000000000..0aded39924
--- /dev/null
+++ b/react/src/components/icons/ExamplesIcon.tsx
@@ -0,0 +1,12 @@
+import { ReactComponent as logo } from './Examples.svg';
+import Icon from '@ant-design/icons';
+import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
+
+interface ExamplesIconProps
+  extends Omit<CustomIconComponentProps, 'width' | 'height' | 'fill'> {}
+
+const ExamplesIcon: React.FC<ExamplesIconProps> = (props) => {
+  return <Icon component={logo} {...props} />;
+};
+
+export default ExamplesIcon;
diff --git a/react/src/components/icons/InteractiveSession.svg b/react/src/components/icons/InteractiveSession.svg
new file mode 100644
index 0000000000..4e9dce72a4
--- /dev/null
+++ b/react/src/components/icons/InteractiveSession.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.0492 1.02164C12.4219 0.659454 11.649 0.659454 11.0217 1.02164L3.03476 5.63287C2.40744 5.99506 2.021 6.6644 2.021 7.38876V16.6112C2.021 17.3356 2.40744 18.0049 3.03476 18.3671L11.0217 22.9784C11.2124 23.0885 11.4166 23.1651 11.6261 23.2083C11.7419 23.2542 11.8682 23.2795 12.0004 23.2795C12.5609 23.2795 13.0154 22.8251 13.0154 22.2645V22.1853H13.0171V20.6557L13.0154 20.6567V19.2372C13.0154 19.2055 13.0139 19.1742 13.0111 19.1433V12.5845L20.0223 8.55509V9.02133C20.0211 9.04152 20.0205 9.06188 20.0205 9.08238V11.2054C20.0205 11.766 20.4749 12.2204 21.0355 12.2204C21.5961 12.2204 22.0505 11.766 22.0505 11.2054V9.08238C22.0505 9.06996 22.0503 9.05759 22.0498 9.04528V7.38876C22.0498 6.6644 21.6634 5.99506 21.0361 5.63287L13.0492 1.02164ZM19.0048 6.80133L12.0354 2.77753L5.02777 6.8234L11.9971 10.8288L19.0048 6.80133ZM4.04852 8.59913V16.6112L10.9835 20.6152V12.5848L4.04852 8.59913Z" fill="#FF7A00"/>
+<path d="M16.6596 21.3625C16.5946 21.4032 16.5199 21.4257 16.4433 21.4277C16.3666 21.4297 16.2908 21.4112 16.2238 21.374C16.1567 21.3368 16.1008 21.2824 16.0619 21.2163C16.023 21.1503 16.0024 21.075 16.0024 20.9983V13.9574C16.0024 13.8807 16.023 13.8054 16.0619 13.7394C16.1008 13.6733 16.1567 13.6188 16.2238 13.5817C16.2908 13.5445 16.3666 13.526 16.4433 13.528C16.5199 13.53 16.5946 13.5525 16.6596 13.5931L21.7092 16.7493C21.8328 16.8266 21.9347 16.9339 22.0053 17.0614C22.0759 17.1888 22.113 17.3321 22.113 17.4778C22.113 17.6235 22.0759 17.7668 22.0053 17.8943C21.9347 18.0217 21.8328 18.1291 21.7092 18.2063L16.6596 21.3625Z" stroke="#FF7A00" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/react/src/components/icons/InteractiveSession.tsx b/react/src/components/icons/InteractiveSession.tsx
new file mode 100644
index 0000000000..4aeecb0cc1
--- /dev/null
+++ b/react/src/components/icons/InteractiveSession.tsx
@@ -0,0 +1,14 @@
+import { ReactComponent as logo } from './InteractiveSession.svg';
+import Icon from '@ant-design/icons';
+import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
+
+interface InteractiveSessionIconProps
+  extends Omit<CustomIconComponentProps, 'width' | 'height' | 'fill'> {}
+
+const InteractiveSessionIcon: React.FC<InteractiveSessionIconProps> = (
+  props,
+) => {
+  return <Icon component={logo} {...props} />;
+};
+
+export default InteractiveSessionIcon;
diff --git a/react/src/components/icons/ModelService.svg b/react/src/components/icons/ModelService.svg
new file mode 100644
index 0000000000..9df9737ef5
--- /dev/null
+++ b/react/src/components/icons/ModelService.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.26444 4.53923C3.91159 4.81731 3.9001 4.97984 3.9001 5.0001C3.9001 5.02035 3.91159 5.18289 4.26444 5.46096C4.60714 5.73104 5.15881 6.01363 5.92074 6.2676C7.43519 6.77242 9.58463 7.1001 12.0001 7.1001C14.4156 7.1001 16.565 6.77242 18.0795 6.2676C18.8414 6.01363 19.3931 5.73104 19.7358 5.46096C20.0886 5.18289 20.1001 5.02035 20.1001 5.0001C20.1001 4.97984 20.0886 4.81731 19.7358 4.53923C19.3931 4.26915 18.8414 3.98657 18.0795 3.73259C16.565 3.22778 14.4156 2.9001 12.0001 2.9001C9.58463 2.9001 7.43519 3.22778 5.92074 3.73259C5.15881 3.98657 4.60714 4.26915 4.26444 4.53923ZM3.15029 3.12549C2.59229 3.56525 2.1001 4.19193 2.1001 5.0001V12.0001V19.0001C2.1001 19.7826 2.56696 20.4035 3.12093 20.8493C3.68322 21.3018 4.45205 21.6754 5.35153 21.9752C7.15644 22.5769 9.54729 22.9001 12.0001 22.9001C14.4529 22.9001 16.8438 22.5769 18.6487 21.9752C19.5481 21.6754 20.317 21.3018 20.8793 20.8493C21.4332 20.4035 21.9001 19.7826 21.9001 19.0001V12.0001V5.0001C21.9001 4.19193 21.4079 3.56525 20.8499 3.12549C20.2818 2.67774 19.5154 2.31388 18.6487 2.02496C16.9058 1.44399 14.5552 1.1001 12.0001 1.1001C9.445 1.1001 7.09444 1.44399 5.35153 2.02496C4.48478 2.31388 3.71843 2.67774 3.15029 3.12549ZM20.1001 12.0001V7.36106C19.6684 7.59501 19.1772 7.79905 18.6487 7.97523C16.9058 8.5562 14.5552 8.9001 12.0001 8.9001C9.445 8.9001 7.09444 8.5562 5.35153 7.97523C4.82299 7.79905 4.33179 7.59501 3.9001 7.36106V12.0001C3.9001 12.0132 3.90735 12.1717 4.24943 12.447C4.5832 12.7156 5.1324 13.0048 5.92074 13.2676C7.49149 13.7912 9.67901 14.1001 12.0001 14.1001C14.3212 14.1001 16.5087 13.7912 18.0795 13.2676C18.8678 13.0048 19.417 12.7156 19.7508 12.447C20.0928 12.1717 20.1001 12.0132 20.1001 12.0001ZM3.9001 14.3603C4.32694 14.5921 4.81608 14.7968 5.35153 14.9752C7.15644 15.5769 9.54729 15.9001 12.0001 15.9001C14.4529 15.9001 16.8438 15.5769 18.6487 14.9752C19.1841 14.7968 19.6733 14.5921 20.1001 14.3603V19.0001C20.1001 19.0132 20.0928 19.1717 19.7508 19.447C19.417 19.7156 18.8678 20.0048 18.0795 20.2676C16.5087 20.7912 14.3212 21.1001 12.0001 21.1001C9.67901 21.1001 7.49149 20.7912 5.92074 20.2676C5.1324 20.0048 4.5832 19.7156 4.24943 19.447C3.90735 19.1717 3.9001 19.0132 3.9001 19.0001V14.3603Z" fill="#00BD9B"/>
+</svg>
diff --git a/react/src/components/icons/ModelServiceIcon.tsx b/react/src/components/icons/ModelServiceIcon.tsx
new file mode 100644
index 0000000000..f1bf206df9
--- /dev/null
+++ b/react/src/components/icons/ModelServiceIcon.tsx
@@ -0,0 +1,12 @@
+import { ReactComponent as logo } from './ModelService.svg';
+import Icon from '@ant-design/icons';
+import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
+
+interface ModelServiceIconProps
+  extends Omit<CustomIconComponentProps, 'width' | 'height' | 'fill'> {}
+
+const ModelServiceIcon: React.FC<ModelServiceIconProps> = (props) => {
+  return <Icon component={logo} {...props} />;
+};
+
+export default ModelServiceIcon;
diff --git a/react/src/components/icons/Models.svg b/react/src/components/icons/Models.svg
new file mode 100644
index 0000000000..310c326424
--- /dev/null
+++ b/react/src/components/icons/Models.svg
@@ -0,0 +1,5 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Menu/Icon">
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M3.67043 3.61991C3.4352 3.80529 3.42754 3.91365 3.42754 3.92715C3.42754 3.94065 3.4352 4.04901 3.67043 4.23439C3.8989 4.41445 4.26668 4.60283 4.77464 4.77215C5.78427 5.1087 7.21723 5.32715 8.82754 5.32715C10.4379 5.32715 11.8708 5.1087 12.8804 4.77215C13.3884 4.60283 13.7562 4.41445 13.9846 4.23439C14.2199 4.04901 14.2275 3.94065 14.2275 3.92715C14.2275 3.91365 14.2199 3.80529 13.9846 3.61991C13.7562 3.43985 13.3884 3.25146 12.8804 3.08214C11.8708 2.7456 10.4379 2.52715 8.82754 2.52715C7.21723 2.52715 5.78427 2.7456 4.77464 3.08214C4.26668 3.25146 3.8989 3.43985 3.67043 3.61991ZM4.39516 5.91057C4.0428 5.79312 3.71533 5.65709 3.42754 5.50113V8.59381C3.42754 8.60258 3.43237 8.70822 3.66043 8.89174C3.88294 9.07081 4.24907 9.26363 4.77464 9.43882C5.8218 9.78787 7.28015 9.99381 8.82754 9.99381C10.3749 9.99381 11.8333 9.78787 12.8804 9.43882C13.406 9.26363 13.7721 9.07081 13.9947 8.89174C14.2227 8.70822 14.2275 8.60258 14.2275 8.59381V5.50113C13.9397 5.65709 13.6123 5.79312 13.2599 5.91057C12.098 6.29789 10.5309 6.52715 8.82754 6.52715C7.12414 6.52715 5.5571 6.29789 4.39516 5.91057ZM14.2275 10.1673C13.943 10.3218 13.6169 10.4583 13.2599 10.5772C12.0566 10.9783 10.4627 11.1938 8.82754 11.1938C7.19233 11.1938 5.59843 10.9783 4.39516 10.5772C4.0382 10.4583 3.7121 10.3218 3.42754 10.1673V13.2605C3.42754 13.2692 3.43237 13.3749 3.66043 13.5584C3.88294 13.7375 4.24907 13.9303 4.77464 14.1055C5.8218 14.4545 7.28015 14.6605 8.82754 14.6605C10.3749 14.6605 11.8333 14.4545 12.8804 14.1055C13.406 13.9303 13.7721 13.7375 13.9947 13.5584C14.2227 13.3749 14.2275 13.2692 14.2275 13.2605V10.1673ZM2.22754 8.59381V3.92715V3.92521C2.22833 3.38736 2.55611 2.97023 2.92766 2.67741C3.30643 2.37891 3.81733 2.13634 4.39516 1.94372C5.5571 1.55641 7.12414 1.32715 8.82754 1.32715C10.5309 1.32715 12.098 1.55641 13.2599 1.94372C13.8378 2.13634 14.3486 2.37891 14.7274 2.67741C15.0994 2.97058 15.4275 3.38837 15.4275 3.92715V8.59381V13.2605C15.4275 13.7822 15.1163 14.1961 14.747 14.4933C14.3721 14.795 13.8596 15.044 13.2599 15.2439C12.0566 15.645 10.4627 15.8605 8.82754 15.8605C7.19233 15.8605 5.59843 15.645 4.39516 15.2439C3.7955 15.044 3.28296 14.795 2.9081 14.4933C2.53878 14.1961 2.22754 13.7822 2.22754 13.2605V8.59381Z" fill="currentColor"/>
+</g>
+</svg>
diff --git a/react/src/components/icons/ModelsIcon.tsx b/react/src/components/icons/ModelsIcon.tsx
new file mode 100644
index 0000000000..0f9d078226
--- /dev/null
+++ b/react/src/components/icons/ModelsIcon.tsx
@@ -0,0 +1,12 @@
+import { ReactComponent as logo } from './Models.svg';
+import Icon from '@ant-design/icons';
+import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
+
+interface ModelsIconProps
+  extends Omit<CustomIconComponentProps, 'width' | 'height' | 'fill'> {}
+
+const ModelsIcon: React.FC<ModelsIconProps> = (props) => {
+  return <Icon component={logo} {...props} />;
+};
+
+export default ModelsIcon;
diff --git a/react/src/components/icons/Pipelines.svg b/react/src/components/icons/Pipelines.svg
new file mode 100644
index 0000000000..022b14830e
--- /dev/null
+++ b/react/src/components/icons/Pipelines.svg
@@ -0,0 +1,5 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Menu/Icon">
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M11.4611 7.22001C11.4611 7.36484 11.3426 7.48333 11.1978 7.48333H9.43499V9.13898H14.5778V11.639H15.5421C15.6207 11.639 15.685 11.7033 15.685 11.7818V14.9247C15.685 15.0033 15.6207 15.0676 15.5421 15.0676H12.3993C12.3207 15.0676 12.2564 15.0033 12.2564 14.9247V11.7818C12.2564 11.7033 12.3207 11.639 12.3993 11.639H13.3636V10.3533H9.43499V11.639H10.3993C10.4778 11.639 10.5421 11.7033 10.5421 11.7818V14.9247C10.5421 15.0033 10.4778 15.0676 10.3993 15.0676H7.25642C7.17785 15.0676 7.11356 15.0033 7.11356 14.9247V11.7818C7.11356 11.7033 7.17785 11.639 7.25642 11.639H8.2207V10.3533H4.29213V11.639H5.25642C5.33499 11.639 5.39927 11.7033 5.39927 11.7818V14.9247C5.39927 15.0033 5.33499 15.0676 5.25642 15.0676H2.11356C2.03499 15.0676 1.9707 15.0033 1.9707 14.9247V11.7818C1.9707 11.7033 2.03499 11.639 2.11356 11.639H3.07785V9.13898H8.2207V7.48333H6.45791C6.31308 7.48333 6.19458 7.36484 6.19458 7.22001V2.48012C6.19458 2.33529 6.31308 2.2168 6.45791 2.2168H11.1978C11.3426 2.2168 11.4611 2.33529 11.4611 2.48012V7.22001ZM7.32983 3.35205V6.34794H10.3257V3.35205H7.32983ZM4.25646 13.8765C4.25646 13.9033 4.23503 13.9247 4.20825 13.9247H3.16003C3.13325 13.9247 3.11182 13.9033 3.11182 13.8765V12.8283C3.11182 12.8015 3.13325 12.7801 3.16003 12.7801H4.20825C4.23503 12.7801 4.25646 12.8015 4.25646 12.8283V13.8765ZM9.39928 13.8765C9.39928 13.9033 9.37785 13.9247 9.35107 13.9247H8.30285C8.27607 13.9247 8.25464 13.9033 8.25464 13.8765V12.8283C8.25464 12.8015 8.27607 12.7801 8.30285 12.7801H9.35107C9.37785 12.7801 9.39928 12.8015 9.39928 12.8283V13.8765ZM14.4939 13.9247C14.5207 13.9247 14.5421 13.9033 14.5421 13.8765V12.8283C14.5421 12.8015 14.5207 12.7801 14.4939 12.7801H13.4457C13.4189 12.7801 13.3975 12.8015 13.3975 12.8283V13.8765C13.3975 13.9033 13.4189 13.9247 13.4457 13.9247H14.4939Z" fill="currentColor"/>
+</g>
+</svg>
diff --git a/react/src/components/icons/PipelinesIcon.tsx b/react/src/components/icons/PipelinesIcon.tsx
new file mode 100644
index 0000000000..18dce3c5ba
--- /dev/null
+++ b/react/src/components/icons/PipelinesIcon.tsx
@@ -0,0 +1,12 @@
+import { ReactComponent as logo } from './Pipelines.svg';
+import Icon from '@ant-design/icons';
+import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
+
+interface PipelinesIconProps
+  extends Omit<CustomIconComponentProps, 'width' | 'height' | 'fill'> {}
+
+const PipelinesIcon: React.FC<PipelinesIconProps> = (props) => {
+  return <Icon component={logo} {...props} />;
+};
+
+export default PipelinesIcon;
diff --git a/react/src/components/icons/Sessions.svg b/react/src/components/icons/Sessions.svg
new file mode 100644
index 0000000000..21805da894
--- /dev/null
+++ b/react/src/components/icons/Sessions.svg
@@ -0,0 +1,10 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Menu/Icon" clip-path="url(#clip0_80_787)">
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M8.2021 1.59125C8.62031 1.34979 9.13557 1.34979 9.55378 1.59125L14.8784 4.66541C15.2966 4.90686 15.5542 5.35309 15.5542 5.836V11.9843C15.5542 12.4672 15.2966 12.9135 14.8784 13.1549L9.55378 16.2291C9.13557 16.4705 8.62031 16.4705 8.2021 16.2291L2.8775 13.1549C2.45929 12.9135 2.20166 12.4672 2.20166 11.9843V5.836C2.20166 5.35309 2.45929 4.90686 2.8775 4.66541L8.2021 1.59125ZM8.87794 2.76184L13.5242 5.44437L8.8524 8.12933L4.20618 5.45909L8.87794 2.76184ZM3.55335 11.9843V6.64291L8.17669 9.3V14.6536L3.55335 11.9843ZM9.52837 14.6829L14.2025 11.9843V6.61355L9.52837 9.29985V14.6829Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0_80_787">
+<rect width="16" height="16" fill="white" transform="translate(0.87793 0.910156)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/react/src/components/icons/SessionsIcon.tsx b/react/src/components/icons/SessionsIcon.tsx
new file mode 100644
index 0000000000..efad5cb57b
--- /dev/null
+++ b/react/src/components/icons/SessionsIcon.tsx
@@ -0,0 +1,12 @@
+import { ReactComponent as logo } from './Sessions.svg';
+import Icon from '@ant-design/icons';
+import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
+
+interface SessionsIconProps
+  extends Omit<CustomIconComponentProps, 'width' | 'height' | 'fill'> {}
+
+const SessionsIcon: React.FC<SessionsIconProps> = (props) => {
+  return <Icon component={logo} {...props} />;
+};
+
+export default SessionsIcon;
diff --git a/react/src/components/icons/Trails.svg b/react/src/components/icons/Trails.svg
new file mode 100644
index 0000000000..0caead2b06
--- /dev/null
+++ b/react/src/components/icons/Trails.svg
@@ -0,0 +1,10 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Menu/Icon" clip-path="url(#clip0_80_225)">
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M8.53955 5.31364C9.01299 5.31364 9.44983 5.15697 9.80107 4.89264L12.7524 7.84398C12.7312 7.88773 12.7114 7.93232 12.6932 7.9777H4.96207C4.65195 7.20517 3.89594 6.65967 3.01253 6.65967C1.85277 6.65967 0.912598 7.59984 0.912598 8.7596C0.912598 9.91936 1.85277 10.8595 3.01253 10.8595C3.37418 10.8595 3.71447 10.7681 4.01156 10.6071L6.66095 13.1246C6.51932 13.4072 6.43962 13.7263 6.43962 14.064C6.43962 15.2237 7.37979 16.1639 8.53955 16.1639C9.69931 16.1639 10.6395 15.2237 10.6395 14.064C10.6395 12.9042 9.69931 11.964 8.53955 11.964C8.20397 11.964 7.88677 12.0427 7.60542 12.1827L4.92255 9.6335C4.96987 9.53024 5.00907 9.42248 5.03932 9.31104H12.616C12.8581 10.2033 13.6738 10.8595 14.6427 10.8595C15.8025 10.8595 16.7427 9.91936 16.7427 8.7596C16.7427 7.59984 15.8025 6.65967 14.6427 6.65967C14.2976 6.65967 13.9718 6.74295 13.6846 6.89052L10.5648 3.77076C10.6135 3.59335 10.6395 3.40657 10.6395 3.2137C10.6395 2.05394 9.69931 1.11377 8.53955 1.11377C7.37979 1.11377 6.43962 2.05394 6.43962 3.2137C6.43962 4.37347 7.37979 5.31364 8.53955 5.31364ZM8.53949 4.11205C9.03566 4.11205 9.4379 3.70982 9.4379 3.21364C9.4379 2.71746 9.03566 2.31523 8.53949 2.31523C8.04331 2.31523 7.64108 2.71746 7.64108 3.21364C7.64108 3.70982 8.04331 4.11205 8.53949 4.11205ZM8.53949 14.9623C9.03566 14.9623 9.4379 14.5601 9.4379 14.0639C9.4379 13.5677 9.03566 13.1655 8.53949 13.1655C8.04331 13.1655 7.64108 13.5677 7.64108 14.0639C7.64108 14.5601 8.04331 14.9623 8.53949 14.9623ZM3.91088 8.75954C3.91088 9.25572 3.50865 9.65795 3.01247 9.65795C2.51629 9.65795 2.11406 9.25572 2.11406 8.75954C2.11406 8.26336 2.51629 7.86113 3.01247 7.86113C3.50865 7.86113 3.91088 8.26336 3.91088 8.75954ZM14.6427 9.65795C15.1389 9.65795 15.5411 9.25572 15.5411 8.75954C15.5411 8.26336 15.1389 7.86113 14.6427 7.86113C14.1465 7.86113 13.7443 8.26336 13.7443 8.75954C13.7443 9.25572 14.1465 9.65795 14.6427 9.65795Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0_80_225">
+<rect width="16" height="16" fill="white" transform="translate(0.827637 0.638672)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/react/src/components/icons/TrailsIcon.tsx b/react/src/components/icons/TrailsIcon.tsx
new file mode 100644
index 0000000000..95de4ad5c0
--- /dev/null
+++ b/react/src/components/icons/TrailsIcon.tsx
@@ -0,0 +1,12 @@
+import { ReactComponent as logo } from './Trails.svg';
+import Icon from '@ant-design/icons';
+import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
+
+interface TrailsIconProps
+  extends Omit<CustomIconComponentProps, 'width' | 'height' | 'fill'> {}
+
+const TrailsIcon: React.FC<TrailsIconProps> = (props) => {
+  return <Icon component={logo} {...props} />;
+};
+
+export default TrailsIcon;
diff --git a/react/src/components/icons/URLStart.svg b/react/src/components/icons/URLStart.svg
new file mode 100644
index 0000000000..c580825c00
--- /dev/null
+++ b/react/src/components/icons/URLStart.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="24" fill="none" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+ <g id="Start Icon" stroke="#00BD9B" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+  <path id="Vector" d="m10 13c0.4295 0.5741 0.9774 1.0491 1.6066 1.3929 0.6291 0.3438 1.3249 0.5482 2.0401 0.5994 0.7151 0.0512 1.4329-0.052 2.1046-0.3026 0.6718-0.2505 1.2818-0.6427 1.7887-1.1497l3-3c0.9108-0.94305 1.4148-2.2061 1.4034-3.517s-0.5373-2.565-1.4643-3.4921-2.1811-1.4529-3.4921-1.4643c-1.311-0.0114-2.574 0.49258-3.517 1.4034l-1.72 1.71"/>
+  <path d="m14 11c-0.4295-0.5741-0.9774-1.0492-1.6066-1.3929-0.6292-0.34376-1.325-0.54818-2.0401-0.5994-0.71514-0.05122-1.4329 0.05197-2.1047 0.30255-0.67176 0.25059-1.2818 0.64272-1.7886 1.1498l-3 3c-0.91079 0.943-1.4148 2.206-1.4034 3.517 0.01139 1.311 0.53723 2.5651 1.4643 3.4921 0.92704 0.9271 2.1811 1.4529 3.4921 1.4643s2.574-0.4926 3.517-1.4034l1.71-1.71"/>
+ </g>
+</svg>
diff --git a/react/src/components/icons/URLStartIcon.tsx b/react/src/components/icons/URLStartIcon.tsx
new file mode 100644
index 0000000000..10e7bcf47d
--- /dev/null
+++ b/react/src/components/icons/URLStartIcon.tsx
@@ -0,0 +1,12 @@
+import { ReactComponent as logo } from './URLStart.svg';
+import Icon from '@ant-design/icons';
+import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
+
+interface URLStartIconProps
+  extends Omit<CustomIconComponentProps, 'width' | 'height' | 'fill'> {}
+
+const URLStartIcon: React.FC<URLStartIconProps> = (props) => {
+  return <Icon component={logo} {...props} />;
+};
+
+export default URLStartIcon;
diff --git a/react/src/components/icons/UserOutlined.svg b/react/src/components/icons/UserOutlined.svg
new file mode 100644
index 0000000000..873fba7867
--- /dev/null
+++ b/react/src/components/icons/UserOutlined.svg
@@ -0,0 +1,11 @@
+<svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_142_1142)">
+<path d="M8.5 0.5C3.80603 0.5 0 4.30603 0 9C0 13.694 3.80603 17.5 8.5 17.5C13.194 17.5 17 13.694 17 9C17 4.30603 13.194 0.5 8.5 0.5Z" fill="white"/>
+<path d="M12.4165 11.6867C12.2033 11.2095 11.8939 10.7761 11.5055 10.4106C11.1183 10.044 10.6596 9.75176 10.1548 9.54994C10.1503 9.5478 10.1457 9.54673 10.1412 9.5446C10.8454 9.06407 11.3032 8.28134 11.3032 7.39824C11.3032 5.9353 10.0485 4.75 8.5 4.75C6.95147 4.75 5.69683 5.9353 5.69683 7.39824C5.69683 8.28134 6.1546 9.06407 6.85879 9.54567C6.85427 9.5478 6.84975 9.54887 6.84522 9.551C6.33884 9.75283 5.88446 10.0422 5.4945 10.4117C5.10648 10.7775 4.7971 11.2108 4.58347 11.6878C4.3736 12.1547 4.26041 12.6553 4.25003 13.1624C4.24973 13.1738 4.25184 13.1852 4.25625 13.1958C4.26066 13.2064 4.26727 13.2161 4.2757 13.2242C4.28413 13.2324 4.2942 13.2389 4.30532 13.2433C4.31644 13.2477 4.32839 13.25 4.34045 13.25H5.01864C5.06837 13.25 5.10793 13.2126 5.10907 13.1667C5.13167 12.3423 5.48207 11.5703 6.10148 10.9851C6.74237 10.3796 7.59349 10.0465 8.5 10.0465C9.40651 10.0465 10.2576 10.3796 10.8985 10.9851C11.5179 11.5703 11.8683 12.3423 11.8909 13.1667C11.8921 13.2137 11.9316 13.25 11.9814 13.25H12.6595C12.6716 13.25 12.6836 13.2477 12.6947 13.2433C12.7058 13.2389 12.7159 13.2324 12.7243 13.2242C12.7327 13.2161 12.7393 13.2064 12.7437 13.1958C12.7482 13.1852 12.7503 13.1738 12.75 13.1624C12.7387 12.652 12.6268 12.1555 12.4165 11.6867ZM8.5 9.23492C7.98119 9.23492 7.49289 9.04378 7.12554 8.69673C6.75819 8.34969 6.55586 7.88838 6.55586 7.39824C6.55586 6.9081 6.75819 6.4468 7.12554 6.09975C7.49289 5.7527 7.98119 5.56156 8.5 5.56156C9.01881 5.56156 9.50711 5.7527 9.87446 6.09975C10.2418 6.4468 10.4441 6.9081 10.4441 7.39824C10.4441 7.88838 10.2418 8.34969 9.87446 8.69673C9.50711 9.04378 9.01881 9.23492 8.5 9.23492Z" fill="#FF7A00"/>
+</g>
+<defs>
+<clipPath id="clip0_142_1142">
+<rect width="17" height="17" fill="white" transform="translate(0 0.5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/react/src/components/icons/UserOutlinedIcon.tsx b/react/src/components/icons/UserOutlinedIcon.tsx
new file mode 100644
index 0000000000..bdaabd78e0
--- /dev/null
+++ b/react/src/components/icons/UserOutlinedIcon.tsx
@@ -0,0 +1,12 @@
+import { ReactComponent as logo } from './UserOutlined.svg';
+import Icon from '@ant-design/icons';
+import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
+
+interface UserOutlinedIconProps
+  extends Omit<CustomIconComponentProps, 'width' | 'height' | 'fill'> {}
+
+const UserOutlinedIcon: React.FC<UserOutlinedIconProps> = (props) => {
+  return <Icon component={logo} {...props} />;
+};
+
+export default UserOutlinedIcon;
diff --git a/react/src/icons/session.svg b/react/src/icons/session.svg
new file mode 100644
index 0000000000..8d7c2a7012
--- /dev/null
+++ b/react/src/icons/session.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.0003 13.5392V16.5714H11.9825C11.836 16.5714 11.7146 16.6821 11.7146 16.8214V18.3214C11.7146 18.4571 11.836 18.5714 11.9825 18.5714H15.0003V21.6035C15.0003 21.7428 15.1146 21.8571 15.2503 21.8571H16.7503C16.8896 21.8571 17.0003 21.7428 17.0003 21.6035V18.5714H20.0182C20.1646 18.5714 20.286 18.4571 20.286 18.3214V16.8214C20.286 16.6821 20.1646 16.5714 20.0182 16.5714H17.0003V13.5392C17.0003 13.3999 16.8896 13.2856 16.7503 13.2856H15.2503C15.1146 13.2856 15.0003 13.3999 15.0003 13.5392ZM29.1432 8.37136H16.3217L12.1325 4.36422C12.0792 4.31432 12.009 4.28627 11.936 4.28564H2.85746C2.22531 4.28564 1.7146 4.79636 1.7146 5.4285V26.5714C1.7146 27.2035 2.22531 27.7142 2.85746 27.7142H29.1432C29.7753 27.7142 30.286 27.2035 30.286 26.5714V9.51422C30.286 8.88207 29.7753 8.37136 29.1432 8.37136ZM27.7146 25.1428H4.28603V6.85707H11.0182L15.2896 10.9428H27.7146V25.1428Z" fill="currentColor"/>
+</svg>
diff --git a/react/src/pages/NeoSessionPage.tsx b/react/src/pages/NeoSessionPage.tsx
new file mode 100644
index 0000000000..e17d1f455e
--- /dev/null
+++ b/react/src/pages/NeoSessionPage.tsx
@@ -0,0 +1,89 @@
+import AllocatedResourcesCard from '../components/AllocatedResourcesCard';
+import BAIStartSimpleCard from '../components/BAIStartSimpleCard';
+import Flex from '../components/Flex';
+import NeoSessionList from '../components/NeoSessionList';
+import SessionsIcon from '../components/icons/SessionsIcon';
+import { useWebUINavigate } from '../hooks';
+import { Card, Typography, Button, Tabs, Badge, theme } from 'antd';
+import { t } from 'i18next';
+import _ from 'lodash';
+import React from 'react';
+
+const TAB_ITEMS_MAP = {
+  all: t('general.All'),
+  interactive: t('session.Interactive'),
+  batch: t('session.Batch'),
+  inference: t('session.Inference'),
+  system: 'System',
+};
+
+const MOCK_TOTAL_DATA = {
+  all: '83',
+  interactive: '44/83',
+  batch: '32/83',
+  inference: '6/83',
+  system: '1/83',
+};
+
+interface NeoSessionPageProps {}
+
+const NeoSessionPage: React.FC<NeoSessionPageProps> = (props) => {
+  const { token } = theme.useToken();
+  const webuiNavigate = useWebUINavigate();
+
+  return (
+    <Flex direction="column" align="stretch" gap={16}>
+      <Flex align="start" gap={16}>
+        <BAIStartSimpleCard
+          icon={<SessionsIcon />}
+          title={'Create a Session'}
+          footerButtonProps={{
+            onClick: () => {
+              webuiNavigate('/session/start');
+            },
+            children: 'Start Session',
+          }}
+          styles={{
+            body: {
+              height: 240,
+            },
+          }}
+        />
+        <AllocatedResourcesCard />
+      </Flex>
+      <Flex align="stretch" direction="column">
+        <Card>
+          <Flex justify="between" style={{ marginBottom: 22 }}>
+            <Typography.Title level={4} style={{ margin: 0 }}>
+              {t('session.launcher.Sessions')}
+            </Typography.Title>
+            <Button
+              type="primary"
+              onClick={() => webuiNavigate('/session/start')}
+            >
+              Session Start
+            </Button>
+          </Flex>
+          <Tabs
+            type="card"
+            items={_.map(TAB_ITEMS_MAP, (label, key) => ({
+              key,
+              label: (
+                <Flex style={{ width: 124 }} justify="center" gap={10}>
+                  {label}
+                  <Badge
+                    count={_.get(MOCK_TOTAL_DATA, key)}
+                    color={token.colorPrimary}
+                  />
+                </Flex>
+              ),
+              children: <NeoSessionList key={key} sessionType={key} />,
+            }))}
+          />
+        </Card>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default NeoSessionPage;
diff --git a/react/src/pages/StartPage.tsx b/react/src/pages/StartPage.tsx
new file mode 100644
index 0000000000..35feba19e0
--- /dev/null
+++ b/react/src/pages/StartPage.tsx
@@ -0,0 +1,139 @@
+import BAIStartBasicCard from '../components/BAIStartBasicCard';
+import Flex from '../components/Flex';
+import BatchSessionIcon from '../components/icons/BatchSessionIcon';
+import ExampleStartIcon from '../components/icons/ExampleStart';
+import InteractiveSessionIcon from '../components/icons/InteractiveSession';
+import ModelServiceIcon from '../components/icons/ModelServiceIcon';
+// import URLStartIcon from '../components/icons/URLStartIcon';
+import { useWebUINavigate } from '../hooks';
+import { FolderAddOutlined } from '@ant-design/icons';
+import React from 'react';
+
+interface StartPageProps {}
+
+const StartPage: React.FC<StartPageProps> = (props) => {
+  const webuiNavigate = useWebUINavigate();
+
+  return (
+    <Flex gap={16} wrap="wrap" direction="column" align="start">
+      <Flex gap={16} wrap="wrap">
+        <BAIStartBasicCard
+          icon={<FolderAddOutlined />}
+          title={
+            <div>
+              Create a New
+              <br />
+              Storage Folder
+            </div>
+          }
+          description="Creating a folder and uploading files are crucial for training models or providing services externally. Please begin by uploading the files."
+          footerButtonProps={{
+            onClick: () => {
+              webuiNavigate('/data');
+            },
+            children: 'Create Folder',
+          }}
+        />
+        <BAIStartBasicCard
+          icon={<InteractiveSessionIcon />}
+          title={
+            <div>
+              Start an
+              <br />
+              Interactive Session
+            </div>
+          }
+          description="Want to train a model? Click the button to create a session instantly. Choose your preferred environment and resources for running code and other tasks."
+          footerButtonProps={{
+            onClick: () => {
+              webuiNavigate('/session/start');
+            },
+            children: 'Start Session',
+          }}
+        />
+        <BAIStartBasicCard
+          icon={<BatchSessionIcon />}
+          title={
+            <div>
+              Start a<br />
+              Batch Session
+            </div>
+          }
+          description="For predefined files or scheduled tasks, try Batch sessions. Enter the command, set the date and time, and run as needed."
+          footerButtonProps={{
+            onClick: () => {
+              webuiNavigate(
+                '/session/start?formValues=%7B%22sessionType%22%3A%22batch%22%2C%22environments%22%3A%7B%22environment%22%3A%22cr.backend.ai%2Fmultiarch%2Fpython%22%2C%22version%22%3A%22cr.backend.ai%2Fmultiarch%2Fpython%3A3.9-ubuntu20.04%40x86_64%22%7D%2C%22envvars%22%3A%5B%5D%2C%22resourceGroup%22%3A%22default%22%2C%22allocationPreset%22%3A%22cpu01-small%22%2C%22resource%22%3A%7B%22cpu%22%3A1%2C%22mem%22%3A%221G%22%2C%22shmem%22%3A%2264m%22%2C%22accelerator%22%3A0%7D%2C%22enabledAutomaticShmem%22%3Atrue%2C%22num_of_sessions%22%3A1%2C%22cluster_mode%22%3A%22single-node%22%2C%22cluster_size%22%3A1%2C%22hpcOptimization%22%3A%7B%22autoEnabled%22%3Atrue%2C%22OMP_NUM_THREADS%22%3A%221%22%2C%22OPENBLAS_NUM_THREADS%22%3A%221%22%7D%2C%22vfoldersAliasMap%22%3A%7B%7D%2C%22batch%22%3A%7B%22enabled%22%3Afalse%7D%7D',
+              );
+            },
+            children: 'Start Session',
+          }}
+        />
+      </Flex>
+      <Flex gap={16} wrap="wrap">
+        <BAIStartBasicCard
+          secondary
+          icon={<ModelServiceIcon />}
+          title={
+            <div>
+              Start a
+              <br /> Model Service
+            </div>
+          }
+          description="Ready to share your trained model with others? Click the button to create a service."
+          footerButtonProps={{
+            onClick: () => {
+              webuiNavigate('/serving');
+            },
+            children: 'Start Service',
+          }}
+        />
+        <BAIStartBasicCard
+          secondary
+          icon={<ExampleStartIcon />}
+          title={
+            <div>
+              Start
+              <br />
+              from the Example
+            </div>
+          }
+          description="Explore various example codes and get started."
+          footerButtonProps={{
+            children: 'Start Now',
+          }}
+        />
+        <BAIStartBasicCard
+          secondary
+          icon={
+            // FIXME: workaround for displaying proper icon
+            <img src="/resources/icons/URLStart.svg" alt="URL start"></img>
+            // <URLStartIcon />
+          }
+          title={
+            <div>
+              Start
+              <br />
+              from a URL
+            </div>
+          }
+          description="Import your project and code from various environments such as GitHub, GitLab, Notebook, etc."
+          footerButtonProps={{
+            children: 'Start Now',
+          }}
+        />
+      </Flex>
+      {/* <BAIStartSimpleCard
+        icon={<SessionsIcon />}
+        title={'Create a Session'}
+        footerButtonProps={{
+          onClick: () => {
+            webuiNavigate('/session/start');
+          },
+          children: 'Start Session',
+        }}
+      /> */}
+    </Flex>
+  );
+};
+export default StartPage;
diff --git a/resources/icons/URLStart.svg b/resources/icons/URLStart.svg
new file mode 100644
index 0000000000..c580825c00
--- /dev/null
+++ b/resources/icons/URLStart.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="24" fill="none" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+ <g id="Start Icon" stroke="#00BD9B" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+  <path id="Vector" d="m10 13c0.4295 0.5741 0.9774 1.0491 1.6066 1.3929 0.6291 0.3438 1.3249 0.5482 2.0401 0.5994 0.7151 0.0512 1.4329-0.052 2.1046-0.3026 0.6718-0.2505 1.2818-0.6427 1.7887-1.1497l3-3c0.9108-0.94305 1.4148-2.2061 1.4034-3.517s-0.5373-2.565-1.4643-3.4921-2.1811-1.4529-3.4921-1.4643c-1.311-0.0114-2.574 0.49258-3.517 1.4034l-1.72 1.71"/>
+  <path d="m14 11c-0.4295-0.5741-0.9774-1.0492-1.6066-1.3929-0.6292-0.34376-1.325-0.54818-2.0401-0.5994-0.71514-0.05122-1.4329 0.05197-2.1047 0.30255-0.67176 0.25059-1.2818 0.64272-1.7886 1.1498l-3 3c-0.91079 0.943-1.4148 2.206-1.4034 3.517 0.01139 1.311 0.53723 2.5651 1.4643 3.4921 0.92704 0.9271 2.1811 1.4529 3.4921 1.4643s2.574-0.4926 3.517-1.4034l1.71-1.71"/>
+ </g>
+</svg>
diff --git a/resources/icons/session.svg b/resources/icons/session.svg
new file mode 100644
index 0000000000..a8fc3e4b5c
--- /dev/null
+++ b/resources/icons/session.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.6479 1.36169C15.4843 0.878784 16.5148 0.878784 17.3512 1.36169L28.0004 7.51001C28.8368 7.99292 29.3521 8.88538 29.3521 9.8512V22.1478C29.3521 23.1136 28.8368 24.0061 28.0004 24.489L17.3512 30.6373C16.5148 31.1202 15.4843 31.1202 14.6479 30.6373L3.99866 24.489C3.16223 24.0061 2.64697 23.1136 2.64697 22.1478V9.8512C2.64697 8.88538 3.16223 7.99292 3.99866 7.51001L14.6479 1.36169ZM15.9995 3.70288L25.2921 9.06795L15.9485 14.4379L6.65601 9.09737L15.9995 3.70288ZM5.35034 22.1478V11.465L14.597 16.7792V27.4864L5.35034 22.1478ZM17.3004 27.5451L26.6487 22.1478V11.4063L17.3004 16.7789V27.5451Z" fill="currentColor"/>
+</svg>
diff --git a/resources/theme.json b/resources/theme.json
index ad4851a698..c6e7457e1e 100644
--- a/resources/theme.json
+++ b/resources/theme.json
@@ -1,70 +1,111 @@
 {
   "$schema": "./theme.schema.json",
-  "light" : {
-    "token": {
-      "fontFamily": "'Ubuntu', Roboto, sans-serif",
-      "colorPrimary": "#37B076",
-      "colorLink": "#37B076",
-      "colorLinkHover": "#71b98c",
-      "colorSuccess": "#37B076",
-      "colorBorder": "#DEE1E7",
-      "colorBorderSecondary": "#E1E1E2",
-      "colorWarning": "#f1a239"
-    },
-    "components": {
-      "Tag": {
-        "borderRadiusSM": 1
-      },
-      "Table": {
-        "headerBorderRadius": 0
-      },
-      "Layout": {
-        "lightSiderBg": "#F4F7FD",
-        "siderBg": "#2A2C30"
-      }
-    }
+  "light": {
+  "token": {
+  "fontFamily": "'Ubuntu', Roboto, sans-serif",
+  "colorPrimary": "#FF7A00",
+  "colorLink": "#FF7A00",
+  "colorPrimaryText": "#E8FAF6",
+  "colorPrimaryBg": "#FF7A00",
+  "colorInfoHover": "#FFE3B7",
+  "colorWarning": "#f1a239",
+  "colorError": "#EE585A",
+  "colorTextDescription": "#767676",
+  "borderRadius": 5,
+  "colorLinkHover": "#FF9D00",
+  "colorBgBlur": "#FFE3B7",
+  "colorBorderSecondary": "#E1E1E2",
+  "colorSuccess": "#028DF2",
+  "colorSuccessBg": "#C9EFFF",
+  "colorSuccessBgHover": "#C9EFFF",
+  "colorSuccessBorder": "#C9EFFF",
+  "colorSuccessBorderHover": "#C9EFFF",
+  "colorSuccessHover": "#028DF2",
+  "colorIcon": "#FFFFFF"
+  },
+  "components": {
+  "Tag": {
+  "borderRadiusSM": 100,
+  "colorSuccess": "#01A543",
+  "colorSuccessBorder": "#01A543",
+  "colorSuccessBg": "none",
+  "colorPreparingBg": "none",
+  "colorWarningBg": "none"
+  },
+  "Table": {
+  "headerBorderRadius": 0,
+  "headerBg": "#E3E3E3",
+  "cellPaddingBlock": 6,
+  "algorithm": true
+  },
+  "Layout": {
+  "lightSiderBg": "#FFFFFF",
+  "siderBg": "#2A2C30"
+  },
+  "Typography": {
+  "algorithm": {
+  "colorText": "#333333"
+  }
+  },
+  "Radio": {
+  "buttonColor": "#999999",
+  "algorithm": {
+  "buttonSolidCheckedBg": "#FFE3B7",
+  "buttonSolidCheckedColor": "#FF7A00"
+  }
+  },
+  "Select": {
+  "colorTextPlaceholder": "#999999"
+  },
+  "Tabs": {
+  "itemColor": "#999999"
+  }
+  }
   },
   "dark": {
-    "token": {
-      "fontFamily": "'Ubuntu', Roboto, sans-serif",
-      "colorPrimary": "#25C2A0",
-      "colorLink": "#25C2A0"
-    },
-    "components": {
-      "Tag": {
-        "borderRadiusSM": 1
-      },
-      "Table": {
-        "headerBorderRadius": 0
-      },
-      "Layout": {
-        "lightSiderBg": "#F4F7FD",
-        "siderBg": "#2A2C30"
-      }
-    }
+  "token": {
+  "fontFamily": "'Ubuntu', Roboto, sans-serif",
+  "colorPrimary": "#FF7A00",
+  "colorLink": "#FF7A00"
+  },
+  "components": {
+  "Tag": {
+  "borderRadiusSM": 100,
+  "colorSuccessBg": "none",
+  "colorPreparingBg": "none",
+  "colorWarningBg": "none"
+  },
+  "Table": {
+  "headerBorderRadius": 0,
+  "cellPaddingBlock": 6
+  },
+  "Layout": {
+  "lightSiderBg": "#F4F7FD",
+  "siderBg": "#2A2C30"
+  }
+  }
   },
   "logo": {
-    "src": "/manifest/backend.ai-text.svg",
-    "srcCollapsed": "/manifest/backend.ai-brand-simple.svg",
-    "srcDark": "/manifest/backend.ai-text-bgdark.svg",
-    "srcCollapsedDark": "/manifest/backend.ai-brand-simple-bgdark.svg",
-    "logoTitle": "WebUI",
-    "logoTitleCollapsed": "WebUI",
-    "alt": "Backend.AI Logo",
-    "href": "/summary",
-    "size": {
-      "width": 191,
-      "height": 32
-    },
-    "sizeCollapsed": {
-      "width": 48,
-      "height": 32
-    }
+  "src": "/manifest/backend.ai-white-text.svg",
+  "srcCollapsed": "/manifest/backend.ai-brand-simple.svg",
+  "srcDark": "/manifest/backend.ai-text-bgdark.svg",
+  "srcCollapsedDark": "/manifest/backend.ai-brand-simple-bgdark.svg",
+  "logoTitle": "WebUI",
+  "logoTitleCollapsed": "WebUI",
+  "alt": "Backend.AI Logo",
+  "href": "/summary",
+  "size": {
+  "width": 158.75,
+  "height": 24
   },
-  "sider": {
+  "sizeCollapsed": {
+  "width": 48,
+  "height": 24
+  }
   },
+  "sider": {},
   "branding": {
-    "companyName": "Lablup Inc.",
-    "brandName": "Backend.AI"
+  "companyName": "Lablup Inc.",
+  "brandName": "Backend.AI"
   }
-}
+  }
\ No newline at end of file
diff --git a/src/backend-ai-app.ts b/src/backend-ai-app.ts
index 61152b6346..a1d7397f29 100644
--- a/src/backend-ai-app.ts
+++ b/src/backend-ai-app.ts
@@ -50,7 +50,7 @@ export const navigate =
     }
     let page;
     if (['/', 'build', '/build', 'app', '/app'].includes(path)) {
-      page = 'summary';
+      page = 'start';
     } else if (path[0] === '/') {
       page = path.slice(1);
     } else {
@@ -85,7 +85,7 @@ const loadPage =
   (page, params: Record<string, unknown> = {}) =>
   (dispatch) => {
     switch (page) {
-      case 'summary':
+      case 'start':
         import('./components/backend-ai-summary-view.js').then((module) => {
           // TODO: after page changing?
         });
diff --git a/src/components/backend-ai-error-view.ts b/src/components/backend-ai-error-view.ts
index 447b03acb9..e00f981eef 100644
--- a/src/components/backend-ai-error-view.ts
+++ b/src/components/backend-ai-error-view.ts
@@ -70,8 +70,8 @@ export default class BackendAIErrorView extends BackendAIPage {
    * @param {string} url - page to redirect from the current page.
    */
   _moveTo(url = '') {
-    const page = url !== '' ? url : 'summary';
-    globalThis.history.pushState({}, '', '/summary');
+    const page = url !== '' ? url : 'start';
+    globalThis.history.pushState({}, '', '/start');
     store.dispatch(navigate(decodeURIComponent('/' + page), {}));
     document.dispatchEvent(
       new CustomEvent('react-navigate', {
@@ -98,7 +98,7 @@ export default class BackendAIErrorView extends BackendAIPage {
               fullwidth
               id="go-to-summary"
               label="${_t('button.GoBackToSummaryPage')}"
-              @click="${() => this._moveTo('summary')}"
+              @click="${() => this._moveTo('start')}"
             ></mwc-button>
           </div>
         </div>
diff --git a/src/components/backend-ai-permission-denied-view.ts b/src/components/backend-ai-permission-denied-view.ts
index 503a11adba..73a98795e7 100644
--- a/src/components/backend-ai-permission-denied-view.ts
+++ b/src/components/backend-ai-permission-denied-view.ts
@@ -113,7 +113,7 @@ export default class BackendAIPermissionDeniedView extends BackendAIPage {
    * @param {string} url - page to redirect from the current page.
    */
   _moveTo(url = '') {
-    const page = url !== '' ? url : 'summary';
+    const page = url !== '' ? url : 'start';
     globalThis.history.pushState({}, '', '/summary');
     store.dispatch(navigate(decodeURIComponent('/' + page), {}));
   }
@@ -135,7 +135,7 @@ export default class BackendAIPermissionDeniedView extends BackendAIPage {
               fullwidth
               id="go-to-summary"
               label="${_t('button.GoBackToSummaryPage')}"
-              @click="${() => this._moveTo('summary')}"
+              @click="${() => this._moveTo('start')}"
             ></mwc-button>
           </div>
         </div>
diff --git a/src/components/backend-ai-storage-list.ts b/src/components/backend-ai-storage-list.ts
index 5bd2b27369..328de6ad14 100644
--- a/src/components/backend-ai-storage-list.ts
+++ b/src/components/backend-ai-storage-list.ts
@@ -1080,7 +1080,7 @@ export default class BackendAiStorageList extends BackendAIPage {
    * @param {string} url - page to redirect from the current page.
    */
   _moveTo(url = '') {
-    const page = url !== '' ? url : 'summary';
+    const page = url !== '' ? url : 'start';
     // globalThis.history.pushState({}, '', page);
     store.dispatch(navigate(decodeURIComponent(page), {}));
 
diff --git a/src/components/backend-ai-storage-proxy-list.ts b/src/components/backend-ai-storage-proxy-list.ts
index 6b1c808a21..e37bd812ed 100644
--- a/src/components/backend-ai-storage-proxy-list.ts
+++ b/src/components/backend-ai-storage-proxy-list.ts
@@ -249,7 +249,7 @@ export default class BackendAIStorageProxyList extends BackendAIPage {
    * @param {string} url - page to redirect from the current page.
    */
   _moveTo(url = '') {
-    const page = url !== '' ? url : 'summary';
+    const page = url !== '' ? url : 'start';
     // globalThis.history.pushState({}, '', page);
     store.dispatch(navigate(decodeURIComponent(page), {}));
 
diff --git a/src/components/backend-ai-summary-view.ts b/src/components/backend-ai-summary-view.ts
index fd78b7d3c9..653e39734d 100644
--- a/src/components/backend-ai-summary-view.ts
+++ b/src/components/backend-ai-summary-view.ts
@@ -469,7 +469,7 @@ export default class BackendAISummary extends BackendAIPage {
    * @param {string} search
    */
   _moveTo(url = '', search: string | undefined = undefined) {
-    const page = url !== '' ? url : 'summary';
+    const page = url !== '' ? url : 'start';
     // globalThis.history.pushState({}, '', page);
     store.dispatch(navigate(decodeURIComponent(page), {}));
 
diff --git a/src/components/backend-ai-webui.ts b/src/components/backend-ai-webui.ts
index c0c69ba109..91c7bc93cd 100644
--- a/src/components/backend-ai-webui.ts
+++ b/src/components/backend-ai-webui.ts
@@ -145,7 +145,8 @@ export default class BackendAIWebUI extends connect(store)(LitElement) {
   @property({ type: Number }) sidepanelWidth = 250;
   @property({ type: Object }) supports = Object();
   @property({ type: Array }) availablePages = [
-    'summary',
+    // 'summary',
+    'start',
     'verify-email',
     'change-password',
     'job',
@@ -719,7 +720,7 @@ export default class BackendAIWebUI extends connect(store)(LitElement) {
    */
   _loadPageElement() {
     if (this._page === 'index.html' || this._page === '') {
-      this._page = 'summary';
+      this._page = 'start';
       navigate(decodeURIComponent('/'));
     }
   }
@@ -896,13 +897,13 @@ export default class BackendAIWebUI extends connect(store)(LitElement) {
         <div id="loading-drag-area" class="loading-background-drag-area"></div>
       </div>
       <div id="app-page">
-        <backend-ai-summary-view
+        <!-- <backend-ai-summary-view
           class="page"
           name="summary"
           ?active="${this._page === 'summary'}"
         >
           <mwc-circular-progress indeterminate></mwc-circular-progress>
-        </backend-ai-summary-view>
+        </backend-ai-summary-view> -->
         <backend-ai-import-view
           class="page"
           name="import"