diff --git a/frontend/app/chat/page.tsx b/frontend/app/chat/page.tsx
index 748111d..b58f641 100644
--- a/frontend/app/chat/page.tsx
+++ b/frontend/app/chat/page.tsx
@@ -2,6 +2,8 @@
 
 import { useState, useEffect, useRef } from "react";
 import { io, Socket } from "socket.io-client";
+import EmojiPicker from "emoji-picker-react";
+import { Smile, Paperclip, Mic, Square } from "lucide-react";
 
 type Message = {
   id?: string;
@@ -9,6 +11,8 @@ type Message = {
   text: string;
   time?: string;
   status?: string;
+  image?: string;
+  audio?: string;
   reactions?: { [emoji: string]: number };
 };
 
@@ -18,6 +22,13 @@ export default function ChatPage() {
   const [username, setUsername] = useState("");
   const [typingUser, setTypingUser] = useState("");
   const [onlineUsers, setOnlineUsers] = useState<string[]>([]);
+  const [showEmojiPicker, setShowEmojiPicker] = useState(false);
+  const [selectedImage, setSelectedImage] = useState<string | null>(null);
+  const [isRecording, setIsRecording] = useState(false);
+const [audioBlob, setAudioBlob] = useState<string | null>(null);
+
+const mediaRecorderRef = useRef<MediaRecorder | null>(null);
+const audioChunksRef = useRef<Blob[]>([]);
 
   const socketRef = useRef<Socket | null>(null);
   const typingTimeoutRef = useRef<any>(null);
@@ -48,6 +59,9 @@ export default function ChatPage() {
 
 // NEW MESSAGE
 socket.on("newMessage", (msg) => {
+  // prevent duplicate message for sender
+  if (msg.username === username) return;
+
   setMessages((prev) => [
     ...prev,
     {
@@ -59,7 +73,6 @@ socket.on("newMessage", (msg) => {
     },
   ]);
 
-  //  new logic
   if (!isAtBottomRef.current) {
     setUnreadCount((prev) => prev + 1);
   }
@@ -91,14 +104,10 @@ socket.on("newMessage", (msg) => {
       );
     });
     socket.on("reactionUpdate", ({ messageId, reactions }) => {
-  setMessages((prev) =>
-    prev.map((msg) =>
-      msg.id === messageId
-        ? { ...msg, reactions }
-        : msg
-    )
-  );
-});
+      setMessages((prev) =>
+      prev.map((msg) =>
+      msg.id === messageId ? { ...msg, reactions } : msg ));
+    });
 
     return () => {
       socket.disconnect();
@@ -119,7 +128,7 @@ socket.on("newMessage", (msg) => {
     }
   }, [messages]);
 
-  // MARK ONLY LAST MESSAGE AS SEEN (FIXED)
+  // MARK ONLY LAST MESSAGE AS SEEN 
   useEffect(() => {
     if (!socketRef.current) return;
 
@@ -131,18 +140,42 @@ socket.on("newMessage", (msg) => {
 
   // SEND
   async function handleSend() {
-    if (!input.trim() || !username.trim()) return;
-
-    await fetch("http://localhost:5000/api/chat", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({ text: input, username }),
-    });
+  if ((!input.trim() && !selectedImage && !audioBlob) || !username.trim()) return;
+
+  const localMessage: Message = {
+  id: Date.now().toString(),
+  user: username,
+  text: input,
+  image: selectedImage || undefined,
+  audio: audioBlob || undefined,
+  time: new Date().toLocaleTimeString(),
+  status: "sent",
+};
 
-    setInput("");
-  }
+  // immediately show message in UI
+  setMessages((prev) => [...prev, localMessage]);
+
+  // send text to backend
+  await fetch("http://localhost:5000/api/chat", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      text: input,
+      username,
+    }),
+  });
+
+  // clear inputs
+  setInput("");
+  setSelectedImage(null);
+  setAudioBlob(null);
+  // auto scroll
+  bottomRef.current?.scrollIntoView({
+    behavior: "smooth",
+  });
+}
 
   // TYPING
   function handleTyping(e: any) {
@@ -152,20 +185,73 @@ socket.on("newMessage", (msg) => {
       socketRef.current.emit("typing", username);
     }
   }
-  function handleReact(messageId: string | undefined, emoji: string) {
-  if (!messageId) return;
+  //emoji select function
+  function handleEmojiClick(emojiData: any) {
+    setInput((prev) => prev + emojiData.emoji);
+    setShowEmojiPicker(false);
+  }
+  function handleImageUpload(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+
+    if (!file) return;
+
+        const imageUrl = URL.createObjectURL(file);
+        setSelectedImage(imageUrl);
+  }
+
+  async function startRecording() {
+  try {
+    const stream = await navigator.mediaDevices.getUserMedia({
+      audio: true,
+    });
+
+    const mediaRecorder = new MediaRecorder(stream);
 
-  // send reaction to server
-  socketRef.current?.emit("react", { messageId, emoji, username,});
+    mediaRecorderRef.current = mediaRecorder;
+
+    audioChunksRef.current = [];
+
+    mediaRecorder.ondataavailable = (event) => {
+      audioChunksRef.current.push(event.data);
+    };
+
+    mediaRecorder.onstop = () => {
+      const audioBlob = new Blob(audioChunksRef.current, {
+        type: "audio/webm",
+      });
+
+      const audioUrl = URL.createObjectURL(audioBlob);
+
+      setAudioBlob(audioUrl);
+    };
+
+    mediaRecorder.start();
+
+    setIsRecording(true);
+  } catch (error) {
+    console.error("Recording failed:", error);
+  }
+}
+function stopRecording() {
+  mediaRecorderRef.current?.stop();
+  setIsRecording(false);
 }
 
+  function handleReact(messageId: string | undefined, emoji: string) {
+    if (!messageId) return;
+
+    // send reaction to server
+    socketRef.current?.emit("react", { messageId, emoji, username,});
+  }
+
 
   
 
 
 return (
-  <div className="mx-auto flex max-w-6xl flex-col gap-6 p-6 md:p-10 relative">
+  <div className="mx-auto relative flex max-w-6xl flex-col gap-6 p-6 md:p-10">
 
+    {/* HEADER */}
     <div className="rounded-3xl border border-(--line) bg-white p-6 shadow-sm">
       <h1 className="text-3xl font-bold text-slate-800">
         Team Chat
@@ -188,136 +274,267 @@ return (
     <div className="flex items-center gap-2 text-sm text-slate-600">
       <div className="h-2 w-2 rounded-full bg-green-500"></div>
 
-      <span className="font-medium">
-        Online:
-      </span>
-    <span>
-      {onlineUsers.join(", ")}
-    </span>
-  </div>
+      <span className="font-medium">Online:</span>
+
+      <span>{onlineUsers.join(", ")}</span>
+    </div>
 
     {/* MESSAGES */}
     <div
-  ref={containerRef}
-  onScroll={() => {
-    const el = containerRef.current;
-    if (!el) return;
+      ref={containerRef}
+      onScroll={() => {
+        const el = containerRef.current;
+        if (!el) return;
 
-    const threshold = 100;
+        const threshold = 100;
 
-    const atBottom =
-      el.scrollHeight - el.scrollTop - el.clientHeight < threshold;
+        const atBottom =
+          el.scrollHeight - el.scrollTop - el.clientHeight < threshold;
 
-    isAtBottomRef.current = atBottom;
+        isAtBottomRef.current = atBottom;
 
-    //  reset unread when user reaches bottom
-    if (atBottom) {
-      setUnreadCount(0);
-    }
-  }}
-  className="h-[500px] overflow-y-auto rounded-3xl border border-(--line) bg-white p-5 shadow-sm"
->
-        {messages.map((msg, i) => {
-          const prevMsg = messages[i - 1];
-          const isSameUser = prevMsg && prevMsg.user === msg.user;
-          const isMe = msg.user === username;
-
-          return (
+        if (atBottom) {
+          setUnreadCount(0);
+        }
+      }}
+      className="h-[500px] overflow-y-auto rounded-3xl border border-(--line) bg-white p-5 shadow-sm"
+    >
+      {messages.map((msg, i) => {
+        const prevMsg = messages[i - 1];
+        const isSameUser = prevMsg && prevMsg.user === msg.user;
+        const isMe = msg.user === username;
+
+        return (
+          <div
+            key={i}
+            className={`flex ${
+              isMe ? "justify-end" : "justify-start"
+            } ${isSameUser ? "mt-1" : "mt-4"}`}
+          >
             <div
-  key={i}
-  className={`flex ${isMe ? "justify-end" : "justify-start"} ${
-    isSameUser ? "mt-0.5" : "mt-3"
-  }`}
->
-              <div
-                className={`max-w-sm rounded-2xl p-4 shadow-sm ${
-                  isMe
+              className={`w-fit max-w-[320px] rounded-2xl p-4 shadow-sm ${
+                isMe
                   ? `bg-teal-700 text-white ${
-                    isSameUser
-                    ? "rounded-lg rounded-tr-2xl"
-                    : "rounded-2xl rounded-br-md"
-                  }`
+                      isSameUser
+                        ? "rounded-tr-md"
+                        : "rounded-br-md"
+                    }`
                   : `bg-slate-100 text-slate-800 ${
-                        isSameUser
-                        ? "rounded-lg rounded-tl-2xl"
-                        : "rounded-2xl rounded-bl-md"
-                      }`
-                    }`}
->
-                {/* Show name only for others */}
-                {!isMe && !isSameUser && (
-                      <p className="font-semibold text-sm">{msg.user}</p>
-                )}
-
-                <p>{msg.text}</p>
-                <div className="flex gap-2 mt-1 text-sm">
-                  {["👍", "❤️", "😂"].map((emoji) => (
-                    <button
-                      key={emoji}
-                      onClick={() => handleReact(msg.id, emoji)}
-                      className="hover:scale-110 transition"
-                      >
-                        {emoji}
-                      </button>
-                    ))}
-                  {/* counts will show here*/}
-                    {msg.reactions &&
-                      Object.entries(msg.reactions).filter(([_, count]) => count > 0).map(([emoji, count]) => (
-                        <span
+                      isSameUser
+                        ? "rounded-tl-md"
+                        : "rounded-bl-md"
+                    }`
+              }`}
+            >
+              {/* USERNAME */}
+              {!isMe && !isSameUser && (
+                <p className="mb-1 text-sm font-semibold">
+                  {msg.user}
+                </p>
+              )}
+
+              {/* TEXT */}
+              {msg.text && (
+                <p className="break-words text-sm leading-relaxed">
+                  {msg.text}
+                </p>
+              )}
+
+              {/* IMAGE */}
+              {msg.image && msg.image.startsWith("blob:") && (
+                <img src={msg.image} alt="Shared image" className="mt-3 max-h-52 max-w-[240px] rounded-xl object-cover"/>
+              )}
+
+              {/* AUDIO */}
+              {msg.audio && msg.audio.startsWith("blob:") && (
+                <audio
+                  controls
+                  className="mt-3 w-[220px]"
+                >
+                  <source
+                    src={msg.audio}
+                    type="audio/webm"
+                  />
+                </audio>
+              )}
+
+              {/* REACTIONS */}
+              <div className="mt-2 flex flex-wrap gap-2 text-sm">
+                {["👍", "❤️", "😂"].map((emoji) => (
+                  <button
+                    key={emoji}
+                    onClick={() =>
+                      handleReact(msg.id, emoji)
+                    }
+                    className="transition hover:scale-110"
+                  >
+                    {emoji}
+                  </button>
+                ))}
+
+                {msg.reactions &&
+                  Object.entries(msg.reactions)
+                    .filter(([_, count]) => count > 0)
+                    .map(([emoji, count]) => (
+                      <span
                         key={emoji}
-                        className={`px-2 py-0.5 rounded-full text-xs ${isMe ? "bg-white text-black" : "bg-gray-200"}`}
+                        className={`rounded-full px-2 py-0.5 text-xs ${
+                          isMe
+                            ? "bg-white text-black"
+                            : "bg-gray-200"
+                        }`}
                       >
                         {emoji} {count}
                       </span>
                     ))}
-                  </div>
-
-                <p className="mt-2 text-right text-[11px] opacity-60">
-                  {msg.time} {msg.status === "seen" ? "✓✓" : "✓"}
-                </p>
               </div>
+
+              {/* TIME */}
+              <p className="mt-2 text-right text-[11px] opacity-60">
+                {msg.time}{" "}
+                {msg.status === "seen" ? "✓✓" : "✓"}
+              </p>
             </div>
-          );
-        })}
+          </div>
+        );
+      })}
 
-        <div ref={bottomRef}></div>
-      </div>
-      {unreadCount > 0 && (
-  <div className="absolute bottom-20 left-1/2 -translate-x-1/2 z-10">
-    <button
-      onClick={() => {
-        bottomRef.current?.scrollIntoView({ behavior: "smooth" });
-        setUnreadCount(0);
-      }}
-      className="bg-blue-500 text-white px-4 py-1 rounded-full text-sm shadow hover:bg-blue-600 transition"
-    >
-      {unreadCount} New Message{unreadCount > 1 ? "s" : ""}
-    </button>
-  </div>
-)}
+      <div ref={bottomRef}></div>
+    </div>
 
-      {/* TYPING */}
-      {typingUser && typingUser !== username && (
-        <p className="text-sm italic mt-1">
-          {typingUser} is typing...
-        </p>
-      )}
+    {/* UNREAD MESSAGE */}
+    {unreadCount > 0 && (
+      <div className="absolute bottom-24 left-1/2 z-10 -translate-x-1/2">
+        <button
+          onClick={() => {
+            bottomRef.current?.scrollIntoView({
+              behavior: "smooth",
+            });
+
+            setUnreadCount(0);
+          }}
+          className="rounded-full bg-blue-500 px-4 py-1 text-sm text-white shadow transition hover:bg-blue-600"
+        >
+          {unreadCount} New Message
+          {unreadCount > 1 ? "s" : ""}
+        </button>
+      </div>
+    )}
 
-      {/* INPUT */}
-      <div className="mt-4 flex gap-3">
-        <input
-          value={input}
-          onChange={handleTyping}
-          placeholder="Type message"
-          className="flex-1 rounded-2xl border border-(--line) bg-white px-4 py-3 text-sm shadow-sm outline-none focus:border-slate-400"
+    {/* TYPING */}
+    {typingUser && typingUser !== username && (
+      <p className="text-sm italic text-slate-500">
+        {typingUser} is typing...
+      </p>
+    )}
+
+    {/* IMAGE PREVIEW */}
+    {selectedImage && (
+      <div className="rounded-2xl border border-(--line) bg-white p-3 shadow-sm">
+        <img
+          src={selectedImage}
+          alt="Preview"
+          className="max-h-40 rounded-xl object-cover"
         />
+      </div>
+    )}
+
+    {/* RECORDING */}
+    {isRecording && (
+      <p className="animate-pulse text-sm font-medium text-red-500">
+        Recording voice message...
+      </p>
+    )}
+
+    {/* AUDIO PREVIEW */}
+    {audioBlob && (
+      <div className="rounded-2xl border border-(--line) bg-white p-4 shadow-sm">
+        <audio controls className="w-full">
+          <source
+            src={audioBlob}
+            type="audio/webm"
+          />
+        </audio>
+      </div>
+    )}
+
+    {/* INPUT SECTION */}
+    <div className="relative mt-4 flex gap-3">
+
+      {/* EMOJI */}
+      <div className="relative">
         <button
-          onClick={handleSend}
-          className="rounded-2xl bg-teal-700 px-6 py-3 text-sm font-medium text-white shadow-sm transition hover:bg-teal-800"
+          onClick={() =>
+            setShowEmojiPicker((prev) => !prev)
+          }
+          className="flex h-full items-center rounded-2xl border border-(--line) bg-white px-4 shadow-sm transition hover:bg-slate-50"
         >
-          Send
+          <Smile
+            size={20}
+            className="text-slate-600"
+          />
         </button>
+
+        {showEmojiPicker && (
+          <div className="absolute bottom-14 left-0 z-50">
+            <EmojiPicker
+              onEmojiClick={handleEmojiClick}
+            />
+          </div>
+        )}
       </div>
+
+      {/* FILE UPLOAD */}
+      <label className="flex cursor-pointer items-center rounded-2xl border border-(--line) bg-white px-4 shadow-sm transition hover:bg-slate-50">
+        <Paperclip
+          size={20}
+          className="text-slate-600"
+        />
+
+        <input
+          type="file"
+          accept="image/*"
+          onChange={handleImageUpload}
+          className="hidden"
+        />
+      </label>
+
+      {/* VOICE */}
+      <button
+        onClick={
+          isRecording
+            ? stopRecording
+            : startRecording
+        }
+        className={`flex items-center rounded-2xl border border-(--line) bg-white px-4 shadow-sm transition hover:bg-slate-50 ${
+          isRecording
+            ? "text-red-500"
+            : "text-slate-600"
+        }`}
+      >
+        {isRecording ? (
+          <Square size={20} />
+        ) : (
+          <Mic size={20} />
+        )}
+      </button>
+
+      {/* MESSAGE INPUT */}
+      <input
+        value={input}
+        onChange={handleTyping}
+        placeholder="Type message"
+        className="flex-1 rounded-2xl border border-(--line) bg-white px-4 py-3 text-sm shadow-sm outline-none focus:border-slate-400"
+      />
+
+      {/* SEND BUTTON */}
+      <button
+        onClick={handleSend}
+        className="rounded-2xl bg-teal-700 px-6 py-3 text-sm font-medium text-white shadow-sm transition-all duration-200 hover:scale-105 hover:bg-teal-800"
+      >
+        Send
+      </button>
     </div>
-  );
+  </div>
+);
 }
\ No newline at end of file
diff --git a/frontend/package.json b/frontend/package.json
index f8b7323..9db6a4b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,6 +15,7 @@
     "@supabase/supabase-js": "^2.105.1",
     "axios": "^1.15.0",
     "debug": "^4.4.3",
+    "emoji-picker-react": "^4.19.1",
     "frontend": "file:",
     "lightningcss": "^1.32.0",
     "lucide-react": "^1.14.0",
diff --git a/package-lock.json b/package-lock.json
index 75670e4..c5e49e5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "@supabase/supabase-js": "^2.105.1",
         "axios": "^1.15.0",
         "debug": "^4.4.3",
+        "emoji-picker-react": "^4.19.1",
         "frontend": "file:",
         "lightningcss": "^1.32.0",
         "lucide-react": "^1.14.0",
@@ -5094,6 +5095,21 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/emoji-picker-react": {
+      "version": "4.19.1",
+      "resolved": "https://registry.npmjs.org/emoji-picker-react/-/emoji-picker-react-4.19.1.tgz",
+      "integrity": "sha512-BmDdqInKFVYJpv7qS9WI6L9656cDAC+FkDvUjJds56nKHbaVTBNeDmLwKBytRnzu37zWHs9Isg7gt5PT43y6xA==",
+      "license": "MIT",
+      "dependencies": {
+        "flairup": "1.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
     "node_modules/engine.io-client": {
       "version": "6.6.4",
       "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.6.4.tgz",
@@ -5198,6 +5214,12 @@
       "integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==",
       "license": "MIT"
     },
+    "node_modules/flairup": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/flairup/-/flairup-1.0.0.tgz",
+      "integrity": "sha512-IKlE+pNvL2R+kVL1kEhUYqRxVqeFnjiIvHWDMLFXNaqyUdFXQM2wte44EfMYJNHkW16X991t2Zg8apKkhv7OBA==",
+      "license": "MIT"
+    },
     "node_modules/follow-redirects": {
       "version": "1.16.0",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz",