Fixed alignment issues

Client/src/Components/BasicTable/index.css

@@ -3,23 +3,22 @@
   height: var(--env-var-img-width-2);
   color: var(--env-var-color-5);
   margin-right: 10px;
-  margin-bottom: 2px;
 }
 .MuiTable-root .host a svg {
   width: var(--env-var-font-size-large);
   height: var(--env-var-font-size-large);
 }
-.MuiTable-root .host div:nth-child(3) {
-  font-size: var(--env-var-font-size-small);
-}
 .MuiTable-root .host div:nth-child(2) {
   width: fit-content;
-  margin-right: 10px;
   font-weight: 700;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
 }
+.MuiTable-root .host div:nth-child(2) span {
+  font-size: var(--env-var-font-size-small);
+  margin-left: 10px;
+}
 
 .MuiTable-root .label {
   line-height: 1;

Client/src/Components/NavBar/index.jsx

@@ -145,7 +145,10 @@ function NavBar() {
           </IconButton>
         </Tooltip>
         <Menu
-          sx={{ mt: theme.spacing(5.5) }}
+          sx={{
+            mt: theme.spacing(5.5),
+            borderRadius: "4px",
+          }}
           id="menu-appbar"
           anchorEl={anchorElUser}
           anchorOrigin={{
@@ -172,6 +175,7 @@ function NavBar() {
                 fontSize="var(--env-var-font-size-medium)"
                 textAlign="center"
                 marginLeft="8px"
+                sx={{ fontWeight: 400, color: "#344054" }}
               >
                 {setting}
               </Typography>

Client/src/Pages/Monitors/index.css

@@ -51,7 +51,7 @@ body:has(.monitors) .actions-menu li.MuiButtonBase-root {
 body:has(.monitors) .actions-menu li.MuiButtonBase-root:last-of-type {
   color: var(--env-var-color-26);
 }
-body:has(.monitors) .MuiModal-root p.MuiTypography-root {
+body:has(.monitors) .actions-menu .MuiModal-root p.MuiTypography-root {
   font-size: var(--env-var-font-size-medium);
   color: var(--env-var-color-2);
 }

Client/src/Pages/Monitors/index.jsx

@@ -44,8 +44,12 @@ const Host = ({ params }) => {
       <a href={params.url} target="_blank" rel="noreferrer">
         <OpenInNewPage />
       </a>
-      <Box>{params.title}</Box>
-      <Box sx={{ color: params.percentageColor }}>{params.precentage}%</Box>
+      <Box>
+        {params.title}
+        <Typography component="span" sx={{ color: params.percentageColor }}>
+          {params.precentage}%
+        </Typography>
+      </Box>
     </Stack>
   );
 };