diff --git a/src/pages/dashboard/Content/Support/Support.tsx b/src/pages/dashboard/Content/Support/Support.tsx
index 6fd6e48..3917ff6 100644
--- a/src/pages/dashboard/Content/Support/Support.tsx
+++ b/src/pages/dashboard/Content/Support/Support.tsx
@@ -4,15 +4,14 @@ import SearchOutlinedIcon from '@mui/icons-material/SearchOutlined';
 import HighlightOffOutlinedIcon from '@mui/icons-material/HighlightOffOutlined';
 import { enqueueSnackbar } from 'notistack';
 import { GetTicketsRequest, Ticket } from "@root/model/ticket";
-import { setTickets, addOrUpdateTicket, useTicketStore } from "@root/stores/tickets";
-import TicketItem from "./TicketItem";
+import { setTickets, addOrUpdateTicket } from "@root/stores/tickets";
 import { getTickets, subscribeToAllTickets } from "@root/api/tickets";
 import Chat from "./Chat";
+import TicketList from "./TicketList";
 
 
 export default function Support() {
     const theme = useTheme();
-    const tickets = useTicketStore(state => state.tickets);
 
     useEffect(function fetchTickets() {
         const getTicketsBody: GetTicketsRequest = {
@@ -62,8 +61,6 @@ export default function Support() {
         };
     }, []);
 
-    const sortedTickets = tickets.sort(sortTicketsByUpdateTime).sort(sortTicketsByUnread);
-
     return (
         <Box sx={{
             width: "100%",
@@ -120,32 +117,8 @@ export default function Support() {
                         <HighlightOffOutlinedIcon />
                     </Button>
                 </Box>
-                <Box sx={{
-                    width: "100%",
-                    border: "1px solid",
-                    borderColor: theme.palette.grayDark.main,
-                    borderRadius: "3px",
-                    overflow: "auto",
-                    overflowY: "auto",
-                    padding: "10px"
-                }}>
-                    {sortedTickets.map(ticket =>
-                        <TicketItem ticket={ticket} key={ticket.id} isUnread={ticket.user === ticket.top_message.user_id} />
-                    )}
-                </Box>
+                <TicketList />
             </Box>
         </Box>
     );
-}
-
-function sortTicketsByUpdateTime(ticket1: Ticket, ticket2: Ticket) {
-    const date1 = new Date(ticket1.updated_at).getTime();
-    const date2 = new Date(ticket2.updated_at).getTime();
-    return date2 - date1;
-}
-
-function sortTicketsByUnread(ticket1: Ticket, ticket2: Ticket) {
-    const isUnread1 = ticket1.user === ticket1.top_message.user_id;
-    const isUnread2 = ticket2.user === ticket2.top_message.user_id;
-    return Number(isUnread2) - Number(isUnread1);
 }
\ No newline at end of file
diff --git a/src/pages/dashboard/Content/Support/TicketList.tsx b/src/pages/dashboard/Content/Support/TicketList.tsx
new file mode 100644
index 0000000..dc6dc3d
--- /dev/null
+++ b/src/pages/dashboard/Content/Support/TicketList.tsx
@@ -0,0 +1,40 @@
+import { Box, useTheme } from "@mui/material";
+import { Ticket } from "@root/model/ticket";
+import { useTicketStore } from "@root/stores/tickets";
+import TicketItem from "./TicketItem";
+
+
+export default function TicketList() {
+    const theme = useTheme()
+    const tickets = useTicketStore(state => state.tickets);
+
+    const sortedTickets = tickets.sort(sortTicketsByUpdateTime).sort(sortTicketsByUnread);
+    
+    return (
+        <Box sx={{
+            width: "100%",
+            border: "1px solid",
+            borderColor: theme.palette.grayDark.main,
+            borderRadius: "3px",
+            overflow: "auto",
+            overflowY: "auto",
+            padding: "10px"
+        }}>
+            {sortedTickets.map(ticket =>
+                <TicketItem ticket={ticket} key={ticket.id} isUnread={ticket.user === ticket.top_message.user_id} />
+            )}
+        </Box>
+    )
+}
+
+function sortTicketsByUpdateTime(ticket1: Ticket, ticket2: Ticket) {
+    const date1 = new Date(ticket1.updated_at).getTime();
+    const date2 = new Date(ticket2.updated_at).getTime();
+    return date2 - date1;
+}
+
+function sortTicketsByUnread(ticket1: Ticket, ticket2: Ticket) {
+    const isUnread1 = ticket1.user === ticket1.top_message.user_id;
+    const isUnread2 = ticket2.user === ticket2.top_message.user_id;
+    return Number(isUnread2) - Number(isUnread1);
+}
\ No newline at end of file