diff --git a/client/src/pages/config/routeConfigPage.jsx b/client/src/pages/config/routeConfigPage.jsx
index c7238ad..021edad 100644
--- a/client/src/pages/config/routeConfigPage.jsx
+++ b/client/src/pages/config/routeConfigPage.jsx
@@ -8,6 +8,7 @@ import * as API  from "../../api";
 import RouteSecurity from "./routes/routeSecurity";
 import RouteOverview from "./routes/routeoverview";
 import IsLoggedIn from "../../isLoggedIn";
+import RouteMetrics from "../dashboard/routeMonitoring";
 
 const RouteConfigPage = () => {
   const { routeName } = useParams();
@@ -63,6 +64,10 @@ const RouteConfigPage = () => {
             config={config}
           />
         },
+        {
+          title: 'Monitoring',
+          children:  <RouteMetrics routeName={routeName} />
+        },
       ]}/>}
 
       {!config && <div style={{textAlign: 'center'}}>
diff --git a/client/src/pages/dashboard/components/table.jsx b/client/src/pages/dashboard/components/table.jsx
index 14d1922..cd6694f 100644
--- a/client/src/pages/dashboard/components/table.jsx
+++ b/client/src/pages/dashboard/components/table.jsx
@@ -62,6 +62,9 @@ function descendingComparator(a, b, orderBy) {
   if(orderBy != 'name') {
     a1 = parseFloat(a["__" + orderBy]);
     b1 = parseFloat(b["__" + orderBy]);
+  } else {
+    a1 = a1.toLowerCase();
+    b1 = b1.toLowerCase();
   }
 
   if (b1 < a1) {
diff --git a/client/src/pages/dashboard/containerMetrics.jsx b/client/src/pages/dashboard/containerMetrics.jsx
index d9b06b7..a107a54 100644
--- a/client/src/pages/dashboard/containerMetrics.jsx
+++ b/client/src/pages/dashboard/containerMetrics.jsx
@@ -175,7 +175,7 @@ const ContainerMetrics = ({containerName}) => {
         </Box>}
         {metrics && <div style={{zIndex:2, position: 'relative'}}>
             <Grid container rowSpacing={4.5} columnSpacing={2.75} >
-                <Grid item xs={12} sx={{ mb: -2.25 }}>
+                <Grid item xs={12}  xl={8} sx={{ mb: -2.25 }}>
                     <Typography variant="h4">{containerName} Monitoring</Typography>
                     <Stack direction="row" alignItems="center" spacing={0} style={{marginTop: 10}}>
                         <Button
@@ -218,11 +218,11 @@ const ContainerMetrics = ({containerName}) => {
                     </Stack>
                 </Grid>
                 
-                <Grid item xs={12}>
+                <Grid item xs={12} xl={8}>
                     <PlotComponent xAxis={xAxis} zoom={zoom} setZoom={setZoom} slot={slot} title={'Resources'} data={[metrics[metricsKey.CPU], metrics[metricsKey.RAM]]}/>
                 </Grid>
                
-                <Grid item xs={12}>
+                <Grid item xs={12} xl={8}>
                     <PlotComponent xAxis={xAxis} zoom={zoom} setZoom={setZoom} slot={slot} title={'Network'} data={[metrics[metricsKey.NET_TX], metrics[metricsKey.NET_RX]]}/>
                 </Grid>
             </Grid>
diff --git a/client/src/pages/dashboard/routeMonitoring.jsx b/client/src/pages/dashboard/routeMonitoring.jsx
new file mode 100644
index 0000000..3cba387
--- /dev/null
+++ b/client/src/pages/dashboard/routeMonitoring.jsx
@@ -0,0 +1,219 @@
+import { useEffect, useState } from 'react';
+
+// material-ui
+import {
+    Avatar,
+    AvatarGroup,
+    Box,
+    Button,
+    Grid,
+    List,
+    ListItemAvatar,
+    ListItemButton,
+    ListItemSecondaryAction,
+    ListItemText,
+    MenuItem,
+    Stack,
+    TextField,
+    Typography,
+    Alert,
+    LinearProgress,
+    CircularProgress
+} from '@mui/material';
+
+import IsLoggedIn from '../../isLoggedIn';
+
+import * as API from '../../api';
+import AnimateButton from '../../components/@extended/AnimateButton';
+import PlotComponent from './components/plot';
+import TableComponent from './components/table';
+import { HomeBackground, TransparentHeader } from '../home';
+import { formatDate } from './components/utils';
+
+// avatar style
+const avatarSX = {
+    width: 36,
+    height: 36,
+    fontSize: '1rem'
+};
+
+// action style
+const actionSX = {
+    mt: 0.75,
+    ml: 1,
+    top: 'auto',
+    right: 'auto',
+    alignSelf: 'flex-start',
+    transform: 'none'
+};
+
+// sales report status
+const status = [
+    {
+        value: 'today',
+        label: 'Today'
+    },
+    {
+        value: 'month',
+        label: 'This Month'
+    },
+    {
+        value: 'year',
+        label: 'This Year'
+    }
+];
+
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+
+const RouteMetrics = ({routeName}) => {
+    const [value, setValue] = useState('today');
+    const [slot, setSlot] = useState('latest');
+
+    const [zoom, setZoom] = useState({
+        xaxis: {}
+    });
+
+    const [coStatus, setCoStatus] = useState(null);
+    const [metrics, setMetrics] = useState(null);
+    const [isCreatingDB, setIsCreatingDB] = useState(false);
+
+    const resetZoom = () => {
+        setZoom({
+            xaxis: {}
+        });
+    }
+
+    const metricsKey = {
+      SUCCESS: "cosmos.proxy.route.success." + routeName,
+      ERROR: "cosmos.proxy.route.error." + routeName,
+      TIME: "cosmos.proxy.route.time." + routeName,
+      BYTES: "cosmos.proxy.route.bytes." + routeName,
+    };
+
+    const refreshMetrics = () => {
+        API.metrics.get([
+          "cosmos.proxy.route.success",
+          "cosmos.proxy.route.error",
+          "cosmos.proxy.route.time",
+          "cosmos.proxy.route.bytes",
+        ].map(c => c + "." + routeName)).then((res) => {
+            let finalMetrics = {};
+            if(res.data) {
+                res.data.forEach((metric) => {
+                    finalMetrics[metric.Key] = metric;
+                });
+                setMetrics(finalMetrics);
+            }
+            setTimeout(refreshMetrics, 10000);
+        });
+    };
+
+    const refreshStatus = () => {
+        API.getStatus().then((res) => {
+            setCoStatus(res.data);
+        });
+    }
+
+    useEffect(() => {
+        refreshStatus();
+        refreshMetrics();
+    }, []);
+    
+    let xAxis = [];
+
+    if(slot === 'latest') {
+      for(let i = 0; i < 100; i++) {
+        xAxis.unshift(i);
+      }
+    }
+    else if(slot === 'hourly') {
+      for(let i = 0; i < 48; i++) {
+        let now = new Date();
+        now.setHours(now.getHours() - i);
+        now.setMinutes(0);
+        now.setSeconds(0);
+        xAxis.unshift(formatDate(now, true));
+      }
+    } else if(slot === 'daily') {
+      for(let i = 0; i < 30; i++) {
+        let now = new Date();
+        now.setDate(now.getDate() - i);
+        xAxis.unshift(formatDate(now));
+      }
+    }
+
+    return (
+        <>
+        <IsLoggedIn />
+        {!metrics && <Box style={{
+          width: '100%',
+          height: '100%',
+          zIndex: 1000,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          marginTop: '150px',
+        }}>
+          <CircularProgress
+            size={100}
+          />
+        </Box>}
+        {metrics && <div style={{zIndex:2, position: 'relative'}}>
+            <Grid container rowSpacing={4.5} columnSpacing={2.75} >
+                <Grid item xs={12} xl={8} sx={{ mb: -2.25 }}>
+                    <Typography variant="h4">{routeName} Monitoring</Typography>
+                    <Stack direction="row" alignItems="center" spacing={0} style={{marginTop: 10}}>
+                        <Button
+                            size="small"
+                            onClick={() => {setSlot('latest'); resetZoom()}}
+                            color={slot === 'latest' ? 'primary' : 'secondary'}
+                            variant={slot === 'latest' ? 'outlined' : 'text'}
+                        >
+                            Latest
+                        </Button>
+                        <Button
+                            size="small"
+                            onClick={() => {setSlot('hourly'); resetZoom()}}
+                            color={slot === 'hourly' ? 'primary' : 'secondary'}
+                            variant={slot === 'hourly' ? 'outlined' : 'text'}
+                        >
+                            Hourly
+                        </Button>
+                        <Button
+                            size="small"
+                            onClick={() => {setSlot('daily'); resetZoom()}}
+                            color={slot === 'daily' ? 'primary' : 'secondary'}
+                            variant={slot === 'daily' ? 'outlined' : 'text'}
+                        >
+                            Daily
+                        </Button>
+
+                        {zoom.xaxis.min && <Button
+                            size="small"
+                            onClick={() => {
+                                setZoom({
+                                    xaxis: {}
+                                });
+                            }}
+                            color={'primary'}
+                            variant={'outlined'}
+                        >
+                            Reset Zoom
+                        </Button>}
+                    </Stack>
+                </Grid>
+                
+                <Grid item xs={12} xl={8}>
+                    <PlotComponent xAxis={xAxis} zoom={zoom} setZoom={setZoom} slot={slot} title={'Requests'} data={[metrics[metricsKey.SUCCESS], metrics[metricsKey.ERROR]]}/>
+                </Grid>
+               
+                <Grid item xs={12} xl={8}>
+                    <PlotComponent xAxis={xAxis} zoom={zoom} setZoom={setZoom} slot={slot} title={'Resources'} data={[metrics[metricsKey.TIME], metrics[metricsKey.BYTES]]}/>
+                </Grid>
+            </Grid>
+        </div>}
+      </>
+    );
+};
+
+export default RouteMetrics;
diff --git a/package.json b/package.json
index 7ab15e8..39c4209 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cosmos-server",
-  "version": "0.12.0-unstable33",
+  "version": "0.12.0-unstable34",
   "description": "",
   "main": "test-server.js",
   "bugs": {