diff --git a/react/src/components/BAIMenu.tsx b/react/src/components/BAIMenu.tsx
index 397124b750..36a96fa51c 100644
--- a/react/src/components/BAIMenu.tsx
+++ b/react/src/components/BAIMenu.tsx
@@ -13,7 +13,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 +21,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,7 +31,7 @@ const BAIMenu: React.FC<MenuProps> = ({ ...props }) => {
         theme={{
           components: {
             Menu: {
-              itemBorderRadius: 2,
+              itemBorderRadius: 20,
               itemMarginInline: 0,
             },
           },
diff --git a/react/src/components/BAISider.tsx b/react/src/components/BAISider.tsx
index 568a899a62..e532c8e126 100644
--- a/react/src/components/BAISider.tsx
+++ b/react/src/components/BAISider.tsx
@@ -53,10 +53,27 @@ const BAISider: React.FC<BAISiderProps> = ({
           .bai-sider .non-draggable {
             -webkit-app-region: no-drag;
           }
+          .bai-menu li.ant-menu-item.ant-menu-item-selected {
+            border-radius: 20px;
+            background-color: #FFE3B7 !important;
+          }
+          .bai-menu li.ant-menu-item.ant-menu-item-selected > span.ant-menu-title-content {
+            color: #FF7A00 !important;
+            font-weight: normal;
+          }
+          .bai-menu li.ant-menu-item.ant-menu-item-selected::before {
+          width: 0px !important;
+          }
+          .bai-menu li.ant-menu-item.ant-menu-item-selected > span.anticon.ant-menu-item-icon {
+            color: #FF7A00 !important;
+          }
+          .bai-menu span.ant-menu-title-content {
+            color: #333;
+          }
         `}
       </style>
       <Sider
-        width={221}
+        width={220}
         breakpoint="md"
         style={{
           overflowX: 'hidden',
@@ -65,7 +82,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 +103,7 @@ const BAISider: React.FC<BAISiderProps> = ({
             algorithm: siderTheme === 'dark' ? theme.darkAlgorithm : undefined,
           }}
         >
-          <Flex
+          {/* <Flex
             direction="column"
             justify="start"
             align="start"
@@ -120,7 +137,7 @@ const BAISider: React.FC<BAISiderProps> = ({
                 {otherProps.collapsed ? logoTitleCollapsed : logoTitle}
               </Typography.Text>
             </div>
-          </Flex>
+          </Flex> */}
           {children}
           {bottomText && (
             <>
diff --git a/react/src/components/MainLayout/MainLayout.tsx b/react/src/components/MainLayout/MainLayout.tsx
index c161e72b25..de3c0ae970 100644
--- a/react/src/components/MainLayout/MainLayout.tsx
+++ b/react/src/components/MainLayout/MainLayout.tsx
@@ -122,16 +122,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
@@ -145,8 +138,8 @@ function MainLayout() {
             direction="column"
             align="stretch"
             style={{
-              paddingLeft: token.paddingContentHorizontalLG,
-              paddingRight: token.paddingContentHorizontalLG,
+              // paddingLeft: token.paddingContentHorizontalLG,
+              // paddingRight: token.paddingContentHorizontalLG,
               paddingBottom: token.paddingContentVertical,
               height: '100vh',
               overflow: 'auto',
@@ -162,20 +155,19 @@ function MainLayout() {
                   </div>
                 }
               >
-                <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}
+                <Flex>
+                  <WebUISider
+                    collapsed={sideCollapsed}
+                    onBreakpoint={(broken) => {
+                      if (broken) {
+                        setSideCollapsed(true);
+                      } else {
+                        !compactSidebarActive && setSideCollapsed(false);
+                      }
+                    }}
+                    webuiplugins={webUIPlugins}
                   />
-                </div>
+                </Flex>
               </Suspense>
               {/* <Flex direction="column"> */}
 
diff --git a/react/src/components/MainLayout/WebUIHeader.tsx b/react/src/components/MainLayout/WebUIHeader.tsx
index a69a40f690..504c7a0255 100644
--- a/react/src/components/MainLayout/WebUIHeader.tsx
+++ b/react/src/components/MainLayout/WebUIHeader.tsx
@@ -1,9 +1,12 @@
+import { useCustomThemeConfig } from '../../helper/customThemeConfig';
 import { useCurrentDomainValue } from '../../hooks';
+import { useSuspendedBackendaiClient, 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 ProjectSelect from '../ProjectSelect';
@@ -42,6 +45,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();
 
@@ -59,55 +70,66 @@ const WebUIHeader: React.FC<WebUIHeaderProps> = ({
         height: HEADER_HEIGHT,
         paddingRight: token.marginMD,
         paddingLeft: token.marginMD,
-        backgroundColor: scrolled ? token.colorBgElevated : 'transparent',
+        backgroundColor: token.colorFillContent,
         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">
+        <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'
+          }
+          style={{
+            width: themeConfig?.logo?.size?.width || 191,
+            height: themeConfig?.logo?.size?.height || 32,
+            cursor: 'pointer',
           }}
-          className="non-draggable"
+          onClick={() => webuiNavigate(themeConfig?.logo?.href || '/summary')}
         />
-        <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
-            }
-            onSelectProject={(projectInfo) => {
-              setOptimisticProjectId(projectInfo.projectId);
-              startProjectChangedTransition(() => {
-                setCurrentProject(projectInfo);
-              });
-            }}
-          />
+          <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..9e50a5ddc2 100644
--- a/react/src/components/MainLayout/WebUISider.tsx
+++ b/react/src/components/MainLayout/WebUISider.tsx
@@ -7,6 +7,10 @@ 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,
@@ -19,6 +23,7 @@ import {
   FileDoneOutlined,
   HddOutlined,
   InfoCircleOutlined,
+  PlayCircleOutlined,
   RocketOutlined,
   SolutionOutlined,
   ToolOutlined,
@@ -71,53 +76,101 @@ const WebUISider: React.FC<WebUISiderProps> = (props) => {
 
   const generalMenu = filterEmptyItem<ItemType>([
     {
-      label: t('webui.menu.Summary'),
+      label: 'Start', // t('webui.menu.Summary'),
+      icon: <PlayCircleOutlined />,
+      key: 'start', // 'summary',
+    },
+    {
+      label: 'Dashboard',
       icon: <DashboardOutlined />,
       key: 'summary',
     },
     {
-      label: t('webui.menu.Sessions'),
-      icon: <BarsOutlined />,
-      key: 'job',
-    },
-    supportServing && {
-      label: t('webui.menu.Serving'),
-      icon: <RocketOutlined />,
-      key: 'serving',
+      key: 'storage',
+      label: 'Storage',
+      type: 'group',
+      children: [
+        {
+          label: t('webui.menu.Data&Storage'),
+          icon: <CloudUploadOutlined />,
+          key: 'data',
+        },
+      ],
     },
     {
-      label: t('webui.menu.Import&Run'),
-      icon: <PlayIcon />,
-      key: 'import',
+      key: 'workload',
+      label: 'Workload',
+      type: 'group',
+      children: [
+        {
+          label: t('webui.menu.Sessions'),
+          icon: <BarsOutlined />,
+          key: 'job',
+        },
+        supportUserCommittedImage && {
+          label: t('webui.menu.MyEnvironments'),
+          icon: <FileDoneOutlined />,
+          key: 'my-environment',
+        },
+        {
+          label: 'Examples',
+          icon: <ExamplesIcon />,
+          key: 'examples',
+        },
+      ],
     },
     {
-      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: 'service',
+      label: 'Service',
+      type: 'group',
+      children: [
+        supportServing && {
+          label: 'Endpoints', //t('webui.menu.Serving'),
+          icon: <EndpointsIcon />, // <RocketOutlined />,
+          key: 'serving',
+        },
+        {
+          label: 'Models',
+          icon: <ModelsIcon />,
+          key: 'models',
+        },
+      ],
     },
     {
-      label: t('webui.menu.Statistics'),
-      icon: <BarChartOutlined />,
-      key: 'statistics',
-    },
-    !!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 />, // TODO: change to custom Pipelines icon
+          key: 'pipeline',
+          onClick: () => {
+            window.open(fasttrackEndpoint, '_blank', 'noopener noreferrer');
+          },
+        },
+        {
+          label: 'Trails',
+          icon: <TrailsIcon />,
+          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'] = [
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/icons/Endpoints.svg b/react/src/components/icons/Endpoints.svg
new file mode 100644
index 0000000000..384ad4062a
--- /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="#FF7A00"/>
+<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="#FF7A00"/>
+</g>
+</svg>
diff --git a/react/src/components/icons/EndpointsIcon.tsx b/react/src/components/icons/EndpointsIcon.tsx
new file mode 100644
index 0000000000..2a02618dde
--- /dev/null
+++ b/react/src/components/icons/EndpointsIcon.tsx
@@ -0,0 +1,11 @@
+import { ReactComponent as logo } from './Endpoints.svg';
+import Icon from '@ant-design/icons';
+import { IconComponentProps } from '@ant-design/icons/lib/components/Icon';
+
+interface EndpointsIconProps extends IconComponentProps {}
+
+const EndpointsIcon: React.FC<EndpointsIconProps> = (props) => {
+  return <Icon component={logo} />;
+};
+
+export default EndpointsIcon;
diff --git a/react/src/components/icons/Examples.svg b/react/src/components/icons/Examples.svg
new file mode 100644
index 0000000000..18e16ce9f4
--- /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="#FF7A00"/>
+<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="#FF7A00"/>
+</g>
+</svg>
diff --git a/react/src/components/icons/ExamplesIcon.tsx b/react/src/components/icons/ExamplesIcon.tsx
new file mode 100644
index 0000000000..9193997ba4
--- /dev/null
+++ b/react/src/components/icons/ExamplesIcon.tsx
@@ -0,0 +1,11 @@
+import { ReactComponent as logo } from './Examples.svg';
+import Icon from '@ant-design/icons';
+import { IconComponentProps } from '@ant-design/icons/lib/components/Icon';
+
+interface ExamplesIconProps extends IconComponentProps {}
+
+const ExamplesIcon: React.FC<ExamplesIconProps> = (props) => {
+  return <Icon component={logo} />;
+};
+
+export default ExamplesIcon;
diff --git a/react/src/components/icons/Models.svg b/react/src/components/icons/Models.svg
new file mode 100644
index 0000000000..3e053daa8b
--- /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="#FF7A00"/>
+</g>
+</svg>
diff --git a/react/src/components/icons/ModelsIcon.tsx b/react/src/components/icons/ModelsIcon.tsx
new file mode 100644
index 0000000000..6798c3b305
--- /dev/null
+++ b/react/src/components/icons/ModelsIcon.tsx
@@ -0,0 +1,11 @@
+import { ReactComponent as logo } from './Models.svg';
+import Icon from '@ant-design/icons';
+import { IconComponentProps } from '@ant-design/icons/lib/components/Icon';
+
+interface ModelsIconProps extends IconComponentProps {}
+
+const ModelsIcon: React.FC<ModelsIconProps> = (props) => {
+  return <Icon component={logo} />;
+};
+
+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..c2a626f336
--- /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="#FF7A00"/>
+</g>
+</svg>
diff --git a/react/src/components/icons/PipelinesIcon.tsx b/react/src/components/icons/PipelinesIcon.tsx
new file mode 100644
index 0000000000..7f5c6d3a4f
--- /dev/null
+++ b/react/src/components/icons/PipelinesIcon.tsx
@@ -0,0 +1,11 @@
+import { ReactComponent as logo } from './Pipelines.svg';
+import Icon from '@ant-design/icons';
+import { IconComponentProps } from '@ant-design/icons/lib/components/Icon';
+
+interface PipelinesIconProps extends IconComponentProps {}
+
+const PipelinesIcon: React.FC<PipelinesIconProps> = (props) => {
+  return <Icon component={logo} />;
+};
+
+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..5e57d06a97
--- /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="#FF7A00"/>
+</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..e0e9b879fc
--- /dev/null
+++ b/react/src/components/icons/SessionsIcon.tsx
@@ -0,0 +1,11 @@
+import { ReactComponent as logo } from './Sessions.svg';
+import Icon from '@ant-design/icons';
+import { IconComponentProps } from '@ant-design/icons/lib/components/Icon';
+
+interface SessionsIconProps extends IconComponentProps {}
+
+const SessionsIcon: React.FC<SessionsIconProps> = (props) => {
+  return <Icon component={logo} />;
+};
+
+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..79204c37c9
--- /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="#FF7A00"/>
+</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..aeb26f43d0
--- /dev/null
+++ b/react/src/components/icons/TrailsIcon.tsx
@@ -0,0 +1,11 @@
+import { ReactComponent as logo } from './Trails.svg';
+import Icon from '@ant-design/icons';
+import { IconComponentProps } from '@ant-design/icons/lib/components/Icon';
+
+interface TrailsIconProps extends IconComponentProps {}
+
+const TrailsIcon: React.FC<TrailsIconProps> = (props) => {
+  return <Icon component={logo} />;
+};
+
+export default TrailsIcon;
diff --git a/resources/theme.json b/resources/theme.json
index 66729fe20a..cc46747c20 100644
--- a/resources/theme.json
+++ b/resources/theme.json
@@ -3,14 +3,15 @@
   "light" : {
     "token": {
       "fontFamily": "'Ubuntu', Roboto, sans-serif",
-      "colorPrimary": "#FF9D00",
-      "colorLink": "#FF7A00",
+      "colorPrimaryBg": "#FF7A00",
+      "colorFillContent": "#FF9D00",
+      "colorLink": "#FF9D00",
+      "colorLinkHover": "#FF9D00",
       "colorSuccess": "#37B076",
-      "colorBorder": "#DEE1E7",
+      "colorBorder": "#FF9D00",
       "colorBorderSecondary": "#E1E1E2",
-      "colorWarning": "#f1a239",
-      "colorTextDescription": "#767676",
-      "borderRadius": 5
+      "colorBgBlur": "#FFE3B7",
+      "colorWarning": "#f1a239"
     },
     "components": {
       "Tag": {
@@ -20,7 +21,7 @@
         "headerBorderRadius": 0
       },
       "Layout": {
-        "lightSiderBg": "#F4F7FD",
+        "lightSiderBg": "#FFFFFF",
         "siderBg": "#2A2C30"
       }
     }