diff --git a/eventmesh-dashboard-view/public/index.html b/eventmesh-dashboard-view/public/index.html
index aa069f2..d99ea62 100644
--- a/eventmesh-dashboard-view/public/index.html
+++ b/eventmesh-dashboard-view/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Admin | Eventmesh</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/eventmesh-dashboard-view/src/App.tsx b/eventmesh-dashboard-view/src/App.tsx
index b3a6fd0..fa5dc7a 100644
--- a/eventmesh-dashboard-view/src/App.tsx
+++ b/eventmesh-dashboard-view/src/App.tsx
@@ -1,6 +1,15 @@
 import React from 'react'
 import { createTheme, ThemeProvider, CssBaseline } from '@mui/material'
 import AppRoutes from './routes/Routes'
+import GlobalStyles from '@mui/material/GlobalStyles'
+
+const inputGlobalStyles = (
+  <GlobalStyles
+    styles={{
+      backgroundColor: '#f9fafb'
+    }}
+  />
+)
 
 function App() {
   const theme = React.useMemo(
@@ -8,12 +17,14 @@
       createTheme({
         palette: {
           primary: {
-            main: '#1f95fc'
-          }
+            main: '#43497a'
+          },
+          background: {}
         },
         typography: {
-          fontSize: 14
-        }
+          fontSize: 12
+        },
+        
       }),
     []
   ) // [prefersDarkMode]
@@ -21,6 +32,7 @@
   return (
     <ThemeProvider theme={theme}>
       <CssBaseline />
+      {inputGlobalStyles}
       <AppRoutes />
     </ThemeProvider>
   )
diff --git a/eventmesh-dashboard-view/src/index.tsx b/eventmesh-dashboard-view/src/index.tsx
index efe2c92..362d8c7 100644
--- a/eventmesh-dashboard-view/src/index.tsx
+++ b/eventmesh-dashboard-view/src/index.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import './index.css'
 import App from './App'
 import reportWebVitals from './reportWebVitals'
 import { BrowserRouter } from 'react-router-dom'
diff --git a/eventmesh-dashboard-view/src/routes/RootLayout.tsx b/eventmesh-dashboard-view/src/routes/RootLayout.tsx
index d7bc0af..11d2093 100644
--- a/eventmesh-dashboard-view/src/routes/RootLayout.tsx
+++ b/eventmesh-dashboard-view/src/routes/RootLayout.tsx
@@ -15,7 +15,7 @@
         bgcolor: grey[100]
       }}>
       <Navigation />
-      <Box sx={{ flexGrow: 1, overflow: 'hidden' }}>
+      <Box sx={{ flexGrow: 1, pl: 4, overflow: 'hidden' }}>
         <Outlet />
       </Box>
     </Stack>
