diff --git a/frontend/src/components/PostCard.tsx b/frontend/src/components/PostCard.tsx
index 2d83025..7aae143 100644
--- a/frontend/src/components/PostCard.tsx
+++ b/frontend/src/components/PostCard.tsx
@@ -9,7 +9,7 @@ import toast from "react-hot-toast";
 import { Link } from "react-router-dom";
 import { FaEdit } from "react-icons/fa";
 import bgHero from "../assets/bgHero.png";
-import { MdFavorite,MdFavoriteBorder } from "react-icons/md";
+import { MdFavorite, MdFavoriteBorder } from "react-icons/md";
 
 type Props = {
   post: IPost;
@@ -184,74 +184,77 @@ const PostCard = ({ post, onDelete, currentUser }: Props) => {
   };
 
   return (
-    <Link to={`/app/posts/${post.id}`}
-      key={post.id}
-      className="text-[#000435] bg-white dark:text-white dark:bg-blue-950 border border-gray-600 p-6 rounded-lg shadow-lg hover:shadow-2xl hover:border-blue-500 hover:-translate-y-2 transition-transform duration-300 ease-in-out"style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}
-    >
-      <div className="flex justify-between items-center">
-        <h2 className="text-xl font-bold mb-3 text-[#c94aff] bg-white dark:text-[#c94aff] dark:bg-blue-950">{post.title}</h2>
-        {isFavorite ? (
-          <MdFavorite
-            onClick={handleRemoveFromFavorite}
-            size={33}
-            className="cursor-pointer text-[#fe4c4c]"
-          />
-        ) : (
-          <MdFavoriteBorder
-            onClick={handleAddToFavorite}
-            size={33}
-            className="cursor-pointer text-[#e74e4e] dark:text-white"
-          />
-        )}
-      </div>
-      <p className="text-[#000435] bg-white dark:text-white dark:bg-blue-950 mb-4">
-        {post.description.length > 100
-          ? `${post.description.slice(0, 100)}...`
-          : post.description}
-      </p>
-      <p className="text-[#000435] bg-white dark:text-white dark:bg-blue-950 mb-4">By : 
-        <Link to={`/app/profile/${post.author.id}`} data-tooltip-content={`View ${post.author.username} profile 👀`} data-tooltip-id="my-tooltip" className="text-base">
-        <strong className="text-sky-500">
-            {' '} @{post.author.username}{' '}
-        </strong>
-        </Link>
-      </p>
-      
-      <div className="flex flex-wrap gap-2">
-            {post.tags.map((tag, index) => (
-              <Link
-                to={`/app/posts?tags=${tag}`}
-                key={index}
-                className="inline-flex items-center px-2 py-1 border-2 border-[#5f67de] text-[#5f67de] font-semibold dark:border-white dark:text-white dark:bg-transparent text-sm rounded-md transition-colors duration-300 hover:bg-[#5f67de] hover:text-white dark:hover:bg-white dark:hover:text-black"
-              >
-                {tag}
-              </Link>
-            ))}
-          </div>
-      <div className="flex justify-between mt-1 ">
-        <button>
-        {renderReactions()}
-        </button>
-        {currentUser && currentUser.id === post.author.id && (
-          <div className="flex space-x-2">
-            <button>
+    <Link to={`/app/posts/${post.id}`}>
+      <div
+        key={post.id}
+        className="text-[#000435] bg-white dark:text-white dark:bg-blue-950 border border-gray-600 p-6 rounded-lg shadow-lg hover:shadow-2xl hover:border-blue-500 hover:-translate-y-2 transition-transform duration-300 ease-in-out" style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}
+      >
+        <div className="flex justify-between items-center">
+          <h2 className="text-xl font-bold mb-3 text-[#c94aff] dark:text-[#c94aff] ">{post.title}</h2>
+          {isFavorite ? (
+            <MdFavorite
+              onClick={handleRemoveFromFavorite}
+              size={33}
+              className="cursor-pointer text-[#fe4c4c]"
+            />
+          ) : (
+            <MdFavoriteBorder
+              onClick={handleAddToFavorite}
+              size={33}
+              className="cursor-pointer text-[#e74e4e] dark:text-white"
+            />
+          )}
+        </div>
+        <p className="text-[#000435] dark:text-white  mb-4">
+          {post.description.length > 100
+            ? `${post.description.slice(0, 100)}...`
+            : post.description}
+        </p>
+        <p className="text-[#000435] dark:text-white  mb-4">By :
+          <Link to={`/app/profile/${post.author.id}`} data-tooltip-content={`View ${post.author.username} profile 👀`} data-tooltip-id="my-tooltip" className="text-base">
+            <strong className="text-sky-500">
+              {' '} @{post.author.username}{' '}
+            </strong>
+          </Link>
+        </p>
+
+        <div className="flex flex-wrap gap-2">
+          {post.tags.map((tag, index) => (
             <Link
-              to={`/app/posts/edit/${post.id}`}
-              className="justify-end mt-4 inline-block text-blue-400 hover:text-blue-300 transition-colors duration-200 border-2 border-blue-500 hover:border-blue-300 p-2 rounded-3xl"
+              to={`/app/posts?tags=${tag}`}
+              key={index}
+              className="inline-flex items-center px-2 py-1 border-2 border-[#5f67de] text-[#5f67de] font-semibold dark:border-white dark:text-white dark:bg-transparent text-sm rounded-md transition-colors duration-300 hover:bg-[#5f67de] hover:text-white dark:hover:bg-white dark:hover:text-black"
             >
-              <FaEdit size={23} />
+              {tag}
             </Link>
-            </button>
-            <button
-              onClick={handleDelete}
-              disabled={isDeleting}
-              className="" 
-            > <Link className="justify-end mt-4 inline-block text-red-500 hover:text-red-400 transition-colors duration-200 border-2 border-red-500 dark:border-red-500 hover:border-red-400 p-2 rounded-3xl" to={""}>
-                {isDeleting ? "Deleting..." : <MdDeleteOutline  size={23} />}
+          ))}
+        </div>
+        <div className="flex justify-between mt-1 ">
+        <button>
+        {renderReactions()}
+        </button>
+          {currentUser && currentUser.id === post.author.id && (
+            <div className="flex space-x-2">
+              <button>
+                <Link
+                  to={`/app/posts/edit/${post.id}`}
+                  className="justify-end mt-4 inline-block text-blue-400 hover:text-blue-300 transition-colors duration-200 border-2 border-blue-500 hover:border-blue-300 p-2 rounded-3xl"
+                >
+                  <FaEdit size={23} />
                 </Link>
-            </button>
-          </div>
-        )}
+              </button>
+              <button
+                onClick={handleDelete}
+                disabled={isDeleting}
+                className=""
+              > <Link className="justify-end mt-4 inline-block text-red-500 hover:text-red-400 transition-colors duration-200 border-2 border-red-500 dark:border-red-500 hover:border-red-400 p-2 rounded-3xl" to={""}>
+                  {isDeleting ? "Deleting..." : <MdDeleteOutline size={23} />}
+                </Link>
+              </button>
+            </div>
+          )}
+        </div>
+        {/* {renderReactions()} */}
       </div>
     </Link>
   );
