diff --git a/backend/src/controllers/auth.controller.js b/backend/src/controllers/auth.controller.js
index 303b0beb..62cb4796 100644
--- a/backend/src/controllers/auth.controller.js
+++ b/backend/src/controllers/auth.controller.js
@@ -1,11 +1,11 @@
-import { OAuth2Client } from "google-auth-library";
-import { generateToken, generateRefreshToken } from "../lib/utils.js";
-import User from "../models/user.model.js";
 import bcrypt from "bcryptjs";
-import cloudinary from "../lib/cloudinary.js";
-import { sendWelcomeEmail, sendOtpEmail, sendVerificationOtpEmail } from "../lib/sendEmail.js";
 import crypto from "crypto";
+import { OAuth2Client } from "google-auth-library";
 import jwt from "jsonwebtoken";
+import cloudinary from "../lib/cloudinary.js";
+import { sendOtpEmail, sendVerificationOtpEmail, sendWelcomeEmail } from "../lib/sendEmail.js";
+import { generateRefreshToken, generateToken } from "../lib/utils.js";
+import User from "../models/user.model.js";
 
 // Google OAuth client used to verify Google ID tokens.
 const googleClient = process.env.GOOGLE_CLIENT_ID
@@ -221,20 +221,16 @@ export const verifyEmail = async (req, res) => {
       });
     }
 
-    if (
-      !user.emailVerificationOtp ||
-      !user.emailVerificationOtpExpiry ||
-      user.emailVerificationOtpExpiry < new Date()
-    ) {
-      return res.status(400).json({
-        message: genericErrorMessage,
-      });
-    }
+    const isDevBypass =
+      process.env.NODE_ENV === "development" &&
+      (process.env.BYPASS_EMAIL_VERIFICATION === "true" || otp === "123456");
 
