diff --git a/components/CommentButton.tsx b/components/CommentButton.tsx
index 8780aa4..fa059f0 100644
--- a/components/CommentButton.tsx
+++ b/components/CommentButton.tsx
@@ -17,7 +17,7 @@ const CommentButton = ({ blog, handleComment }: CommentButtonProps) => {
 
   return (
     <>
-      <div className="flex items-center justify-center hover:text-blue-500 transition cursor-pointer">
+      <div className="flex items-center justify-center hover:text-blue-500 transition cursor-pointer text-gray-400">
         <FaRegComment onClick={onOpen} />
         <span className="ml-2">{blogsLength.length > 0 ? blogsLength.length : ""}</span>
       </div>
diff --git a/components/LikeButton.tsx b/components/LikeButton.tsx
index b2ae258..8298257 100644
--- a/components/LikeButton.tsx
+++ b/components/LikeButton.tsx
@@ -21,6 +21,7 @@ const LikeButton = ({ blog, handleLike }: LikeButtonProps) => {
     if (!isLiked) {
       setIsLiked(true);
       setOptimisticLike(1);
+
       handleLike(blog);
     }
   };
@@ -38,13 +39,16 @@ const LikeButton = ({ blog, handleLike }: LikeButtonProps) => {
   const Icon = isLiked ? AiFillHeart : AiOutlineHeart;
 
   return (
-    <div className="group flex items-center hover:text-red-600 transition cursor-pointer">
+    <div className="group flex items-center hover:text-red-500 transition cursor-pointer text-gray-400">
       <Icon
         onClick={likeFn}
         size={20}
-        color={isLiked ? "red" : "white"}
+        // color={isLiked ? "red" : "white"}
+        className={`hover:text-red-500 ${isLiked ? "text-red-500" : ""}`}
       />
-      <span className="ml-2">{blog?.likes.length + optimisticLike}</span>
+      <span className="ml-2 text-sm">
+        {blog?.likes.length + optimisticLike !== 0 ? blog?.likes.length + optimisticLike : null}
+      </span>
     </div>
   );
 };
diff --git a/components/PostModal.tsx b/components/PostModal.tsx
index d29fb8a..92109cf 100644
--- a/components/PostModal.tsx
+++ b/components/PostModal.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import React, { useRef } from "react";
 import { useState } from "react";
 import { useSession } from "next-auth/react";
 import {
@@ -16,6 +16,8 @@ import {
 import { CircularProgress } from "@nextui-org/progress";
 import toast from "react-hot-toast";
 import { PostBlog } from "@/actions/actions";
+import { Smile } from "lucide-react";
+import EmojiPicker from "emoji-picker-react";
 
 const InitialState = {
   title: "",
@@ -32,9 +34,13 @@ interface PostModalProps {
 }
 
 export default function PostModal({ isOpen, onOpenChange, setfunction }: PostModalProps) {
+  const [isEmojiOpen, setIsEmojiOpen] = useState(false);
   const [formData, setFormData] = useState(InitialState);
   const [posting, setPosting] = useState(false);
   const { data: session } = useSession();
+
+  const contentRef = useRef<HTMLTextAreaElement>(null);
+
   const handleChange = (e: any) => {
     const { name, value } = e.target;
     setFormData((prevValue) => ({ ...prevValue, [name]: value }));
@@ -55,6 +61,13 @@ export default function PostModal({ isOpen, onOpenChange, setfunction }: PostMod
     }
   };
 
+  const handleEmojiClick = (emoji: string) => {
+    setFormData((prevFormData) => ({
+      ...prevFormData,
+      content: prevFormData.content + emoji,
+    }));
+  };
+
   const resetForm = () => {
     setFormData(InitialState);
   };
@@ -75,7 +88,7 @@ export default function PostModal({ isOpen, onOpenChange, setfunction }: PostMod
                   Jot down your thought
                 </h2>
               </ModalHeader>
-              <ModalBody>
+              <ModalBody className="relative">
                 <div className="w-full flex flex-col justify-center items-center gap-y-4">
                   <div className="p-1 flex flex-col w-full gap-y-2 ">
                     <Input
@@ -99,6 +112,7 @@ export default function PostModal({ isOpen, onOpenChange, setfunction }: PostMod
                   </div>
                   <div className="p-1 flex flex-col w-full gap-y-2">
                     <Textarea
+                      ref={contentRef}
                       size="lg"
                       minRows={10}
                       name="content"
@@ -110,7 +124,23 @@ export default function PostModal({ isOpen, onOpenChange, setfunction }: PostMod
                   </div>
                 </div>
               </ModalBody>
-              <ModalFooter>
+              <div className={`${isEmojiOpen ? "block" : "hidden"} absolute bottom-20 left-10`}>
+                <EmojiPicker
+                  open={true}
+                  onEmojiClick={({ emoji }) => handleEmojiClick(emoji)}
+                />
+              </div>
+              <ModalFooter className="items-center">
+                <div className="me-auto w-full box-border ">
+                  <Smile
+                    className="h-15 w-15 "
+                    onClick={() => {
+                      setIsEmojiOpen((prev) => {
+                        return !prev;
+                      });
+                    }}
+                  />
+                </div>
                 <Button
                   color="danger"
                   variant="light"
diff --git a/lib/utils.ts b/lib/utils.ts
index d084cca..365058c 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -1,6 +1,6 @@
-import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }
diff --git a/package.json b/package.json
index 21cca33..6e42e9c 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "autoprefixer": "10.4.14",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "emoji-picker-react": "^4.8.0",
     "eslint": "8.46.0",
     "eslint-config-next": "13.4.13",
     "framer-motion": "^10.15.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 65df8b2..4192a74 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -44,6 +44,9 @@ dependencies:
   clsx:
     specifier: ^2.1.0
     version: 2.1.0
+  emoji-picker-react:
+    specifier: ^4.8.0
+    version: 4.8.0(react@18.2.0)
   eslint:
     specifier: 8.46.0
     version: 8.46.0
@@ -3818,6 +3821,16 @@ packages:
     resolution: {integrity: sha512-J2f/3iIIm3Mo0npneITZ2UPe4B1bg8fTNrFjD8715F/k1BvbviRuqYGkET1PgprrczXYTHFvotbBOmUp6KE0uA==}
     dev: false
 
+  /emoji-picker-react@4.8.0(react@18.2.0):
+    resolution: {integrity: sha512-gKv+NOM2FjNAokXqlhhmDJMLp1hBTx4X+OoYrPAK1qpTVBseoeybtqPBR1NXixTow7Vbxv1WOuI3SSTiEB089A==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: '>=16'
+    dependencies:
+      flairup: 0.0.38
+      react: 18.2.0
+    dev: false
+
   /emoji-regex@9.2.2:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
     dev: false
@@ -4253,6 +4266,10 @@ packages:
       path-exists: 4.0.0
     dev: false
 
+  /flairup@0.0.38:
+    resolution: {integrity: sha512-W9QA5TM7eYNlGoBYwfVn/o6v4yWBCxfq4+EJ5w774oFeyWvVWnYq6Dgt4CJltjG9y/lPwbOqz3jSSr8K66ToGg==}
+    dev: false
+
   /flat-cache@3.2.0:
     resolution: {integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==}
     engines: {node: ^10.12.0 || >=12.0.0}