Initial design

Client/src/Components/BasicTable/index.css

@@ -124,3 +124,6 @@
 .MuiPaper-root + .MuiPagination-root .MuiPaginationItem-root.Mui-selected {
   background-color: var(--env-var-color-15);
 }
+.MuiPaper-root + .MuiPagination-root div.MuiPaginationItem-root{
+  user-select: none;
+}

Client/src/Components/Charts/MonitorDetailsAreaChart/index.css

@@ -0,0 +1,19 @@
+.area-tooltip {
+  background-color: white;
+  border: solid 1px var(--env-var-color-4);
+  border-radius: var(--env-var-radius-1);
+  padding: var(--env-var-spacing-1) var(--env-var-spacing-2);
+}
+.area-tooltip p {
+  margin: 0;
+  padding: 0;
+}
+.area-tooltip p:first-of-type {
+  color: var(--env-var-color-3);
+  font-size: var(--env-var-font-size-medium);
+}
+.area-tooltip p:last-of-type {
+  margin-top: 5px;
+  color: var(--env-var-color-5);
+  font-size: var(--env-var-font-size-small);
+}

Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx

@@ -1,11 +1,12 @@
 import PropTypes from "prop-types";
 import { AreaChart, Area, XAxis, Tooltip, ResponsiveContainer } from "recharts";
 import { NormalizeData } from "../ChartUtils";
+import "./index.css";
 
 const CustomToolTip = ({ active, payload, label }) => {
   if (active && payload && payload.length) {
     return (
-      <div style={{ backgroundColor: "white" }}>
+      <div className="area-tooltip">
         <p>
           {new Date(label).toLocaleDateString("en-US", {
             weekday: "short", // Mon
@@ -80,7 +81,7 @@ const MonitorDetailsAreaChart = ({ checks, filter }) => {
         data={normalizedChecks}
         margin={{
           top: 10,
-          right: 30,
+          right: 0,
           left: 0,
           bottom: 0,
         }}
@@ -89,6 +90,7 @@ const MonitorDetailsAreaChart = ({ checks, filter }) => {
           dataKey="createdAt"
           tickFormatter={formatDate}
           tick={{ fontSize: "13px" }}
+          tickLine={false}
         />
         <Tooltip content={<CustomToolTip />} />
         <Area