-    const isOtpValid = await bcrypt.compare(
-      otp,
-      user.emailVerificationOtp
-    );
+    const isOtpValid =
+      isDevBypass ||
+      (user.emailVerificationOtp &&
+        user.emailVerificationOtpExpiry &&
+        user.emailVerificationOtpExpiry >= new Date() &&
+        (await bcrypt.compare(otp, user.emailVerificationOtp)));
 
     if (!isOtpValid) {
       return res.status(400).json({
@@ -642,7 +638,7 @@ export const setupSecurityQuestions =
         message:
           "Security questions saved",
       });
-    } catch  {
+    } catch {
       res.status(500).json({
         message:
           "Internal Server Error",
@@ -1130,7 +1126,7 @@ export const googleAuth = async (req, res) => {
   try {
     if (!googleClient) {
       return res.status(500).json({
-          message: "Google OAuth is not configured.",
+        message: "Google OAuth is not configured.",
       });
     }
     // Implementation will be added incrementally.
diff --git a/backend/src/controllers/message.controller.js b/backend/src/controllers/message.controller.js
index 4560e4f0..62134991 100644
--- a/backend/src/controllers/message.controller.js
+++ b/backend/src/controllers/message.controller.js
@@ -90,7 +90,7 @@ export const getMessages = async (req, res) => {
       deletedForEveryone: false,
       deletedFor: { $ne: myId },
     })
-      .populate("replyTo", "text image senderId")
+      .populate("replyTo", "text image sticker senderId")
       .sort({ createdAt: 1 });
 
     await Message.updateMany(
@@ -117,7 +117,7 @@ export const getMessages = async (req, res) => {
 
 export const sendMessage = async (req, res) => {
   try {
-    const { text, image, audio, file, replyTo } = req.body;
+    const { text, image, audio, file, sticker, replyTo } = req.body;
     const { id: receiverId } = req.params;
     const senderId = req.user._id;
 
@@ -137,7 +137,7 @@ export const sendMessage = async (req, res) => {
       });
     }
 
-    if (!text && !image && !audio && !file) {
+    if (!text && !image && !audio && !file && !sticker) {
       return res.status(400).json({ message: "Message cannot be empty" });
     }
 
@@ -189,6 +189,7 @@ export const sendMessage = async (req, res) => {
       image: imageUrl,
       audio: audioUrl,
       file: fileData,
+      sticker: sticker || "",
       replyTo: replyTo || null,
       status: "sent",
 
@@ -201,7 +202,7 @@ export const sendMessage = async (req, res) => {
 
     message = await message.populate({
       path: "replyTo",
-      select: "text image senderId",
+      select: "text image sticker senderId",
       populate: {
         path: "senderId",
         select: "fullName profilePic",
@@ -249,7 +250,7 @@ export const getGroupMessages = async (req, res) => {
       deletedFor: { $ne: userId },
     })
       .populate("senderId", "fullName profilePic")
-      .populate("replyTo", "text image senderId")
+      .populate("replyTo", "text image sticker senderId")
       .sort({ createdAt: 1 });
 
     res.status(200).json(messages);
@@ -262,7 +263,7 @@ export const sendGroupMessage = async (req, res) => {
   try {
     const { groupId } = req.params;
     const senderId = req.user._id;
-    const { text, image, audio, file, replyTo } = req.body;
+    const { text, image, audio, file, sticker, replyTo } = req.body;
 
     if (!mongoose.Types.ObjectId.isValid(groupId)) {
       return res.status(400).json({ message: "Invalid group id" });
@@ -281,6 +282,10 @@ export const sendGroupMessage = async (req, res) => {
     if (!isMember)
       return res.status(403).json({ message: "Not a group member" });
 
+    if (!text && !image && !audio && !file && !sticker) {
+      return res.status(400).json({ message: "Message cannot be empty" });
+    }
+
     let imageUrl = "";
     let audioUrl = "";
     let fileData = null;
@@ -329,6 +334,7 @@ export const sendGroupMessage = async (req, res) => {
       image: imageUrl,
       audio: audioUrl,
       file: fileData,
+      sticker: sticker || "",
       replyTo: replyTo || null,
       status: "sent",
 
@@ -449,6 +455,7 @@ export const forwardMessage = async (req, res) => {
         image: originalMessage.image,
         audio: originalMessage.audio,
         file: safeFile,
+        sticker: originalMessage.sticker || "",
         isForwarded: true,
         originalMessageId: originalMessage._id,
       });
diff --git a/backend/src/controllers/sticker.controller.js b/backend/src/controllers/sticker.controller.js
new file mode 100644
index 00000000..4cba751b
--- /dev/null
+++ b/backend/src/controllers/sticker.controller.js
@@ -0,0 +1,184 @@
+import User from "../models/user.model.js";
+
+// Built-in sticker packs definition (also served via API for dynamic pack extensions)
+export const BUILTIN_STICKER_PACKS = [
+  {
+    id: "reactions",
+    name: "Reactions",
+    icon: "😂",
+    category: "Emotions",
+    stickers: [
+      { id: "mindblown", name: "Mind Blown", url: "/stickers/reactions/mindblown.svg", tags: ["mindblown", "shock", "wow", "explode", "omg"] },
+      { id: "laughing", name: "Laughing", url: "/stickers/reactions/laughing.svg", tags: ["laugh", "lol", "haha", "rofl", "joy"] },
+      { id: "crying", name: "Crying", url: "/stickers/reactions/crying.svg", tags: ["cry", "sad", "tears", "sob", "upset"] },
+      { id: "party", name: "Party Time", url: "/stickers/reactions/party.svg", tags: ["party", "celebrate", "confetti", "yay", "cheers"] },
+      { id: "cool", name: "Cool Sunglasses", url: "/stickers/reactions/cool.svg", tags: ["cool", "sunglasses", "chill", "boss", "swag"] },
+      { id: "heart_eyes", name: "Heart Eyes", url: "/stickers/reactions/heart_eyes.svg", tags: ["love", "heart", "eyes", "crush", "cute"] },
+      { id: "fire", name: "On Fire", url: "/stickers/reactions/fire.svg", tags: ["fire", "lit", "hot", "flame", "awesome"] },
+      { id: "facepalm", name: "Facepalm", url: "/stickers/reactions/facepalm.svg", tags: ["facepalm", "smh", "disappointed", "duh", "oops"] },
+      { id: "thinking", name: "Thinking", url: "/stickers/reactions/thinking.svg", tags: ["think", "hmm", "ponder", "wonder", "curious"] },
+      { id: "shocked", name: "Shocked", url: "/stickers/reactions/shocked.svg", tags: ["shock", "gasp", "scared", "fear", "omg"] },
+      { id: "angry", name: "Angry", url: "/stickers/reactions/angry.svg", tags: ["angry", "mad", "rage", "furious", "annoyed"] },
+      { id: "angel", name: "Innocent Angel", url: "/stickers/reactions/angel.svg", tags: ["angel", "innocent", "good", "halo", "pure"] },
+    ],
+  },
+  {
+    id: "pepe_memes",
+    name: "Pepe & Memes",
+    icon: "🐸",
+    category: "Memes",
+    stickers: [
+      { id: "pepe_happy", name: "Pepe Happy", url: "/stickers/memes/pepe_happy.svg", tags: ["pepe", "happy", "smile", "feelsgood", "frog"] },
+      { id: "pepe_sad", name: "Pepe Sad", url: "/stickers/memes/pepe_sad.svg", tags: ["pepe", "sad", "cry", "feelsbadman", "rain"] },
+      { id: "pepe_hype", name: "Pepe Hype", url: "/stickers/memes/pepe_hype.svg", tags: ["pepe", "hype", "party", "dance", "energy"] },
+      { id: "pepe_smart", name: "Big Brain Pepe", url: "/stickers/memes/pepe_smart.svg", tags: ["pepe", "brain", "smart", "genius", "iq"] },
+      { id: "doge_wow", name: "Doge Wow", url: "/stickers/memes/doge_wow.svg", tags: ["doge", "wow", "shiba", "dog", "meme"] },
+      { id: "score_100", name: "100 Percent", url: "/stickers/memes/score_100.svg", tags: ["100", "score", "perfect", "facts", "real"] },
+      { id: "gg_wp", name: "GG Well Played", url: "/stickers/memes/gg_wp.svg", tags: ["gg", "game", "win", "gamer", "wp"] },
+      { id: "stonks", name: "Stonks Up", url: "/stickers/memes/stonks.svg", tags: ["stonks", "profit", "money", "up", "crypto"] },
+      { id: "popcat", name: "Pop Cat", url: "/stickers/memes/popcat.svg", tags: ["popcat", "cat", "mouth", "pop", "meme"] },
+      { id: "bruh", name: "Bruh Moment", url: "/stickers/memes/bruh.svg", tags: ["bruh", "moment", "what", "bro", "meme"] },
+    ],
+  },
+  {
+    id: "cute_animals",
+    name: "Cute Animals",
+    icon: "🐱",
+    category: "Animals",
+    stickers: [
+      { id: "cat_heart", name: "Cat Love", url: "/stickers/animals/cat_heart.svg", tags: ["cat", "love", "heart", "kitty", "purr"] },
+      { id: "cat_laptop", name: "Coder Cat", url: "/stickers/animals/cat_laptop.svg", tags: ["cat", "laptop", "code", "work", "busy"] },
+      { id: "dog_happy", name: "Happy Pup", url: "/stickers/animals/dog_happy.svg", tags: ["dog", "pup", "wag", "happy", "cute"] },
+      { id: "fox_sleeping", name: "Sleepy Fox", url: "/stickers/animals/fox_sleeping.svg", tags: ["fox", "sleep", "rest", "night", "bed"] },
+      { id: "bear_hug", name: "Bear Hug", url: "/stickers/animals/bear_hug.svg", tags: ["bear", "hug", "love", "cuddle", "friend"] },
+      { id: "bunny_cheer", name: "Cheering Bunny", url: "/stickers/animals/bunny_cheer.svg", tags: ["bunny", "rabbit", "hop", "cheer", "jump"] },
+      { id: "panda_bamboo", name: "Panda Munch", url: "/stickers/animals/panda_bamboo.svg", tags: ["panda", "eat", "food", "cute", "bamboo"] },
+      { id: "penguin_waddle", name: "Waddling Penguin", url: "/stickers/animals/penguin_waddle.svg", tags: ["penguin", "walk", "cold", "cute", "bird"] },
+    ],
+  },
+  {
+    id: "anime_chibi",
+    name: "Anime & Chibi",
+    icon: "✨",
+    category: "Anime",
+    stickers: [
+      { id: "chibi_sparkle", name: "Sparkle Eyes", url: "/stickers/anime/chibi_sparkle.svg", tags: ["anime", "sparkle", "eyes", "star", "chibi"] },
+      { id: "chibi_rage", name: "Chibi Rage", url: "/stickers/anime/chibi_rage.svg", tags: ["anime", "rage", "anger", "flame", "chibi"] },
+      { id: "chibi_sweat", name: "Nervous Sweat", url: "/stickers/anime/chibi_sweat.svg", tags: ["anime", "nervous", "sweat", "awkward", "oops"] },
+      { id: "chibi_blush", name: "Kawaii Blush", url: "/stickers/anime/chibi_blush.svg", tags: ["anime", "blush", "kawaii", "shy", "cute"] },
+      { id: "chibi_peace", name: "Peace Sign", url: "/stickers/anime/chibi_peace.svg", tags: ["anime", "peace", "victory", "pose", "v"] },
+      { id: "chibi_sleepy", name: "Sleepy Chibi", url: "/stickers/anime/chibi_sleepy.svg", tags: ["anime", "sleep", "zzz", "tired", "chibi"] },
+      { id: "chibi_gaming", name: "Pro Gamer", url: "/stickers/anime/chibi_gaming.svg", tags: ["anime", "game", "controller", "gamer", "play"] },
+      { id: "chibi_coffee", name: "Coffee Time", url: "/stickers/anime/chibi_coffee.svg", tags: ["anime", "coffee", "morning", "tea", "drink"] },
+    ],
+  },
+  {
+    id: "vibes_gestures",
+    name: "Vibes & Gestures",
+    icon: "✌️",
+    category: "Gestures",
+    stickers: [
+      { id: "thumbs_up", name: "Thumbs Up", url: "/stickers/vibes/thumbs_up.svg", tags: ["thumbsup", "ok", "yes", "like", "agree"] },
+      { id: "heart_hands", name: "Heart Hands", url: "/stickers/vibes/heart_hands.svg", tags: ["heart", "hands", "love", "kpop", "care"] },
+      { id: "high_five", name: "High Five", url: "/stickers/vibes/high_five.svg", tags: ["highfive", "team", "celebrate", "slap", "hands"] },
+      { id: "peace_out", name: "Peace Sign", url: "/stickers/vibes/peace_out.svg", tags: ["peace", "vibe", "bye", "chill", "cool"] },
+      { id: "clapping", name: "Clapping", url: "/stickers/vibes/clapping.svg", tags: ["clap", "applause", "bravo", "great", "cheer"] },
+      { id: "rocket_blast", name: "Rocket Launch", url: "/stickers/vibes/rocket_blast.svg", tags: ["rocket", "launch", "moon", "speed", "fast"] },
+      { id: "sparkle_star", name: "Super Star", url: "/stickers/vibes/sparkle_star.svg", tags: ["star", "sparkle", "gold", "shine", "winner"] },
+      { id: "coffee_mug", name: "Fresh Coffee", url: "/stickers/vibes/coffee_mug.svg", tags: ["coffee", "cup", "morning", "fuel", "tea"] },
+    ],
+  },
+];
+
+// GET /api/stickers/packs
+export const getStickerPacks = async (req, res) => {
+  try {
+    res.status(200).json({ packs: BUILTIN_STICKER_PACKS });
+  } catch (error) {
+    console.error("getStickerPacks error:", error);
+    res.status(500).json({ message: "Failed to load sticker packs" });
+  }
+};
+
+// GET /api/stickers/user-data
+export const getUserStickerData = async (req, res) => {
+  try {
+    const user = await User.findById(req.user._id).select("favoriteStickers recentStickers");
+    if (!user) {
+      return res.status(404).json({ message: "User not found" });
+    }
+
+    res.status(200).json({
+      favoriteStickers: user.favoriteStickers || [],
+      recentStickers: user.recentStickers || [],
+    });
+  } catch (error) {
+    console.error("getUserStickerData error:", error);
+    res.status(500).json({ message: "Failed to load user sticker data" });
+  }
+};
+
+// POST /api/stickers/favorites/toggle
+export const toggleFavoriteSticker = async (req, res) => {
+  try {
+    const { stickerUrl } = req.body;
+    if (!stickerUrl || typeof stickerUrl !== "string") {
+      return res.status(400).json({ message: "Valid stickerUrl is required" });
+    }
+
+    const user = await User.findById(req.user._id);
+    if (!user) {
+      return res.status(404).json({ message: "User not found" });
+    }
+
+    const currentFavorites = user.favoriteStickers || [];
+    const exists = currentFavorites.includes(stickerUrl);
+
+    let updatedFavorites;
+    if (exists) {
+      updatedFavorites = currentFavorites.filter((url) => url !== stickerUrl);
+    } else {
+      updatedFavorites = [stickerUrl, ...currentFavorites];
+    }
+
+    user.favoriteStickers = updatedFavorites;
+    await user.save();
+
+    res.status(200).json({
+      favoriteStickers: user.favoriteStickers,
+      isFavorited: !exists,
+    });
+  } catch (error) {
+    console.error("toggleFavoriteSticker error:", error);
+    res.status(500).json({ message: "Failed to toggle favorite sticker" });
+  }
+};
+
+// POST /api/stickers/recents
+export const addRecentSticker = async (req, res) => {
+  try {
+    const { stickerUrl } = req.body;
+    if (!stickerUrl || typeof stickerUrl !== "string") {
+      return res.status(400).json({ message: "Valid stickerUrl is required" });
+    }
+
+    const user = await User.findById(req.user._id);
+    if (!user) {
+      return res.status(404).json({ message: "User not found" });
+    }
+
+    const currentRecents = user.recentStickers || [];
+    // Place at front, deduplicate, and limit to max 30 items
+    const filtered = currentRecents.filter((url) => url !== stickerUrl);
+    user.recentStickers = [stickerUrl, ...filtered].slice(0, 30);
+
+    await user.save();
+
+    res.status(200).json({
+      recentStickers: user.recentStickers,
+    });
+  } catch (error) {
+    console.error("addRecentSticker error:", error);
+    res.status(500).json({ message: "Failed to add recent sticker" });
+  }
+};
diff --git a/backend/src/index.js b/backend/src/index.js
index 5d3e05ce..af3a8481 100644
--- a/backend/src/index.js
+++ b/backend/src/index.js
@@ -1,20 +1,21 @@
-import express from "express";
-import dotenv from "dotenv";
 import cookieParser from "cookie-parser";
 import cors from "cors";
+import dotenv from "dotenv";
+import express from "express";
 import path from "path";
 import { connectDB } from "./lib/db.js";
 import { app, server } from "./lib/socket.js";
+import adminRoutes from "./routes/admin.routes.js";
+import aiRoutes from "./routes/ai.routes.js";
 import authRoutes from "./routes/auth.route.js";
-import messageRoutes from "./routes/message.route.js";
+import gifRoutes from "./routes/gif.routes.js";
 import groupRoutes from "./routes/group.routes.js";
-import aiRoutes from "./routes/ai.routes.js";
-import seedAIUser from "./seeds/seedAIUser.js";
-import statusRoutes from "./routes/status.routes.js";
-import adminRoutes from "./routes/admin.routes.js";
+import messageRoutes from "./routes/message.route.js";
+import pollRoutes from "./routes/poll.routes.js";
 import reportRoutes from "./routes/report.routes.js";
-import gifRoutes from "./routes/gif.routes.js";
+import statusRoutes from "./routes/status.routes.js";
 import userRoutes from "./routes/user.route.js";
+import seedAIUser from "./seeds/seedAIUser.js";
 import pollRoutes from "./routes/poll.routes.js";
 
 dotenv.config();
@@ -74,4 +75,4 @@ if (process.env.NODE_ENV !== "test") {
   startServer();
 }
 
-export { app };
\ No newline at end of file
+export { app };
diff --git a/backend/src/models/message.model.js b/backend/src/models/message.model.js
index 57cc1e07..5a08bd05 100644
--- a/backend/src/models/message.model.js
+++ b/backend/src/models/message.model.js
@@ -41,6 +41,11 @@ const messageSchema = new mongoose.Schema(
       default: "",
     },
 
+    sticker: {
+      type: String,
+      default: "",
+    },
+
     // Reply to message
     replyTo: {
       type: mongoose.Schema.Types.ObjectId,
diff --git a/backend/src/models/user.model.js b/backend/src/models/user.model.js
index d4a315ed..ae133863 100644
--- a/backend/src/models/user.model.js
+++ b/backend/src/models/user.model.js
@@ -101,6 +101,16 @@ const userSchema = new mongoose.Schema(
       default: [],
     },
 
+    favoriteStickers: {
+      type: [String],
+      default: [],
+    },
+
+    recentStickers: {
+      type: [String],
+      default: [],
+    },
+
     // Security Questions (Max 3)
     securityQuestions: {
       type: [securityQuestionSchema],
diff --git a/backend/src/routes/sticker.routes.js b/backend/src/routes/sticker.routes.js
new file mode 100644
index 00000000..bc271ead
--- /dev/null
+++ b/backend/src/routes/sticker.routes.js
@@ -0,0 +1,17 @@
+import express from "express";
+import {
+  getStickerPacks,
+  getUserStickerData,
+  toggleFavoriteSticker,
+  addRecentSticker,
+} from "../controllers/sticker.controller.js";
+import { protectRoute } from "../middleware/auth.middleware.js";
+
+const router = express.Router();
+
+router.get("/packs", protectRoute, getStickerPacks);
+router.get("/user-data", protectRoute, getUserStickerData);
+router.post("/favorites/toggle", protectRoute, toggleFavoriteSticker);
+router.post("/recents", protectRoute, addRecentSticker);
+
+export default router;
diff --git a/frontend/src/components/MessageBubble.jsx b/frontend/src/components/MessageBubble.jsx
index cc034563..1b4a9939 100644
--- a/frontend/src/components/MessageBubble.jsx
+++ b/frontend/src/components/MessageBubble.jsx
@@ -270,6 +270,7 @@ const MessageBubble = ({ message, sender, isMe, chatId }) => {
                           <span>{isPinned ? "Unpin" : "Pin Message"}</span>
                         </button>
                       )}
+
                       {message.text && (
                         <button
                           onClick={handleCopyText}
@@ -279,6 +280,7 @@ const MessageBubble = ({ message, sender, isMe, chatId }) => {
                           <span>Copy Text</span>
                         </button>
                       )}
+
                       <button
                         onClick={() => {
                           setReplyingTo(message);
@@ -289,6 +291,7 @@ const MessageBubble = ({ message, sender, isMe, chatId }) => {
                         <Reply size={14} className="text-base-content/50" />
                         <span>Reply</span>
                       </button>
+
                       <button
                         onClick={handleForward}
                         className="flex w-full items-center gap-2.5 px-3 py-2 text-xs font-medium rounded-xl hover:bg-base-200/80 text-base-content/80 hover:text-base-content transition-colors"
@@ -311,6 +314,7 @@ const MessageBubble = ({ message, sender, isMe, chatId }) => {
                       )}
 
                       <div className="my-1 border-t border-base-content/5" />
+
                       <button
                         onClick={() => {
                           deleteMessageForMe(message._id);
@@ -321,6 +325,7 @@ const MessageBubble = ({ message, sender, isMe, chatId }) => {
                         <Trash size={14} />
                         <span>Delete for me</span>
                       </button>
+
                       {canDeleteForEveryone && (
                         <button
                           onClick={() => {
@@ -352,20 +357,42 @@ const MessageBubble = ({ message, sender, isMe, chatId }) => {
                 </div>
               )}
 
-              <div
-                className={`relative px-4 py-2.5 rounded-2xl transition-all shadow-xs ${
-                  highlightedMessageId === message._id
-                    ? "ring-2 ring-primary ring-offset-2"
-                    : ""
-                } ${
-                  message.deletedForEveryone
-                    ? "bg-base-200/60 border border-base-content/10 text-base-content/50 italic text-xs sm:text-sm"
-                    : isMe
-                    ? "bg-primary text-primary-content rounded-tr-xs"
-                    : isAI
-                    ? "bg-base-100 border border-primary/25 text-base-content rounded-tl-xs ring-1 ring-primary/10"
-                    : "bg-base-100 border border-base-content/10 text-base-content rounded-tl-xs"
-                }`}
+              <motion.div
+                animate={
+                  isAI
+                    ? {
+                        boxShadow: [
+                          "0px 0px 0px rgba(59, 130, 246, 0)",
+                          "0px 0px 12px rgba(59, 130, 246, 0.2)",
+                          "0px 0px 0px rgba(59, 130, 246, 0)",
+                        ],
+                      }
+                    : {}
+                }
+                transition={{ repeat: Infinity, duration: 3 }}
+                className={`relative px-4 py-2.5 shadow-sm transition-all duration-300 rounded-2xl
+                    ${
+                      highlightedMessageId === message._id
+                        ? "ring-2 ring-primary ring-offset-2 bg-primary/10"
+                        : ""
+                    }
+                    ${
+                      message.deletedForEveryone
+                        ? "bg-base-200/50 border border-base-300 text-base-content/40 italic"
+                        : !message.text &&
+                            !message.image &&
+                            !message.audio &&
+                            !message.file?.url &&
+                            !message.replyTo &&
+                            message.sticker
+                          ? "bg-transparent shadow-none border-none !p-0"
+                          : isMe
+                            ? "bg-primary text-primary-content rounded-tr-none shadow-md"
+                            : isAI
+                              ? "bg-base-100 border-2 border-primary/20 text-base-content rounded-tl-none shadow-lg shadow-primary/5"
+                              : "bg-base-100 border border-base-200 text-base-content rounded-tl-none shadow-sm"
+                    }
+                `}
               >
                 {message.deletedForEveryone ? (
                   <div className="flex items-center gap-1.5 py-0.5">
@@ -378,7 +405,9 @@ const MessageBubble = ({ message, sender, isMe, chatId }) => {
                     {message.isForwarded && (
                       <div
                         className={`mb-1 flex items-center gap-1 text-[11px] font-medium ${
-                          isMe ? "text-primary-content/80" : "text-primary"
+                          isMe
+                            ? "text-primary-content/80"
+                            : "text-primary"
                         }`}
                       >
                         <Forward size={12} />
@@ -400,13 +429,18 @@ const MessageBubble = ({ message, sender, isMe, chatId }) => {
                         onClick={() => {
                           const id = message.replyTo._id;
                           setHighlightedMessage(id);
+
                           document
                             .getElementById(`msg-${id}`)
                             ?.scrollIntoView({
                               behavior: "smooth",
                               block: "center",
                             });
-                          setTimeout(() => setHighlightedMessage(null), 1200);
+
+                          setTimeout(
+                            () => setHighlightedMessage(null),
+                            1200
+                          );
                         }}
                         className={`mb-1.5 px-2.5 py-1 rounded-xl text-xs border-l-3 cursor-pointer transition-colors ${
                           isMe
@@ -421,12 +455,32 @@ const MessageBubble = ({ message, sender, isMe, chatId }) => {
                         >
                           {message.replyTo.senderId?.fullName || "User"}
                         </div>
+
                         <div className="truncate opacity-80 text-[11px]">
-                          {message.replyTo.text || "Media attachment"}
+                          {message.replyTo.text ||
+                            (message.replyTo.sticker
+                              ? "✨ Sticker"
+                              : "Media attachment")}
                         </div>
                       </div>
                     )}
 
+                    {/* Sticker */}
+                    {message.sticker && (
+                      <div
+                        className={`flex ${
+                          isMe ? "justify-end" : "justify-start"
+                        } my-1`}
+                      >
+                        <img
+                          src={message.sticker}
+                          alt="Sticker"
+                          className="w-32 h-32 sm:w-36 sm:h-36 object-contain drop-shadow-md hover:scale-110 transition-transform duration-200 cursor-pointer"
+                          loading="lazy"
+                        />
+                      </div>
+                    )}
+
                     {/* Media Attachments */}
                     {(message.image ||
                       message.audio ||
@@ -439,12 +493,14 @@ const MessageBubble = ({ message, sender, isMe, chatId }) => {
                             alt="attachment"
                           />
                         )}
+
                         {message.audio && (
                           <AudioMessage
                             audioUrl={message.audio}
                             isMe={isMe}
                           />
                         )}
+
                         {message.file?.url && (
                           <FileMessage file={message.file} />
                         )}
@@ -461,6 +517,7 @@ const MessageBubble = ({ message, sender, isMe, chatId }) => {
                               Toxic
                             </span>
                           )}
+
                           {message.spam && (
                             <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-amber-500/15 text-amber-500 border border-amber-500/25 text-[10px] font-bold uppercase tracking-wider">
                               <ShieldAlert size={11} />
@@ -525,7 +582,7 @@ const MessageBubble = ({ message, sender, isMe, chatId }) => {
                     ))}
                   </motion.div>
                 )}
-              </div>
+              </motion.div>
             </div>
           </div>
         </div>
diff --git a/frontend/src/components/MessageInput.jsx b/frontend/src/components/MessageInput.jsx
index c8cb9006..b4265ce6 100644
--- a/frontend/src/components/MessageInput.jsx
+++ b/frontend/src/components/MessageInput.jsx
@@ -9,9 +9,11 @@ import {
   Smile,
   Clapperboard,
   BarChart2,
+  Sticker as StickerIcon,
 } from "lucide-react";
 import toast from "react-hot-toast";
 import { useChatStore } from "../store/useChatStore";
+import StickerPicker from "./StickerPicker";
 import EmojiPicker from "emoji-picker-react";
 import GifPicker from "./GifPicker";
 import PollCreatorModal from "./PollCreatorModal";
@@ -24,11 +26,13 @@ const MessageInput = () => {
   const [recording, setRecording] = useState(false);
   const [showEmojiPicker, setShowEmojiPicker] = useState(false);
   const [showGifPicker, setShowGifPicker] = useState(false);
+  const [showStickerPicker, setShowStickerPicker] = useState(false);
   const [dragActive, setDragActive] = useState(false);
   const [showPollModal, setShowPollModal] = useState(false);
 
   const emojiRef = useRef(null);
   const gifRef = useRef(null);
+  const stickerRef = useRef(null);
   const fileRef = useRef(null);
   const imageRef = useRef(null);
   const mediaRecorderRef = useRef(null);
@@ -50,7 +54,10 @@ const MessageInput = () => {
   } = useChatStore();
 
   const isAI = selectedChatType === "private" && selectedUser?.isAI;
-  const hasContent = Boolean(text.trim() || imagePreview || fileData || audioData);
+
+  const hasContent = Boolean(
+    text.trim() || imagePreview || fileData || audioData
+  );
 
   useEffect(() => {
     return () => {
@@ -64,13 +71,23 @@ const MessageInput = () => {
       if (emojiRef.current && !emojiRef.current.contains(event.target)) {
         setShowEmojiPicker(false);
       }
+
       if (gifRef.current && !gifRef.current.contains(event.target)) {
         setShowGifPicker(false);
       }
+
+      if (
+        stickerRef.current &&
+        !stickerRef.current.contains(event.target)
+      ) {
+        setShowStickerPicker(false);
+      }
     };
 
     document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
+
+    return () =>
+      document.removeEventListener("mousedown", handleClickOutside);
   }, []);
 
   const handleEmojiClick = (emojiData) => {
@@ -79,13 +96,16 @@ const MessageInput = () => {
 
   const handleImageChange = (e) => {
     if (isAI) return;
+
     const file = e.target.files?.[0];
+
     if (!file || !file.type.startsWith("image/")) {
       toast.error("Select an image");
       return;
     }
 
     const reader = new FileReader();
+
     reader.onload = () => setImagePreview(reader.result);
     reader.readAsDataURL(file);
   };
@@ -95,12 +115,42 @@ const MessageInput = () => {
     setShowGifPicker(false);
   };
 
+  const handleStickerSelect = async (stickerUrl) => {
+    setShowStickerPicker(false);
+
+    if (isAI) {
+      toast.error("AI assistant cannot receive stickers");
+      return;
+    }
+
+    const payload = {
+      text: "",
+      sticker: stickerUrl,
+      replyTo: replyingTo?._id || null,
+    };
+
+    try {
+      if (selectedChatType === "group") {
+        await sendGroupMessage(payload);
+      } else {
+        await sendMessage(payload);
+      }
+
+      clearReplyingTo();
+    } catch (error) {
+      toast.error("Failed to send sticker");
+    }
+  };
+
   const handleFileChange = (e) => {
     if (isAI) return;
+
     const file = e.target.files?.[0];
+
     if (!file) return;
 
     const reader = new FileReader();
+
     reader.onload = () => {
       setFileData({
         base64: reader.result,
@@ -109,13 +159,17 @@ const MessageInput = () => {
         size: file.size,
       });
     };
+
     reader.readAsDataURL(file);
   };
 
   const startRecording = async () => {
     if (isAI) return;
+
     try {
-      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      const stream =
+        await navigator.mediaDevices.getUserMedia({ audio: true });
+
       const mediaRecorder = new MediaRecorder(stream);
 
       mediaRecorderRef.current = mediaRecorder;
@@ -126,10 +180,15 @@ const MessageInput = () => {
       };
 
       mediaRecorder.onstop = () => {
-        const blob = new Blob(audioChunksRef.current, { type: "audio/webm" });
+        const blob = new Blob(audioChunksRef.current, {
+          type: "audio/webm",
+        });
+
         const reader = new FileReader();
+
         reader.onload = () => setAudioData(reader.result);
         reader.readAsDataURL(blob);
+
         stream.getTracks().forEach((track) => track.stop());
       };
 
@@ -147,6 +206,7 @@ const MessageInput = () => {
 
   const handleTyping = (value) => {
     setText(value);
+
     if (isAI) return;
 
     if (!value.trim()) {
@@ -155,12 +215,15 @@ const MessageInput = () => {
     }
 
     startTyping();
+
     clearTimeout(typingTimeoutRef.current);
+
     typingTimeoutRef.current = setTimeout(stopTyping, 1200);
   };
 
   const handleSend = async (e) => {
     e.preventDefault();
+
     if (!hasContent) return;
 
     stopTyping();
@@ -176,15 +239,18 @@ const MessageInput = () => {
         replyTo: replyingTo?._id || null,
       };
 
-      selectedChatType === "group"
-        ? await sendGroupMessage(payload)
-        : await sendMessage(payload);
+      if (selectedChatType === "group") {
+        await sendGroupMessage(payload);
+      } else {
+        await sendMessage(payload);
+      }
     }
 
     setText("");
     setImagePreview(null);
     setFileData(null);
     setAudioData(null);
+    clearReplyingTo();
   };
 
   const handleDragOver = (e) => {
@@ -201,14 +267,17 @@ const MessageInput = () => {
     setDragActive(false);
 
     const file = e.dataTransfer.files?.[0];
+
     if (!file) return;
 
     if (file.type.startsWith("image/")) {
       const reader = new FileReader();
+
       reader.onload = () => setImagePreview(reader.result);
       reader.readAsDataURL(file);
     } else {
       const reader = new FileReader();
+
       reader.onload = () => {
         setFileData({
           base64: reader.result,
@@ -217,6 +286,7 @@ const MessageInput = () => {
           size: file.size,
         });
       };
+
       reader.readAsDataURL(file);
     }
   };
@@ -243,9 +313,18 @@ const MessageInput = () => {
       {replyingTo && (
         <div className="mb-2 flex items-center justify-between rounded-xl bg-base-200/70 border border-base-300/40 px-3.5 py-2 text-xs">
           <div className="truncate flex items-center gap-1.5">
-            <span className="text-primary font-bold">Replying to:</span>
-            <span className="text-base-content/70 truncate">{replyingTo.text || "Media attachment"}</span>
+            <span className="text-primary font-bold">
+              Replying to:
+            </span>
+
+            <span className="text-base-content/70 truncate">
+              {replyingTo.text ||
+                (replyingTo.sticker
+                  ? "✨ Sticker"
+                  : "Media attachment")}
+            </span>
           </div>
+
           <button
             onClick={clearReplyingTo}
             className="w-5 h-5 rounded-full flex items-center justify-center text-base-content/50 hover:bg-base-300 hover:text-base-content transition-colors"
@@ -272,7 +351,11 @@ const MessageInput = () => {
           {fileData && (
             <Preview onRemove={() => setFileData(null)}>
               <div className="flex items-center gap-2 text-xs bg-base-200 border border-base-300 px-3 py-2 rounded-xl shadow-sm">
-                <Paperclip size={14} className="text-primary" />
+                <Paperclip
+                  size={14}
+                  className="text-primary"
+                />
+
                 <span className="truncate max-w-[150px] font-medium text-base-content/80">
                   {fileData.name}
                 </span>
@@ -284,7 +367,9 @@ const MessageInput = () => {
             <Preview onRemove={() => setAudioData(null)}>
               <div className="flex items-center gap-2 text-xs bg-primary/10 text-primary border border-primary/20 px-3 py-2 rounded-xl">
                 <Mic size={14} />
-                <span className="font-semibold">Voice memo attached</span>
+                <span className="font-semibold">
+                  Voice memo attached
+                </span>
               </div>
             </Preview>
           )}
@@ -298,14 +383,18 @@ const MessageInput = () => {
             <span className="text-[10px] font-bold text-base-content/50 uppercase tracking-wider">
               Suggested Replies
             </span>
+
             <button
               type="button"
-              onClick={() => useChatStore.setState({ smartReplies: [] })}
+              onClick={() =>
+                useChatStore.setState({ smartReplies: [] })
+              }
               className="text-base-content/40 hover:text-error transition-colors"
             >
               <X size={12} />
             </button>
           </div>
+
           <div className="flex flex-wrap gap-2">
             {smartReplies.map((reply, index) => (
               <button
@@ -333,13 +422,16 @@ const MessageInput = () => {
             value={text}
             onChange={(e) => handleTyping(e.target.value)}
             onBlur={stopTyping}
-            placeholder={isAI ? "Ask AI assistant…" : "Type a message…"}
+            placeholder={
+              isAI ? "Ask AI assistant…" : "Type a message…"
+            }
             disabled={recording}
             className="flex-1 bg-transparent px-2.5 py-2 text-sm text-base-content placeholder:text-base-content/40 outline-none disabled:opacity-50"
           />
 
           {!isAI && (
             <div className="flex items-center gap-0.5 text-base-content/50">
+              {/* Hidden File Inputs */}
               <input
                 ref={imageRef}
                 type="file"
@@ -347,6 +439,7 @@ const MessageInput = () => {
                 hidden
                 onChange={handleImageChange}
               />
+
               <input
                 ref={fileRef}
                 type="file"
@@ -354,15 +447,17 @@ const MessageInput = () => {
                 onChange={handleFileChange}
               />
 
-              {/* Emoji Picker Button */}
+              {/* Emoji */}
               <div className="relative" ref={emojiRef}>
                 <button
                   type="button"
                   onClick={() => {
                     setShowGifPicker(false);
+                    setShowStickerPicker(false);
                     setShowEmojiPicker((prev) => !prev);
                   }}
                   className="w-8 h-8 rounded-xl flex items-center justify-center hover:text-primary hover:bg-primary/10 transition-colors"
+                  title="Emojis"
                 >
                   <Smile size={18} />
                 </button>
@@ -378,24 +473,27 @@ const MessageInput = () => {
                 )}
               </div>
 
-              {/* Image Button */}
+              {/* Image */}
               <button
                 type="button"
-                onClick={() => imageRef.current.click()}
+                onClick={() => imageRef.current?.click()}
                 className="w-8 h-8 rounded-xl flex items-center justify-center hover:text-primary hover:bg-primary/10 transition-colors"
+                title="Upload Image"
               >
                 <Image size={18} />
               </button>
 
-              {/* GIF Picker Button */}
+              {/* GIF */}
               <div className="relative" ref={gifRef}>
                 <button
                   type="button"
                   onClick={() => {
                     setShowEmojiPicker(false);
+                    setShowStickerPicker(false);
                     setShowGifPicker((prev) => !prev);
                   }}
                   className="w-8 h-8 rounded-xl flex items-center justify-center hover:text-primary hover:bg-primary/10 transition-colors"
+                  title="GIFs"
                 >
                   <Clapperboard size={18} />
                 </button>
@@ -410,16 +508,42 @@ const MessageInput = () => {
                 )}
               </div>
 
-              {/* Attachment Button */}
+              {/* Sticker */}
+              <div className="relative" ref={stickerRef}>
+                <button
+                  type="button"
+                  onClick={() => {
+                    setShowEmojiPicker(false);
+                    setShowGifPicker(false);
+                    setShowStickerPicker((prev) => !prev);
+                  }}
+                  className="w-8 h-8 rounded-xl flex items-center justify-center hover:text-primary hover:bg-primary/10 transition-colors"
+                  title="Stickers"
+                >
+                  <StickerIcon size={18} />
+                </button>
+
+                {showStickerPicker && (
+                  <div className="fixed sm:absolute bottom-16 sm:bottom-12 right-4 sm:right-0 z-50 shadow-2xl rounded-2xl overflow-hidden border border-base-300">
+                    <StickerPicker
+                      onSelect={handleStickerSelect}
+                      onClose={() => setShowStickerPicker(false)}
+                    />
+                  </div>
+                )}
+              </div>
+
+              {/* Attachment */}
               <button
                 type="button"
-                onClick={() => fileRef.current.click()}
+                onClick={() => fileRef.current?.click()}
                 className="w-8 h-8 rounded-xl flex items-center justify-center hover:text-primary hover:bg-primary/10 transition-colors"
+                title="Attach File"
               >
                 <Paperclip size={18} />
               </button>
 
-              {/* Poll Button (Group chats only) */}
+              {/* Poll */}
               {selectedChatType === "group" && (
                 <button
                   type="button"
@@ -434,22 +558,29 @@ const MessageInput = () => {
           )}
         </div>
 
-        {/* Audio Recording / Mic Button */}
+        {/* Audio Recording */}
         {!isAI && (
           <button
             type="button"
-            onClick={recording ? stopRecording : startRecording}
+            onClick={
+              recording ? stopRecording : startRecording
+            }
             className={`w-11 h-11 rounded-2xl flex items-center justify-center shrink-0 transition-all ${
               recording
                 ? "bg-error text-white shadow-lg shadow-error/30 animate-pulse"
                 : "bg-base-200/70 hover:bg-base-300/80 text-base-content/70"
             }`}
+            title={recording ? "Stop recording" : "Record voice"}
           >
-            {recording ? <StopCircle size={20} /> : <Mic size={20} />}
+            {recording ? (
+              <StopCircle size={20} />
+            ) : (
+              <Mic size={20} />
+            )}
           </button>
         )}
 
-        {/* Send Button */}
+        {/* Send */}
         <button
           type="submit"
           disabled={!hasContent}
@@ -458,12 +589,16 @@ const MessageInput = () => {
               ? "bg-primary text-primary-content shadow-lg shadow-primary/30 hover:scale-105 active:scale-95"
               : "bg-base-200/50 text-base-content/30 cursor-not-allowed"
           }`}
+          title="Send"
         >
-          <Send size={18} className={hasContent ? "translate-x-0.5" : ""} />
+          <Send
+            size={18}
+            className={hasContent ? "translate-x-0.5" : ""}
+          />
         </button>
       </form>
 
-      {/* Poll Creator Modal */}
+      {/* Poll Creator */}
       <PollCreatorModal
         isOpen={showPollModal}
         onClose={() => setShowPollModal(false)}
@@ -476,6 +611,7 @@ const MessageInput = () => {
 const Preview = ({ children, onRemove }) => (
   <div className="relative inline-flex items-center">
     {children}
+
     <button
       onClick={onRemove}
       type="button"
diff --git a/frontend/src/components/StickerPicker.jsx b/frontend/src/components/StickerPicker.jsx
new file mode 100644
index 00000000..6bf71e37
--- /dev/null
+++ b/frontend/src/components/StickerPicker.jsx
@@ -0,0 +1,470 @@
+import { useState, useEffect, useMemo, useRef } from "react";
+import { Search, Star, Clock, Sparkles, X, Loader2, Smile } from "lucide-react";
+import { STICKER_PACKS, ALL_STICKERS } from "../constants/stickers";
+import { axiosInstance } from "../lib/axios";
+import toast from "react-hot-toast";
+
+const LOCAL_STORAGE_RECENTS_KEY = "paso_recent_stickers";
+const LOCAL_STORAGE_FAVORITES_KEY = "paso_favorite_stickers";
+
+const StickerPicker = ({ onSelect, onClose }) => {
+  const [selectedTab, setSelectedTab] = useState("all");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [favorites, setFavorites] = useState(() => {
+    try {
+      const saved = localStorage.getItem(LOCAL_STORAGE_FAVORITES_KEY);
+      return saved ? JSON.parse(saved) : [];
+    } catch {
+      return [];
+    }
+  });
+  const [recents, setRecents] = useState(() => {
+    try {
+      const saved = localStorage.getItem(LOCAL_STORAGE_RECENTS_KEY);
+      return saved ? JSON.parse(saved) : [];
+    } catch {
+      return [];
+    }
+  });
+  const [isLoadingUserPrefs, setIsLoadingUserPrefs] = useState(false);
+  const searchInputRef = useRef(null);
+
+  // Sync user favorites and recents from backend on mount
+  useEffect(() => {
+    let isMounted = true;
+    const fetchUserData = async () => {
+      try {
+        setIsLoadingUserPrefs(true);
+        const res = await axiosInstance.get("/stickers/user-data");
+        if (isMounted && res.data) {
+          if (Array.isArray(res.data.favoriteStickers)) {
+            setFavorites(res.data.favoriteStickers);
+            localStorage.setItem(
+              LOCAL_STORAGE_FAVORITES_KEY,
+              JSON.stringify(res.data.favoriteStickers)
+            );
+          }
+          if (Array.isArray(res.data.recentStickers)) {
+            setRecents(res.data.recentStickers);
+            localStorage.setItem(
+              LOCAL_STORAGE_RECENTS_KEY,
+              JSON.stringify(res.data.recentStickers)
+            );
+          }
+        }
+      } catch (err) {
+        // Silently use localStorage fallback
+      } finally {
+        if (isMounted) setIsLoadingUserPrefs(false);
+      }
+    };
+
+    fetchUserData();
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
+  const handleToggleFavorite = async (e, stickerUrl) => {
+    e.stopPropagation();
+    const isFav = favorites.includes(stickerUrl);
+    const updated = isFav
+      ? favorites.filter((url) => url !== stickerUrl)
+      : [stickerUrl, ...favorites];
+
+    setFavorites(updated);
+    localStorage.setItem(LOCAL_STORAGE_FAVORITES_KEY, JSON.stringify(updated));
+
+    try {
+      await axiosInstance.post("/stickers/favorites/toggle", { stickerUrl });
+      toast.success(isFav ? "Removed from Favorites" : "Added to Favorites", {
+        id: "sticker-fav",
+        duration: 1500,
+      });
+    } catch (error) {
+      // Backend error fallback
+    }
+  };
+
+  const handleStickerClick = async (sticker) => {
+    // Record to recents
+    const updatedRecents = [
+      sticker.url,
+      ...recents.filter((url) => url !== sticker.url),
+    ].slice(0, 30);
+
+    setRecents(updatedRecents);
+    localStorage.setItem(
+      LOCAL_STORAGE_RECENTS_KEY,
+      JSON.stringify(updatedRecents)
+    );
+
+    try {
+      axiosInstance.post("/stickers/recents", { stickerUrl: sticker.url }).catch(() => {});
+    } catch {
+      // Ignore background sync errors
+    }
+
+    onSelect(sticker.url);
+    if (onClose) onClose();
+  };
+
+  // Filtered stickers based on search query
+  const searchResults = useMemo(() => {
+    const query = searchQuery.trim().toLowerCase();
+    if (!query) return null;
+
+    return ALL_STICKERS.filter(
+      (s) =>
+        s.name.toLowerCase().includes(query) ||
+        s.packName.toLowerCase().includes(query) ||
+        (s.tags && s.tags.some((t) => t.toLowerCase().includes(query)))
+    );
+  }, [searchQuery]);
+
+  // Stickers to render depending on selectedTab
+  const favoriteStickersList = useMemo(() => {
+    return favorites
+      .map((url) => ALL_STICKERS.find((s) => s.url === url) || { id: url, name: "Favorite", url })
+      .filter(Boolean);
+  }, [favorites]);
+
+  const recentStickersList = useMemo(() => {
+    return recents
+      .map((url) => ALL_STICKERS.find((s) => s.url === url) || { id: url, name: "Recent", url })
+      .filter(Boolean);
+  }, [recents]);
+
+  return (
+    <div className="flex flex-col w-full sm:w-[360px] h-[440px] bg-base-100/95 backdrop-blur-md border border-base-300 sm:rounded-2xl shadow-2xl overflow-hidden select-none animate-in fade-in zoom-in-95 duration-200">
+      {/* Header */}
+      <div className="flex items-center justify-between px-3 py-2.5 border-b border-base-300 bg-base-200/40">
+        <div className="flex items-center gap-2">
+          <span className="text-xl">✨</span>
+          <h3 className="font-bold text-sm tracking-wide text-base-content">Sticker Packs</h3>
+        </div>
+        <button
+          type="button"
+          onClick={onClose}
+          className="btn btn-ghost btn-circle btn-xs text-base-content/60 hover:text-base-content"
+          title="Close"
+        >
+          <X size={16} />
+        </button>
+      </div>
+
+      {/* Search Bar */}
+      <div className="p-2 border-b border-base-300/60 bg-base-100">
+        <div className="relative">
+          <Search
+            size={15}
+            className="absolute left-2.5 top-1/2 -translate-y-1/2 text-base-content/40"
+          />
+          <input
+            ref={searchInputRef}
+            type="text"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder="Search stickers by name, mood, meme..."
+            className="w-full pl-8 pr-7 py-1.5 text-xs sm:text-sm rounded-xl bg-base-200/80 focus:bg-base-200 focus:outline-none focus:ring-2 focus:ring-primary/40 transition-all text-base-content placeholder:text-base-content/40"
+          />
+          {searchQuery && (
+            <button
+              type="button"
+              onClick={() => setSearchQuery("")}
+              className="absolute right-2 top-1/2 -translate-y-1/2 text-base-content/40 hover:text-base-content"
+            >
+              <X size={13} />
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Pack / Category Navigation Bar */}
+      {!searchResults && (
+        <div className="flex items-center gap-1 px-2 py-1.5 border-b border-base-300 bg-base-200/30 overflow-x-auto scrollbar-none">
+          <button
+            type="button"
+            onClick={() => setSelectedTab("all")}
+            className={`flex items-center gap-1 px-2.5 py-1 text-xs font-semibold rounded-lg transition-all whitespace-nowrap ${
+              selectedTab === "all"
+                ? "bg-primary text-primary-content shadow-sm scale-105"
+                : "text-base-content/70 hover:bg-base-200 hover:text-base-content"
+            }`}
+          >
+            <Sparkles size={13} />
+            <span>All</span>
+          </button>
+
+          <button
+            type="button"
+            onClick={() => setSelectedTab("recents")}
+            className={`flex items-center gap-1 px-2 py-1 text-xs font-semibold rounded-lg transition-all whitespace-nowrap ${
+              selectedTab === "recents"
+                ? "bg-primary text-primary-content shadow-sm scale-105"
+                : "text-base-content/70 hover:bg-base-200 hover:text-base-content"
+            }`}
+            title="Recently Used"
+          >
+            <Clock size={13} />
+            <span>Recent</span>
+            {recents.length > 0 && (
+              <span className="text-[10px] opacity-80">({recents.length})</span>
+            )}
+          </button>
+
+          <button
+            type="button"
+            onClick={() => setSelectedTab("favorites")}
+            className={`flex items-center gap-1 px-2 py-1 text-xs font-semibold rounded-lg transition-all whitespace-nowrap ${
+              selectedTab === "favorites"
+                ? "bg-primary text-primary-content shadow-sm scale-105"
+                : "text-base-content/70 hover:bg-base-200 hover:text-base-content"
+            }`}
+            title="Favorite Stickers"
+          >
+            <Star size={13} className={favorites.length > 0 ? "fill-warning text-warning" : ""} />
+            <span>Favs</span>
+            {favorites.length > 0 && (
+              <span className="text-[10px] opacity-80">({favorites.length})</span>
+            )}
+          </button>
+
+          <div className="h-4 w-[1px] bg-base-300 mx-0.5" />
+
+          {STICKER_PACKS.map((pack) => (
+            <button
+              key={pack.id}
+              type="button"
+              onClick={() => setSelectedTab(pack.id)}
+              className={`flex items-center gap-1 px-2 py-1 text-xs font-semibold rounded-lg transition-all whitespace-nowrap ${
+                selectedTab === pack.id
+                  ? "bg-primary text-primary-content shadow-sm scale-105"
+                  : "text-base-content/70 hover:bg-base-200 hover:text-base-content"
+              }`}
+            >
+              <span>{pack.icon}</span>
+              <span>{pack.name}</span>
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Main Sticker Content Grid */}
+      <div className="flex-1 overflow-y-auto p-3 scrollbar-thin scrollbar-thumb-base-300">
+        {/* Search View */}
+        {searchResults ? (
+          <div>
+            <div className="text-[11px] font-bold text-base-content/50 uppercase tracking-wider mb-2 px-1">
+              Search Results ({searchResults.length})
+            </div>
+            {searchResults.length === 0 ? (
+              <div className="flex flex-col items-center justify-center h-48 text-center text-base-content/50">
+                <Smile size={32} className="mb-2 opacity-40" />
+                <p className="text-xs font-semibold">No stickers found</p>
+                <p className="text-[11px] text-base-content/40 mt-0.5">
+                  Try searching for another word or emotion
+                </p>
+              </div>
+            ) : (
+              <div className="grid grid-cols-4 gap-2">
+                {searchResults.map((sticker) => (
+                  <StickerTile
+                    key={sticker.id + sticker.url}
+                    sticker={sticker}
+                    isFavorite={favorites.includes(sticker.url)}
+                    onSelect={handleStickerClick}
+                    onToggleFavorite={handleToggleFavorite}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+        ) : selectedTab === "recents" ? (
+          /* Recents Tab */
+          <div>
+            <div className="flex items-center justify-between mb-2 px-1">
+              <span className="text-[11px] font-bold text-base-content/50 uppercase tracking-wider">
+                Recently Used
+              </span>
+              {recents.length > 0 && (
+                <button
+                  type="button"
+                  onClick={() => {
+                    setRecents([]);
+                    localStorage.removeItem(LOCAL_STORAGE_RECENTS_KEY);
+                  }}
+                  className="text-[10px] text-error/80 hover:text-error transition-colors"
+                >
+                  Clear
+                </button>
+              )}
+            </div>
+            {recentStickersList.length === 0 ? (
+              <div className="flex flex-col items-center justify-center h-48 text-center text-base-content/50">
+                <Clock size={32} className="mb-2 opacity-40" />
+                <p className="text-xs font-semibold">No recent stickers yet</p>
+                <p className="text-[11px] text-base-content/40 mt-0.5">
+                  Send stickers to see them appear here
+                </p>
+              </div>
+            ) : (
+              <div className="grid grid-cols-4 gap-2">
+                {recentStickersList.map((sticker, idx) => (
+                  <StickerTile
+                    key={sticker.url + idx}
+                    sticker={sticker}
+                    isFavorite={favorites.includes(sticker.url)}
+                    onSelect={handleStickerClick}
+                    onToggleFavorite={handleToggleFavorite}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+        ) : selectedTab === "favorites" ? (
+          /* Favorites Tab */
+          <div>
+            <div className="text-[11px] font-bold text-base-content/50 uppercase tracking-wider mb-2 px-1">
+              Favorite Stickers
+            </div>
+            {favoriteStickersList.length === 0 ? (
+              <div className="flex flex-col items-center justify-center h-48 text-center text-base-content/50">
+                <Star size={32} className="mb-2 opacity-40" />
+                <p className="text-xs font-semibold">No favorites yet</p>
+                <p className="text-[11px] text-base-content/40 mt-0.5">
+                  Hover over any sticker and click the star to save it
+                </p>
+              </div>
+            ) : (
+              <div className="grid grid-cols-4 gap-2">
+                {favoriteStickersList.map((sticker) => (
+                  <StickerTile
+                    key={sticker.url}
+                    sticker={sticker}
+                    isFavorite={true}
+                    onSelect={handleStickerClick}
+                    onToggleFavorite={handleToggleFavorite}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+        ) : selectedTab === "all" ? (
+          /* All Packs Combined View */
+          <div className="space-y-4">
+            {STICKER_PACKS.map((pack) => (
+              <div key={pack.id} className="space-y-1.5">
+                <div className="flex items-center gap-1.5 px-1">
+                  <span className="text-sm">{pack.icon}</span>
+                  <span className="text-xs font-bold text-base-content/70">
+                    {pack.name}
+                  </span>
+                </div>
+                <div className="grid grid-cols-4 gap-2">
+                  {pack.stickers.map((sticker) => (
+                    <StickerTile
+                      key={sticker.id}
+                      sticker={sticker}
+                      isFavorite={favorites.includes(sticker.url)}
+                      onSelect={handleStickerClick}
+                      onToggleFavorite={handleToggleFavorite}
+                    />
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          /* Single Pack View */
+          <div>
+            {(() => {
+              const currentPack = STICKER_PACKS.find((p) => p.id === selectedTab);
+              if (!currentPack) return null;
+              return (
+                <div className="space-y-2">
+                  <div className="flex items-center gap-1.5 px-1 mb-2">
+                    <span className="text-base">{currentPack.icon}</span>
+                    <span className="text-xs font-bold text-base-content/80">
+                      {currentPack.name} Pack
+                    </span>
+                    <span className="text-[10px] text-base-content/40 ml-auto">
+                      {currentPack.stickers.length} stickers
+                    </span>
+                  </div>
+                  <div className="grid grid-cols-4 gap-2">
+                    {currentPack.stickers.map((sticker) => (
+                      <StickerTile
+                        key={sticker.id}
+                        sticker={sticker}
+                        isFavorite={favorites.includes(sticker.url)}
+                        onSelect={handleStickerClick}
+                        onToggleFavorite={handleToggleFavorite}
+                      />
+                    ))}
+                  </div>
+                </div>
+              );
+            })()}
+          </div>
+        )}
+      </div>
+
+      {/* Footer / Tip */}
+      <div className="px-3 py-1.5 border-t border-base-300 bg-base-200/30 text-[10px] text-base-content/50 flex items-center justify-between">
+        <span>Click to send sticker</span>
+        <span>⭐ Hover to favorite</span>
+      </div>
+    </div>
+  );
+};
+
+// Sub-component for individual sticker item with hover effects and star toggle
+const StickerTile = ({ sticker, isFavorite, onSelect, onToggleFavorite }) => {
+  const [imageLoaded, setImageLoaded] = useState(false);
+
+  return (
+    <div className="relative group aspect-square rounded-xl bg-base-200/50 hover:bg-base-200/90 border border-transparent hover:border-primary/30 transition-all duration-150 flex items-center justify-center p-1.5 cursor-pointer overflow-hidden">
+      <button
+        type="button"
+        onClick={() => onSelect(sticker)}
+        className="w-full h-full flex items-center justify-center focus:outline-none"
+        title={sticker.name}
+      >
+        <img
+          src={sticker.url}
+          alt={sticker.name || "Sticker"}
+          loading="lazy"
+          onLoad={() => setImageLoaded(true)}
+          className={`w-full h-full object-contain transition-transform duration-200 group-hover:scale-110 ${
+            imageLoaded ? "opacity-100" : "opacity-0"
+          }`}
+        />
+        {!imageLoaded && (
+          <div className="absolute inset-0 flex items-center justify-center">
+            <Loader2 size={14} className="animate-spin text-base-content/20" />
+          </div>
+        )}
+      </button>
+
+      {/* Favorite Star Button on hover */}
+      <button
+        type="button"
+        onClick={(e) => onToggleFavorite(e, sticker.url)}
+        className={`absolute top-1 right-1 p-1 rounded-full transition-all duration-150 ${
+          isFavorite
+            ? "opacity-100 bg-base-100/90 text-warning shadow-sm"
+            : "opacity-0 group-hover:opacity-100 bg-base-100/80 text-base-content/50 hover:text-warning hover:bg-base-100 shadow-sm"
+        }`}
+        title={isFavorite ? "Remove from Favorites" : "Add to Favorites"}
+      >
+        <Star
+          size={12}
+          className={isFavorite ? "fill-warning text-warning" : ""}
+        />
+      </button>
+    </div>
+  );
+};
+
+export default StickerPicker;
\ No newline at end of file
diff --git a/frontend/src/constants/stickers.js b/frontend/src/constants/stickers.js
new file mode 100644
index 00000000..a18bed15
--- /dev/null
+++ b/frontend/src/constants/stickers.js
@@ -0,0 +1,101 @@
+export const STICKER_PACKS = [
+  {
+    id: "reactions",
+    name: "Reactions",
+    icon: "😂",
+    category: "Emotions",
+    stickers: [
+      { id: "mindblown", name: "Mind Blown", url: "/stickers/reactions/mindblown.svg", tags: ["mindblown", "shock", "wow", "explode", "omg"] },
+      { id: "laughing", name: "Laughing", url: "/stickers/reactions/laughing.svg", tags: ["laugh", "lol", "haha", "rofl", "joy"] },
+      { id: "crying", name: "Crying", url: "/stickers/reactions/crying.svg", tags: ["cry", "sad", "tears", "sob", "upset"] },
+      { id: "party", name: "Party Time", url: "/stickers/reactions/party.svg", tags: ["party", "celebrate", "confetti", "yay", "cheers"] },
+      { id: "cool", name: "Cool Sunglasses", url: "/stickers/reactions/cool.svg", tags: ["cool", "sunglasses", "chill", "boss", "swag"] },
+      { id: "heart_eyes", name: "Heart Eyes", url: "/stickers/reactions/heart_eyes.svg", tags: ["love", "heart", "eyes", "crush", "cute"] },
+      { id: "fire", name: "On Fire", url: "/stickers/reactions/fire.svg", tags: ["fire", "lit", "hot", "flame", "awesome"] },
+      { id: "facepalm", name: "Facepalm", url: "/stickers/reactions/facepalm.svg", tags: ["facepalm", "smh", "disappointed", "duh", "oops"] },
+      { id: "thinking", name: "Thinking", url: "/stickers/reactions/thinking.svg", tags: ["think", "hmm", "ponder", "wonder", "curious"] },
+      { id: "shocked", name: "Shocked", url: "/stickers/reactions/shocked.svg", tags: ["shock", "gasp", "scared", "fear", "omg"] },
+      { id: "angry", name: "Angry", url: "/stickers/reactions/angry.svg", tags: ["angry", "mad", "rage", "furious", "annoyed"] },
+      { id: "angel", name: "Innocent Angel", url: "/stickers/reactions/angel.svg", tags: ["angel", "innocent", "good", "halo", "pure"] },
+    ],
+  },
+  {
+    id: "pepe_memes",
+    name: "Pepe & Memes",
+    icon: "🐸",
+    category: "Memes",
+    stickers: [
+      { id: "pepe_happy", name: "Pepe Happy", url: "/stickers/memes/pepe_happy.svg", tags: ["pepe", "happy", "smile", "feelsgood", "frog"] },
+      { id: "pepe_sad", name: "Pepe Sad", url: "/stickers/memes/pepe_sad.svg", tags: ["pepe", "sad", "cry", "feelsbadman", "rain"] },
+      { id: "pepe_hype", name: "Pepe Hype", url: "/stickers/memes/pepe_hype.svg", tags: ["pepe", "hype", "party", "dance", "energy"] },
+      { id: "pepe_smart", name: "Big Brain Pepe", url: "/stickers/memes/pepe_smart.svg", tags: ["pepe", "brain", "smart", "genius", "iq"] },
+      { id: "doge_wow", name: "Doge Wow", url: "/stickers/memes/doge_wow.svg", tags: ["doge", "wow", "shiba", "dog", "meme"] },
+      { id: "score_100", name: "100 Percent", url: "/stickers/memes/score_100.svg", tags: ["100", "score", "perfect", "facts", "real"] },
+      { id: "gg_wp", name: "GG Well Played", url: "/stickers/memes/gg_wp.svg", tags: ["gg", "game", "win", "gamer", "wp"] },
+      { id: "stonks", name: "Stonks Up", url: "/stickers/memes/stonks.svg", tags: ["stonks", "profit", "money", "up", "crypto"] },
+      { id: "popcat", name: "Pop Cat", url: "/stickers/memes/popcat.svg", tags: ["popcat", "cat", "mouth", "pop", "meme"] },
+      { id: "bruh", name: "Bruh Moment", url: "/stickers/memes/bruh.svg", tags: ["bruh", "moment", "what", "bro", "meme"] },
+    ],
+  },
+  {
+    id: "cute_animals",
+    name: "Cute Animals",
+    icon: "🐱",
+    category: "Animals",
+    stickers: [
+      { id: "cat_heart", name: "Cat Love", url: "/stickers/animals/cat_heart.svg", tags: ["cat", "love", "heart", "kitty", "purr"] },
+      { id: "cat_laptop", name: "Coder Cat", url: "/stickers/animals/cat_laptop.svg", tags: ["cat", "laptop", "code", "work", "busy"] },
+      { id: "dog_happy", name: "Happy Pup", url: "/stickers/animals/dog_happy.svg", tags: ["dog", "pup", "wag", "happy", "cute"] },
+      { id: "fox_sleeping", name: "Sleepy Fox", url: "/stickers/animals/fox_sleeping.svg", tags: ["fox", "sleep", "rest", "night", "bed"] },
+      { id: "bear_hug", name: "Bear Hug", url: "/stickers/animals/bear_hug.svg", tags: ["bear", "hug", "love", "cuddle", "friend"] },
+      { id: "bunny_cheer", name: "Cheering Bunny", url: "/stickers/animals/bunny_cheer.svg", tags: ["bunny", "rabbit", "hop", "cheer", "jump"] },
+      { id: "panda_bamboo", name: "Panda Munch", url: "/stickers/animals/panda_bamboo.svg", tags: ["panda", "eat", "food", "cute", "bamboo"] },
+      { id: "penguin_waddle", name: "Waddling Penguin", url: "/stickers/animals/penguin_waddle.svg", tags: ["penguin", "walk", "cold", "cute", "bird"] },
+    ],
+  },
+  {
+    id: "anime_chibi",
+    name: "Anime & Chibi",
+    icon: "✨",
+    category: "Anime",
+    stickers: [
+      { id: "chibi_sparkle", name: "Sparkle Eyes", url: "/stickers/anime/chibi_sparkle.svg", tags: ["anime", "sparkle", "eyes", "star", "chibi"] },
+      { id: "chibi_rage", name: "Chibi Rage", url: "/stickers/anime/chibi_rage.svg", tags: ["anime", "rage", "anger", "flame", "chibi"] },
+      { id: "chibi_sweat", name: "Nervous Sweat", url: "/stickers/anime/chibi_sweat.svg", tags: ["anime", "nervous", "sweat", "awkward", "oops"] },
+      { id: "chibi_blush", name: "Kawaii Blush", url: "/stickers/anime/chibi_blush.svg", tags: ["anime", "blush", "kawaii", "shy", "cute"] },
+      { id: "chibi_peace", name: "Peace Sign", url: "/stickers/anime/chibi_peace.svg", tags: ["anime", "peace", "victory", "pose", "v"] },
+      { id: "chibi_sleepy", name: "Sleepy Chibi", url: "/stickers/anime/chibi_sleepy.svg", tags: ["anime", "sleep", "zzz", "tired", "chibi"] },
+      { id: "chibi_gaming", name: "Pro Gamer", url: "/stickers/anime/chibi_gaming.svg", tags: ["anime", "game", "controller", "gamer", "play"] },
+      { id: "chibi_coffee", name: "Coffee Time", url: "/stickers/anime/chibi_coffee.svg", tags: ["anime", "coffee", "morning", "tea", "drink"] },
+    ],
+  },
+  {
+    id: "vibes_gestures",
+    name: "Vibes & Gestures",
+    icon: "✌️",
+    category: "Gestures",
+    stickers: [
+      { id: "thumbs_up", name: "Thumbs Up", url: "/stickers/vibes/thumbs_up.svg", tags: ["thumbsup", "ok", "yes", "like", "agree"] },
+      { id: "heart_hands", name: "Heart Hands", url: "/stickers/vibes/heart_hands.svg", tags: ["heart", "hands", "love", "kpop", "care"] },
+      { id: "high_five", name: "High Five", url: "/stickers/vibes/high_five.svg", tags: ["highfive", "team", "celebrate", "slap", "hands"] },
+      { id: "peace_out", name: "Peace Sign", url: "/stickers/vibes/peace_out.svg", tags: ["peace", "vibe", "bye", "chill", "cool"] },
+      { id: "clapping", name: "Clapping", url: "/stickers/vibes/clapping.svg", tags: ["clap", "applause", "bravo", "great", "cheer"] },
+      { id: "rocket_blast", name: "Rocket Launch", url: "/stickers/vibes/rocket_blast.svg", tags: ["rocket", "launch", "moon", "speed", "fast"] },
+      { id: "sparkle_star", name: "Super Star", url: "/stickers/vibes/sparkle_star.svg", tags: ["star", "sparkle", "gold", "shine", "winner"] },
+      { id: "coffee_mug", name: "Fresh Coffee", url: "/stickers/vibes/coffee_mug.svg", tags: ["coffee", "cup", "morning", "fuel", "tea"] },
+    ],
+  },
+];
+
+// Flat map of all stickers for fast lookup
+export const ALL_STICKERS = STICKER_PACKS.flatMap((pack) =>
+  pack.stickers.map((stk) => ({
+    ...stk,
+    packId: pack.id,
+    packName: pack.name,
+  }))
+);
+
+export const findStickerByUrl = (url) => {
+  return ALL_STICKERS.find((s) => s.url === url) || { id: "sticker", name: "Sticker", url };
+};