diff --git a/src/pages/dashboard/Content/Support/TicketItem.tsx b/src/pages/dashboard/Content/Support/TicketItem.tsx
index b18b8a8..49dfbc4 100644
--- a/src/pages/dashboard/Content/Support/TicketItem.tsx
+++ b/src/pages/dashboard/Content/Support/TicketItem.tsx
@@ -2,6 +2,7 @@ import CircleIcon from '@mui/icons-material/Circle';
 import { Box, Card, CardActionArea, CardContent, useTheme } from "@mui/material";
 import { green } from '@mui/material/colors';
 import { Ticket } from "@root/model/ticket";
+import { useNavigate } from 'react-router-dom';
 
 
 const flexCenterSx = {
@@ -18,6 +19,7 @@ interface Props {
 
 export default function TicketItem({ isUnread, ticket }: Props) {
     const theme = useTheme();
+    const navigate = useNavigate();
 
     const unreadSx = {
         border: "1px solid",
@@ -25,13 +27,17 @@ export default function TicketItem({ isUnread, ticket }: Props) {
         backgroundColor: theme.palette.goldenMedium.main
     };
 
+    function handleCardClick() {
+        navigate(`/support/${ticket.id}`);
+    }
+
     return (
         <Card sx={{
             minHeight: "70px",
             backgroundColor: "transparent",
             color: "white",
         }}>
-            <CardActionArea>
+            <CardActionArea onClick={handleCardClick}>
                 <CardContent sx={{
                     display: "flex",
                     justifyContent: "space-between",