diff --git a/client/app/feed/components/likesDialog.jsx b/client/app/feed/components/likesDialog.jsx
index 24882cb..2b1d652 100644
--- a/client/app/feed/components/likesDialog.jsx
+++ b/client/app/feed/components/likesDialog.jsx
@@ -3,8 +3,9 @@
 import { useEffect } from "react";
 import Image from "next/image";
 import styles from "./likesDialog.module.css";
-
+import { useRouter } from "next/navigation";
 export default function LikesDialog({ isOpen, onClose, likes, postId }) {
+  const router = useRouter();
   useEffect(() => {
     if (isOpen) {
       document.body.style.overflow = "hidden";
@@ -46,7 +47,12 @@ export default function LikesDialog({ isOpen, onClose, likes, postId }) {
                       height={40}
                       className={styles.avatar}
                     />
-                    <span className={styles.username}>{displayName}</span>
+                    <button
+                      className={styles.username}
+                      onClick={() => router.push(`/${displayName}`)}
+                    >
+                      {displayName}
+                    </button>
                   </li>
                 );
               })}
@@ -59,4 +65,3 @@ export default function LikesDialog({ isOpen, onClose, likes, postId }) {
     </div>
   );
 }
-
diff --git a/client/app/feed/components/likesDialog.module.css b/client/app/feed/components/likesDialog.module.css
index 710bb55..3f533da 100644
--- a/client/app/feed/components/likesDialog.module.css
+++ b/client/app/feed/components/likesDialog.module.css
@@ -112,7 +112,18 @@
 .username {
   font-size: 16px;
   font-weight: 500;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
   color: #333;
+  text-align: left;
+  transition: color 0.2s;
+}
+
+.username:hover {
+  color: #7a6e60;
+  text-decoration: underline;
 }
 
 .noLikes {
@@ -121,4 +132,3 @@
   padding: 40px 20px;
   font-size: 16px;
 }
-