diff --git a/frontend/src/components/Notification.jsx b/frontend/src/components/Notification.jsx
index f2ef079..69a07c6 100644
--- a/frontend/src/components/Notification.jsx
+++ b/frontend/src/components/Notification.jsx
@@ -9,8 +9,10 @@ import SmallLoader from './SmallLoader';
 import Loader from './Loader';
 import baseAddress from '../utils/localhost';
 import { addNewRoom } from '../redux/userRooms';
+
 import { setRoomDetail } from '../redux/roomSlice';
 import toast from 'react-hot-toast';
+import { v4 as uuidv4 } from 'uuid';
 
 
 
@@ -117,7 +119,7 @@ const Notification = ({setIsNfnOpen}) => {
             {notifications.length==0 && <div className=' p-4  text-red-950 text-center font-semibold'>You're all caught up! No new notifications.</div>}
             <div className=' max-h-[70vh] sm:max-h-[60vh] overflow-auto scrollable-box'>
             {notifications?.map(item =><>
-                <div key={item.id} onClick={()=>handleClick(item, item.id)} className=' cursor-pointer hover:bg-[#acb499] shadow-sm  shadow-lime-800 px-2 py-1 xxs:px-4  xxs:py-2'>
+                <div key={`${uuidv4()}${item.id}`} onClick={()=>handleClick(item, item.id)} className=' cursor-pointer hover:bg-[#acb499] shadow-sm  shadow-lime-800 px-2 py-1 xxs:px-4  xxs:py-2'>
                     <div className=' flex items-center justify-between'><span className='text-md '><span className='font-semibold'>{item.user2.username} </span>{item.title}</span><span className=' text-xs text-slate-600'>{getTime(item.createdAt)} ago</span></div>
                     {item.body?<div className='whitespace-pre-wrap break-words text-sm line-clamp-3 bg-[#9eb840] overflow-clip px-3 text-white m-1 py-1 rounded-lg'>{item.body}</div>:<></>}
                 </div>
diff --git a/frontend/src/components/Posts.jsx b/frontend/src/components/Posts.jsx
index 38cee22..b2bfaf3 100644
--- a/frontend/src/components/Posts.jsx
+++ b/frontend/src/components/Posts.jsx
@@ -14,7 +14,7 @@ import Linkify from 'react-linkify';
 
 
 
-const Posts = ({ id, post, title, body, media, countComment, inRoom, room, createdAt, user, upvotes,joined,postDetails }) => {
+const Posts = ({ id, post, title,topic, body, media, countComment, inRoom, room, createdAt, user, upvotes,joined,postDetails }) => {
   const userInfo = useSelector(state => state.user.userInfo);
   const isLogin = useSelector(state => state.login.value);
   const posts = useSelector(state => state.post.posts);
@@ -153,7 +153,8 @@ const Posts = ({ id, post, title, body, media, countComment, inRoom, room, creat
         <header className='flex gap-2 items-center my-2'>
           <img onClick={()=> Navigate(`/u/${user?.username}`)} src={user && user.dp ? user.dp : dp} alt="Profile" className="w-8 h-8 rounded-full cursor-pointer bg-white" />
           <div className=' flex flex-wrap gap-1 xs:gap-2 md:gap-4 items-center'>
-              <span onClick={()=> Navigate(`/u/${user?.username}`)} className='font-semibold cursor-pointer hover:text-green-900'>u/{user?.username}</span>•{inRoom && <><span className=' text-sm font-semibold'>q/{room.title}</span> <span>•</span></>}<span className='text-xs text-gray-700'>{`${getTime(createdAt)} ago`}</span>
+              <span onClick={()=> Navigate(`/u/${user?.username}`)} className='font-semibold cursor-pointer hover:text-green-900'>u/{user?.username}</span>•{(inRoom && <><span onClick={()=> Navigate(`/room/${user.userID}/${room.title}`)} className=' cursor-pointer hover:text-rose-900 text-sm font-semibold'>q/{room.title}</span> <span>•</span></>)
+              || (topic && <><span onClick={()=> Navigate(`/q/${topic}`)} className=' cursor-pointer hover:text-rose-900 text-sm font-semibold'>q/{topic}</span> <span>•</span></>)}<span className='text-xs text-gray-700'>{`${getTime(createdAt)} ago`}</span>
             
           </div>
         </header>
diff --git a/frontend/src/pages/HotTopicPosts.jsx b/frontend/src/pages/HotTopicPosts.jsx
index a4782fb..c878797 100644
--- a/frontend/src/pages/HotTopicPosts.jsx
+++ b/frontend/src/pages/HotTopicPosts.jsx
@@ -9,117 +9,133 @@ import Postskelton from '../components/Postskelton';
 import { setSkeltonLoader } from '../redux/skelton';
 import { clearHotPostsInfo, setHotPost } from '../redux/Hotposts';
 import Posts from '../components/Posts';
+import { GrRefresh } from 'react-icons/gr';
+import SmallLoader from '../components/SmallLoader';
 
 
 
 
 
 
-const HotTopicPosts = ({title,topic,dp,bg}) => {
+const HotTopicPosts = ({ title, topic, dp, bg }) => {
 
-    
-    
-    const isSkelton = useSelector((state) => state.skelton.value);
-    const hotposts = useSelector((state) => state.hotpost.hotposts);
-    const dispatch = useDispatch();
 
-    const [page, setPage] = useState(1);
-    const [hasMore, setHasMore] = useState(true);
+  const [isLoading, setisLoading] = useState(false)
+  const isSkelton = useSelector((state) => state.skelton.value);
+  const hotposts = useSelector((state) => state.hotpost.hotposts);
+  const dispatch = useDispatch();
 
+  const [page, setPage] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
 
-    const getPost = async () => {
-        dispatch(setSkeltonLoader())
-        if(page==1){
-          dispatch(clearHotPostsInfo())
-        }
-        try {
-          const res = await axios.get(`${baseAddress}posts/q/hottopic`, {
-            params: {
-              page,
-              limit: 10,
-              topic
-            },
-          });
-    
-          if (res.status === 200) {
-            const fetchedPosts = res.data.posts;
-    
-            if (fetchedPosts.length < 10) {
-              setHasMore(false);
-            }
-    
-            dispatch(setHotPost(fetchedPosts));
-          }
-        } catch (error) {
-          console.log(error);
-          setHasMore(false); // Stop fetching if there's an error
+
+  const getPost = async (reset = false) => {
+    dispatch(setSkeltonLoader())
+    setisLoading(true)
+    try {
+      if (reset) {
+        dispatch(clearHotPostsInfo());
+        setPage(1);
+        setHasMore(true);
+      }
+      const currentPage = reset ? 1 : page;
+      const res = await axios.get(`${baseAddress}posts/q/hottopic`, {
+        params: {
+          page: currentPage,
+          limit: 10,
+          topic
+        },
+      });
+
+      if (res.status === 200) {
+        const fetchedPosts = res.data.posts;
+
+        if (fetchedPosts.length < 10) {
+          setHasMore(false);
         }
-        dispatch(setSkeltonLoader())
-      };
 
-      useEffect(() => {
-        setPage(1); // Reset page when topic changes
-        setHasMore(true); // Reset hasMore when topic changes
-        getPost(); // Fetch posts for the new topic
-        dispatch(clearHotPostsInfo())
-      }, [topic]);
+        dispatch(setHotPost(fetchedPosts));
+      }
+    } catch (error) {
+      console.log(error);
+      setHasMore(false); // Stop fetching if there's an error
+    }
+    dispatch(setSkeltonLoader())
+    setisLoading(false)
+
+  };
+
+
+  useEffect(() => {
+
+    getPost(true); // Fetch posts for the new topic
+  }, [topic]);
 
-      
 
-      useEffect(() => {
-        getPost();
-      }, [page]);
 
+  useEffect(() => {
+    if (page > 1)
+      getPost();
+  }, [page]);
 
 
 
-      const fetchMoreData = () => {
-        setPage((prevPage) => prevPage + 1);
-      };
 
+  const fetchMoreData = () => {
+    if (isLoading || !hasMore) return;
+    setPage(currentPage=> currentPage+1)
+  };
 
 
 
 
-    return (
 
-        <div className=' min-h-screen border-x-2 border-black'>
-    <InfiniteScroll  
+  return (<>
+
+      <Hottopic topic={title} dp={dp} bg={bg} />
+    <div className=' min-h-screen xs:pl-8 sm:pl-16'>
+
+      <InfiniteScroll
         dataLength={hotposts.length}
         next={fetchMoreData}
         hasMore={hasMore}
-        loader={<Postskelton />}
-        endMessage={hotposts.length>0?<p className=' text-center font-semibold p-4'>You've reached the end of the page!</p>:<p className=' text-center font-semibold p-4'>No posts available to display!</p>}   
+        loader={<div className='py-8'><Postskelton /></div>}
+        endMessage={<p className='text-center break-words font-semibold p-4'>{`${hotposts.length === 0 ? "It looks like there aren't any posts yet." : "You've reached the end of the page!"}`}</p>}
       >
-      <Hottopic topic={title} dp={dp} bg={bg} />
 
+        <div className=' flex items-center justify-end mx-4 mt-3'>
+          <span onClick={() => getPost(true)} className=' bg-[#eff1d3] rounded-full p-1'>
+            {isLoading ? <SmallLoader /> : <GrRefresh className=' cursor-pointer text-blue-500 text-xl font-extrabold' />}
+          </span>
+        </div>
 
-      
         <div className="post">
-          { (!hotposts)||(page==1 && isSkelton) ? (
+          {(isSkelton && hotposts.length == 0) ? (
             <Postskelton />
           ) : (
             hotposts.map((post) => (
-                <Posts
-                  key={post.id}
-                  id={post.id}
-                  post={post}
-                  title={post.title}
-                  body={post.body}
-                  media={post.img}
-                  countComment={post.comments?.length}
-                  createdAt={post.createdAt}
-                  user={post?.user}
-                  upvotes={post?.upvotes}
-                />
-              )
+              <Posts
+                key={post.id}
+                id={post.id}
+                post={post}
+                title={post.title}
+                topic={topic}
+                body={post.body}
+                media={post.img}
+                countComment={post.comments?.length}
+                createdAt={post.createdAt}
+                user={post?.user}
+                upvotes={post?.upvotes}
+              />
+            )
             )
           )}
         </div>
-    </InfiniteScroll>
+      </InfiniteScroll>
     </div>
-        
-    )
+
+                </>
+  )
 }
 
 export default HotTopicPosts
diff --git a/frontend/src/pages/Overview.jsx b/frontend/src/pages/Overview.jsx
index c17fb82..ec62220 100644
--- a/frontend/src/pages/Overview.jsx
+++ b/frontend/src/pages/Overview.jsx
@@ -114,6 +114,7 @@ const Overview = () => {
                       key={`post-${e.id}-${uuidv4()}`}
                       inRoom={e.subCommunity}
                       room={e.room}
+                      topic={e.topic}
                       id={e.id}
                       title={e.title}
                       body={e.body}
diff --git a/frontend/src/pages/ProfileComments.jsx b/frontend/src/pages/ProfileComments.jsx
index 3ee39f8..45d9db4 100644
--- a/frontend/src/pages/ProfileComments.jsx
+++ b/frontend/src/pages/ProfileComments.jsx
@@ -260,7 +260,7 @@ export const UserComment = ({ comment }) => {
 
         <div className="flex  items-center w-full gap-2">
           <div className="flex flex-wrap items-center">
-            <p className=" exclude-click   text-sm  font-medium overflow-clip">{data.dp ? 'u' : 'q'}/{data.username ? data.username : data?.title}<span>&nbsp;•&nbsp;</span> </p>
+            <p onClick={()=> Navigate(`/u/${data.username}`) } className=" exclude-click  hover:text-green-900 text-sm  font-medium overflow-clip">{data.dp ? 'u' : 'q'}/{data.username ? data.username : data?.title}<span>&nbsp;•&nbsp;</span> </p>
 
             <span style={{ wordBreak: 'break-word' }} className=' hover:underline hover:text-blue-950 whitespace-pre-wrap  text-xs overflow-clip'>{comment.post.title}</span>
 
@@ -273,7 +273,7 @@ export const UserComment = ({ comment }) => {
         <header className=' flex items-center justify-stretch flex-wrap whitespace-pre-wrap leading-3'>
           <span className='exclude-click text-sm font-mono font-semibold'>{comment?.user.username}</span>
           <span className=' text-xs'>{comment.parentId ? `  replied to  ` : '  commented  '}</span>
-          <span className='exclude-click text-sm font-mono font-semibold'>{comment.parent?.user.username}</span>
+          <span onClick={()=> Navigate(`/u/${comment.parent?.user.username}`)}  className='  exclude-click  hover:text-green-900 text-sm font-mono font-semibold'>{comment.parent?.user.username}</span>
           <span>• </span>
           <span className="text-gray-500 text-[9px] xxs:text-xs  line-clamp-1 overflow-clip">{getTime(comment.createdAt)} ago</span>
         </header>
diff --git a/frontend/src/pages/ProfilePosts.jsx b/frontend/src/pages/ProfilePosts.jsx
index 66a37c8..b94bf81 100644
--- a/frontend/src/pages/ProfilePosts.jsx
+++ b/frontend/src/pages/ProfilePosts.jsx
@@ -95,7 +95,7 @@ const ProfilePosts = () => {
             <div className='py-8'>
                 {(isSkelton && userPost.length === 0) ? <Postskelton /> :
                     userPost.map(post => (
-                        <Posts key={uuidv4()} post={post} inRoom={post.subCommunity} room={post.room} id={post.id} title={post.title} body={post.body} media={post.img} countComment={post.comments?.length} createdAt={post.createdAt} user={post.user} upvotes={post.upvotes} />
+                        <Posts key={uuidv4()} post={post} topic={post.topic} inRoom={post.subCommunity} room={post.room} id={post.id} title={post.title} body={post.body} media={post.img} countComment={post.comments?.length} createdAt={post.createdAt} user={post.user} upvotes={post.upvotes} />
                     ))
                 }
             </div>