diff --git a/xinference/web/ui/src/components/MenuSide.js b/xinference/web/ui/src/components/MenuSide.js
index 429f454032..447fc7edf7 100644
--- a/xinference/web/ui/src/components/MenuSide.js
+++ b/xinference/web/ui/src/components/MenuSide.js
@@ -6,6 +6,7 @@ import {
   RocketLaunchOutlined,
   SmartToyOutlined,
 } from '@mui/icons-material'
+import ExitToAppIcon from '@mui/icons-material/ExitToApp'
 import {
   Box,
   Drawer,
@@ -17,31 +18,41 @@ import {
   Typography,
   useTheme,
 } from '@mui/material'
+import Button from '@mui/material/Button'
 import { useEffect, useState } from 'react'
+import { useCookies } from 'react-cookie'
 import { useLocation, useNavigate } from 'react-router-dom'
 
 import icon from '../media/icon.webp'
+import { isValidBearerToken } from './utils'
 
 const navItems = [
   {
     text: 'Launch Model',
     icon: <RocketLaunchOutlined />,
+    link: '/launch_model/llm',
+    sessionKey: 'modelType',
   },
   {
     text: 'Running Models',
     icon: <SmartToyOutlined />,
+    link: '/running_models/LLM',
+    sessionKey: 'runningModelType',
   },
   {
     text: 'Register Model',
     icon: <AddBoxOutlined />,
+    link: '/register_model',
   },
   {
     text: 'Cluster Information',
     icon: <DnsOutlined />,
+    link: '/cluster_info',
   },
   {
     text: 'Contact Us',
     icon: <GitHub />,
+    link: 'https://github.com/xorbitsai/inference',
   },
 ]
 
@@ -54,8 +65,23 @@ const MenuSide = () => {
     `${Math.min(Math.max(window.innerWidth * 0.2, 287), 320)}px`
   )
 
+  const [cookie, removeCookie] = useCookies(['token'])
+  const handleLogout = () => {
+    removeCookie('token', { path: '/' })
+    navigate('/login', { replace: true })
+  }
+
+  const [selectedIndex, setSelectedIndex] = useState(-1)
+
   useEffect(() => {
     setActive(pathname.substring(1))
+    const pathFirst = pathname.split('/').filter((p) => p)[0]
+    const idx = navItems.findIndex(
+      (item) => item.link.split('/').filter((p) => p)[0] === pathFirst
+    )
+    if (idx > -1) {
+      setSelectedIndex(idx)
+    }
   }, [pathname])
 
   useEffect(() => {
@@ -92,101 +118,98 @@ const MenuSide = () => {
         },
       }}
     >
-      {/* Title */}
-      <Box
-        display="flex"
-        justifyContent="center"
-        alignItems="center"
-        width="100%"
-      >
-        <Box display="flex" m="2rem 1rem 0rem 1rem" width="217px">
-          <Box
-            display="flex"
-            justifyContent="space-between"
-            alignItems="center"
-            textTransform="none"
-          >
+      <Box flex="1" display="flex" flexDirection="column">
+        {/* Title */}
+        <Box
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+          width="100%"
+        >
+          <Box display="flex" m="2rem 1rem 0rem 1rem" width="217px">
             <Box
-              component="img"
-              alt="profile"
-              src={icon}
-              height="60px"
-              width="60px"
-              borderRadius="50%"
-              sx={{ objectFit: 'cover', mr: 1.5 }}
-            />
-            <Box textAlign="left">
-              <Typography fontWeight="bold" fontSize="1.7rem">
-                {'Xinference'}
-              </Typography>
+              display="flex"
+              justifyContent="space-between"
+              alignItems="center"
+              textTransform="none"
+            >
+              <Box
+                component="img"
+                alt="profile"
+                src={icon}
+                height="60px"
+                width="60px"
+                borderRadius="50%"
+                sx={{ objectFit: 'cover', mr: 1.5 }}
+              />
+              <Box textAlign="left">
+                <Typography fontWeight="bold" fontSize="1.7rem">
+                  {'Xinference'}
+                </Typography>
+              </Box>
             </Box>
           </Box>
         </Box>
-      </Box>
 
-      <Box>
-        <Box width="100%">
-          <Box m="1.5rem 2rem 2rem 3rem"></Box>
-          <List>
-            {navItems.map(({ text, icon }) => {
-              if (!icon) {
-                return (
-                  <Typography key={text} sx={{ m: '2.25rem 0 1rem 3rem' }}>
-                    {text}
-                  </Typography>
-                )
-              }
+        <Box>
+          <Box width="100%">
+            <Box m="1.5rem 2rem 2rem 3rem"></Box>
+            <List>
+              {navItems.map(({ text, icon, link, sessionKey }, index) => {
+                if (!icon) {
+                  return (
+                    <Typography key={text} sx={{ m: '2.25rem 0 1rem 3rem' }}>
+                      {text}
+                    </Typography>
+                  )
+                }
 
-              const link = text.toLowerCase().replace(' ', '_')
-
-              return (
-                <ListItem key={text}>
-                  <ListItemButton
-                    onClick={() => {
-                      if (link === 'contact_us') {
-                        window.open(
-                          'https://github.com/xorbitsai/inference',
-                          '_blank',
-                          'noreferrer'
-                        )
-                      } else if (link === 'launch_model') {
-                        sessionStorage.setItem('modelType', '/launch_model/llm')
-                        navigate('/launch_model/llm')
-                        setActive(link)
-                        console.log(active)
-                      } else if (link === 'cluster_information') {
-                        navigate('/cluster_info')
-                        setActive(link)
-                      } else if (link === 'running_models') {
-                        navigate('/running_models/LLM')
-                        sessionStorage.setItem(
-                          'runningModelType',
-                          '/running_models/LLM'
-                        )
-                        setActive(link)
-                        console.log(active)
-                      } else {
-                        navigate(`/${link}`)
-                        setActive(link)
-                        console.log(active)
-                      }
-                    }}
-                  >
-                    <ListItemIcon
-                      sx={{
-                        ml: '2rem',
+                return (
+                  <ListItem key={text}>
+                    <ListItemButton
+                      onClick={() => {
+                        if (link.toLowerCase().startsWith('http')) {
+                          window.open(link, '_blank', 'noreferrer')
+                        } else {
+                          navigate(link)
+                          setActive(link.substring(1))
+                          console.log(active)
+                          if (sessionKey) {
+                            sessionStorage.setItem(sessionKey, link)
+                          }
+                        }
                       }}
+                      selected={selectedIndex === index}
                     >
-                      {icon}
-                    </ListItemIcon>
-                    <ListItemText primary={text} />
-                    <ChevronRightOutlined sx={{ ml: 'auto' }} />
-                  </ListItemButton>
-                </ListItem>
-              )
-            })}
-          </List>
+                      <ListItemIcon
+                        sx={{
+                          ml: '2rem',
+                        }}
+                      >
+                        {icon}
+                      </ListItemIcon>
+                      <ListItemText primary={text} />
+                      <ChevronRightOutlined sx={{ ml: 'auto' }} />
+                    </ListItemButton>
+                  </ListItem>
+                )
+              })}
+            </List>
+          </Box>
         </Box>
+
+        <Box flexGrow={1}></Box>
+        {isValidBearerToken(cookie.token) && (
+          <Button
+            variant="outlined"
+            size="large"
+            onClick={handleLogout}
+            startIcon={<ExitToAppIcon />}
+            sx={{ m: '1rem', mt: 'auto' }} // 使用marginTop: 'auto'来推动按钮到底部，并添加一些外边距
+          >
+            LOG OUT
+          </Button>
+        )}
       </Box>
     </Drawer>
   )
diff --git a/xinference/web/ui/src/components/Title.js b/xinference/web/ui/src/components/Title.js
index c622c7e46e..15dd2190c9 100644
--- a/xinference/web/ui/src/components/Title.js
+++ b/xinference/web/ui/src/components/Title.js
@@ -1,21 +1,6 @@
-import ExitToAppIcon from '@mui/icons-material/ExitToApp'
 import { Box, Stack, Typography } from '@mui/material'
-import Button from '@mui/material/Button'
-import { useCookies } from 'react-cookie'
-import { useNavigate } from 'react-router-dom'
-
-import { isValidBearerToken } from './utils'
 
 const Title = ({ title }) => {
-  const [cookie, , removeCookie] = useCookies(['token'])
-  const navigate = useNavigate()
-
-  const handleLogout = () => {
-    removeCookie('token', { path: '/' })
-    sessionStorage.removeItem('token')
-    navigate('/login', { replace: true })
-  }
-
   return (
     <Box mb="30px">
       <Stack direction="row" alignItems="center" justifyContent="space-between">
@@ -27,16 +12,6 @@ const Title = ({ title }) => {
         >
           {title}
         </Typography>
-        {isValidBearerToken(cookie.token) && (
-          <Button
-            variant="outlined"
-            size="large"
-            onClick={handleLogout}
-            startIcon={<ExitToAppIcon />}
-          >
-            LOG OUT
-          </Button>
-        )}
       </Stack>
     </Box>
   )