diff --git a/frontend/src/pages/EditPost.tsx b/frontend/src/pages/EditPost.tsx
index e6f0af9..f0efb0b 100644
--- a/frontend/src/pages/EditPost.tsx
+++ b/frontend/src/pages/EditPost.tsx
@@ -42,7 +42,7 @@ const EditPost = () => {
 
   const handleAddTag = () => {
     if (tagInput.length > 0 && !post.tags.includes(tagInput)) {
-      setPost({ ...post, tags: [...post.tags, tagInput] });
+      setPost({ ...post, tags: [...post.tags, tagInput.toLowerCase()] });
       setTagInput("");
     }
   };
diff --git a/frontend/src/pages/NewPost.tsx b/frontend/src/pages/NewPost.tsx
index 7ae333d..d0530d9 100644
--- a/frontend/src/pages/NewPost.tsx
+++ b/frontend/src/pages/NewPost.tsx
@@ -33,7 +33,7 @@ const NewPost = () => {
 
   const handleAddTag = () => {
     if (tagInput.length > 0 && !tags.includes(tagInput)) {
-      setTags([...tags, tagInput]);
+      setTags([...tags, tagInput.toLowerCase()]);
       setTagInput("");
     }
   };
diff --git a/frontend/src/pages/Posts.tsx b/frontend/src/pages/Posts.tsx
index d55de4a..82977d4 100644
--- a/frontend/src/pages/Posts.tsx
+++ b/frontend/src/pages/Posts.tsx
@@ -23,7 +23,7 @@ const Posts = () => {
     removeTag: deleteTag,
     searchQuery,
     setSearchQuery,
-    fetchPosts, 
+    fetchPosts,
   } = usePosts({
     initialPage: 1,
     pageSize: 12,
@@ -33,9 +33,12 @@ const Posts = () => {
   const [tagInput, setTagInput] = useState("");
   const [filterTags, setFilterTags] = useState<string[]>([]);
   const filterRef = useRef<HTMLDivElement>(null);
-
   const filteredPosts = posts;
-
+  const allTags = filteredPosts.map(post => post.tags).flat();
+  const uniqueTags = [...new Set(allTags)];
+  const tagsToDisplay = uniqueTags.slice(0, 3);
+  var placeholderTags = tagsToDisplay.length > 0 ? tagsToDisplay.join(", ") : "";
+  placeholderTags = placeholderTags + (uniqueTags.length > 3 ? " ..." : "");
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (filterRef.current && !filterRef.current.contains(event.target as Node)) {
@@ -44,7 +47,7 @@ const Posts = () => {
     };
 
     document.title = "Style Share | Our Posts 📃";
-
+    
     document.addEventListener("mousedown", handleClickOutside);
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
@@ -93,8 +96,8 @@ const Posts = () => {
 
   return (
     <div
-    className="-mt-7 min-h-screen text-[#000435] bg-white dark:text-white dark:bg-[#000435]"
-    style={{
+      className="-mt-7 min-h-screen text-[#000435] bg-white dark:text-white dark:bg-[#000435]"
+      style={{
         backgroundImage: `url(${bgHero})`,
         backgroundSize: "cover",
         backgroundPosition: "center",
@@ -108,7 +111,7 @@ const Posts = () => {
           backgroundPosition: "center",
         }}
       >
-        <h1 className="text-2xl font-semibold mb-4 text-white">Posts</h1>
+        <h1 className="text-2xl font-semibold mb-4 text-black dark:text-white">Posts</h1>
         <div className="w-full flex flex-col sm:flex-row justify-between items-center mb-4 relative space-y-4 sm:space-y-0 sm:space-x-4">
           <div className="flex space-x-4">
             <button
@@ -130,7 +133,7 @@ const Posts = () => {
                   value={tagInput}
                   onChange={(e) => setTagInput(e.target.value)}
                   onKeyDown={handleKeyDown}
-                  placeholder="Add tag"
+                  placeholder={`Add tag${placeholderTags ? ` like ${placeholderTags}` : ""}`}
                   className="p-2 w-full rounded bg-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-gray-500"
                 />
               </div>
@@ -180,56 +183,55 @@ const Posts = () => {
           </div>
         </div>
         {filteredPosts.length === 0 ? (
-          <div className="text-center text-white">No Posts</div>
+          <div className="text-center text-black dark:text-white">No Posts</div>
         ) : (
-          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 w-full">
-            {filteredPosts.map((post) => (
-              <PostCard
-                key={post.id}
-                post={post}
-                currentUser={currentUser}
-                onDelete={handleDelete}
-              />
-            ))}
+          <div>
+            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 w-full">
+              {filteredPosts.map((post) => (
+                <PostCard
+                  key={post.id}
+                  post={post}
+                  currentUser={currentUser}
+                  onDelete={handleDelete}
+                />
+              ))}
+            </div>
+            <div className="flex justify-center items-center mt-4 w-full space-x-2">
+              <button
+                onClick={handlePreviousPage}
+                disabled={page === 1}
+                className={`text-white px-4 py-2 rounded ${page === 1
+                  ? "bg-gray-600 cursor-not-allowed"
+                  : "bg-blue-600 hover:bg-blue-700"
+                  }`}
+              >
+                Previous
+              </button>
+              {Array.from({ length: totalPages }, (_, i) => (
+                <button
+                  key={i}
+                  onClick={() => handlePageClick(i + 1)}
+                  className={`text-white px-4 py-2 rounded ${page === i + 1
+                    ? "bg-blue-500 text-white"
+                    : "bg-blue-600 hover:bg-blue-700"
+                    }`}
+                >
+                  {i + 1}
+                </button>
+              ))}
+              <button
+                onClick={handleNextPage}
+                disabled={page === totalPages}
+                className={`text-white px-6 py-2 rounded ${page === totalPages
+                  ? "bg-gray-600 cursor-not-allowed"
+                  : "bg-blue-600 hover:bg-blue-700"
+                  }`}
+              >
+                Next
+              </button>
+            </div>
           </div>
         )}
-        <div className="flex justify-center items-center mt-4 w-full space-x-2">
-          <button
-            onClick={handlePreviousPage}
-            disabled={page === 1}
-            className={`text-white px-4 py-2 rounded ${
-              page === 1
-                ? "bg-gray-600 cursor-not-allowed"
-                : "bg-blue-600 hover:bg-blue-700"
-            }`}
-          >
-           Previous
-          </button>
-          {Array.from({ length: totalPages }, (_, i) => (
-            <button
-              key={i}
-              onClick={() => handlePageClick(i + 1)}
-              className={`text-white px-4 py-2 rounded ${
-                page === i + 1
-                  ? "bg-blue-500 text-white"
-                  : "bg-blue-600 hover:bg-blue-700"
-              }`}
-            >
-              {i + 1}
-            </button>
-          ))}
-          <button
-            onClick={handleNextPage}
-            disabled={page === totalPages}
-            className={`text-white px-6 py-2 rounded ${
-              page === totalPages
-                ? "bg-gray-600 cursor-not-allowed"
-                : "bg-blue-600 hover:bg-blue-700"
-            }`}
-          >
-           Next
-          </button>
-        </div>
       </div>
     </div>
   );