diff --git a/FRONTEND/src/App.css b/FRONTEND/src/App.css
index cb4fc3b..d978190 100644
--- a/FRONTEND/src/App.css
+++ b/FRONTEND/src/App.css
@@ -17,3 +17,7 @@ button:focus {
   overflow-y: scroll !important;
   overscroll-behavior: contain;
 }
+
+.modalNoScroll > .mantine-Modal-inner > .mantine-Modal-content {
+  overflow-y: hidden !important;
+}
diff --git a/FRONTEND/src/components/Component.module.css b/FRONTEND/src/components/Component.module.css
index 45d6b78..a1e613d 100644
--- a/FRONTEND/src/components/Component.module.css
+++ b/FRONTEND/src/components/Component.module.css
@@ -159,7 +159,8 @@
 
 .scenarioCard {
   border: 2px solid transparent;
-  background: linear-gradient(white, white) padding-box,
+  background:
+    linear-gradient(white, white) padding-box,
     linear-gradient(145deg, #e0e0e0, #f5f5f5) border-box;
 }
 
@@ -168,3 +169,14 @@
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
+
+.specRow {
+  padding: 9px 0;
+  border-bottom: 1px dashed #e9ecef;
+}
+
+.connStatus {
+  padding: 8px 0;
+  border-radius: 8px;
+  width: 300px;
+}
diff --git a/FRONTEND/src/components/Modal/ModalTerminal.tsx b/FRONTEND/src/components/Modal/ModalTerminal.tsx
index e52c583..c3fc24e 100644
--- a/FRONTEND/src/components/Modal/ModalTerminal.tsx
+++ b/FRONTEND/src/components/Modal/ModalTerminal.tsx
@@ -1,5 +1,6 @@
 import {
   ActionIcon,
+  Badge,
   Box,
   Button,
   Card,
@@ -88,7 +89,12 @@ const SwitchConnectionStatus = ({
   const portName = line?.interface ? normalizePortName(line.interface) : "";
 
   return (
-    <Flex justify="center" mb="sm">
+    <Flex
+      justify="center"
+      mb="sm"
+      className={classes.connStatus}
+      style={{ backgroundColor: isConnected ? "#e6f4ea" : "#ffe6e6" }}
+    >
       <IconCircleDot size={18} color={isConnected ? "green" : "red"} />
       <Flex ml="xs" gap="xs">
         <Text size="sm">Internet</Text>
@@ -652,6 +658,7 @@ const ModalTerminal = ({
         }}
         size={"100%"}
         style={{ position: "absolute", left: 0 }}
+        className={"modalNoScroll"}
         title={
           <Flex justify={"space-between"} align={"center"} w={"100%"}>
             <Flex w={"30vw"}>
@@ -881,7 +888,7 @@ const ModalTerminal = ({
                 </Tabs.Tab>
               </Tabs.List>
 
-              <Flex direction={"column"} h={"95%"}>
+              <Flex direction={"column"} h={"75%"}>
                 <Box>
                   <Flex gap={"sm"} justify={"center"} align={"center"}>
                     <Text size="xl">
@@ -910,11 +917,11 @@ const ModalTerminal = ({
                       style={{ width: "100%" }}
                     >
                       <Flex align="center" gap="xs">
-                        <Text size="md" mr="6px">
+                        <Text w={50} size="md">
                           BAUD:
                         </Text>
-                        <Text size="md">
-                          <strong>{line?.baud || ""}</strong>
+                        <Text size="md" fw={600}>
+                          {line?.baud || ""}
                         </Text>
                       </Flex>
                       <Menu
@@ -996,10 +1003,11 @@ const ModalTerminal = ({
                       </Menu>
                     </Flex>
                     <Flex mt="4px" align="center">
-                      <Text size="md" mr="6px">
+                      <Text w={50} size="md" mr="6px">
                         PID:
                       </Text>
                       <Text
+                        fw={600}
                         size="md"
                         style={{
                           opacity: line?.inventory?.pid ? 1 : 0.5,
@@ -1017,7 +1025,7 @@ const ModalTerminal = ({
                         {line?.inventory?.pid || ""}
                       </Text>
                       {line?.inventory?.vid ? (
-                        <Text size="md" ml={"sm"}>
+                        <Text fw={600} size="md" ml={"sm"}>
                           {line?.inventory?.vid}
                         </Text>
                       ) : (
@@ -1031,10 +1039,11 @@ const ModalTerminal = ({
                       />
                     </Flex>
                     <Flex mt="4px" align="center">
-                      <Text size="md" mr="6px">
+                      <Text w={50} size="md" mr="6px">
                         SN:
                       </Text>
                       <Text
+                        fw={600}
                         size="md"
                         style={{
                           opacity: line?.inventory?.sn ? 1 : 0.5,
@@ -1082,7 +1091,7 @@ const ModalTerminal = ({
                   <Flex
                     justify={"space-between"}
                     direction={"column"}
-                    h={"95%"}
+                    h={"90%"}
                   >
                     <ScrollArea h={"95%"}>
                       <Card
@@ -1093,7 +1102,7 @@ const ModalTerminal = ({
                         h={"fit-content"}
                         mt={"4px"}
                       >
-                        <Flex>
+                        <Flex className={classes.specRow}>
                           <Text size="md" mr={"6px"} fw={"bold"}>
                             IOS:
                           </Text>
@@ -1107,7 +1116,7 @@ const ModalTerminal = ({
                               : ""}
                           </Text>
                         </Flex>
-                        <Flex>
+                        <Flex className={classes.specRow}>
                           <Text size="md" mr={"sm"} fw={"bold"}>
                             MAC:
                           </Text>
@@ -1117,7 +1126,7 @@ const ModalTerminal = ({
                               : ""}
                           </Text>
                         </Flex>
-                        <Flex>
+                        <Flex className={classes.specRow}>
                           <Text size="md" mr={"sm"} fw={"bold"}>
                             License:
                           </Text>
@@ -1134,12 +1143,10 @@ const ModalTerminal = ({
                               : ""}
                           </Text>
                         </Flex>
-                        <Box>
-                          <Box>
-                            <Text size="md" mr={"sm"} fw={"bold"}>
-                              Sh env/module:
-                            </Text>
-                          </Box>
+                        <Box className={classes.specRow}>
+                          <Text size="md" mr={"sm"} fw={"bold"}>
+                            Sh env/module:
+                          </Text>
                           <Box>
                             {findDataShowEnv()
                               ? findDataShowEnv()?.map(
@@ -1153,7 +1160,7 @@ const ModalTerminal = ({
                           </Box>
                         </Box>
                         <Flex direction={"column"}>
-                          <Flex>
+                          <Flex className={classes.specRow}>
                             <Text size="md" mr={"sm"} fw={"bold"}>
                               Memory:
                             </Text>
@@ -1166,7 +1173,7 @@ const ModalTerminal = ({
                                 : ""}
                             </Text>
                           </Flex>
-                          <Flex>
+                          <Flex className={classes.specRow}>
                             <Text size="md" mr={"sm"} fw={"bold"}>
                               Flash:
                             </Text>
@@ -1249,11 +1256,7 @@ const ModalTerminal = ({
                           alignItems: "center",
                         }}
                       >
-                        <Box
-                          component="fieldset"
-                          w={280}
-                          style={{ border: "none", padding: 0 }}
-                        >
+                        <Box>
                           <SwitchConnectionStatus
                             line={line}
                             findSwitchPort={findSwitchPort}
@@ -1317,56 +1320,87 @@ const ModalTerminal = ({
                     ms={10000}
                     style={{ marginTop: "8px" }}
                   />
-                  <fieldset>
-                    <legend>
-                      <Flex>
-                        <Text>
-                          List ports{" "}
+                  <Card
+                    shadow="sm"
+                    p="sm"
+                    radius="md"
+                    withBorder
+                    h={"fit-content"}
+                    mt={"4px"}
+                    style={{ marginBottom: "14px" }}
+                  >
+                    <Flex justify={"space-between"} align={"center"} mb={"sm"}>
+                      <Text fw={600} fz={"14px"}>
+                        List ports{" "}
+                        <Text component="span" c="var(--green-7)" fw={600}>
                           {isPhysicalTest
                             ? `(${line?.listPortsPhysical?.length || 0}/${
                                 line?.ports?.length || 0
                               })`
                             : ""}
                         </Text>
-                      </Flex>
-                    </legend>
-                    <ScrollArea h={"45vh"} p={"4px"}>
+                      </Text>
+                      {isPhysicalTest && (
+                        <Badge
+                          size="sm"
+                          color="blue"
+                          leftSection={
+                            <Box component="span" className="blink" />
+                          }
+                        >
+                          Running
+                        </Badge>
+                      )}
+                    </Flex>
+                    <ScrollArea h={"42vh"} p={0} pb={"xs"}>
                       <SimpleGrid cols={5} spacing={"xs"}>
                         {isPhysicalTest && line?.ports
                           ? line.ports.map((port, i) => (
-                              <Box key={i}>
+                              <Box
+                                key={i}
+                                p={"8px 10px"}
+                                style={{
+                                  border: "1px solid #e9ecef",
+                                  borderRadius: "9px",
+                                  background: line?.listPortsPhysical?.includes(
+                                    port,
+                                  )
+                                    ? "#ebfbee"
+                                    : "#fff",
+                                  textAlign: "center",
+                                }}
+                              >
                                 <Text
-                                  fz={"15px"}
+                                  fz={"12.5px"}
+                                  fw={600}
                                   c={
                                     line?.listPortsPhysical?.includes(port)
-                                      ? "#014a1a"
-                                      : "#dedede"
+                                      ? "#2b8a3e"
+                                      : "#ced4da"
                                   }
+                                  style={{ fontFamily: "monospace" }}
                                 >
                                   {normalizePortName(port)}
                                 </Text>
                                 {port?.includes("SFP") ? (
                                   <Text
-                                    mt={-4}
-                                    fz={"11px"}
-                                    key={i}
+                                    mt={2}
+                                    fz={"9px"}
                                     c={
                                       line?.listPortsPhysical?.includes(port)
-                                        ? "#014a1a"
-                                        : "#dedede"
+                                        ? "#2f9e44"
+                                        : "#ced4da"
                                     }
                                   >
                                     SFP
                                   </Text>
-                                ) : (
-                                  ""
-                                )}
+                                ) : null}
                               </Box>
                             ))
                           : null}
                       </SimpleGrid>
                     </ScrollArea>
-                  </fieldset>
+                  </Card>
                   <Flex justify={"space-between"}>
                     <Button
                       fw={400}