diff --git a/FRONTEND/src/components/Drawer/DrawerControl.tsx b/FRONTEND/src/components/Drawer/DrawerControl.tsx
index f4718fa..6cac146 100644
--- a/FRONTEND/src/components/Drawer/DrawerControl.tsx
+++ b/FRONTEND/src/components/Drawer/DrawerControl.tsx
@@ -1194,11 +1194,11 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
                         <Box
                           style={{
                             width: "fit-content",
-                            minWidth: "50px",
-                            minHeight: "88px",
+                            minWidth: "32px",
+                            minHeight: "56px",
                           }}
                         >
-                          <Flex gap={"8px"} wrap={"nowrap"}>
+                          <Flex gap={"4px"} wrap={"nowrap"}>
                             {sortedPorts(group)
                               .slice(
                                 0,
@@ -1217,8 +1217,8 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
                                   style={{
                                     flex: "0 0 auto",
                                     position: "relative",
-                                    width: "50px",
-                                    height: "40px",
+                                    width: "34px",
+                                    height: "28px",
                                     backgroundColor:
                                       port.poe === "ON"
                                         ? "#f2dcf8"
@@ -1248,7 +1248,7 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
                                       flexWrap: "wrap",
                                     }}
                                   >
-                                    <Text fw={500} fz={"11px"}>
+                                    <Text fw={500} fz={"9px"}>
                                       {normalizePortName(port.name)}
                                     </Text>
                                   </Box>
@@ -1269,7 +1269,7 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
                                 </Card>
                               ))}
                           </Flex>
-                          <Flex gap={"8px"} wrap={"nowrap"} mt={"8px"}>
+                          <Flex gap={"4px"} wrap={"nowrap"} mt={"4px"}>
                             {sortedPorts(group)
                               .slice(
                                 Math.ceil(sortedPorts(group).length / 2),
@@ -1288,8 +1288,8 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
                                   style={{
                                     flex: "0 0 auto",
                                     position: "relative",
-                                    width: "50px",
-                                    height: "40px",
+                                    width: "40px",
+                                    height: "32px",
                                     backgroundColor:
                                       port.poe === "ON"
                                         ? "#f2dcf8"
@@ -1359,11 +1359,11 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
                         <Box
                           style={{
                             width: "fit-content",
-                            minWidth: "50px",
-                            minHeight: "88px",
+                            minWidth: "40px",
+                            minHeight: "56px",
                           }}
                         >
-                          <Flex gap={"8px"} wrap={"nowrap"}>
+                          <Flex gap={"6px"} wrap={"nowrap"}>
                             {sortedPorts(group)
                               .slice(
                                 0,
@@ -1382,8 +1382,8 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
                                   style={{
                                     flex: "0 0 auto",
                                     position: "relative",
-                                    width: "50px",
-                                    height: "40px",
+                                    width: "40px",
+                                    height: "32px",
                                     backgroundColor:
                                       port.poe === "ON"
                                         ? "#f2dcf8"
@@ -1413,7 +1413,7 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
                                       flexWrap: "wrap",
                                     }}
                                   >
-                                    <Text fw={500} fz={"11px"}>
+                                    <Text fw={500} fz={"10px"}>
                                       {normalizePortName(port.name)}
                                     </Text>
                                   </Box>
@@ -1434,7 +1434,7 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
                                 </Card>
                               ))}
                           </Flex>
-                          <Flex gap={"8px"} wrap={"nowrap"} mt={"8px"}>
+                          <Flex gap={"6px"} wrap={"nowrap"} mt={"6px"}>
                             {sortedPorts(group)
                               .slice(
                                 Math.ceil(sortedPorts(group).length / 2),