diff --git a/apps/web-admin/src/pages/[orgId]/events/[eventId]/participants/check-in/in/index.jsx b/apps/web-admin/src/pages/[orgId]/events/[eventId]/participants/check-in/in/index.jsx
index 07abb381..2193b6f2 100644
--- a/apps/web-admin/src/pages/[orgId]/events/[eventId]/participants/check-in/in/index.jsx
+++ b/apps/web-admin/src/pages/[orgId]/events/[eventId]/participants/check-in/in/index.jsx
@@ -1,7 +1,21 @@
 import { useState, useEffect } from 'react';
 import { useRouter } from 'next/router';
 
-import { Button, FormControl, FormLabel, Select } from '@chakra-ui/react';
+import {
+  Button,
+  FormControl,
+  FormLabel,
+  Select,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalOverlay,
+  ModalHeader,
+  ModalFooter,
+  ModalCloseButton,
+  useColorMode,
+  Box,
+} from '@chakra-ui/react';
 
 import DashboardLayout from '@/layouts/DashboardLayout';
 
@@ -9,7 +23,7 @@ import { useAlert } from '@/hooks/useAlert';
 import { useFetch } from '@/hooks/useFetch';
 import useWrapper from '@/hooks/useWrapper';
 
-export default function CheckInParticipant() {
+export default function CheckInParticipant({ isOpen, onClose }) {
   const { loading, post, get } = useFetch();
   const showAlert = useAlert();
 
@@ -18,9 +32,11 @@ export default function CheckInParticipant() {
 
   const { useGetQuery } = useWrapper();
 
-  const [checkInKey, setcheckInKey] = useState(null);
+  const [checkInKey, setCheckInKey] = useState(null);
   const [participants, setParticipants] = useState([]);
 
+  const { colorMode } = useColorMode();
+
   const handleSubmit = async (e) => {
     e.preventDefault();
 
@@ -63,114 +79,157 @@ export default function CheckInParticipant() {
   }, [checkInKey]);
 
   return (
-    <DashboardLayout
-      pageTitle="Check In Participant"
-      previousPage={`/organizations/${orgId}/events/${eventId}/participants/check-in`}
-      debugInfo={JSON.stringify(checkInKey)}
-    >
-      <form onSubmit={handleSubmit}>
-        <FormControl my={4}>
-          <FormLabel>Participant ID</FormLabel>
-          <Select
-            placeholder="Select Participant ID"
-            value={checkInKey}
-            onChange={(e) => {
-              setcheckInKey(e.target.value);
-            }}
-          >
-            {participants.map((participant) => (
-              <option key={participant.id} value={participant.checkInKey}>
-                {participant.id}
-              </option>
-            ))}
-          </Select>
-        </FormControl>
-        <FormControl my={4}>
-          <FormLabel>First Name</FormLabel>
-          <Select
-            placeholder="Select First Name"
-            value={checkInKey}
-            onChange={(e) => {
-              setcheckInKey(e.target.value);
-            }}
-          >
-            {participants.map((participant) => (
-              <option key={participant.id} value={participant.checkInKey}>
-                {participant.firstName}
-              </option>
-            ))}
-          </Select>
-        </FormControl>
-        <FormControl my={4}>
-          <FormLabel>Last Name</FormLabel>
-          <Select
-            placeholder="Select Last Name"
-            value={checkInKey}
-            onChange={(e) => {
-              setcheckInKey(e.target.value);
-            }}
-          >
-            {participants.map((participant) => (
-              <option key={participant.id} value={participant.checkInKey}>
-                {participant.lastName}
-              </option>
-            ))}
-          </Select>
-        </FormControl>
+    <Modal isOpen={isOpen} onClose={onClose} size="lg" scrollBehavior="outside" isCentered>
+      <ModalOverlay />
+      <ModalContent borderRadius="10px">
+        <ModalHeader
+          backgroundColor="#AFB4E9"
+          p={6}
+          borderTopLeftRadius="10px"
+          borderTopRightRadius="10px"
+          color="black"
+        >
+          Check In Participant
+          <ModalCloseButton color="black" />
+        </ModalHeader>
+        <ModalBody backgroundColor={colorMode === 'light' ? '#EEEFFF' : '#101116'}>
+          <Box pl={4} pr={4} pb={0}>
+            <form onSubmit={handleSubmit}>
+              <FormControl my={4}>
+                <FormLabel>Participant ID</FormLabel>
+                <Select
+                  backgroundColor={colorMode === 'light' ? '#04050B12' : '#FBFBFE12'}
+                  placeholder="Select Participant ID"
+                  value={checkInKey}
+                  onChange={(e) => {
+                    setCheckInKey(e.target.value);
+                  }}
+                >
+                  {participants.map((participant) => (
+                    <option key={participant.id} value={participant.checkInKey}>
+                      {participant.id}
+                    </option>
+                  ))}
+                </Select>
+              </FormControl>
+              <FormControl my={4}>
+                <FormLabel>First Name</FormLabel>
+                <Select
+                  backgroundColor={colorMode === 'light' ? '#04050B12' : '#FBFBFE12'}
+                  placeholder="Select First Name"
+                  value={checkInKey}
+                  onChange={(e) => {
+                    setCheckInKey(e.target.value);
+                  }}
+                >
+                  {participants.map((participant) => (
+                    <option key={participant.id} value={participant.checkInKey}>
+                      {participant.firstName}
+                    </option>
+                  ))}
+                </Select>
+              </FormControl>
+              <FormControl my={4}>
+                <FormLabel>Last Name</FormLabel>
+                <Select
+                  backgroundColor={colorMode === 'light' ? '#04050B12' : '#FBFBFE12'}
+                  placeholder="Select Last Name"
+                  value={checkInKey}
+                  onChange={(e) => {
+                    setCheckInKey(e.target.value);
+                  }}
+                >
+                  {participants.map((participant) => (
+                    <option key={participant.id} value={participant.checkInKey}>
+                      {participant.lastName}
+                    </option>
+                  ))}
+                </Select>
+              </FormControl>
 
-        <FormControl my={4}>
-          <FormLabel>Phone Number</FormLabel>
-          <Select
-            placeholder="Select Phone Number"
-            value={checkInKey}
-            onChange={(e) => {
-              setcheckInKey(e.target.value);
-            }}
-          >
-            {participants.map((participant) => (
-              <option key={participant.id} value={participant.checkInKey}>
-                {participant.phone}
-              </option>
-            ))}
-          </Select>
-        </FormControl>
-        <FormControl my={4}>
-          <FormLabel>Email</FormLabel>
-          <Select
-            placeholder="Select Email"
-            value={checkInKey}
-            onChange={(e) => {
-              setcheckInKey(e.target.value);
-            }}
-          >
-            {participants.map((participant) => (
-              <option key={participant.id} value={participant.checkInKey}>
-                {participant.email}
-              </option>
-            ))}
-          </Select>
-        </FormControl>
-        <FormControl my={4}>
-          <FormLabel>Check In Key</FormLabel>
-          <Select
-            placeholder="Add Check In Key"
-            value={checkInKey}
-            onChange={(e) => {
-              setcheckInKey(e.target.value);
-            }}
-          >
-            {participants.map((participant) => (
-              <option key={participant.id} value={participant.checkInKey}>
-                {participant.checkInKey}
-              </option>
-            ))}
-          </Select>
-        </FormControl>
+              <FormControl my={4}>
+                <FormLabel>Phone Number</FormLabel>
+                <Select
+                  backgroundColor={colorMode === 'light' ? '#04050B12' : '#FBFBFE12'}
+                  placeholder="Select Phone Number"
+                  value={checkInKey}
+                  onChange={(e) => {
+                    setCheckInKey(e.target.value);
+                  }}
+                >
+                  {participants.map((participant) => (
+                    <option key={participant.id} value={participant.checkInKey}>
+                      {participant.phone}
+                    </option>
+                  ))}
+                </Select>
+              </FormControl>
+              <FormControl my={4}>
+                <FormLabel>Email</FormLabel>
+                <Select
+                  backgroundColor={colorMode === 'light' ? '#04050B12' : '#FBFBFE12'}
+                  placeholder="Select Email"
+                  value={checkInKey}
+                  onChange={(e) => {
+                    setCheckInKey(e.target.value);
+                  }}
+                >
+                  {participants.map((participant) => (
+                    <option key={participant.id} value={participant.checkInKey}>
+                      {participant.email}
+                    </option>
+                  ))}
+                </Select>
+              </FormControl>
+              <FormControl my={4}>
+                <FormLabel>Check In Key</FormLabel>
+                <Select
+                  backgroundColor={colorMode === 'light' ? '#04050B12' : '#FBFBFE12'}
+                  placeholder="Add Check In Key"
+                  value={checkInKey}
+                  onChange={(e) => {
+                    setCheckInKey(e.target.value);
+                  }}
+                >
+                  {participants.map((participant) => (
+                    <option key={participant.id} value={participant.checkInKey}>
+                      {participant.checkInKey}
+                    </option>
+                  ))}
+                </Select>
+              </FormControl>
+            </form>
+          </Box>
+        </ModalBody>
 
-        <Button type="submit" width="100%" my="4" isLoading={loading} loadingText="Please Wait">
-          Check In
-        </Button>
-      </form>
-    </DashboardLayout>
+        <ModalFooter
+          backgroundColor={colorMode === 'light' ? '#EEEFFF' : '#101116'}
+          borderBottomRadius="10px"
+          pt={0}
+        >
+          <Box flex={1} display="flex" justifyContent="space-around" gap={3} p={3}>
+            <Button
+              width="100%"
+              isLoading={loading}
+              loadingText="Please Wait"
+              onClick={handleSubmit}
+              backgroundColor="#AFB4E9"
+              color="black"
+              _hover={{ backgroundColor: '#D0D6F6 ' }}
+            >
+              Check In
+            </Button>
+            <Button
+              backgroundColor={colorMode === 'light' ? '#04050B12' : '#FBFBFE1212'}
+              mr={3}
+              onClick={onClose}
+              width={'100%'}
+            >
+              Close
+            </Button>
+          </Box>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
   );
 }
diff --git a/apps/web-admin/src/pages/[orgId]/events/[eventId]/participants/check-in/in/scanner/index.jsx b/apps/web-admin/src/pages/[orgId]/events/[eventId]/participants/check-in/in/scanner/index.jsx
index 4ad61066..e8d45aa0 100644
--- a/apps/web-admin/src/pages/[orgId]/events/[eventId]/participants/check-in/in/scanner/index.jsx
+++ b/apps/web-admin/src/pages/[orgId]/events/[eventId]/participants/check-in/in/scanner/index.jsx
@@ -1,7 +1,24 @@
 import { useState, useEffect } from 'react';
 import { useRouter } from 'next/router';
 
-import { Button, FormControl, FormLabel, Select, Flex, Switch, Box, Text } from '@chakra-ui/react';
+import {
+  Button,
+  FormControl,
+  FormLabel,
+  Select,
+  Flex,
+  Switch,
+  Box,
+  Text,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalOverlay,
+  ModalHeader,
+  ModalFooter,
+  ModalCloseButton,
+  useColorMode,
+} from '@chakra-ui/react';
 
 import DashboardLayout from '@/layouts/DashboardLayout';
 import Scanner from '@/components/Scanner';
@@ -10,7 +27,7 @@ import { useAlert } from '@/hooks/useAlert';
 import { useFetch } from '@/hooks/useFetch';
 import useWrapper from '@/hooks/useWrapper';
 
-export default function CheckInParticipantWithScanner() {
+export default function CheckInParticipantWithScanner({ isOpen, onClose }) {
   const { loading, post, get } = useFetch();
   const showAlert = useAlert();
 
@@ -25,6 +42,8 @@ export default function CheckInParticipantWithScanner() {
 
   const [fastMode, setFastMode] = useState(false);
 
+  const { colorMode } = useColorMode();
+
   const handleSubmit = async () => {
     const { data, status } = await post(
       `/core/organizations/${orgId}/events/${eventId}/participants/check-in`,
@@ -95,59 +114,100 @@ export default function CheckInParticipantWithScanner() {
   }, [previousCheckInKey]);
 
   return (
-    <DashboardLayout
-      pageTitle="Check In  Participant"
-      previousPage={`/organizations/${orgId}/events/${eventId}/participants/check-in`}
-      debugInfo={checkInKey + ' ' + previousCheckInKey}
-    >
-      <Flex height="100%" width="100%" flexDirection="column" alignItems="center">
-        <Flex pb="6" justifyContent="center" alignItems="center" gap="6">
-          <Text fontSize="xl">Fast Mode</Text>
-          <Switch colorScheme="red" size="md" onChange={() => setFastMode(!fastMode)} />
-        </Flex>
-        <Box width={['100%', '60%', '50%', '30%']}>
-          <Scanner result={checkInKey} setResult={setCheckInKey} />
-        </Box>
-        {!fastMode && participant && (
-          <Flex width="100%" flexDirection="column" alignItems="center" gap="6">
-            <Flex gap="1" width="100%" justifyContent="space-between">
-              <Flex width="100%" flexDirection="column">
-                <Text>First Name: {participant?.firstName}</Text>
-                <Text>Last Name: {participant?.lastName}</Text>
-                <Text>Email: {participant?.email}</Text>
-                <Text>Phone: {participant?.phone}</Text>
-              </Flex>
-              <Flex width="100%" flexDirection="column">
-                {participant.checkIn.status ? (
-                  <>
-                    <Text color="red" fontSize="xl">
-                      Checked In
-                    </Text>
-                    <Text>Checked in at: {participant.checkIn.at}</Text>
-                    <Text>Checked in by: {participant.checkIn.by.email}</Text>
-                  </>
-                ) : (
-                  <Text color="green" fontSize="xl">
-                    Not Checked In
-                  </Text>
-                )}
+    <Modal isOpen={isOpen} onClose={onClose} size="lg" scrollBehavior="outside" isCentered>
+      <ModalOverlay />
+      <ModalContent borderRadius="10px">
+        <ModalHeader
+          backgroundColor="#AFB4E9"
+          p={6}
+          borderTopLeftRadius="10px"
+          borderTopRightRadius="10px"
+          color="black"
+        >
+          Check In Participant
+          <ModalCloseButton color="black" />
+        </ModalHeader>
+        <ModalBody backgroundColor={colorMode === 'light' ? '#EEEFFF' : '#101116'}>
+          <Box pl={4} pr={4} pb={0}>
+            <Flex height="100%" width="100%" flexDirection="column" alignItems="center">
+              <Flex pb="6" justifyContent="center" alignItems="center" gap="6">
+                <Text fontSize="xl">Fast Mode</Text>
+                <Switch colorScheme="red" size="md" onChange={() => setFastMode(!fastMode)} />
               </Flex>
+              <Box width={['95%']}>
+                <Scanner result={checkInKey} setResult={setCheckInKey} />
+              </Box>
+              {!fastMode && participant && (
+                <Flex width="100%" flexDirection="column" alignItems="center" gap="6">
+                  <Flex gap="1" width="100%" justifyContent="space-between">
+                    <Flex width="100%" flexDirection="column">
+                      <Text>First Name: {participant?.firstName}</Text>
+                      <Text>Last Name: {participant?.lastName}</Text>
+                      <Text>Email: {participant?.email}</Text>
+                      <Text>Phone: {participant?.phone}</Text>
+                    </Flex>
+                    <Flex width="100%" flexDirection="column">
+                      {participant.checkIn.status ? (
+                        <>
+                          <Text color="red" fontSize="xl">
+                            Checked In
+                          </Text>
+                          <Text>Checked in at: {participant.checkIn.at}</Text>
+                          <Text>Checked in by: {participant.checkIn.by.email}</Text>
+                        </>
+                      ) : (
+                        <Text color="green" fontSize="xl">
+                          Not Checked In
+                        </Text>
+                      )}
+                    </Flex>
+                  </Flex>
+                  <Flex gap="6">
+                    <Button onClick={handleSubmit}>Confirm</Button>
+                    <Button
+                      onClick={() => {
+                        setCheckInKey(null);
+                        setParticipant(null);
+                        setPreviousCheckInKey(null);
+                      }}
+                    >
+                      Clear
+                    </Button>
+                  </Flex>
+                </Flex>
+              )}
             </Flex>
-            <Flex gap="6">
-              <Button onClick={handleSubmit}>Confirm</Button>
-              <Button
-                onClick={() => {
-                  setCheckInKey(null);
-                  setParticipant(null);
-                  setPreviousCheckInKey(null);
-                }}
-              >
-                Clear
-              </Button>
-            </Flex>
-          </Flex>
-        )}
-      </Flex>
-    </DashboardLayout>
+          </Box>
+        </ModalBody>
+
+        <ModalFooter
+          backgroundColor={colorMode === 'light' ? '#EEEFFF' : '#101116'}
+          borderBottomRadius="10px"
+          pt={0}
+        >
+          <Box flex={1} display="flex" justifyContent="space-around" gap={3} p={3}>
+            <Button
+              width="100%"
+              isLoading={loading}
+              loadingText="Please Wait"
+              onClick={handleSubmit}
+              backgroundColor="#AFB4E9"
+              color="black"
+              _hover={{ backgroundColor: '#D0D6F6 ' }}
+            >
+              Check In
+            </Button>
+            <Button
+              backgroundColor={colorMode === 'light' ? '#04050B12' : '#FBFBFE1212'}
+              mr={3}
+              onClick={onClose}
+              width={'100%'}
+            >
+              Close
+            </Button>
+          </Box>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
   );
 }
diff --git a/apps/web-admin/src/pages/[orgId]/events/[eventId]/participants/check-in/index.jsx b/apps/web-admin/src/pages/[orgId]/events/[eventId]/participants/check-in/index.jsx
index ae88d7a1..d74c6fdb 100644
--- a/apps/web-admin/src/pages/[orgId]/events/[eventId]/participants/check-in/index.jsx
+++ b/apps/web-admin/src/pages/[orgId]/events/[eventId]/participants/check-in/index.jsx
@@ -14,6 +14,13 @@ import useWrapper from '@/hooks/useWrapper';
 
 import NavigationMenu from '../../navigationmenu';
 
+import { useDisclosure } from '@chakra-ui/react';
+import CheckInParticipantWithMultiScanner from '@/pages/[orgId]/events/[eventId]/participants/check-in/multi-in/index';
+import CheckInParticipant from '@/pages/[orgId]/events/[eventId]/participants/check-in/in/index';
+import CheckInParticipantWithScanner from '@/pages/[orgId]/events/[eventId]/participants/check-in/in/scanner/index';
+import CheckOutParticipant from '@/pages/[orgId]/events/[eventId]/participants/check-in/out/index';
+import CheckOutParticipantWithScanner from '@/pages/[orgId]/events/[eventId]/participants/check-in/out/scanner/index';
+
 const columns = [
   { field: 'firstName', headerName: 'First Name', width: 200 },
   { field: 'lastName', headerName: 'Last Name', width: 200 },
@@ -56,6 +63,32 @@ export default function ParticipantsCheckIn() {
     },
   );
 
+  const {
+    isOpen: isMultiScannerModalOpen,
+    onOpen: onMultiScannerModalOpen,
+    onClose: onMultiScannerModalClose,
+  } = useDisclosure();
+  const {
+    isOpen: isCheckInModalOpen,
+    onOpen: onCheckInModalOpen,
+    onClose: onCheckInModalClose,
+  } = useDisclosure();
+  const {
+    isOpen: isScanner1ModalOpen,
+    onOpen: onScanner1ModalOpen,
+    onClose: onScanner1ModalClose,
+  } = useDisclosure();
+  const {
+    isOpen: isScanner2ModalOpen,
+    onOpen: onScanner2ModalOpen,
+    onClose: onScanner2ModalClose,
+  } = useDisclosure();
+  const {
+    isOpen: isCheckOutModalOpen,
+    onOpen: onCheckOutModalOpen,
+    onClose: onCheckOutModalClose,
+  } = useDisclosure();
+
   return (
     <DashboardLayout
       pageTitle="Participants Check-In"
@@ -63,50 +96,23 @@ export default function ParticipantsCheckIn() {
       headerButton={
         <>
           <Flex h="100%" flexDirection="column">
-            <Button
-              mt="auto"
-              mb="0.5"
-              onClick={() => {
-                router.push(`/${orgId}/events/${eventId}/participants/check-in/multi-in`);
-              }}
-              isLoading={loading}
-            >
+            <Button mt="auto" mb="0.5" onClick={onMultiScannerModalOpen} isLoading={loading}>
               Multi-Stage Scanner
             </Button>
           </Flex>
           <Flex flexDirection="column" gap={4}>
-            <Button
-              onClick={() => {
-                router.push(`/${orgId}/events/${eventId}/participants/check-in/in/`);
-              }}
-              isLoading={loading}
-            >
+            <Button onClick={onCheckInModalOpen} isLoading={loading}>
               Check-In Participant
             </Button>
-            <Button
-              onClick={() => {
-                router.push(`/${orgId}/events/${eventId}/participants/check-in/in/scanner`);
-              }}
-              isLoading={loading}
-            >
+            <Button onClick={onScanner1ModalOpen} isLoading={loading}>
               Open Scanner
             </Button>
           </Flex>
           <Flex flexDirection="column" gap={4}>
-            <Button
-              onClick={() => {
-                router.push(`/${orgId}/events/${eventId}/participants/check-in/out/`);
-              }}
-              isLoading={loading}
-            >
+            <Button onClick={onCheckOutModalOpen} isLoading={loading}>
               Check-Out Participant
             </Button>
-            <Button
-              onClick={() => {
-                router.push(`/${orgId}/events/${eventId}/participants/check-in/out/scanner`);
-              }}
-              isLoading={loading}
-            >
+            <Button onClick={onScanner2ModalOpen} isLoading={loading}>
               Open Scanner
             </Button>
           </Flex>
@@ -137,6 +143,14 @@ export default function ParticipantsCheckIn() {
       ) : (
         <></>
       )}
+      <CheckInParticipantWithMultiScanner
+        isOpen={isMultiScannerModalOpen}
+        onClose={onMultiScannerModalClose}
+      />
+      <CheckInParticipant isOpen={isCheckInModalOpen} onClose={onCheckInModalClose} />
+      <CheckInParticipantWithScanner isOpen={isScanner1ModalOpen} onClose={onScanner1ModalClose} />
+      <CheckOutParticipant isOpen={isCheckOutModalOpen} onClose={onCheckOutModalClose} />
+      <CheckOutParticipantWithScanner isOpen={isScanner2ModalOpen} onClose={onScanner2ModalClose} />
     </DashboardLayout>
   );
 }
diff --git a/apps/web-admin/src/pages/[orgId]/events/[eventId]/participants/check-in/multi-in/index.jsx b/apps/web-admin/src/pages/[orgId]/events/[eventId]/participants/check-in/multi-in/index.jsx
index 02b078c9..62975965 100644
--- a/apps/web-admin/src/pages/[orgId]/events/[eventId]/participants/check-in/multi-in/index.jsx
+++ b/apps/web-admin/src/pages/[orgId]/events/[eventId]/participants/check-in/multi-in/index.jsx
@@ -1,7 +1,20 @@
 import { useState, useEffect } from 'react';
 import { useRouter } from 'next/router';
 
-import { Button, FormControl, FormLabel, Select, Flex, Switch, Box, Text } from '@chakra-ui/react';
+import {
+  Button,
+  Flex,
+  Box,
+  Text,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalOverlay,
+  ModalHeader,
+  ModalFooter,
+  ModalCloseButton,
+  useColorMode,
+} from '@chakra-ui/react';
 
 import DashboardLayout from '@/layouts/DashboardLayout';
 import Scanner from '@/components/Scanner';
@@ -10,7 +23,7 @@ import { useAlert } from '@/hooks/useAlert';
 import { useFetch } from '@/hooks/useFetch';
 import useWrapper from '@/hooks/useWrapper';
 
-export default function CheckInParticipantWithMultiScanner() {
+export default function CheckInParticipantWithMultiScanner({ isOpen, onClose }) {
   const { loading, post, get } = useFetch();
   const showAlert = useAlert();
 
@@ -28,6 +41,8 @@ export default function CheckInParticipantWithMultiScanner() {
 
   const [fastMode, setFastMode] = useState(false);
 
+  const { colorMode } = useColorMode();
+
   const handleSubmit = async () => {
     const { data, status } = await post(
       `/core/organizations/${orgId}/events/${eventId}/participants/check-in`,
@@ -131,76 +146,100 @@ export default function CheckInParticipantWithMultiScanner() {
   // }, [previousCheckInKey]);
 
   return (
-    <DashboardLayout
-      pageTitle="Check In  Participant"
-      previousPage={`/organizations/${orgId}/events/${eventId}/participants/check-in`}
-      debugInfo={checkInKey + ' ' + previousCheckInKey}
-    >
-      <Flex height="100%" width="100%" flexDirection="column" alignItems="center">
-        <Flex pb="6" justifyContent="center" alignItems="center" fontSize="xl" gap="1">
-          <Text>Current Stage: </Text>
-          <Text fontWeight="semibold">
-            Scanning {stage === 1 ? 'Check-In Key' : 'Assigned Key'}
-          </Text>
-        </Flex>
-        {/* <Flex pb="3" justifyContent="center" alignItems="center" gap="4">
+    <Modal isOpen={isOpen} onClose={onClose} size="lg" isCentered>
+      <ModalOverlay />
+      <ModalContent borderRadius="10px">
+        <ModalHeader
+          backgroundColor="#AFB4E9"
+          p={6}
+          borderTopLeftRadius="10px"
+          borderTopRightRadius="10px"
+          color="black"
+        >
+          Check In Participant
+          <ModalCloseButton color="black" />
+        </ModalHeader>
+        <ModalBody backgroundColor={colorMode === 'light' ? '#EEEFFF' : '#101116'} p={3}>
+          <Flex height="100%" width="100%" flexDirection="column" alignItems="center">
+            <Flex pb="6" justifyContent="center" alignItems="center" fontSize="xl" gap="1">
+              <Text>Current Stage: </Text>
+              <Text fontWeight="semibold">
+                Scanning {stage === 1 ? 'Check-In Key' : 'Assigned Key'}
+              </Text>
+            </Flex>
+            {/* <Flex pb="3" justifyContent="center" alignItems="center" gap="4">
           <Text fontSize="xl">Fast Mode</Text>
           <Switch colorScheme="red" size="md" onChange={() => setFastMode(!fastMode)} />
         </Flex> */}
-        <Box width={['100%', '60%', '50%', '30%']} pb="3">
-          <Scanner result={scannedValue} setResult={setScannedValue} />
-        </Box>
-        <Flex
-          flexDirection="column"
-          gap="0.8"
-          fontSize="lg"
-          justifyContent="center"
-          alignItems="center"
-        >
-          <Text>Scanned Value: {scannedValue ? scannedValue : 'None'}</Text>
-          <Text>Check-In Key: {checkInKey ? checkInKey : 'None'}</Text>
-          <Text>Assigned Key: {assignedKey ? assignedKey : 'None'}</Text>
-        </Flex>
-        {participant && (
-          <Flex width="100%" flexDirection="column" alignItems="center" gap="6">
-            <Flex gap="1" width="100%" justifyContent="space-between">
-              <Flex width="100%" flexDirection="column">
-                <Text>First Name: {participant?.firstName}</Text>
-                <Text>Last Name: {participant?.lastName}</Text>
-                <Text>Email: {participant?.email}</Text>
-                <Text>Phone: {participant?.phone}</Text>
-              </Flex>
-              <Flex width="100%" flexDirection="column">
-                {participant.checkIn.status ? (
-                  <>
-                    <Text color="red" fontSize="xl">
-                      Checked In
-                    </Text>
-                    <Text>Checked in at: {participant.checkIn.at}</Text>
-                    <Text>Checked in by: {participant.checkIn.by.email}</Text>
-                  </>
-                ) : (
-                  <Text color="green" fontSize="xl">
-                    Not Checked In
-                  </Text>
-                )}
-              </Flex>
+            <Box width={['94%']} pb="3">
+              <Scanner result={scannedValue} setResult={setScannedValue} />
+            </Box>
+            <Flex
+              flexDirection="column"
+              gap="0.8"
+              fontSize="lg"
+              justifyContent="center"
+              alignItems="center"
+            >
+              <Text>Scanned Value: {scannedValue ? scannedValue : 'None'}</Text>
+              <Text>Check-In Key: {checkInKey ? checkInKey : 'None'}</Text>
+              <Text>Assigned Key: {assignedKey ? assignedKey : 'None'}</Text>
             </Flex>
+            {participant && (
+              <Flex width="100%" flexDirection="column" alignItems="center" gap="6">
+                <Flex gap="1" width="100%" justifyContent="space-between">
+                  <Flex width="100%" flexDirection="column">
+                    <Text>First Name: {participant?.firstName}</Text>
+                    <Text>Last Name: {participant?.lastName}</Text>
+                    <Text>Email: {participant?.email}</Text>
+                    <Text>Phone: {participant?.phone}</Text>
+                  </Flex>
+                  <Flex width="100%" flexDirection="column">
+                    {participant.checkIn.status ? (
+                      <>
+                        <Text color="red" fontSize="xl">
+                          Checked In
+                        </Text>
+                        <Text>Checked in at: {participant.checkIn.at}</Text>
+                        <Text>Checked in by: {participant.checkIn.by.email}</Text>
+                      </>
+                    ) : (
+                      <Text color="green" fontSize="xl">
+                        Not Checked In
+                      </Text>
+                    )}
+                  </Flex>
+                </Flex>
+              </Flex>
+            )}
           </Flex>
-        )}
-        <Flex gap="6" pt="3">
-          {scannedValue && (
-            <Button onClick={confirmScannedValue}>Confirm {stage === 1 ? 'Value' : ''}</Button>
-          )}
-          <Button
-            onClick={() => {
-              resetScanner(null);
-            }}
-          >
-            Clear
-          </Button>
-        </Flex>
-      </Flex>
-    </DashboardLayout>
+        </ModalBody>
+
+        <ModalFooter
+          backgroundColor={colorMode === 'light' ? '#EEEFFF' : '#101116'}
+          borderBottomRadius="10px"
+        >
+          <Box flex={1} display="flex" justifyContent="space-around" gap={3} p={3}>
+            {scannedValue && (
+              <Button backgroundColor="#04050B12" width={'100%'} onClick={confirmScannedValue}>
+                Confirm {stage === 1 ? 'Value' : ''}
+              </Button>
+            )}
+            <Button
+              width={'100%'}
+              onClick={() => {
+                resetScanner(null);
+              }}
+              _hover={{ backgroundColor: '#D0D6F6 ' }}
+              backgroundColor="#AFB4E9"
+              mr={3}
+              color="black"
+            >
+              Clear
+            </Button>
+          </Box>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
   );
 }
diff --git a/apps/web-admin/src/pages/[orgId]/events/[eventId]/participants/check-in/out/index.jsx b/apps/web-admin/src/pages/[orgId]/events/[eventId]/participants/check-in/out/index.jsx
index 5f0354fb..b846886e 100644
--- a/apps/web-admin/src/pages/[orgId]/events/[eventId]/participants/check-in/out/index.jsx
+++ b/apps/web-admin/src/pages/[orgId]/events/[eventId]/participants/check-in/out/index.jsx
@@ -1,7 +1,21 @@
 import { useState, useEffect } from 'react';
 import { useRouter } from 'next/router';
 
-import { Button, FormControl, FormLabel, Select } from '@chakra-ui/react';
+import {
+  Button,
+  FormControl,
+  FormLabel,
+  Select,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalOverlay,
+  ModalHeader,
+  ModalFooter,
+  ModalCloseButton,
+  useColorMode,
+  Box,
+} from '@chakra-ui/react';
 
 import DashboardLayout from '@/layouts/DashboardLayout';
 
@@ -9,7 +23,7 @@ import { useAlert } from '@/hooks/useAlert';
 import { useFetch } from '@/hooks/useFetch';
 import useWrapper from '@/hooks/useWrapper';
 
-export default function CheckOutParticipant() {
+export default function CheckOutParticipant({ isOpen, onClose }) {
   const { loading, post, get } = useFetch();
   const showAlert = useAlert();
 
@@ -18,9 +32,11 @@ export default function CheckOutParticipant() {
 
   const { useGetQuery } = useWrapper();
 
-  const [checkInKey, setcheckInKey] = useState(null);
+  const [checkInKey, setCheckInKey] = useState(null);
   const [participants, setParticipants] = useState([]);
 
+  const { colorMode } = useColorMode();
+
   const handleSubmit = async (e) => {
     e.preventDefault();
 
@@ -63,114 +79,157 @@ export default function CheckOutParticipant() {
   }, [checkInKey]);
 
   return (
-    <DashboardLayout
-      pageTitle="Check out Participant"
-      previousPage={`/organizations/${orgId}/events/${eventId}/participants`}
-      debugInfo={JSON.stringify(checkInKey)}
-    >
-      <form onSubmit={handleSubmit}>
-        <FormControl my={4}>
-          <FormLabel>Participant ID</FormLabel>
-          <Select
-            placeholder="Select Participant ID"
-            value={checkInKey}
-            onChange={(e) => {
-              setcheckInKey(e.target.value);
-            }}
-          >
-            {participants.map((participant) => (
-              <option key={participant.id} value={participant.checkInKey}>
-                {participant.id}
-              </option>
-            ))}
-          </Select>
-        </FormControl>
-        <FormControl my={4}>
-          <FormLabel>First Name</FormLabel>
-          <Select
-            placeholder="Select First Name"
-            value={checkInKey}
-            onChange={(e) => {
-              setcheckInKey(e.target.value);
-            }}
-          >
-            {participants.map((participant) => (
-              <option key={participant.id} value={participant.checkInKey}>
-                {participant.firstName}
-              </option>
-            ))}
-          </Select>
-        </FormControl>
-        <FormControl my={4}>
-          <FormLabel>Last Name</FormLabel>
-          <Select
-            placeholder="Select Last Name"
-            value={checkInKey}
-            onChange={(e) => {
-              setcheckInKey(e.target.value);
-            }}
-          >
-            {participants.map((participant) => (
-              <option key={participant.id} value={participant.checkInKey}>
-                {participant.lastName}
-              </option>
-            ))}
-          </Select>
-        </FormControl>
+    <Modal isOpen={isOpen} onClose={onClose} size="lg" scrollBehavior="outside" isCentered>
+      <ModalOverlay />
+      <ModalContent borderRadius="10px">
+        <ModalHeader
+          backgroundColor="#AFB4E9"
+          p={6}
+          borderTopLeftRadius="10px"
+          borderTopRightRadius="10px"
+          color="black"
+        >
+          Check Out Participant
+          <ModalCloseButton color="black" />
+        </ModalHeader>
+        <ModalBody backgroundColor={colorMode === 'light' ? '#EEEFFF' : '#101116'}>
+          <Box pl={4} pr={4} pb={0}>
+            <form onSubmit={handleSubmit}>
+              <FormControl my={4}>
+                <FormLabel>Participant ID</FormLabel>
+                <Select
+                  backgroundColor={colorMode === 'light' ? '#04050B12' : '#FBFBFE12'}
+                  placeholder="Select Participant ID"
+                  value={checkInKey}
+                  onChange={(e) => {
+                    setCheckInKey(e.target.value);
+                  }}
+                >
+                  {participants.map((participant) => (
+                    <option key={participant.id} value={participant.checkInKey}>
+                      {participant.id}
+                    </option>
+                  ))}
+                </Select>
+              </FormControl>
+              <FormControl my={4}>
+                <FormLabel>First Name</FormLabel>
+                <Select
+                  backgroundColor={colorMode === 'light' ? '#04050B12' : '#FBFBFE12'}
+                  placeholder="Select First Name"
+                  value={checkInKey}
+                  onChange={(e) => {
+                    setCheckInKey(e.target.value);
+                  }}
+                >
+                  {participants.map((participant) => (
+                    <option key={participant.id} value={participant.checkInKey}>
+                      {participant.firstName}
+                    </option>
+                  ))}
+                </Select>
+              </FormControl>
+              <FormControl my={4}>
+                <FormLabel>Last Name</FormLabel>
+                <Select
+                  backgroundColor={colorMode === 'light' ? '#04050B12' : '#FBFBFE12'}
+                  placeholder="Select Last Name"
+                  value={checkInKey}
+                  onChange={(e) => {
+                    setCheckInKey(e.target.value);
+                  }}
+                >
+                  {participants.map((participant) => (
+                    <option key={participant.id} value={participant.checkInKey}>
+                      {participant.lastName}
+                    </option>
+                  ))}
+                </Select>
+              </FormControl>
 
-        <FormControl my={4}>
-          <FormLabel>Phone Number</FormLabel>
-          <Select
-            placeholder="Select Phone Number"
-            value={checkInKey}
-            onChange={(e) => {
-              setcheckInKey(e.target.value);
-            }}
-          >
-            {participants.map((participant) => (
-              <option key={participant.id} value={participant.checkInKey}>
-                {participant.phone}
-              </option>
-            ))}
-          </Select>
-        </FormControl>
-        <FormControl my={4}>
-          <FormLabel>Email</FormLabel>
-          <Select
-            placeholder="Select Email"
-            value={checkInKey}
-            onChange={(e) => {
-              setcheckInKey(e.target.value);
-            }}
-          >
-            {participants.map((participant) => (
-              <option key={participant.id} value={participant.checkInKey}>
-                {participant.email}
-              </option>
-            ))}
-          </Select>
-        </FormControl>
-        <FormControl my={4}>
-          <FormLabel>Check In Key</FormLabel>
-          <Select
-            placeholder="Add Check In Key"
-            value={checkInKey}
-            onChange={(e) => {
-              setcheckInKey(e.target.value);
-            }}
-          >
-            {participants.map((participant) => (
-              <option key={participant.id} value={participant.checkInKey}>
-                {participant.checkInKey}
-              </option>
-            ))}
-          </Select>
-        </FormControl>
+              <FormControl my={4}>
+                <FormLabel>Phone Number</FormLabel>
+                <Select
+                  backgroundColor={colorMode === 'light' ? '#04050B12' : '#FBFBFE12'}
+                  placeholder="Select Phone Number"
+                  value={checkInKey}
+                  onChange={(e) => {
+                    setCheckInKey(e.target.value);
+                  }}
+                >
+                  {participants.map((participant) => (
+                    <option key={participant.id} value={participant.checkInKey}>
+                      {participant.phone}
+                    </option>
+                  ))}
+                </Select>
+              </FormControl>
+              <FormControl my={4}>
+                <FormLabel>Email</FormLabel>
+                <Select
+                  backgroundColor={colorMode === 'light' ? '#04050B12' : '#FBFBFE12'}
+                  placeholder="Select Email"
+                  value={checkInKey}
+                  onChange={(e) => {
+                    setCheckInKey(e.target.value);
+                  }}
+                >
+                  {participants.map((participant) => (
+                    <option key={participant.id} value={participant.checkInKey}>
+                      {participant.email}
+                    </option>
+                  ))}
+                </Select>
+              </FormControl>
+              <FormControl my={4}>
+                <FormLabel>Check In Key</FormLabel>
+                <Select
+                  backgroundColor={colorMode === 'light' ? '#04050B12' : '#FBFBFE12'}
+                  placeholder="Add Check In Key"
+                  value={checkInKey}
+                  onChange={(e) => {
+                    setCheckInKey(e.target.value);
+                  }}
+                >
+                  {participants.map((participant) => (
+                    <option key={participant.id} value={participant.checkInKey}>
+                      {participant.checkInKey}
+                    </option>
+                  ))}
+                </Select>
+              </FormControl>
+            </form>
+          </Box>
+        </ModalBody>
 
-        <Button type="submit" width="100%" my="4" isLoading={loading} loadingText="Please Wait">
-          Check Out
-        </Button>
-      </form>
-    </DashboardLayout>
+        <ModalFooter
+          backgroundColor={colorMode === 'light' ? '#EEEFFF' : '#101116'}
+          borderBottomRadius="10px"
+          pt={0}
+        >
+          <Box flex={1} display="flex" justifyContent="space-around" gap={3} p={3}>
+            <Button
+              width="100%"
+              isLoading={loading}
+              loadingText="Please Wait"
+              onClick={handleSubmit}
+              backgroundColor="#AFB4E9"
+              color="black"
+              _hover={{ backgroundColor: '#D0D6F6 ' }}
+            >
+              Check Out
+            </Button>
+            <Button
+              backgroundColor={colorMode === 'light' ? '#04050B12' : '#FBFBFE1212'}
+              mr={3}
+              onClick={onClose}
+              width={'100%'}
+            >
+              Close
+            </Button>
+          </Box>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
   );
 }
diff --git a/apps/web-admin/src/pages/[orgId]/events/[eventId]/participants/check-in/out/scanner/index.jsx b/apps/web-admin/src/pages/[orgId]/events/[eventId]/participants/check-in/out/scanner/index.jsx
index 87ffb966..6773530d 100644
--- a/apps/web-admin/src/pages/[orgId]/events/[eventId]/participants/check-in/out/scanner/index.jsx
+++ b/apps/web-admin/src/pages/[orgId]/events/[eventId]/participants/check-in/out/scanner/index.jsx
@@ -1,7 +1,24 @@
 import { useState, useEffect } from 'react';
 import { useRouter } from 'next/router';
 
-import { Button, FormControl, FormLabel, Select, Flex, Switch, Box, Text } from '@chakra-ui/react';
+import {
+  Button,
+  FormControl,
+  FormLabel,
+  Select,
+  Flex,
+  Switch,
+  Box,
+  Text,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalOverlay,
+  ModalHeader,
+  ModalFooter,
+  ModalCloseButton,
+  useColorMode,
+} from '@chakra-ui/react';
 
 import DashboardLayout from '@/layouts/DashboardLayout';
 import Scanner from '@/components/Scanner';
@@ -10,7 +27,7 @@ import { useAlert } from '@/hooks/useAlert';
 import { useFetch } from '@/hooks/useFetch';
 import useWrapper from '@/hooks/useWrapper';
 
-export default function CheckOutParticipantWithScanner() {
+export default function CheckOutParticipantWithScanner({ isOpen, onClose }) {
   const { loading, post, get } = useFetch();
   const showAlert = useAlert();
 
@@ -23,6 +40,8 @@ export default function CheckOutParticipantWithScanner() {
   const [checkInKey, setCheckInKey] = useState(null);
   const [participant, setParticipant] = useState(null);
 
+  const { colorMode } = useColorMode();
+
   const [fastMode, setFastMode] = useState(false);
 
   const handleSubmit = async () => {
@@ -94,59 +113,90 @@ export default function CheckOutParticipantWithScanner() {
   }, [previousCheckInKey]);
 
   return (
-    <DashboardLayout
-      pageTitle="Check Out Participant"
-      previousPage={`/organizations/${orgId}/events/${eventId}/participants/check-in`}
-      debugInfo={checkInKey + ' ' + previousCheckInKey}
-    >
-      <Flex height="100%" width="100%" flexDirection="column" alignItems="center">
-        <Flex pb="6" justifyContent="center" alignItems="center" gap="6">
-          <Text fontSize="xl">Fast Mode</Text>
-          <Switch colorScheme="red" size="md" onChange={() => setFastMode(!fastMode)} />
-        </Flex>
-        <Box width={['100%', '60%', '50%', '30%']}>
-          <Scanner result={checkInKey} setResult={setCheckInKey} />
-        </Box>
-        {!fastMode && participant && (
-          <Flex width="100%" flexDirection="column" alignItems="center" gap="6">
-            <Flex gap="1" width="100%" justifyContent="space-between">
-              <Flex width="100%" flexDirection="column">
-                <Text>First Name: {participant?.firstName}</Text>
-                <Text>Last Name: {participant?.lastName}</Text>
-                <Text>Email: {participant?.email}</Text>
-                <Text>Phone: {participant?.phone}</Text>
-              </Flex>
-              <Flex width="100%" flexDirection="column">
-                {participant.checkIn.status ? (
-                  <>
-                    <Text color="green" fontSize="xl">
-                      Checked In
-                    </Text>
-                    <Text>Checked in at: {participant.checkIn.at}</Text>
-                    <Text>Checked in by: {participant.checkIn.by.email}</Text>
-                  </>
-                ) : (
-                  <Text color="red" fontSize="xl">
-                    Not Checked In
-                  </Text>
-                )}
+    <Modal isOpen={isOpen} onClose={onClose} size="lg" scrollBehavior="outside" isCentered>
+      <ModalOverlay />
+      <ModalContent borderRadius="10px">
+        <ModalHeader
+          backgroundColor="#AFB4E9"
+          p={6}
+          borderTopLeftRadius="10px"
+          borderTopRightRadius="10px"
+          color="black"
+        >
+          Check Out Participant
+          <ModalCloseButton color="black" />
+        </ModalHeader>
+        <ModalBody backgroundColor={colorMode === 'light' ? '#EEEFFF' : '#101116'}>
+          <Box pl={4} pr={4} pb={0}>
+            <Flex height="100%" width="100%" flexDirection="column" alignItems="center">
+              <Flex pb="6" justifyContent="center" alignItems="center" gap="6">
+                <Text fontSize="xl">Fast Mode</Text>
+                <Switch colorScheme="red" size="md" onChange={() => setFastMode(!fastMode)} />
               </Flex>
+              <Box width={['95%']}>
+                <Scanner result={checkInKey} setResult={setCheckInKey} />
+              </Box>
+              {!fastMode && participant && (
+                <Flex width="100%" flexDirection="column" alignItems="center" gap="6">
+                  <Flex gap="1" width="100%" justifyContent="space-between">
+                    <Flex width="100%" flexDirection="column">
+                      <Text>First Name: {participant?.firstName}</Text>
+                      <Text>Last Name: {participant?.lastName}</Text>
+                      <Text>Email: {participant?.email}</Text>
+                      <Text>Phone: {participant?.phone}</Text>
+                    </Flex>
+                    <Flex width="100%" flexDirection="column">
+                      {participant.checkIn.status ? (
+                        <>
+                          <Text color="green" fontSize="xl">
+                            Checked In
+                          </Text>
+                          <Text>Checked in at: {participant.checkIn.at}</Text>
+                          <Text>Checked in by: {participant.checkIn.by.email}</Text>
+                        </>
+                      ) : (
+                        <Text color="red" fontSize="xl">
+                          Not Checked In
+                        </Text>
+                      )}
+                    </Flex>
+                  </Flex>
+                </Flex>
+              )}
             </Flex>
-            <Flex gap="6">
-              <Button onClick={handleSubmit}>Confirm</Button>
-              <Button
-                onClick={() => {
-                  setCheckInKey(null);
-                  setParticipant(null);
-                  setPreviousCheckInKey(null);
-                }}
-              >
-                Clear
-              </Button>
-            </Flex>
-          </Flex>
-        )}
-      </Flex>
-    </DashboardLayout>
+          </Box>
+        </ModalBody>
+
+        <ModalFooter
+          backgroundColor={colorMode === 'light' ? '#EEEFFF' : '#101116'}
+          borderBottomRadius="10px"
+          pt={0}
+        >
+          <Box flex={1} display="flex" justifyContent="space-around" gap={3} p={3}>
+            <Button
+              onClick={handleSubmit}
+              width="100%"
+              backgroundColor="#AFB4E9"
+              color="black"
+              _hover={{ backgroundColor: '#D0D6F6 ' }}
+            >
+              Confirm
+            </Button>
+            <Button
+              backgroundColor={colorMode === 'light' ? '#04050B12' : '#FBFBFE1212'}
+              mr={3}
+              width={'100%'}
+              onClick={() => {
+                setCheckInKey(null);
+                setParticipant(null);
+                setPreviousCheckInKey(null);
+              }}
+            >
+              Clear
+            </Button>
+          </Box>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
   );
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 95be7789..fe1a07ca 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -124,7 +124,7 @@ importers:
         version: 0.0.0(eslint@8.56.0)(typescript@5.7.2)
       eslint-config-standard-with-typescript:
         specifier: ^43.0.0
-        version: 43.0.1(@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.0.0(eslint@8.56.0)(typescript@5.7.2))(eslint@8.56.0)(typescript@5.7.2))(eslint-plugin-import@2.31.0)(eslint-plugin-n@16.6.2(eslint@8.56.0))(eslint-plugin-promise@6.6.0(eslint@8.56.0))(eslint@8.56.0)(typescript@5.7.2)
+        version: 43.0.1(@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.0.0(eslint@8.56.0)(typescript@5.7.2))(eslint@8.56.0)(typescript@5.7.2))(eslint-plugin-import@2.31.0(@typescript-eslint/parser@6.0.0(eslint@8.56.0)(typescript@5.7.2))(eslint@8.56.0))(eslint-plugin-n@16.6.2(eslint@8.56.0))(eslint-plugin-promise@6.6.0(eslint@8.56.0))(eslint@8.56.0)(typescript@5.7.2)
       eslint-plugin-import:
         specifier: ^2.27.5
         version: 2.31.0(@typescript-eslint/parser@6.0.0(eslint@8.56.0)(typescript@5.7.2))(eslint@8.56.0)
@@ -212,7 +212,7 @@ importers:
         version: 0.0.0(eslint@8.56.0)(typescript@5.7.2)
       eslint-config-standard-with-typescript:
         specifier: ^43.0.0
-        version: 43.0.1(@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.0.0(eslint@8.56.0)(typescript@5.7.2))(eslint@8.56.0)(typescript@5.7.2))(eslint-plugin-import@2.31.0)(eslint-plugin-n@16.6.2(eslint@8.56.0))(eslint-plugin-promise@6.6.0(eslint@8.56.0))(eslint@8.56.0)(typescript@5.7.2)
+        version: 43.0.1(@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.0.0(eslint@8.56.0)(typescript@5.7.2))(eslint@8.56.0)(typescript@5.7.2))(eslint-plugin-import@2.31.0(@typescript-eslint/parser@6.0.0(eslint@8.56.0)(typescript@5.7.2))(eslint@8.56.0))(eslint-plugin-n@16.6.2(eslint@8.56.0))(eslint-plugin-promise@6.6.0(eslint@8.56.0))(eslint@8.56.0)(typescript@5.7.2)
       eslint-plugin-import:
         specifier: ^2.27.5
         version: 2.31.0(@typescript-eslint/parser@6.0.0(eslint@8.56.0)(typescript@5.7.2))(eslint@8.56.0)
@@ -10922,7 +10922,7 @@ snapshots:
   '@acuminous/bitsyntax@0.1.2':
     dependencies:
       buffer-more-ints: 1.0.0
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7(supports-color@8.1.1)
       safe-buffer: 5.1.2
     transitivePeerDependencies:
       - supports-color
@@ -10946,7 +10946,7 @@ snapshots:
     dependencies:
       '@panva/hkdf': 1.2.1
       cookie: 0.6.0
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7(supports-color@8.1.1)
       joi: 17.13.3
       jose: 4.15.9
       next: 14.0.4(@babel/core@7.26.0)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)(sass@1.81.0)
@@ -10978,7 +10978,7 @@ snapshots:
       '@babel/traverse': 7.25.9
       '@babel/types': 7.26.0
       convert-source-map: 2.0.0
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7(supports-color@8.1.1)
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 6.3.1
@@ -11066,7 +11066,7 @@ snapshots:
       '@babel/parser': 7.26.2
       '@babel/template': 7.25.9
       '@babel/types': 7.26.0
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7(supports-color@8.1.1)
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
@@ -11508,7 +11508,7 @@ snapshots:
   '@eslint/config-array@0.19.0':
     dependencies:
       '@eslint/object-schema': 2.1.4
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7(supports-color@8.1.1)
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
@@ -11518,7 +11518,7 @@ snapshots:
   '@eslint/eslintrc@2.1.4':
     dependencies:
       ajv: 6.12.6
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7(supports-color@8.1.1)
       espree: 9.6.1
       globals: 13.24.0
       ignore: 5.3.2
@@ -11532,7 +11532,7 @@ snapshots:
   '@eslint/eslintrc@3.2.0':
     dependencies:
       ajv: 6.12.6
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7(supports-color@8.1.1)
       espree: 10.3.0
       globals: 14.0.0
       ignore: 5.3.2
@@ -11573,7 +11573,7 @@ snapshots:
   '@humanwhocodes/config-array@0.11.14':
     dependencies:
       '@humanwhocodes/object-schema': 2.0.3
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7(supports-color@8.1.1)
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
@@ -12248,7 +12248,7 @@ snapshots:
       '@typescript-eslint/type-utils': 6.21.0(eslint@8.56.0)(typescript@5.6.3)
       '@typescript-eslint/utils': 6.21.0(eslint@8.56.0)(typescript@5.6.3)
       '@typescript-eslint/visitor-keys': 6.21.0
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7(supports-color@8.1.1)
       eslint: 8.56.0
       graphemer: 1.4.0
       ignore: 5.3.2
@@ -12268,7 +12268,7 @@ snapshots:
       '@typescript-eslint/type-utils': 6.21.0(eslint@8.56.0)(typescript@5.7.2)
       '@typescript-eslint/utils': 6.21.0(eslint@8.56.0)(typescript@5.7.2)
       '@typescript-eslint/visitor-keys': 6.21.0
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7(supports-color@8.1.1)
       eslint: 8.56.0
       graphemer: 1.4.0
       ignore: 5.3.2
@@ -12303,7 +12303,7 @@ snapshots:
       '@typescript-eslint/scope-manager': 5.62.0
       '@typescript-eslint/types': 5.62.0
       '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.6.3)
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7(supports-color@8.1.1)
       eslint: 8.56.0
     optionalDependencies:
       typescript: 5.6.3
@@ -12315,7 +12315,7 @@ snapshots:
       '@typescript-eslint/scope-manager': 5.62.0
       '@typescript-eslint/types': 5.62.0
       '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.7.2)
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7(supports-color@8.1.1)
       eslint: 8.56.0
     optionalDependencies:
       typescript: 5.7.2
@@ -12328,7 +12328,7 @@ snapshots:
       '@typescript-eslint/types': 6.0.0
       '@typescript-eslint/typescript-estree': 6.0.0(typescript@5.6.3)
       '@typescript-eslint/visitor-keys': 6.0.0
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7(supports-color@8.1.1)
       eslint: 8.56.0
     optionalDependencies:
       typescript: 5.6.3
@@ -12341,7 +12341,7 @@ snapshots:
       '@typescript-eslint/types': 6.0.0
       '@typescript-eslint/typescript-estree': 6.0.0(typescript@5.7.2)
       '@typescript-eslint/visitor-keys': 6.0.0
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7(supports-color@8.1.1)
       eslint: 8.56.0
     optionalDependencies:
       typescript: 5.7.2
@@ -12354,7 +12354,7 @@ snapshots:
       '@typescript-eslint/types': 6.21.0
       '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.6.3)
       '@typescript-eslint/visitor-keys': 6.21.0
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7(supports-color@8.1.1)
       eslint: 8.56.0
     optionalDependencies:
       typescript: 5.6.3
@@ -12367,7 +12367,7 @@ snapshots:
       '@typescript-eslint/types': 6.21.0
       '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.7.2)
       '@typescript-eslint/visitor-keys': 6.21.0
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7(supports-color@8.1.1)
       eslint: 8.56.0
     optionalDependencies:
       typescript: 5.7.2
@@ -12380,7 +12380,7 @@ snapshots:
       '@typescript-eslint/types': 8.15.0
       '@typescript-eslint/typescript-estree': 8.15.0(typescript@5.7.2)
       '@typescript-eslint/visitor-keys': 8.15.0
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7(supports-color@8.1.1)
       eslint: 9.15.0(jiti@1.21.6)
     optionalDependencies:
       typescript: 5.7.2
@@ -12411,7 +12411,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.6.3)
       '@typescript-eslint/utils': 6.21.0(eslint@8.56.0)(typescript@5.6.3)
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7(supports-color@8.1.1)
       eslint: 8.56.0
       ts-api-utils: 1.4.0(typescript@5.6.3)
     optionalDependencies:
@@ -12423,7 +12423,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.7.2)
       '@typescript-eslint/utils': 6.21.0(eslint@8.56.0)(typescript@5.7.2)
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7(supports-color@8.1.1)
       eslint: 8.56.0
       ts-api-utils: 1.4.0(typescript@5.7.2)
     optionalDependencies:
@@ -12435,7 +12435,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/typescript-estree': 8.15.0(typescript@5.7.2)
       '@typescript-eslint/utils': 8.15.0(eslint@9.15.0(jiti@1.21.6))(typescript@5.7.2)
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7(supports-color@8.1.1)
       eslint: 9.15.0(jiti@1.21.6)
       ts-api-utils: 1.4.0(typescript@5.7.2)
     optionalDependencies:
@@ -12455,7 +12455,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/types': 5.62.0
       '@typescript-eslint/visitor-keys': 5.62.0
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7(supports-color@8.1.1)
       globby: 11.1.0
       is-glob: 4.0.3
       semver: 7.6.3
@@ -12469,7 +12469,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/types': 5.62.0
       '@typescript-eslint/visitor-keys': 5.62.0
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7(supports-color@8.1.1)
       globby: 11.1.0
       is-glob: 4.0.3
       semver: 7.6.3
@@ -12483,7 +12483,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/types': 6.0.0
       '@typescript-eslint/visitor-keys': 6.0.0
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7(supports-color@8.1.1)
       globby: 11.1.0
       is-glob: 4.0.3
       semver: 7.6.3
@@ -12497,7 +12497,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/types': 6.0.0
       '@typescript-eslint/visitor-keys': 6.0.0
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7(supports-color@8.1.1)
       globby: 11.1.0
       is-glob: 4.0.3
       semver: 7.6.3
@@ -12511,7 +12511,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/types': 6.21.0
       '@typescript-eslint/visitor-keys': 6.21.0
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7(supports-color@8.1.1)
       globby: 11.1.0
       is-glob: 4.0.3
       minimatch: 9.0.3
@@ -12526,7 +12526,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/types': 6.21.0
       '@typescript-eslint/visitor-keys': 6.21.0
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7(supports-color@8.1.1)
       globby: 11.1.0
       is-glob: 4.0.3
       minimatch: 9.0.3
@@ -12541,7 +12541,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/types': 8.15.0
       '@typescript-eslint/visitor-keys': 8.15.0
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7(supports-color@8.1.1)
       fast-glob: 3.3.2
       is-glob: 4.0.3
       minimatch: 9.0.5
@@ -12805,13 +12805,13 @@ snapshots:
 
   agent-base@6.0.2:
     dependencies:
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7(supports-color@8.1.1)
     transitivePeerDependencies:
       - supports-color
 
   agent-base@7.1.1:
     dependencies:
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7(supports-color@8.1.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -13926,7 +13926,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-config-standard-with-typescript@43.0.1(@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.0.0(eslint@8.56.0)(typescript@5.7.2))(eslint@8.56.0)(typescript@5.7.2))(eslint-plugin-import@2.31.0)(eslint-plugin-n@16.6.2(eslint@8.56.0))(eslint-plugin-promise@6.6.0(eslint@8.56.0))(eslint@8.56.0)(typescript@5.7.2):
+  eslint-config-standard-with-typescript@43.0.1(@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.0.0(eslint@8.56.0)(typescript@5.7.2))(eslint@8.56.0)(typescript@5.7.2))(eslint-plugin-import@2.31.0(@typescript-eslint/parser@6.0.0(eslint@8.56.0)(typescript@5.7.2))(eslint@8.56.0))(eslint-plugin-n@16.6.2(eslint@8.56.0))(eslint-plugin-promise@6.6.0(eslint@8.56.0))(eslint@8.56.0)(typescript@5.7.2):
     dependencies:
       '@typescript-eslint/eslint-plugin': 6.21.0(@typescript-eslint/parser@6.0.0(eslint@8.56.0)(typescript@5.7.2))(eslint@8.56.0)(typescript@5.7.2)
       '@typescript-eslint/parser': 6.21.0(eslint@8.56.0)(typescript@5.7.2)
@@ -13961,7 +13961,7 @@ snapshots:
 
   eslint-import-resolver-typescript@2.7.1(eslint-plugin-import@2.31.0)(eslint@8.56.0):
     dependencies:
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7(supports-color@8.1.1)
       eslint: 8.56.0
       eslint-plugin-import: 2.31.0(@typescript-eslint/parser@6.0.0(eslint@8.56.0)(typescript@5.7.2))(eslint@8.56.0)
       glob: 7.2.3
@@ -13974,7 +13974,7 @@ snapshots:
   eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@6.0.0(eslint@8.56.0)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(eslint@8.56.0))(eslint@8.56.0):
     dependencies:
       '@nolyfill/is-core-module': 1.0.39
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7(supports-color@8.1.1)
       enhanced-resolve: 5.17.1
       eslint: 8.56.0
       eslint-module-utils: 2.12.0(@typescript-eslint/parser@6.0.0(eslint@8.56.0)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@6.0.0(eslint@8.56.0)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(eslint@8.56.0))(eslint@8.56.0))(eslint@8.56.0)
@@ -14324,7 +14324,7 @@ snapshots:
       ajv: 6.12.6
       chalk: 4.1.2
       cross-spawn: 7.0.6
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7(supports-color@8.1.1)
       doctrine: 3.0.0
       escape-string-regexp: 4.0.0
       eslint-scope: 7.2.2
@@ -14371,7 +14371,7 @@ snapshots:
       ajv: 6.12.6
       chalk: 4.1.2
       cross-spawn: 7.0.6
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7(supports-color@8.1.1)
       escape-string-regexp: 4.0.0
       eslint-scope: 8.2.0
       eslint-visitor-keys: 4.2.0
@@ -14748,7 +14748,7 @@ snapshots:
     dependencies:
       basic-ftp: 5.0.5
       data-uri-to-buffer: 6.0.2
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7(supports-color@8.1.1)
       fs-extra: 11.2.0
     transitivePeerDependencies:
       - supports-color
@@ -15059,21 +15059,21 @@ snapshots:
   http-proxy-agent@7.0.2:
     dependencies:
       agent-base: 7.1.1
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7(supports-color@8.1.1)
     transitivePeerDependencies:
       - supports-color
 
   https-proxy-agent@5.0.1:
     dependencies:
       agent-base: 6.0.2
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7(supports-color@8.1.1)
     transitivePeerDependencies:
       - supports-color
 
   https-proxy-agent@7.0.5:
     dependencies:
       agent-base: 7.1.1
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7(supports-color@8.1.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -15174,7 +15174,7 @@ snapshots:
     dependencies:
       '@ioredis/commands': 1.2.0
       cluster-key-slot: 1.1.2
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7(supports-color@8.1.1)
       denque: 2.1.0
       lodash.defaults: 4.2.0
       lodash.isarguments: 3.1.0
@@ -15514,7 +15514,7 @@ snapshots:
     dependencies:
       chalk: 5.3.0
       commander: 12.1.0
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7(supports-color@8.1.1)
       execa: 8.0.1
       lilconfig: 3.1.2
       listr2: 8.2.5
@@ -15994,7 +15994,7 @@ snapshots:
   micromark@4.0.1:
     dependencies:
       '@types/debug': 4.1.12
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7(supports-color@8.1.1)
       decode-named-character-reference: 1.0.2
       devlop: 1.1.0
       micromark-core-commonmark: 2.0.2
@@ -16416,7 +16416,7 @@ snapshots:
     dependencies:
       '@tootallnate/quickjs-emscripten': 0.23.0
       agent-base: 7.1.1
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7(supports-color@8.1.1)
       get-uri: 6.0.3
       http-proxy-agent: 7.0.2
       https-proxy-agent: 7.0.5
@@ -16689,7 +16689,7 @@ snapshots:
   proxy-agent@6.4.0:
     dependencies:
       agent-base: 7.1.1
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7(supports-color@8.1.1)
       http-proxy-agent: 7.0.2
       https-proxy-agent: 7.0.5
       lru-cache: 7.18.3
@@ -17430,7 +17430,7 @@ snapshots:
   socks-proxy-agent@8.0.4:
     dependencies:
       agent-base: 7.1.1
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7(supports-color@8.1.1)
       socks: 2.8.3
     transitivePeerDependencies:
       - supports-color
@@ -17594,7 +17594,7 @@ snapshots:
     dependencies:
       component-emitter: 1.3.1
       cookiejar: 2.1.4
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7(supports-color@8.1.1)
       fast-safe-stringify: 2.1.1
       form-data: 4.0.1
       formidable: 2.1.2