diff --git a/FRONTEND/src/components/Drawer/DrawerControl.tsx b/FRONTEND/src/components/Drawer/DrawerControl.tsx
index 2638398..b914a9b 100644
--- a/FRONTEND/src/components/Drawer/DrawerControl.tsx
+++ b/FRONTEND/src/components/Drawer/DrawerControl.tsx
@@ -7,7 +7,6 @@ import {
   Group,
   Loader,
   Radio,
-  ScrollArea,
   Text,
 } from "@mantine/core";
 import { IconRepeat } from "@tabler/icons-react";
@@ -15,6 +14,7 @@ import { useEffect, useState } from "react";
 import classes from "../Component.module.css";
 import type { APCProps, SwitchPortsProps, TStation } from "../../untils/types";
 import type { Socket } from "socket.io-client";
+import { legend } from "motion/react-client";
 
 interface DrawerProps {
   stationAPI: TStation;
@@ -893,6 +893,7 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
     }
   };
 
+  console.log("listPorts::", listPorts);
   return loading ? (
     <Box
       style={{
@@ -1168,20 +1169,29 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
       <Grid.Col span={12} pt={"4px"}>
         {listPorts?.length > 0 && (
           <Box>
-            <Grid>
+            <Flex gap={"8px"} wrap={"wrap"}>
               {listPorts?.map((group, key) => {
-                const isMini = group?.length > 0 && group?.length < 4;
                 const isLarge = group?.length > 20;
+                // console.log("isLarge::", isLarge);
+                // console.log("group::", group);
+                // console.log("checkFilterPort::", sortedPorts(group)
+                // .filter((el) =>
+                //   checkFilterPort(el.status, el.name)
+                // ));
                 return (
-                  <Grid.Col
-                    pt={0}
+                  <Box
                     key={key}
-                    span={isLarge ? 11 : isMini ? 1 : 12}
+                    style={{
+                      flex: "0 0 auto",
+                    }}
                   >
                     {isLarge ? (
                       <fieldset
                         style={{
-                          padding: "0px 4px",
+                          padding: "0px 8px 8px 4px",
+                          display: "inline-block",
+                          width: "fit-content",
+                          minWidth: "fit-content",
                         }}
                       >
                         <legend>
@@ -1189,10 +1199,16 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
                             {group[0]?.name.substring(0, 2) || ""}
                           </Text>
                         </legend>
-                        <ScrollArea h={"11vh"} w={"67vw"}>
+                        <Box
+                          style={{
+                            width: "fit-content",
+                            minWidth: "50px",
+                            minHeight: "88px",
+                          }}
+                        >
                           <Flex gap={"8px"} wrap={"nowrap"}>
                             {sortedPorts(group)
-                              .slice(0, sortedPorts(group).length / 2)
+                              .slice(0, Math.ceil(sortedPorts(group).length / 2))
                               .filter((el) =>
                                 checkFilterPort(el.status, el.name)
                               )
@@ -1261,7 +1277,7 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
                           <Flex gap={"8px"} wrap={"nowrap"} mt={"8px"}>
                             {sortedPorts(group)
                               .slice(
-                                sortedPorts(group).length / 2,
+                                Math.ceil(sortedPorts(group).length / 2),
                                 sortedPorts(group).length
                               )
                               .filter((el) =>
@@ -1329,12 +1345,15 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
                                 </Card>
                               ))}
                           </Flex>
-                        </ScrollArea>
+                        </Box>
                       </fieldset>
                     ) : (
                       <fieldset
                         style={{
-                          padding: "0px 4px",
+                          padding: "0px 8px 8px 4px",
+                          display: "inline-block",
+                          width: "fit-content",
+                          minWidth: "fit-content",
                         }}
                       >
                         <legend>
@@ -1344,98 +1363,157 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
                         </legend>
                         <Box
                           style={{
-                            display: "flex",
-                            flexDirection: "column",
-                            // flexWrap: "wrap",
-                            // justifyContent: "center",
-                            alignItems: "center",
-                            gap: "8px",
-                            overflow: "auto",
-                            height: "11vh",
-                            maxWidth: "70vw",
+                            width: "fit-content",
+                            minWidth: "50px",
+                            minHeight: "88px",
                           }}
                         >
-                          {sortedPorts(group)
-                            ?.filter((el) =>
-                              checkFilterPort(el.status, el.name)
-                            )
-                            ?.map((port, i) => (
-                              <Card
-                                key={i}
-                                shadow="sm"
-                                padding="xs"
-                                radius="md"
-                                withBorder
-                                style={{
-                                  position: "relative",
-                                  width: "50px",
-                                  height: "40px",
-                                  backgroundColor:
-                                    port.poe === "ON"
-                                      ? "#f2dcf8"
-                                      : port.status === "ON"
-                                      ? "#d4f1d3"
-                                      : "#f5f5f5",
-                                  cursor: "pointer",
-                                  border: listPortsSelected.find(
-                                    (el) => el.name === port.name
-                                  )?.name
-                                    ? "1px solid #0018ff"
-                                    : "",
-                                }}
-                                className={`${
-                                  isSubmit ? classes.isDisabled : ""
-                                }`}
-                                onClick={() => {
-                                  toggleSelect(port);
-                                }}
-                              >
-                                <Box
+                          <Flex gap={"8px"} wrap={"nowrap"}>
+                            {sortedPorts(group)
+                              .slice(0, Math.ceil(sortedPorts(group).length / 2))
+                              .filter((el) =>
+                                checkFilterPort(el.status, el.name)
+                              )
+                              ?.map((port, i) => (
+                                <Card
+                                  key={i}
+                                  shadow="sm"
+                                  padding="xs"
+                                  radius="md"
+                                  withBorder
                                   style={{
-                                    display: "flex",
-                                    alignItems: "center",
-                                    gap: "2px",
-                                    flexDirection: "column",
-                                    flexWrap: "wrap",
+                                    flex: "0 0 auto",
+                                    position: "relative",
+                                    width: "50px",
+                                    height: "40px",
+                                    backgroundColor:
+                                      port.poe === "ON"
+                                        ? "#f2dcf8"
+                                        : port.status === "ON"
+                                        ? "#d4f1d3"
+                                        : "#f5f5f5",
+                                    cursor: "pointer",
+                                    border: listPortsSelected.find(
+                                      (el) => el.name === port.name
+                                    )?.name
+                                      ? "1px solid #0018ff"
+                                      : "",
+                                  }}
+                                  className={`${
+                                    isSubmit ? classes.isDisabled : ""
+                                  }`}
+                                  onClick={() => {
+                                    toggleSelect(port);
                                   }}
                                 >
-                                  {/* <IconSection
-                                size={"12px"}
-                                color={
-                                  port.poe === "ON"
-                                    ? "#b722d4"
-                                    : port.status === "ON"
-                                    ? "#40c057"
-                                    : "#b8b8b8"
-                                }
-                              /> */}
-                                  <Text fw={500} fz={"11px"}>
-                                    {normalizePortName(port.name)}
-                                  </Text>
-                                </Box>
-                                <Box
+                                  <Box
+                                    style={{
+                                      display: "flex",
+                                      alignItems: "center",
+                                      gap: "2px",
+                                      flexDirection: "column",
+                                      flexWrap: "wrap",
+                                    }}
+                                  >
+                                    <Text fw={500} fz={"11px"}>
+                                      {normalizePortName(port.name)}
+                                    </Text>
+                                  </Box>
+                                  <Box
+                                    style={{
+                                      display:
+                                        port.poe === "ON" ? "block" : "none",
+                                      position: "absolute",
+                                      bottom: "2px",
+                                      right: "2px",
+                                      zIndex: 10,
+                                    }}
+                                  >
+                                    <Text size="10px" fs={"italic"}>
+                                      poe
+                                    </Text>
+                                  </Box>
+                                </Card>
+                              ))}
+                          </Flex>
+                          <Flex gap={"8px"} wrap={"nowrap"} mt={"8px"}>
+                            {sortedPorts(group)
+                              .slice(
+                                Math.ceil(sortedPorts(group).length / 2),
+                                sortedPorts(group).length
+                              )
+                              .filter((el) =>
+                                checkFilterPort(el.status, el.name)
+                              )
+                              ?.map((port, i) => (
+                                <Card
+                                  key={i}
+                                  shadow="sm"
+                                  padding="xs"
+                                  radius="md"
+                                  withBorder
                                   style={{
-                                    display:
-                                      port.poe === "ON" ? "block" : "none",
-                                    position: "absolute",
-                                    bottom: "2px",
-                                    right: "2px",
-                                    zIndex: 10,
+                                    flex: "0 0 auto",
+                                    position: "relative",
+                                    width: "50px",
+                                    height: "40px",
+                                    backgroundColor:
+                                      port.poe === "ON"
+                                        ? "#f2dcf8"
+                                        : port.status === "ON"
+                                        ? "#d4f1d3"
+                                        : "#f5f5f5",
+                                    cursor: "pointer",
+                                    border: listPortsSelected.find(
+                                      (el) => el.name === port.name
+                                    )?.name
+                                      ? "1px solid #0018ff"
+                                      : "",
+                                  }}
+                                  className={`${
+                                    isSubmit ? classes.isDisabled : ""
+                                  }`}
+                                  onClick={() => {
+                                    toggleSelect(port);
                                   }}
                                 >
-                                  <Text size="10px" fs={"italic"}>
-                                    poe
-                                  </Text>
-                                </Box>
-                              </Card>
-                            ))}
+                                  <Box
+                                    style={{
+                                      display: "flex",
+                                      alignItems: "center",
+                                      gap: "2px",
+                                      flexDirection: "column",
+                                      flexWrap: "wrap",
+                                    }}
+                                  >
+                                    <Text fw={500} fz={"11px"}>
+                                      {normalizePortName(port.name)}
+                                    </Text>
+                                  </Box>
+                                  <Box
+                                    style={{
+                                      display:
+                                        port.poe === "ON" ? "block" : "none",
+                                      position: "absolute",
+                                      bottom: "2px",
+                                      right: "2px",
+                                      zIndex: 10,
+                                    }}
+                                  >
+                                    <Text size="10px" fs={"italic"}>
+                                      poe
+                                    </Text>
+                                  </Box>
+                                </Card>
+                              ))}
+                          </Flex>
                         </Box>
                       </fieldset>
                     )}
-                  </Grid.Col>
+                  </Box>
                 );
               })}
-            </Grid>
+            </Flex>
           </Box>
         )}
       </Grid.Col>