diff --git a/app/assets/styles/home.css b/app/assets/styles/home.css
index 90fd37c..002183a 100644
--- a/app/assets/styles/home.css
+++ b/app/assets/styles/home.css
@@ -96,6 +96,10 @@
     justify-content: space-around
 }
 
+.title-header-link:hover {
+    color: #6F7E8C;
+}
+
 
 @media (width <= 570px) {
 
diff --git a/app/components/itemDialog.tsx b/app/components/itemDialog.tsx
index eafe944..28e5667 100644
--- a/app/components/itemDialog.tsx
+++ b/app/components/itemDialog.tsx
@@ -16,7 +16,7 @@ export default function ItemDialog({ blacklistItem, open, handleClose }: { black
                 onClose={() => handleClose()}
             >
                 <DialogTitle>
-                    <TitleHeader name={width < 570 ? trimLink(blacklistItem?.link) : blacklistItem?.link} handleClose={handleClose}/>
+                    <TitleHeader name={blacklistItem?.link} handleClose={handleClose} isLink={true}/>
                     <TagList
                         afk={blacklistItem?.afk}
                         cheater={blacklistItem?.cheater}
diff --git a/app/components/itemDialog/NameField.tsx b/app/components/itemDialog/NameField.tsx
new file mode 100644
index 0000000..a334bde
--- /dev/null
+++ b/app/components/itemDialog/NameField.tsx
@@ -0,0 +1,18 @@
+import useWindowDimensions from "~/hooks/windowDimensions";
+import trimLink from "~/functions/trimLink";
+
+export  default function NameField ({name, isLink} : {name: string|undefined, isLink: boolean} ) {
+    if (!name){
+        return (<p>???</p>)
+    }
+    const { width } = useWindowDimensions();
+    if (isLink){
+        return (
+            <a href={name} target="_blank" className="title-header-link">{width < 570 ? trimLink(name) : name}</a>
+        )
+    } else {
+        return (
+            <p>{width < 570 ? trimLink(name) : name}</p>
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/components/itemDialog/titleHeader.tsx b/app/components/itemDialog/titleHeader.tsx
index 54da542..2cbfe6e 100644
--- a/app/components/itemDialog/titleHeader.tsx
+++ b/app/components/itemDialog/titleHeader.tsx
@@ -1,11 +1,12 @@
 import {IconButton} from "@mui/material";
 import CloseIcon from '@mui/icons-material/Close';
+import NameField from "~/components/itemDialog/NameField";
 
-export default function TitleHeader({ name, handleClose }:{ name: string|undefined, handleClose: Function }){
+export default function TitleHeader({ name, handleClose, isLink }:{ name: string|undefined, handleClose: Function, isLink: boolean }){
     return (
         <>
             <div className="report-title-header">
-                <p>{name}</p>
+                <NameField name={name} isLink={isLink}/>
                 <IconButton aria-label="Close">
                     <CloseIcon sx={{color: "#E0E3E7"}} onClick={() => handleClose()}/>
                 </IconButton>
diff --git a/app/components/reportDialog.tsx b/app/components/reportDialog.tsx
index d18df3a..3be7d30 100644
--- a/app/components/reportDialog.tsx
+++ b/app/components/reportDialog.tsx
@@ -74,7 +74,7 @@ export default function ReportDialog({ open, handleClose }: { open: boolean, han
                 onClose={() => handleClose()}
             >
                 <DialogTitle>
-                    <TitleHeader name={'Creating Hunt: Showdown player report'} handleClose={handleClose}/>
+                    <TitleHeader name={'Creating Hunt: Showdown player report'} handleClose={handleClose} isLink={false}/>
                 </DialogTitle>
                 <Divider sx={{marginTop: '10px', marginBottom: '10px', alignSelf: 'center'}}/>
                 <DialogContent>