diff --git a/eventmesh-dashboard-view/src/routes/navigation/Navigation.tsx b/eventmesh-dashboard-view/src/routes/navigation/Navigation.tsx
index ac38932..b505400 100644
--- a/eventmesh-dashboard-view/src/routes/navigation/Navigation.tsx
+++ b/eventmesh-dashboard-view/src/routes/navigation/Navigation.tsx
@@ -79,15 +79,15 @@
     )
 
     return (
-      <Stack sx={{ width: 240, boxShadow: 1, bgcolor: 'white' }}>
+      <Stack sx={{ width: 260, px: 3 }}>
         <Box
           sx={{
-            height: 120,
+            height: 80,
             display: 'flex',
             justifyContent: 'center',
             alignItems: 'centers'
           }}>
-          <Icons.EventMeshLogo style={{ width: '80%' }} />
+          <Icons.EventMeshLogo style={{ width: '60%' }} />
         </Box>
         <Divider />
         <Stack
@@ -95,7 +95,11 @@
           justifyContent="space-between"
           alignItems="center"
           sx={{ pl: 2, pr: 2, mt: 1, mb: 1 }}>
-          <Typography variant="overline" fontSize={12} color={grey[600]}>
+          <Typography
+            variant="overline"
+            fontSize={12}
+            fontWeight="bold"
+            color={grey[600]}>
             General
           </Typography>
 
@@ -109,7 +113,7 @@
             </Typography>
           </Stack>
         </Stack>
-        <Stack sx={{ pl: 2, pr: 2 }} spacing={0.5}>
+        <Stack sx={{ pl: 2, pr: 2 }} spacing={1}>
           {generalMenus.map((item) => {
             return (
               <NavigationItem
@@ -132,11 +136,15 @@
           justifyContent="space-between"
           alignItems="center"
           sx={{ pl: 2, pr: 2, mt: 1, mb: 1 }}>
-          <Typography variant="overline" fontSize={12} color={grey[600]}>
+          <Typography
+            variant="overline"
+            fontSize={12}
+            fontWeight="bold"
+            color={grey[600]}>
             System
           </Typography>
         </Stack>
-        <Stack sx={{ pl: 2, pr: 2 }} spacing={0.5}>
+        <Stack sx={{ pl: 2, pr: 2 }} spacing={1}>
           {DefSystemMenus.map((item) => {
             return (
               <NavigationItem
diff --git a/eventmesh-dashboard-view/src/routes/navigation/NavigationItem.tsx b/eventmesh-dashboard-view/src/routes/navigation/NavigationItem.tsx
index cde74e4..7807911 100644
--- a/eventmesh-dashboard-view/src/routes/navigation/NavigationItem.tsx
+++ b/eventmesh-dashboard-view/src/routes/navigation/NavigationItem.tsx
@@ -6,16 +6,36 @@
 const NavButton = styled(Button)({
   boxShadow: 'none',
   width: '100%',
+  paddingLeft: 15,
+  paddingRight: 15,
+  paddingTop: 8,
+  paddingBottom: 8,
+  borderRadius: 8,
   textTransform: 'none',
-  fontSize: 15,
-  color: grey[800],
+  color: '#43497a',
   justifyContent: 'flex-start',
 
   '& .MuiButton-startIcon': {
+    padding: 10,
     marginRight: 15,
-    color: 'inherit'
+    color: 'inherit',
+    backgroundColor: 'white',
+    borderRadius: 8,
+    boxShadow: '1px 1px 5px 1px rgba(0,0,0,0.05)'
+  },
+
+  '&.active': {
+    backgroundColor: 'white',
+    boxShadow: '2px 2px 20px 5px rgba(0,0,0,0.05)',
+
+    '& .MuiButton-startIcon': {
+      boxShadow: 'none',
+      color: 'white',
+      backgroundColor: '#17c8eb'
+    }
   }
 })
+
 interface NavigationItemProps extends ButtonProps {
   icon: React.ReactNode
   text: string
@@ -29,7 +49,8 @@
       <NavButton
         startIcon={icon}
         variant={active ? 'contained' : 'text'}
-        sx={{ color: active ? 'white' : 'inherit' }}
+        className={active ? 'active' : ''}
+        // sx={{ color: active ? 'white' : 'inherit' }}
         onClick={onClick}>
         <Stack
           sx={{ width: 1 }}
@@ -42,7 +63,7 @@
               sx={{
                 height: 15,
                 fontSize: 13,
-                bgcolor: active ? 'white' : grey[200]
+                bgcolor: active ? grey[200] : 'white'
               }}
               size="small"
               color="default"
diff --git a/eventmesh-dashboard-view/src/routes/topic/Topic.tsx b/eventmesh-dashboard-view/src/routes/topic/Topic.tsx
index 5566533..e05c0df 100644
--- a/eventmesh-dashboard-view/src/routes/topic/Topic.tsx
+++ b/eventmesh-dashboard-view/src/routes/topic/Topic.tsx
@@ -9,7 +9,7 @@
 const Topic = forwardRef<typeof Box, TopicProps>(({ ...props }, ref) => {
   return (
     <Page>
-      <Stack sx={{ width: 1, height: 1, p: 2 }} spacing={1}>
+      <Stack sx={{ width: 1, height: 1, p: 2 }} spacing={3}>
         <Stats />
         <TopicList />
       </Stack>
diff --git a/eventmesh-dashboard-view/src/routes/topic/stats/AbnormalTopicCount.tsx b/eventmesh-dashboard-view/src/routes/topic/stats/AbnormalTopicCount.tsx
index 0c413cd..07cae35 100644
--- a/eventmesh-dashboard-view/src/routes/topic/stats/AbnormalTopicCount.tsx
+++ b/eventmesh-dashboard-view/src/routes/topic/stats/AbnormalTopicCount.tsx
@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react'
 import { Paper, PaperProps, Stack, Typography, Button } from '@mui/material'
-import { red } from '@mui/material/colors'
+import { grey } from '@mui/material/colors'
 
 interface AbnormalTopicCountProps extends PaperProps {}
 
@@ -9,48 +9,35 @@
     return (
       <Paper
         sx={{
-          height: 80,
-          pt: 1,
-          pb: 1,
-          pr: {
-            sm: 1,
-            md: 3
-          },
-          pl: {
-            sm: 1,
-            md: 3
-          }
+          width: 1,
+          py: 1,
+          px: 2,
+          borderRadius: 4,
+          boxShadow: '2px 2px 40px 2px rgba(0,0,0,.05)',
+          display: 'flex',
+          flexDirection: 'column'
         }}>
         <Stack
           direction="row"
           justifyContent="space-between"
           alignItems="center">
-          <Stack alignItems="flex-start">
-            <Typography paragraph variant="caption" sx={{ m: 0 }}>
-              异常状态 Topic 数量
-            </Typography>
-            <Button sx={{ fontSize: 13, mb: -2 }} size="small">
-              查看详情
-            </Button>
-          </Stack>
-          <Stack sx={{ width: 120 }} alignItems="center">
-            <Typography
-              variant="subtitle1"
-              sx={{
-                width: 32,
-                height: 32,
-                borderRadius: 16,
-                bgcolor: red[400],
-                boxSizing: 'content-box',
-                border: `8px solid ${red[50]}`,
-                textAlign: 'center',
-                fontWeight: 'bolder',
-                color: 'white'
-              }}>
-              2
-            </Typography>
-          </Stack>
+          <Typography
+            paragraph
+            variant="caption"
+            sx={{ m: 0 }}
+            fontWeight="bold"
+            color={grey[600]}>
+            异常状态 Topic 数量
+          </Typography>
+          <Button size="small">查看详情</Button>
         </Stack>
+        <Typography
+          paragraph
+          variant="h6"
+          color="primary"
+          sx={{ m: 0, fontWeight: 'bold', color: '#43497a' }}>
+          5
+        </Typography>
       </Paper>
     )
   }
diff --git a/eventmesh-dashboard-view/src/routes/topic/stats/Stats.tsx b/eventmesh-dashboard-view/src/routes/topic/stats/Stats.tsx
index ad0e316..57ad720 100644
--- a/eventmesh-dashboard-view/src/routes/topic/stats/Stats.tsx
+++ b/eventmesh-dashboard-view/src/routes/topic/stats/Stats.tsx
@@ -1,17 +1,10 @@
 import React, { forwardRef, useState } from 'react'
-import {
-  Stack,
-  StackProps,
-  Box,
-  Select,
-  MenuItem,
-  Paper,
-  Grid
-} from '@mui/material'
+import { Stack, StackProps, Select, MenuItem, Grid, Box } from '@mui/material'
 import TopicCount from './TopicCount'
 import AbnormalTopicCount from './AbnormalTopicCount'
 import { Icons } from '../../../assets/icons'
 import StatsChart from './StatsChart'
+import { grey } from '@mui/material/colors'
 
 enum TimeOptionEnum {
   LatestHour = 'LATEST_HOUR'
@@ -31,77 +24,82 @@
   })
 
   return (
-    <Stack direction="row" spacing={1}>
-      <Stack sx={{ width: { sm: 180, md: 240, lg: 360 } }} spacing={1}>
-        <TopicCount />
-        <AbnormalTopicCount />
-      </Stack>
+    <Stack spacing={2}>
+      <Grid container columnGap={2} wrap="nowrap">
+        <Grid item sm={4}>
+          <TopicCount />
+        </Grid>
+        <Grid item sm={4}>
+          <AbnormalTopicCount />
+        </Grid>
+        <Grid item sm={4}></Grid>
+      </Grid>
 
-      <Paper sx={{ flexGrow: 1, p: 1 }}>
-        <Stack sx={{ width: 1, height: 1 }} spacing={2}>
-          <Stack
-            direction="row"
-            justifyContent="space-between"
-            alignItems="center">
-            <Stack direction="row" spacing={2}>
-              <Select
-                sx={{
-                  fontSize: 14
-                }}
-                disableUnderline
-                displayEmpty
-                size="small"
-                variant="standard"
-                value={statsParams.time ?? ''}>
-                <MenuItem value={''}>所有时间段</MenuItem>
-                {TimeOptions.map((opt) => {
-                  return (
-                    <MenuItem
-                      key={opt.value}
-                      value={opt.value}
-                      sx={{ fontSize: 'inherit' }}>
-                      {opt.label}
-                    </MenuItem>
-                  )
-                })}
-              </Select>
+      <Stack>
+        <Stack
+          direction="row"
+          justifyContent="space-between"
+          alignItems="center">
+          <Stack direction="row" spacing={2}>
+            <Select
+              sx={{ fontSize: 12, color: grey[500] }}
+              disableUnderline
+              displayEmpty
+              size="small"
+              variant="standard"
+              value={statsParams.time ?? ''}>
+              <MenuItem value={''} sx={{ fontSize: 12 }}>
+                所有时间段
+              </MenuItem>
+              {TimeOptions.map((opt) => {
+                return (
+                  <MenuItem
+                    key={opt.value}
+                    value={opt.value}
+                    sx={{ fontSize: 12 }}>
+                    {opt.label}
+                  </MenuItem>
+                )
+              })}
+            </Select>
 
-              <Select
-                sx={{ fontSize: 14 }}
-                displayEmpty
-                disableUnderline
-                size="small"
-                variant="standard"
-                value={statsParams.time ?? ''}>
-                <MenuItem value={''}>所有 Runtime</MenuItem>
-                {TimeOptions.map((opt) => {
-                  return (
-                    <MenuItem
-                      key={opt.value}
-                      value={opt.value}
-                      sx={{ fontSize: 'inherit' }}>
-                      {opt.label}
-                    </MenuItem>
-                  )
-                })}
-              </Select>
-            </Stack>
-
-            <Icons.Refresh fontSize="inherit" />
+            <Select
+              sx={{ fontSize: 12, color: grey[500] }}
+              displayEmpty
+              disableUnderline
+              size="small"
+              variant="standard"
+              value={statsParams.time ?? ''}>
+              <MenuItem value={''} sx={{ fontSize: 12 }}>
+                所有 Runtime
+              </MenuItem>
+              {TimeOptions.map((opt) => {
+                return (
+                  <MenuItem
+                    key={opt.value}
+                    value={opt.value}
+                    sx={{ fontSize: 12 }}>
+                    {opt.label}
+                  </MenuItem>
+                )
+              })}
+            </Select>
           </Stack>
-          <Grid container sx={{ flexGrow: 1 }}>
-            <Grid item sm={4}>
-              <StatsChart />
-            </Grid>
-            <Grid item sm={4}>
-              <StatsChart />
-            </Grid>
-            <Grid item sm={4}>
-              <StatsChart />
-            </Grid>
-          </Grid>
+
+          <Icons.Refresh fontSize="inherit" />
         </Stack>
-      </Paper>
+        <Grid container sx={{ height: 300 }} columnGap={2} wrap="nowrap">
+          <Grid item sm={8}>
+            <StatsChart title="Topic 数量" />
+          </Grid>
+          <Grid item sm={4}>
+            <Stack sx={{ width: 1, height: 1 }} spacing={2}>
+              <StatsChart small title="Topic 消息数量" />
+              <StatsChart small title="Topic Message 平均数量" />
+            </Stack>
+          </Grid>
+        </Grid>
+      </Stack>
     </Stack>
   )
 })
diff --git a/eventmesh-dashboard-view/src/routes/topic/stats/StatsChart.tsx b/eventmesh-dashboard-view/src/routes/topic/stats/StatsChart.tsx
index fb89be2..cde2c66 100644
--- a/eventmesh-dashboard-view/src/routes/topic/stats/StatsChart.tsx
+++ b/eventmesh-dashboard-view/src/routes/topic/stats/StatsChart.tsx
@@ -1,44 +1,71 @@
 import React, { forwardRef, useRef, useEffect } from 'react'
-import { Box, BoxProps } from '@mui/material'
+import { Box, BoxProps, Paper } from '@mui/material'
 import echarts from '../../../utils/chart'
+import { grey } from '@mui/material/colors'
 
-interface StatsChartProps extends BoxProps {}
+interface StatsChartProps extends BoxProps {
+  title?: string
+  small?: boolean
+}
 
 const StatsChart = forwardRef<typeof Box, StatsChartProps>(
-  ({ ...props }, ref) => {
+  ({ title, small = false, sx, ...props }, ref) => {
     const chartElemRef = useRef(null)
     const chartInsRef = useRef<echarts.ECharts | null>(null)
 
     useEffect(() => {
       if (!chartInsRef.current) {
         const chartIns = echarts.init(chartElemRef.current)
-        const chartOptions = getChartOptions()
+        const chartOptions = small
+          ? getChartOptionsSmall(title)
+          : getChartOptions(title)
         chartIns.setOption(chartOptions)
         chartInsRef.current = chartIns
       }
     }, [])
 
-    return <Box ref={chartElemRef} sx={{ width: 1, height: 1 }}></Box>
+    return (
+      <Paper
+        sx={{
+          ...sx,
+          width: 1,
+          height: 1,
+          borderRadius: 4,
+          boxShadow: '2px 2px 40px 2px rgba(0,0,0,.05)'
+        }}>
+        <Box ref={chartElemRef} sx={{ width: 1, height: 1 }}></Box>
+      </Paper>
+    )
   }
 )
 
 StatsChart.displayName = 'StatsChart'
 export default StatsChart
 
-const getChartOptions = () => {
+const getChartOptionsSmall = (title?: string) => {
   return {
-    grid: {
+    title: {
+      text: title,
       top: 10,
-      left: 40,
-      right: 10,
-      bottom: 20
+      left: 10,
+      textStyle: {
+        fontSize: 12,
+        color: grey[600]
+      }
+    },
+    grid: {
+      top: 50,
+      left: 50,
+      right: 20,
+      bottom: 30
     },
     xAxis: {
       type: 'category',
       splitLine: {
         show: true,
         lineStyle: {
-          type: 'dashed'
+          type: 'dashed',
+          color: grey[200]
         }
       },
       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
@@ -48,30 +75,79 @@
       splitLine: {
         show: true,
         lineStyle: {
-          type: 'dashed'
+          type: 'dashed',
+          color: grey[200]
         }
+      },
+      axisTick: {
+        color: grey[200]
       }
     },
     series: [
       {
-        data: [820, 932, 901, 934, 1290, 1330, 1320],
+        data: [20, 32, 51, 934, 190, 130, 320],
         type: 'line',
         smooth: true,
         showSymbol: false,
         lineStyle: {
-          width: 0
-        },
-        areaStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            {
-              offset: 0,
-              color: 'rgb(92, 216, 244)'
-            },
-            {
-              offset: 1,
-              color: 'rgb(115, 189, 255)'
-            }
-          ])
+          width: 2,
+          color: '#17c8eb'
+        }
+      }
+    ]
+  }
+}
+
+const getChartOptions = (title?: string) => {
+  return {
+    title: {
+      text: title,
+      top: 15,
+      left: 10,
+      textStyle: {
+        fontSize: 12,
+        color: grey[600]
+      }
+    },
+    grid: {
+      top: 60,
+      left: 60,
+      right: 40,
+      bottom: 40
+    },
+    xAxis: {
+      type: 'category',
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: 'dashed',
+          color: grey[200]
+        }
+      },
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    },
+    yAxis: {
+      type: 'value',
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: 'dashed',
+          color: grey[200]
+        }
+      },
+      axisTick: {
+        color: grey[200]
+      }
+    },
+    series: [
+      {
+        data: [20, 32, 51, 934, 190, 130, 320],
+        type: 'line',
+        smooth: true,
+        showSymbol: false,
+        lineStyle: {
+          width: 2,
+          color: '#17c8eb'
         }
       }
     ]
diff --git a/eventmesh-dashboard-view/src/routes/topic/stats/TopicCount.tsx b/eventmesh-dashboard-view/src/routes/topic/stats/TopicCount.tsx
index f3dc06e..ed706ba 100644
--- a/eventmesh-dashboard-view/src/routes/topic/stats/TopicCount.tsx
+++ b/eventmesh-dashboard-view/src/routes/topic/stats/TopicCount.tsx
@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react'
-import { Paper, PaperProps, Stack, Typography } from '@mui/material'
-import { Icons } from '../../../assets/icons'
+import { Paper, PaperProps, Stack, Typography, Button } from '@mui/material'
+import { grey } from '@mui/material/colors'
 
 interface TopicCountProps extends PaperProps {}
 
@@ -9,36 +9,38 @@
     return (
       <Paper
         sx={{
-          height: 80,
-          pt: 1,
-          pb: 1,
-          pr: {
-            sm: 1,
-            md: 3
-          },
-          pl: {
-            sm: 1,
-            md: 3
-          }
+          width: 1,
+          py: 1,
+          px: 2,
+          borderRadius: 4,
+          boxShadow: '2px 2px 40px 2px rgba(0,0,0,.05)',
+          display: 'flex',
+          flexDirection: 'column'
         }}>
         <Stack
           direction="row"
           justifyContent="space-between"
           alignItems="center">
-          <Icons.EventMeshTopic />
-          <Stack sx={{ width: 120 }} alignItems="center">
-            <Typography paragraph variant="caption" sx={{ m: 0 }}>
-              Topic 总数量
-            </Typography>
-            <Typography
-              paragraph
-              variant="h6"
-              color="primary"
-              sx={{ m: 0, fontWeight: 'bold' }}>
-              5
-            </Typography>
-          </Stack>
+          <Typography
+            paragraph
+            variant="caption"
+            sx={{ m: 0 }}
+            fontWeight="bold"
+            color={grey[600]}>
+            Topic 总数量
+          </Typography>
+          <Button sx={{ color: grey[400] }} disabled size="small">
+            <span>&nbsp;</span>
+          </Button>
         </Stack>
+
+        <Typography
+          paragraph
+          variant="h6"
+          color="primary"
+          sx={{ m: 0, fontWeight: 'bold', color: '#43497a' }}>
+          5
+        </Typography>
       </Paper>
     )
   }
diff --git a/eventmesh-dashboard-view/src/routes/topic/topic-list/TopicList.tsx b/eventmesh-dashboard-view/src/routes/topic/topic-list/TopicList.tsx
index 77f8e36..5c136e3 100644
--- a/eventmesh-dashboard-view/src/routes/topic/topic-list/TopicList.tsx
+++ b/eventmesh-dashboard-view/src/routes/topic/topic-list/TopicList.tsx
@@ -8,37 +8,43 @@
 const TopicList = forwardRef<typeof Stack, TopicListProps>(
   ({ ...props }, ref) => {
     return (
-      <Stack sx={{ flexGrow: 1 }} spacing={2}>
+      <Paper
+        sx={{
+          flexGrow: 1,
+          borderRadius: 4,
+          boxShadow: '2px 2px 40px 2px rgba(0,0,0,.05)'
+        }}>
         <Stack
+          sx={{ px: 2, py: 3 }}
           direction="row"
           justifyContent="space-between"
           alignItems="center">
-          <TextField label="Topic 名称" variant="standard" />
+          <TextField size="small" placeholder="Topic 名称"  variant="outlined" />
 
           <Button
-            variant="contained"
+            variant="outlined"
             size="small"
             sx={{ textTransform: 'none' }}>
             新增Topic
           </Button>
         </Stack>
-        <Paper sx={{ flexGrow: 1 }}>
-          <DataGrid
-            sx={{
-              '& .MuiDataGrid-columnHeaderTitle': {
-                fontWeight: 'normal',
-                color: grey[800]
-              },
-              '& .MuiDataGrid-cell': {
-                fontWeight: 'normal',
-                fontSize: 14
-              }
-            }}
-            rows={rows}
-            columns={columns}
-          />
-        </Paper>
-      </Stack>
+
+        <DataGrid
+          sx={{
+            border: 0,
+            borderRadius: 4,
+            '& .MuiDataGrid-columnHeaderTitle': {
+              color: grey[400]
+            },
+            '& .MuiDataGrid-cell': {
+              fontWeight: 'normal',
+              fontSize: 14
+            }
+          }}
+          rows={rows}
+          columns={columns}
+        />
+      </Paper>
     )
   }
 )