diff --git a/src/components/dashboard/BlockManager.tsx b/src/components/dashboard/BlockManager.tsx
index c8a90de..2321475 100644
--- a/src/components/dashboard/BlockManager.tsx
+++ b/src/components/dashboard/BlockManager.tsx
@@ -1,31 +1,51 @@
-import React from 'react';
-import { Typography, TextField, Button, Paper, Grid, Snackbar, Alert, List, ListItem, ListItemText, ListItemSecondaryAction, IconButton, Box } from '@mui/material';
-import DeleteIcon from '@mui/icons-material/Delete';
-import { Divider } from '@mui/material';
+import React from "react";
+import {
+  Typography,
+  TextField,
+  Button,
+  Paper,
+  Grid,
+  Snackbar,
+  Alert,
+  List,
+  ListItem,
+  ListItemText,
+  ListItemSecondaryAction,
+  IconButton,
+  Box,
+} from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
+import { Divider } from "@mui/material";
 import HelpModal from "@components/HelpModal";
-import useBlackListRPC from '@hooks/backend/honeypotService/useBlackListRPC';
-import { useTranslation } from 'react-i18next';
-import { NightModeContext } from '@contexts/NightModeContext';
+import useBlackListRPC from "@hooks/backend/honeypotService/useBlackListRPC";
+import { useTranslation } from "react-i18next";
+import { NightModeContext } from "@contexts/NightModeContext";
 import { useContext } from "react";
 
 const BlockManager = () => {
-  const { blacklist, putBlackList, putWhiteList, blockCountry, getBlockedCountries } = useBlackListRPC();
-  const [ip, setIp] = React.useState('');
-  const [country, setCountry] = React.useState('');
+  const {
+    blacklist,
+    putBlackList,
+    putWhiteList,
+    blockCountry,
+    getBlockedCountries,
+  } = useBlackListRPC();
+  const [ip, setIp] = React.useState("");
+  const [country, setCountry] = React.useState("");
   const [open, setOpen] = React.useState(false);
-  const [alertText, setAlertText] = React.useState('');
+  const [alertText, setAlertText] = React.useState("");
   const [blockedCountries, setBlockedCountries] = React.useState<string[]>([]);
   const { t } = useTranslation();
   const { isNightMode } = useContext(NightModeContext);
-  const nightModeBgColor1 = 'color1ForNightMode';
-  const nightModeBgColor2 = 'color2ForNightMode';
-  const textFieldStyle = isNightMode 
-  ? { 
-      InputLabelProps: { style: { color: 'white' } }, 
-      inputProps: { style: { color: 'white' } },
-      sx: { borderBottom: '1px solid white' }
-    } 
-  : {};
+  const nightModeBgColor1 = "color1ForNightMode";
+  const nightModeBgColor2 = "color2ForNightMode";
+  const textFieldStyle = isNightMode
+    ? {
+        InputLabelProps: { style: { color: "white" } },
+        inputProps: { style: { color: "white" } },
+        sx: { borderBottom: "1px solid white" },
+      }
+    : {};
   const handleClose = React.useCallback(() => {
     setOpen(false);
   }, []);
@@ -34,43 +54,30 @@ const BlockManager = () => {
     e.preventDefault();
     try {
       await putBlackList(ip);
-      setIp('');
-      setAlertText(t('blockManager.blockSuccess'));
+      setIp("");
+      setAlertText(t("blockManager.blockSuccess"));
       setOpen(true);
     } catch (error) {
-        console.error(error);
+      console.error(error);
     }
   };
 
   const handleUnblock = async (ip) => {
     try {
       await putWhiteList(ip);
-      setAlertText(t('blockManager.unblockSuccess'));
+      setAlertText(t("blockManager.unblockSuccess"));
       setOpen(true);
     } catch (error) {
-        console.error(error);
+      console.error(error);
     }
   };
 
-  // React.useEffect(() => {
-  //   const fetchBlockedCountries = async () => {
-  //     try {
-  //       const countries = await getBlockedCountries();
-  //       setBlockedCountries(countries);
-  //     } catch (error) {
-  //       console.error('Error fetching blocked countries:', error);
-  //     }
-  //   };
-  
-  //   fetchBlockedCountries();
-  // }, [getBlockedCountries]);
-  
   const refreshBlockedCountries = async () => {
     try {
       const countries = await getBlockedCountries();
       setBlockedCountries(countries);
     } catch (error) {
-      console.error('Error fetching blocked countries:', error);
+      console.error("Error fetching blocked countries:", error);
     }
   };
 
@@ -78,8 +85,8 @@ const BlockManager = () => {
     e.preventDefault();
     try {
       await blockCountry(country);
-      setCountry('');
-      setAlertText(t('blockManager.blockCountrySuccess'));
+      setCountry("");
+      setAlertText(t("blockManager.blockCountrySuccess"));
       setOpen(true);
       refreshBlockedCountries();
     } catch (error) {
@@ -90,136 +97,195 @@ const BlockManager = () => {
   React.useEffect(() => {
     refreshBlockedCountries();
   }, [refreshBlockedCountries]);
-  
 
   return (
     <Grid container direction="column">
       <Grid item>
-        <Grid container justifyContent="space-between" alignItems="center" mb={2}>
-          <Grid item>
-            <Typography variant="h4">{t('blockManager.ipManagement')}</Typography>
-          </Grid>
+        <Grid
+          container
+          justifyContent="space-between"
+          alignItems="center"
+          mb={2}
+        >
           <Grid item>
-            <HelpModal helpText={t('blockManager.helpText')}/>
-          </Grid>
-        </Grid>
-      </Grid>
-      <Grid item xs sx={{ marginBottom: 4 }}>
-        <Typography variant="h6" mb={2}>{t('blockManager.blockACountry')}</Typography>
-        <Grid container spacing={2} direction="column" alignItems="stretch" component="form" onSubmit={handleBlockCountry}>
-          <Grid item>
-            <TextField
-              variant="outlined"
-              required
-              fullWidth
-              id="country"
-              label={t('blockManager.countryCode')}
-              autoFocus
-              value={country}
-              onChange={(e) => setCountry(e.target.value)}
-              {...textFieldStyle}
-            />
+            <Typography variant="h4">
+              {t("blockManager.ipManagement")}
+            </Typography>
           </Grid>
           <Grid item>
-            <Button type="submit" variant="contained" color="primary">
-              {t('blockManager.blockCountry')}
-            </Button>
+            <HelpModal helpText={t("blockManager.helpText")} />
           </Grid>
         </Grid>
       </Grid>
       <Grid item xs>
-      <Typography variant="h6" component="h2" gutterBottom mt={2}>
-        {t('blockManager.currentlyBlockedCountries')}
-      </Typography>
-      <List>
-        {blockedCountries.length > 0 ? (
-          blockedCountries.map((country, index) => (
-            <ListItem key={index} sx={{
-              my: 1,
-              px: 2,
-              bgcolor: isNightMode 
-                ? (index % 2 === 0 ? nightModeBgColor1 : nightModeBgColor2) 
-                : (index % 2 === 0 ? 'action.hover' : 'background.default'),
-              borderRadius: 1
-            }}>
-              <ListItemText primary={country} />
-              {/* Ajouter des actions pour chaque pays si nécessaire */}
-            </ListItem>
-          ))
-        ) : (
-          <Typography sx={{ px: 2 }}>{t('blockManager.noBlockedCountries')}</Typography>
-        )}
-      </List>
-    </Grid>
-
-    {/* Séparateur */}
-    <Divider sx={{ my: 4 }} />
-      <Grid item xs sx={{ marginBottom: 0.4 }}>
-        <Typography variant="h6" mb={2}>{t('blockManager.blockAnIP')}</Typography>
-        <Grid container spacing={2} direction="column" alignItems="stretch" component="form" onSubmit={handleSubmit}>
-          <Grid item>
-            <TextField
-              variant="outlined"
-              required
-              fullWidth
-              id="ip"
-              label={t('blockManager.ipAddress')}
-              autoFocus
-              value={ip}
-              onChange={(e) => setIp(e.target.value)}
-              {...textFieldStyle}
-            />
-          </Grid>
-          <Grid item>
-            <Button type="submit" variant="contained" color="primary">
-              {t('blockManager.blockIP')}
-            </Button>
+        <Box
+          sx={{
+            height: '100%',
+            maxHeight: 'calc(100vh - 220px)', // Set max height
+            overflow: 'auto',
+            '& > *': {
+              marginBottom: '16px', // Add a margin to each child
+            },
+          }}
+        >
+          <Grid item xs>
+            <Typography variant="h6" mb={2}>
+              {t("blockManager.blockACountry")}
+            </Typography>
+            <Grid
+              container
+              spacing={2}
+              direction="column"
+              alignItems="stretch"
+              component="form"
+              onSubmit={handleBlockCountry}
+            >
+              <Grid item>
+                <TextField
+                  variant="outlined"
+                  required
+                  fullWidth
+                  id="country"
+                  label={t("blockManager.countryCode")}
+                  autoFocus
+                  value={country}
+                  onChange={(e) => setCountry(e.target.value)}
+                  {...textFieldStyle}
+                />
+              </Grid>
+              <Grid item>
+                <Button type="submit" variant="contained" color="primary">
+                  {t("blockManager.blockCountry")}
+                </Button>
+              </Grid>
+            </Grid>
           </Grid>
-          <Grid item>
+          <Grid item xs>
             <Typography variant="h6" component="h2" gutterBottom mt={2}>
-              {t('blockManager.currentlyBlocked')}
+              {t("blockManager.currentlyBlockedCountries")}
             </Typography>
-          </Grid>
-          <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
-            <Alert onClose={handleClose} severity="success" sx={{ width: '100%' }}>
-              {alertText}
-            </Alert>
-          </Snackbar>
-        </Grid>
-      </Grid>
-      <Grid item xs>
-        <Box
-            sx={{
-              display: 'flex',
-              flexDirection: 'column',
-              justifyContent: 'space-between',
-              alignItems: 'stretch',
-              height: '100%',
-              maxHeight: 'calc(100vh - 440px)', // Set max height
-              overflow: 'auto',
-            }}
-          >
             <List>
-              {blacklist && blacklist.map((blacklistedIP, index) => (
-                <ListItem key={index} sx={{
-                  my: 1,
-                  px: 2,
-                  bgcolor: isNightMode 
-                  ? (index % 2 === 0 ? nightModeBgColor1 : nightModeBgColor2) 
-                  : (index % 2 === 0 ? 'action.hover' : 'background.default'),                  
-                  borderRadius: 1
-                }}>
-                  <ListItemText primary={blacklistedIP} />
-                  <ListItemSecondaryAction>
-                    <IconButton edge="end" aria-label="delete" onClick={() => handleUnblock(blacklistedIP)}>
-                      <DeleteIcon color="error" />
-                    </IconButton>
-                  </ListItemSecondaryAction>
-                  {index !== blacklist.length - 1 && <Divider />}
-                </ListItem>
-              ))}
+              {blockedCountries.length > 0 ? (
+                blockedCountries.map((country, index) => (
+                  <ListItem
+                    key={index}
+                    sx={{
+                      my: 1,
+                      px: 2,
+                      bgcolor: isNightMode
+                        ? index % 2 === 0
+                          ? nightModeBgColor1
+                          : nightModeBgColor2
+                        : index % 2 === 0
+                          ? "action.hover"
+                          : "background.default",
+                      borderRadius: 1,
+                    }}
+                  >
+                    <ListItemText primary={country} />
+                    {/* Ajouter des actions pour chaque pays si nécessaire */}
+                  </ListItem>
+                ))
+              ) : (
+                <Typography sx={{ px: 2 }}>
+                  {t("blockManager.noBlockedCountries")}
+                </Typography>
+              )}
             </List>
-          </Box>
+          </Grid>
+          <Grid item xs>
+            <Typography variant="h6" mb={2}>
+              {t("blockManager.blockAnIP")}
+            </Typography>
+            <Grid
+              container
+              spacing={2}
+              direction="column"
+              alignItems="stretch"
+              component="form"
+              onSubmit={handleSubmit}
+            >
+              <Grid item>
+                <TextField
+                  variant="outlined"
+                  required
+                  fullWidth
+                  id="ip"
+                  label={t("blockManager.ipAddress")}
+                  autoFocus
+                  value={ip}
+                  onChange={(e) => setIp(e.target.value)}
+                  {...textFieldStyle}
+                />
+              </Grid>
+              <Grid item>
+                <Button type="submit" variant="contained" color="primary">
+                  {t("blockManager.blockIP")}
+                </Button>
+              </Grid>
+              <Grid item>
+                <Typography variant="h6" component="h2" gutterBottom mt={2}>
+                  {t("blockManager.currentlyBlocked")}
+                </Typography>
+              </Grid>
+              <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
+                <Alert
+                  onClose={handleClose}
+                  severity="success"
+                  sx={{ width: "100%" }}
+                >
+                  {alertText}
+                </Alert>
+              </Snackbar>
+            </Grid>
+          </Grid>
+          <Grid item xs>
+            <Box
+              sx={{
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "space-between",
+                alignItems: "stretch",
+                height: "100%",
+                maxHeight: "calc(100vh - 440px)", // Set max height
+                overflow: "auto",
+              }}
+            >
+              <List>
+                {blacklist &&
+                  blacklist.map((blacklistedIP, index) => (
+                    <ListItem
+                      key={index}
+                      sx={{
+                        my: 1,
+                        px: 2,
+                        bgcolor: isNightMode
+                          ? index % 2 === 0
+                            ? nightModeBgColor1
+                            : nightModeBgColor2
+                          : index % 2 === 0
+                            ? "action.hover"
+                            : "background.default",
+                        borderRadius: 1,
+                      }}
+                    >
+                      <ListItemText primary={blacklistedIP} />
+                      <ListItemSecondaryAction>
+                        <IconButton
+                          edge="end"
+                          aria-label="delete"
+                          onClick={() => handleUnblock(blacklistedIP)}
+                        >
+                          <DeleteIcon color="error" />
+                        </IconButton>
+                      </ListItemSecondaryAction>
+                      {index !== blacklist.length - 1 && <Divider />}
+                    </ListItem>
+                  ))}
+              </List>
+            </Box>
+          </Grid>
+        </Box>
       </Grid>
     </Grid>
   );
diff --git a/src/components/dashboard/ContainerManager.tsx b/src/components/dashboard/ContainerManager.tsx
index 7a85e29..17f6f20 100644
--- a/src/components/dashboard/ContainerManager.tsx
+++ b/src/components/dashboard/ContainerManager.tsx
@@ -120,16 +120,16 @@ const ContainerManager: React.FC = () => {
         </Grid>
       </Grid>
       <Grid item xs>
-      <Box
-        sx={{
-          height: '100%',
-          maxHeight: 'calc(100vh - 220px)', // Set max height
-          overflow: 'auto',
-          '& > *': {
-            marginBottom: '16px', // Add a margin to each child
-          },
-        }}
-      >
+        <Box
+          sx={{
+            height: '100%',
+            maxHeight: 'calc(100vh - 220px)', // Set max height
+            overflow: 'auto',
+            '& > *': {
+              marginBottom: '16px', // Add a margin to each child
+            },
+          }}
+        >
           {containers && containers.map((container, index) => (
             <Card 
               variant="outlined"