diff --git a/backend/.env.example b/backend/.env.example
index e62bcaba..5ae4e271 100644
--- a/backend/.env.example
+++ b/backend/.env.example
@@ -3,9 +3,12 @@ MONGODB_URI=your_mongodb_connection_string
 
 # Server
 PORT=5001
-NODE_ENV=development
-
-# Authentication
+NODE_ENV=development
+
+# Set to true only for local testing. Never enable this in production.
+BYPASS_EMAIL_VERIFICATION=false
+
+# Authentication
 JWT_SECRET=your_jwt_secret
 REFRESH_TOKEN_SECRET=your_refresh_token_secret
 
diff --git a/backend/src/controllers/auth.controller.js b/backend/src/controllers/auth.controller.js
index 6a712e0a..303b0beb 100644
--- a/backend/src/controllers/auth.controller.js
+++ b/backend/src/controllers/auth.controller.js
@@ -89,6 +89,50 @@ export const signup = async (req, res) => {
         ),
       }))
     );
+    // Test-only bypass. It requires an explicit opt-in and can never run in
+    // production, even if the environment flag is set accidentally.
+    const isEmailVerificationBypassed =
+      process.env.NODE_ENV === "development" &&
+      process.env.BYPASS_EMAIL_VERIFICATION === "true";
+
+    if (isEmailVerificationBypassed) {
+      // Auto-verify the user and log them in immediately
+      const newUser = await User.create({
+        fullName,
+        email: normalizedEmail,
+        password: hashedPassword,
+        securityQuestions: hashedQuestions,
+        role: "user",
+        isVerified: true, // skip email verification
+      });
+
+      const token = generateToken(newUser._id);
+      const refreshToken = generateRefreshToken(newUser._id);
+      const refreshTokenHash = crypto.createHash("sha256").update(refreshToken).digest("hex");
+      newUser.refreshTokenHash = refreshTokenHash;
+      await newUser.save();
+
+      res.cookie("refreshToken", refreshToken, {
+        httpOnly: true,
+        sameSite: "strict",
+        secure: false,
+        maxAge: 7 * 24 * 60 * 60 * 1000,
+      });
+
+      console.log("[DEV MODE] User auto-verified, no OTP email sent.");
+
+      return res.status(201).json({
+        _id: newUser._id,
+        fullName: newUser.fullName,
+        email: newUser.email,
+        profilePic: newUser.profilePic,
+        role: newUser.role,
+        token,
+        message: "[DEV] Account created and verified automatically (dev mode).",
+      });
+    }
+    // --- END DEV MODE BYPASS ---
+
     const verificationOtp = crypto.randomInt(100000, 1000000).toString();
 
     const hashedVerificationOtp = await bcrypt.hash(
diff --git a/backend/src/controllers/poll.controller.js b/backend/src/controllers/poll.controller.js
new file mode 100644
index 00000000..be6948bd
--- /dev/null
+++ b/backend/src/controllers/poll.controller.js
@@ -0,0 +1,199 @@
+import mongoose from "mongoose";
+import Group from "../models/group.model.js";
+import Poll from "../models/poll.model.js";
+import { io } from "../lib/socket.js";
+
+// Helper — check if user is a member of the group
+const isGroupMember = (group, userId) =>
+  group.members.some((m) => m.userId.toString() === userId.toString());
+
+// POST /api/polls/groups/:groupId
+export const createPoll = async (req, res) => {
+  try {
+    const { groupId } = req.params;
+    const creatorId = req.user._id;
+    const { question, options, expiresAt } = req.body;
+
+    if (!mongoose.Types.ObjectId.isValid(groupId)) {
+      return res.status(400).json({ message: "Invalid group ID" });
+    }
+
+    const group = await Group.findById(groupId);
+    if (!group) {
+      return res.status(404).json({ message: "Group not found" });
+    }
+
+    if (!isGroupMember(group, creatorId)) {
+      return res.status(403).json({ message: "Not a group member" });
+    }
+
+    if (!question?.trim()) {
+      return res.status(400).json({ message: "Poll question is required" });
+    }
+
+    if (!Array.isArray(options) || options.length < 2 || options.length > 10) {
+      return res
+        .status(400)
+        .json({ message: "A poll must have between 2 and 10 options" });
+    }
+
+    const sanitizedOptions = options
+      .map((o) => ({ text: typeof o === "string" ? o.trim() : o?.text?.trim() }))
+      .filter((o) => o.text);
+
+    if (sanitizedOptions.length < 2) {
+      return res
+        .status(400)
+        .json({ message: "At least 2 non-empty options are required" });
+    }
+
+    const poll = await Poll.create({
+      groupId,
+      creatorId,
+      question: question.trim(),
+      options: sanitizedOptions,
+      expiresAt: expiresAt ? new Date(expiresAt) : null,
+    });
+
+    const populated = await poll.populate("creatorId", "fullName profilePic");
+
+    // Broadcast to all group members
+    io.to(groupId.toString()).emit("newGroupPoll", populated);
+
+    res.status(201).json(populated);
+  } catch (error) {
+    console.error("Create poll error:", error);
+    res.status(500).json({ message: "Server error" });
+  }
+};
+
+// GET /api/polls/groups/:groupId
+export const getGroupPolls = async (req, res) => {
+  try {
+    const { groupId } = req.params;
+    const userId = req.user._id;
+
+    if (!mongoose.Types.ObjectId.isValid(groupId)) {
+      return res.status(400).json({ message: "Invalid group ID" });
+    }
+
+    const group = await Group.findById(groupId);
+    if (!group) {
+      return res.status(404).json({ message: "Group not found" });
+    }
+
+    if (!isGroupMember(group, userId)) {
+      return res.status(403).json({ message: "Access denied" });
+    }
+
+    const polls = await Poll.find({ groupId })
+      .populate("creatorId", "fullName profilePic")
+      .sort({ createdAt: -1 });
+
+    res.status(200).json(polls);
+  } catch (error) {
+    console.error("Get group polls error:", error);
+    res.status(500).json({ message: "Server error" });
+  }
+};
+
+// POST /api/polls/:pollId/vote
+export const votePoll = async (req, res) => {
+  try {
+    const { pollId } = req.params;
+    const { optionId } = req.body;
+    const userId = req.user._id;
+
+    if (!mongoose.Types.ObjectId.isValid(pollId)) {
+      return res.status(400).json({ message: "Invalid poll ID" });
+    }
+
+    const poll = await Poll.findById(pollId);
+    if (!poll) {
+      return res.status(404).json({ message: "Poll not found" });
+    }
+
+    // Verify membership
+    const group = await Group.findById(poll.groupId);
+    if (!group || !isGroupMember(group, userId)) {
+      return res.status(403).json({ message: "Not a group member" });
+    }
+
+    // Check poll is still active (not closed / not expired)
+    if (poll.isClosed || (poll.expiresAt && new Date() > poll.expiresAt)) {
+      return res.status(400).json({ message: "This poll is no longer active" });
+    }
+
+    const targetOption = poll.options.id(optionId);
+    if (!targetOption) {
+      return res.status(400).json({ message: "Option not found" });
+    }
+
+    // Remove user's vote from all options first (enforce single-choice)
+    poll.options.forEach((opt) => {
+      opt.votes = opt.votes.filter((v) => v.toString() !== userId.toString());
+    });
+
+    // Toggle: if user already had this option, the vote is now removed (removed above).
+    // If not, add the vote.
+    const alreadyVoted = targetOption.votes.some(
+      (v) => v.toString() === userId.toString(),
+    );
+
+    if (!alreadyVoted) {
+      targetOption.votes.push(userId);
+    }
+
+    await poll.save();
+
+    const populated = await poll.populate("creatorId", "fullName profilePic");
+
+    // Broadcast updated poll to the whole group
+    io.to(poll.groupId.toString()).emit("pollUpdated", populated);
+
+    res.status(200).json(populated);
+  } catch (error) {
+    console.error("Vote poll error:", error);
+    res.status(500).json({ message: "Server error" });
+  }
+};
+
+// PATCH /api/polls/:pollId/close
+export const closePoll = async (req, res) => {
+  try {
+    const { pollId } = req.params;
+    const userId = req.user._id;
+
+    if (!mongoose.Types.ObjectId.isValid(pollId)) {
+      return res.status(400).json({ message: "Invalid poll ID" });
+    }
+
+    const poll = await Poll.findById(pollId);
+    if (!poll) {
+      return res.status(404).json({ message: "Poll not found" });
+    }
+
+    // Only the creator can close the poll
+    if (poll.creatorId.toString() !== userId.toString()) {
+      return res
+        .status(403)
+        .json({ message: "Only the poll creator can close it" });
+    }
+
+    if (poll.isClosed) {
+      return res.status(400).json({ message: "Poll is already closed" });
+    }
+
+    poll.isClosed = true;
+    await poll.save();
+
+    const populated = await poll.populate("creatorId", "fullName profilePic");
+
+    io.to(poll.groupId.toString()).emit("pollUpdated", populated);
+
+    res.status(200).json(populated);
+  } catch (error) {
+    console.error("Close poll error:", error);
+    res.status(500).json({ message: "Server error" });
+  }
+};
diff --git a/backend/src/index.js b/backend/src/index.js
index f8de292c..5d3e05ce 100644
--- a/backend/src/index.js
+++ b/backend/src/index.js
@@ -15,6 +15,7 @@ import adminRoutes from "./routes/admin.routes.js";
 import reportRoutes from "./routes/report.routes.js";
 import gifRoutes from "./routes/gif.routes.js";
 import userRoutes from "./routes/user.route.js";
+import pollRoutes from "./routes/poll.routes.js";
 
 dotenv.config();
 
@@ -48,6 +49,7 @@ app.use("/api/admin", adminRoutes);
 app.use("/api/reports", reportRoutes);
 app.use("/api/gif", gifRoutes);
 app.use("/api/users", userRoutes);
+app.use("/api/polls", pollRoutes);
 
 if (process.env.NODE_ENV === "production") {
   app.use(express.static(path.join(__dirname, "../frontend/dist")));
diff --git a/backend/src/models/poll.model.js b/backend/src/models/poll.model.js
new file mode 100644
index 00000000..28aae7d5
--- /dev/null
+++ b/backend/src/models/poll.model.js
@@ -0,0 +1,77 @@
+import mongoose from "mongoose";
+
+const pollOptionSchema = new mongoose.Schema(
+  {
+    text: {
+      type: String,
+      required: true,
+      trim: true,
+    },
+    votes: [
+      {
+        type: mongoose.Schema.Types.ObjectId,
+        ref: "User",
+      },
+    ],
+  },
+  { _id: true },
+);
+
+const pollSchema = new mongoose.Schema(
+  {
+    groupId: {
+      type: mongoose.Schema.Types.ObjectId,
+      ref: "Group",
+      required: true,
+      index: true,
+    },
+
+    creatorId: {
+      type: mongoose.Schema.Types.ObjectId,
+      ref: "User",
+      required: true,
+      index: true,
+    },
+
+    question: {
+      type: String,
+      required: true,
+      trim: true,
+    },
+
+    options: {
+      type: [pollOptionSchema],
+      validate: {
+        validator: (opts) => opts.length >= 2 && opts.length <= 10,
+        message: "A poll must have between 2 and 10 options",
+      },
+    },
+
+    // Optional expiry — null means no expiry
+    expiresAt: {
+      type: Date,
+      default: null,
+    },
+
+    isClosed: {
+      type: Boolean,
+      default: false,
+      index: true,
+    },
+  },
+  { timestamps: true },
+);
+
+// Virtual: is this poll currently active?
+pollSchema.virtual("isActive").get(function () {
+  if (this.isClosed) return false;
+  if (this.expiresAt && new Date() > this.expiresAt) return false;
+  return true;
+});
+
+pollSchema.set("toObject", { virtuals: true });
+pollSchema.set("toJSON", { virtuals: true });
+
+const Poll = mongoose.models.Poll || mongoose.model("Poll", pollSchema);
+
+export default Poll;
diff --git a/backend/src/models/user.model.js b/backend/src/models/user.model.js
index 12ea320f..d4a315ed 100644
--- a/backend/src/models/user.model.js
+++ b/backend/src/models/user.model.js
@@ -159,7 +159,8 @@ const userSchema = new mongoose.Schema(
 
     googleId: {
       type: String,
-      default: null,
+      unique: true,
+      sparse: true,
     },
 
     refreshTokenHash: {
diff --git a/backend/src/routes/poll.routes.js b/backend/src/routes/poll.routes.js
new file mode 100644
index 00000000..561d1787
--- /dev/null
+++ b/backend/src/routes/poll.routes.js
@@ -0,0 +1,17 @@
+import express from "express";
+import { protectRoute } from "../middleware/auth.middleware.js";
+import {
+  createPoll,
+  getGroupPolls,
+  votePoll,
+  closePoll,
+} from "../controllers/poll.controller.js";
+
+const router = express.Router();
+
+router.post("/groups/:groupId", protectRoute, createPoll);
+router.get("/groups/:groupId", protectRoute, getGroupPolls);
+router.post("/:pollId/vote", protectRoute, votePoll);
+router.patch("/:pollId/close", protectRoute, closePoll);
+
+export default router;
diff --git a/backend/src/seeds/makeAdmin.js b/backend/src/seeds/makeAdmin.js
new file mode 100644
index 00000000..8ee84c88
--- /dev/null
+++ b/backend/src/seeds/makeAdmin.js
@@ -0,0 +1,51 @@
+/**
+ * makeAdmin.js — Promote a user to admin role
+ *
+ * Usage:
+ *   node src/seeds/makeAdmin.js <email>
+ *
+ * Example:
+ *   node src/seeds/makeAdmin.js you@example.com
+ */
+
+import mongoose from "mongoose";
+import dotenv from "dotenv";
+import User from "../models/user.model.js";
+
+dotenv.config();
+
+const email = process.argv[2];
+
+if (!email) {
+  console.error("❌  Please provide an email address.");
+  console.error("    Usage: node src/seeds/makeAdmin.js <email>");
+  process.exit(1);
+}
+
+async function makeAdmin() {
+  try {
+    await mongoose.connect(process.env.MONGODB_URI);
+    console.log("✅  Connected to MongoDB");
+
+    const user = await User.findOneAndUpdate(
+      { email: email.toLowerCase().trim() },
+      { $set: { role: "admin" } },
+      { new: true }
+    );
+
+    if (!user) {
+      console.error(`❌  No user found with email: ${email}`);
+      process.exit(1);
+    }
+
+    console.log(`✅  Success! "${user.fullName}" (${user.email}) is now an admin.`);
+  } catch (err) {
+    console.error("❌  Error:", err.message);
+    process.exit(1);
+  } finally {
+    await mongoose.disconnect();
+    console.log("🔌  Disconnected from MongoDB");
+  }
+}
+
+makeAdmin();
diff --git a/frontend/src/components/ChatContainer.jsx b/frontend/src/components/ChatContainer.jsx
index ecdbc795..d0c87dac 100644
--- a/frontend/src/components/ChatContainer.jsx
+++ b/frontend/src/components/ChatContainer.jsx
@@ -1,6 +1,7 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useMemo } from "react";
 import { useChatStore } from "../store/useChatStore";
 import { useAuthStore } from "../store/useAuthStore";
+import { usePollStore } from "../store/usePollStore";
 import { motion, AnimatePresence } from "framer-motion";
 
 import ChatHeader from "./ChatHeader";
@@ -8,6 +9,7 @@ import MessageInput from "./MessageInput";
 import MessageSkeleton from "./skeletons/MessageSkeleton";
 import MessageBubble from "./MessageBubble.jsx";
 import PinnedHeader from "./PinnedHeader.jsx";
+import PollBubble from "./PollBubble.jsx";
 
 const ChatContainer = () => {
   const {
@@ -27,6 +29,14 @@ const ChatContainer = () => {
     highlightedMessageId,
   } = useChatStore();
 
+  const {
+    polls,
+    getGroupPolls,
+    clearPolls,
+    subscribeToPollEvents,
+    unsubscribeFromPollEvents,
+  } = usePollStore();
+
   const { authUser } = useAuthStore();
   const bottomRef = useRef(null);
   const messageRefs = useRef({});
@@ -37,12 +47,20 @@ const ChatContainer = () => {
   const wallpaper = chatWallpapers?.[chatId];
   const clearedAt = clearedChats?.[chatId];
 
-  // subscribe / unsubscribe
+  // subscribe / unsubscribe messages
   useEffect(() => {
     subscribeToMessages();
     return () => unsubscribeFromMessages();
   }, [selectedUser?._id, selectedGroup?._id, selectedChatType]);
 
+  // subscribe / unsubscribe poll events (group only)
+  useEffect(() => {
+    if (selectedChatType === "group") {
+      subscribeToPollEvents();
+    }
+    return () => unsubscribeFromPollEvents();
+  }, [selectedGroup?._id, selectedChatType]);
+
   // fetch messages
   useEffect(() => {
     if (selectedChatType === "private" && selectedUser?._id) {
@@ -53,6 +71,15 @@ const ChatContainer = () => {
     }
   }, [selectedUser?._id, selectedGroup?._id, selectedChatType]);
 
+  // fetch polls (group only); clear when leaving group
+  useEffect(() => {
+    if (selectedChatType === "group" && selectedGroup?._id) {
+      getGroupPolls(selectedGroup._id);
+    } else {
+      clearPolls();
+    }
+  }, [selectedGroup?._id, selectedChatType]);
+
   useEffect(() => {
     if (!highlightedMessageId) return;
 
@@ -70,7 +97,35 @@ const ChatContainer = () => {
     bottomRef.current?.scrollIntoView({
       behavior: window.innerWidth < 640 ? "auto" : "smooth",
     });
-  }, [messages, typingUsers, isAILoading]);
+  }, [messages, polls, typingUsers, isAILoading]);
+
+  const visibleMessages = clearedAt
+    ? messages.filter((msg) => new Date(msg.createdAt).getTime() > clearedAt)
+    : messages;
+
+  // Merge messages and polls into a single sorted timeline
+  const timelineItems = useMemo(() => {
+    const msgItems = visibleMessages.map((m) => ({
+      type: "message",
+      _id: m._id,
+      createdAt: m.createdAt,
+      data: m,
+    }));
+
+    const pollItems =
+      selectedChatType === "group"
+        ? polls.map((p) => ({
+            type: "poll",
+            _id: p._id,
+            createdAt: p.createdAt,
+            data: p,
+          }))
+        : [];
+
+    return [...msgItems, ...pollItems].sort(
+      (a, b) => new Date(a.createdAt) - new Date(b.createdAt),
+    );
+  }, [visibleMessages, polls, selectedChatType]);
 
   if (!selectedUser && !selectedGroup) return null;
 
@@ -84,10 +139,6 @@ const ChatContainer = () => {
     );
   }
 
-  const visibleMessages = clearedAt
-    ? messages.filter((msg) => new Date(msg.createdAt).getTime() > clearedAt)
-    : messages;
-
   return (
     <div className="flex flex-1 flex-col h-full min-h-0 w-full bg-transparent overflow-hidden">
       <div className="shrink-0 z-20">
@@ -117,14 +168,30 @@ const ChatContainer = () => {
 
         <div className="relative z-10 h-full overflow-y-auto overscroll-contain px-2 py-2 sm:px-4 sm:py-3">
           <div className="space-y-2 sm:space-y-4">
-            {visibleMessages.map((message, idx) => {
+            {timelineItems.map((item, idx) => {
+              const isLast = idx === timelineItems.length - 1;
+
+              if (item.type === "poll") {
+                return (
+                  <div
+                    key={`poll-${item._id}`}
+                    ref={(el) => {
+                      if (isLast) bottomRef.current = el;
+                    }}
+                    className="flex justify-start px-2 sm:px-4"
+                  >
+                    <PollBubble poll={item.data} />
+                  </div>
+                );
+              }
+
+              // Regular message
+              const message = item.data;
               const isMe =
                 typeof message.senderId === "string"
                   ? message.senderId === authUser._id
                   : message.senderId?._id === authUser._id;
 
-              const isLast = idx === visibleMessages.length - 1;
-
               const sender =
                 selectedChatType === "group"
                   ? message.senderId
diff --git a/frontend/src/components/MessageInput.jsx b/frontend/src/components/MessageInput.jsx
index 1960fd87..934c66fc 100644
--- a/frontend/src/components/MessageInput.jsx
+++ b/frontend/src/components/MessageInput.jsx
@@ -8,11 +8,15 @@ import {
   StopCircle,
   Smile,
   Clapperboard,
+  BarChart2,
 } from "lucide-react";
+
 import toast from "react-hot-toast";
 import { useChatStore } from "../store/useChatStore";
 import EmojiPicker from "emoji-picker-react";
 import GifPicker from "./GifPicker";
+import PollCreatorModal from "./PollCreatorModal";
+
 
 const MessageInput = () => {
   const [text, setText] = useState("");
@@ -23,6 +27,8 @@ const MessageInput = () => {
   const [showEmojiPicker, setShowEmojiPicker] = useState(false);
   const [showGifPicker, setShowGifPicker] = useState(false);
   const [dragActive, setDragActive] = useState(false);
+  const [showPollModal, setShowPollModal] = useState(false);
+
 
   const emojiRef = useRef(null);
   const gifRef = useRef(null);
@@ -38,6 +44,7 @@ const MessageInput = () => {
     sendMessageToAI,
     selectedChatType,
     selectedUser,
+    selectedGroup,
     startTyping,
     stopTyping,
     replyingTo,
@@ -45,6 +52,7 @@ const MessageInput = () => {
     smartReplies,
   } = useChatStore();
 
+
   const isAI = selectedChatType === "private" && selectedUser?.isAI;
 
   useEffect(() => {
@@ -483,6 +491,19 @@ const MessageInput = () => {
                 >
                   <Paperclip size={18} />
                 </button>
+
+                {/* Poll button — group chats only */}
+                {selectedChatType === "group" && (
+                  <button
+                    type="button"
+                    onClick={() => setShowPollModal(true)}
+                    className="btn btn-ghost btn-circle btn-xs sm:btn-sm"
+                    title="Create poll"
+                  >
+                    <BarChart2 size={18} />
+                  </button>
+                )}
+
               </div>
             )}
           </div>
@@ -524,6 +545,13 @@ const MessageInput = () => {
           </button>
         </div>
       </form>
+
+      {/* Poll creator modal — rendered outside form to avoid nesting issues */}
+      <PollCreatorModal
+        isOpen={showPollModal}
+        onClose={() => setShowPollModal(false)}
+        groupId={selectedGroup?._id}
+      />
     </div>
   );
 };
@@ -541,3 +569,4 @@ const Preview = ({ children, onRemove }) => (
 );
 
 export default MessageInput;
+
diff --git a/frontend/src/components/PollBubble.jsx b/frontend/src/components/PollBubble.jsx
new file mode 100644
index 00000000..9fce6ba8
--- /dev/null
+++ b/frontend/src/components/PollBubble.jsx
@@ -0,0 +1,229 @@
+import { motion, AnimatePresence } from "framer-motion";
+import { 
+  BarChart3, 
+  Clock, 
+  Check, 
+  Lock, 
+  Crown, 
+  Sparkles, 
+  XCircle,
+  Users
+} from "lucide-react";
+import { useAuthStore } from "../store/useAuthStore";
+import { usePollStore } from "../store/usePollStore";
+import { formatMessageTime } from "../lib/utils";
+
+const PollBubble = ({ poll }) => {
+  const { authUser } = useAuthStore();
+  const { votePoll, closePoll } = usePollStore();
+
+  const isCreator = poll.creatorId?._id === authUser._id || poll.creatorId === authUser._id;
+  const isExpired = poll.expiresAt && new Date() > new Date(poll.expiresAt);
+  const isActive = !poll.isClosed && !isExpired;
+
+  // Total votes across all options
+  const totalVotes = poll.options.reduce((sum, opt) => sum + opt.votes.length, 0);
+
+  // Highest vote count to determine the leader
+  const maxVotes = Math.max(...poll.options.map((o) => o.votes.length), 0);
+
+  // Which option did the current user vote for?
+  const myVotedOptionId = poll.options.find((opt) =>
+    opt.votes.some((v) => (typeof v === "string" ? v : v?._id || v?.toString?.()) === authUser._id),
+  )?._id;
+
+  const handleVote = (optionId) => {
+    if (!isActive) return;
+    votePoll(poll._id, optionId);
+  };
+
+  const handleClose = () => {
+    if (!isCreator) return;
+    if (window.confirm("Close this poll? Members will no longer be able to vote.")) {
+      closePoll(poll._id);
+    }
+  };
+
+  const getVotePercent = (votes) => {
+    if (totalVotes === 0) return 0;
+    return Math.round((votes.length / totalVotes) * 100);
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.95, y: 10 }}
+      animate={{ opacity: 1, scale: 1, y: 0 }}
+      transition={{ type: "spring", stiffness: 350, damping: 25 }}
+      className="relative w-full max-w-[360px] sm:max-w-[400px] bg-base-100/90 dark:bg-base-900/80 backdrop-blur-xl border border-base-content/10 dark:border-white/10 rounded-3xl shadow-xl shadow-base-content/5 overflow-hidden transition-all duration-300 hover:shadow-2xl hover:border-primary/30"
+    >
+      {/* Subtle Ambient Top Accent Glow */}
+      <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-primary/60 via-secondary/60 to-primary/60" />
+
+      {/* Header */}
+      <div className="p-4 sm:p-5 pb-3">
+        <div className="flex items-start justify-between gap-3 mb-2">
+          {/* Tag & Status */}
+          <div className="flex items-center gap-2">
+            <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-semibold bg-primary/10 text-primary border border-primary/20">
+              <BarChart3 size={12} className="shrink-0" />
+              <span>Poll</span>
+            </span>
+
+            {/* Status indicator */}
+            {!isActive ? (
+              <span className={`inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[10px] font-medium border ${
+                poll.isClosed 
+                  ? "bg-base-200 text-base-content/60 border-base-300"
+                  : "bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20"
+              }`}>
+                <Lock size={10} />
+                {poll.isClosed ? "Closed" : "Expired"}
+              </span>
+            ) : (
+              <span className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[10px] font-medium text-emerald-600 dark:text-emerald-400 bg-emerald-500/10 border border-emerald-500/20">
+                <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" />
+                Live
+              </span>
+            )}
+          </div>
+
+          {/* Close Action for Creator */}
+          {isCreator && isActive && (
+            <button
+              type="button"
+              onClick={handleClose}
+              className="inline-flex items-center gap-1 text-[11px] font-medium text-error/70 hover:text-error hover:bg-error/10 px-2 py-1 rounded-lg transition-colors"
+            >
+              <XCircle size={12} />
+              <span>End</span>
+            </button>
+          )}
+        </div>
+
+        {/* Question Title */}
+        <h3 className="text-[15px] font-bold text-base-content leading-snug tracking-tight break-words">
+          {poll.question}
+        </h3>
+        
+        <p className="text-[11px] text-base-content/50 mt-1 flex items-center gap-1">
+          <span>Created by</span>
+          <span className="font-medium text-base-content/75">{poll.creatorId?.fullName || "Anonymous"}</span>
+        </p>
+      </div>
+
+      {/* Options List */}
+      <div className="px-4 sm:px-5 pb-4 space-y-2.5">
+        {poll.options.map((opt) => {
+          const percent = getVotePercent(opt.votes);
+          const isMyVote = myVotedOptionId === opt._id;
+          const isLeading = totalVotes > 0 && opt.votes.length === maxVotes && maxVotes > 0;
+
+          return (
+            <motion.button
+              key={opt._id}
+              type="button"
+              onClick={() => handleVote(opt._id)}
+              disabled={!isActive}
+              whileTap={isActive ? { scale: 0.98 } : {}}
+              className={`group relative w-full text-left rounded-2xl overflow-hidden p-3 transition-all duration-200 select-none
+                ${isActive ? "cursor-pointer hover:border-primary/40" : "cursor-default"}
+                ${isMyVote 
+                  ? "border-2 border-primary bg-primary/5 shadow-sm shadow-primary/10" 
+                  : "border border-base-200 dark:border-base-800 bg-base-200/30 hover:bg-base-200/50"
+                }
+              `}
+            >
+              {/* Animated Progress Fill */}
+              <motion.div
+                initial={{ width: 0 }}
+                animate={{ width: `${percent}%` }}
+                transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
+                className={`absolute inset-y-0 left-0 rounded-2xl pointer-events-none transition-colors duration-300
+                  ${isMyVote
+                    ? "bg-gradient-to-r from-primary/20 to-primary/15"
+                    : isLeading
+                    ? "bg-gradient-to-r from-primary/10 to-base-300/40"
+                    : "bg-base-200/70 dark:bg-base-700/30"
+                  }
+                `}
+              />
+
+              {/* Inner Content */}
+              <div className="relative flex items-center justify-between gap-3 z-10">
+                <div className="flex items-center gap-2.5 min-w-0 flex-1">
+                  {/* Selection Radio / Check Indicator */}
+                  <div
+                    className={`w-5 h-5 rounded-full flex items-center justify-center shrink-0 transition-all duration-200 border
+                      ${isMyVote
+                        ? "bg-primary border-primary text-primary-content shadow-sm shadow-primary/30 scale-105"
+                        : "border-base-content/20 bg-base-100/60 dark:bg-base-800/60 group-hover:border-primary/50"
+                      }
+                    `}
+                  >
+                    {isMyVote && (
+                      <motion.div
+                        initial={{ scale: 0 }}
+                        animate={{ scale: 1 }}
+                        transition={{ type: "spring", stiffness: 500, damping: 25 }}
+                      >
+                        <Check size={12} strokeWidth={3} />
+                      </motion.div>
+                    )}
+                  </div>
+
+                  <span className={`text-[13px] font-medium leading-tight truncate ${isMyVote ? "font-semibold text-primary" : "text-base-content/90"}`}>
+                    {opt.text}
+                  </span>
+
+                  {/* Leader Trophy Icon */}
+                  {isLeading && (
+                    <Crown size={12} className="text-amber-500 shrink-0 drop-shadow-sm ml-0.5" />
+                  )}
+                </div>
+
+                {/* Percentage & Vote Count */}
+                <div className="flex items-baseline gap-1.5 shrink-0 pl-2">
+                  <span className={`text-[13px] font-bold tracking-tight ${isMyVote ? "text-primary" : "text-base-content/70"}`}>
+                    {percent}%
+                  </span>
+                  <span className="text-[10px] text-base-content/40 font-medium">
+                    ({opt.votes.length})
+                  </span>
+                </div>
+              </div>
+            </motion.button>
+          );
+        })}
+      </div>
+
+      {/* Footer Meta */}
+      <div className="flex items-center justify-between px-4 sm:px-5 py-3 border-t border-base-200/80 dark:border-base-800 bg-base-200/20 text-[11px] text-base-content/50">
+        <div className="flex items-center gap-1.5 font-medium">
+          <Users size={12} className="opacity-70" />
+          <span>{totalVotes} {totalVotes === 1 ? "vote" : "votes"}</span>
+          
+          {poll.expiresAt && isActive && (
+            <>
+              <span className="opacity-30">•</span>
+              <Clock size={11} className="opacity-70" />
+              <span>
+                Ends {new Date(poll.expiresAt).toLocaleDateString(undefined, {
+                  month: "short",
+                  day: "numeric",
+                  hour: "2-digit",
+                  minute: "2-digit",
+                })}
+              </span>
+            </>
+          )}
+        </div>
+
+        <span className="text-[10px] opacity-40 font-medium">
+          {formatMessageTime(poll.createdAt)}
+        </span>
+      </div>
+    </motion.div>
+  );
+};
+
+export default PollBubble;
\ No newline at end of file
diff --git a/frontend/src/components/PollCreatorModal.jsx b/frontend/src/components/PollCreatorModal.jsx
new file mode 100644
index 00000000..c4cf40fe
--- /dev/null
+++ b/frontend/src/components/PollCreatorModal.jsx
@@ -0,0 +1,263 @@
+import { useState } from "react";
+import { createPortal } from "react-dom";
+import { 
+  X, 
+  Plus, 
+  Trash2, 
+  BarChart3, 
+  Calendar, 
+  Sparkles, 
+  HelpCircle, 
+  Layers 
+} from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+import { usePollStore } from "../store/usePollStore";
+
+const PollCreatorModal = ({ isOpen, onClose, groupId }) => {
+  const { createPoll } = usePollStore();
+
+  const [question, setQuestion] = useState("");
+  const [options, setOptions] = useState(["", ""]);
+  const [expiresAt, setExpiresAt] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleAddOption = () => {
+    if (options.length >= 10) return;
+    setOptions([...options, ""]);
+  };
+
+  const handleRemoveOption = (index) => {
+    if (options.length <= 2) return;
+    setOptions(options.filter((_, i) => i !== index));
+  };
+
+  const handleOptionChange = (index, value) => {
+    const updated = [...options];
+    updated[index] = value;
+    setOptions(updated);
+  };
+
+  const filledOptions = options.map((o) => o.trim()).filter(Boolean);
+  const isValid = question.trim().length > 0 && filledOptions.length >= 2;
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!isValid || isSubmitting) return;
+
+    setIsSubmitting(true);
+    const result = await createPoll(groupId, {
+      question: question.trim(),
+      options: filledOptions,
+      expiresAt: expiresAt || null,
+    });
+    setIsSubmitting(false);
+
+    if (result) {
+      handleClose();
+    }
+  };
+
+  const handleClose = () => {
+    setQuestion("");
+    setOptions(["", ""]);
+    setExpiresAt("");
+    onClose();
+  };
+
+  // Mount directly to document body to completely cover navbar and sidebars
+  return createPortal(
+    <AnimatePresence>
+      {isOpen && (
+        <div className="fixed inset-0 z-[99999] flex items-center justify-center p-4">
+          {/* Full Screen Backdrop (covers entire app) */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="fixed inset-0 bg-black/60 backdrop-blur-sm"
+            onClick={handleClose}
+          />
+
+          {/* Modal Card */}
+          <motion.div
+            initial={{ opacity: 0, scale: 0.94, y: 12 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.94, y: 12 }}
+            transition={{ type: "spring", stiffness: 380, damping: 28 }}
+            className="relative w-full max-w-md bg-white dark:bg-zinc-900 rounded-[28px] shadow-2xl border border-pink-500/20 overflow-hidden z-10"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {/* Top Accent Gradient Bar */}
+            <div className="h-1.5 w-full bg-gradient-to-r from-pink-500 via-rose-400 to-pink-500" />
+
+            {/* Header */}
+            <div className="flex items-center justify-between px-6 pt-5 pb-3 border-b border-zinc-100 dark:border-zinc-800">
+              <div className="flex items-center gap-3">
+                <div className="p-2.5 bg-pink-50 dark:bg-pink-950/40 text-pink-500 rounded-2xl ring-1 ring-pink-500/20">
+                  <BarChart3 size={18} />
+                </div>
+                <div>
+                  <h2 className="font-bold text-[16px] text-zinc-800 dark:text-zinc-100 leading-tight">
+                    Create a Poll
+                  </h2>
+                  <p className="text-[12px] text-zinc-400 dark:text-zinc-500 mt-0.5">
+                    Ask a question and let your group decide
+                  </p>
+                </div>
+              </div>
+              
+              <button
+                onClick={handleClose}
+                type="button"
+                className="w-8 h-8 rounded-full flex items-center justify-center text-zinc-400 hover:text-zinc-700 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors"
+              >
+                <X size={17} />
+              </button>
+            </div>
+
+            {/* Form */}
+            <form onSubmit={handleSubmit} className="p-6 space-y-4 max-h-[75vh] overflow-y-auto">
+              {/* Question */}
+              <div className="space-y-1.5">
+                <div className="flex items-center justify-between text-[11px] font-bold tracking-wider text-zinc-500 uppercase">
+                  <span className="flex items-center gap-1 text-pink-600 dark:text-pink-400">
+                    <HelpCircle size={12} /> Question
+                  </span>
+                  <span className="font-normal lowercase text-zinc-400">{question.length}/200</span>
+                </div>
+                <textarea
+                  rows={2}
+                  value={question}
+                  onChange={(e) => setQuestion(e.target.value)}
+                  placeholder="What's on your mind?..."
+                  maxLength={200}
+                  className="w-full text-sm p-3 rounded-2xl bg-zinc-50 dark:bg-zinc-800/60 border border-zinc-200 dark:border-zinc-700/60 focus:bg-white dark:focus:bg-zinc-800 focus:border-pink-500 focus:ring-2 focus:ring-pink-500/20 outline-none transition-all resize-none text-zinc-800 dark:text-zinc-100 placeholder:text-zinc-400"
+                  required
+                />
+              </div>
+
+              {/* Options */}
+              <div className="space-y-2.5">
+                <div className="flex items-center justify-between">
+                  <span className="flex items-center gap-1 text-[11px] font-bold tracking-wider text-pink-600 dark:text-pink-400 uppercase">
+                    <Layers size={12} /> Poll Options
+                  </span>
+                  <span className="text-[11px] font-medium px-2 py-0.5 rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-500">
+                    {options.length}/10
+                  </span>
+                </div>
+
+                <div className="space-y-2">
+                  <AnimatePresence initial={false}>
+                    {options.map((opt, idx) => {
+                      const hasContent = opt.trim().length > 0;
+                      return (
+                        <motion.div
+                          key={idx}
+                          initial={{ opacity: 0, y: -6 }}
+                          animate={{ opacity: 1, y: 0 }}
+                          exit={{ opacity: 0, height: 0 }}
+                          transition={{ duration: 0.15 }}
+                          className="flex items-center gap-2"
+                        >
+                          {/* Number Badge */}
+                          <div className={`w-7 h-7 rounded-xl flex items-center justify-center text-xs font-bold shrink-0 transition-all ${
+                            hasContent
+                              ? "bg-pink-500 text-white shadow-sm shadow-pink-500/20" 
+                              : "bg-zinc-100 dark:bg-zinc-800 text-zinc-400"
+                          }`}>
+                            {idx + 1}
+                          </div>
+
+                          {/* Input */}
+                          <input
+                            type="text"
+                            value={opt}
+                            onChange={(e) => handleOptionChange(idx, e.target.value)}
+                            placeholder={`Option ${idx + 1}`}
+                            maxLength={100}
+                            className="flex-1 h-9 text-sm px-3 rounded-xl bg-zinc-50 dark:bg-zinc-800/60 border border-zinc-200 dark:border-zinc-700/60 focus:bg-white dark:focus:bg-zinc-800 focus:border-pink-500 focus:ring-2 focus:ring-pink-500/20 outline-none transition-all text-zinc-800 dark:text-zinc-100 placeholder:text-zinc-400"
+                          />
+
+                          {/* Delete Button */}
+                          <button
+                            type="button"
+                            onClick={() => handleRemoveOption(idx)}
+                            disabled={options.length <= 2}
+                            className="w-7 h-7 flex items-center justify-center rounded-lg text-zinc-300 hover:text-rose-500 hover:bg-rose-50 dark:hover:bg-rose-950/30 disabled:opacity-0 transition-all shrink-0"
+                          >
+                            <Trash2 size={14} />
+                          </button>
+                        </motion.div>
+                      );
+                    })}
+                  </AnimatePresence>
+                </div>
+
+                {/* Add Option Trigger */}
+                {options.length < 10 && (
+                  <button
+                    type="button"
+                    onClick={handleAddOption}
+                    className="w-full flex items-center justify-center gap-1.5 py-2.5 rounded-xl border border-dashed border-pink-300 dark:border-pink-800/60 hover:border-pink-500 bg-pink-50/40 dark:bg-pink-950/20 text-pink-600 dark:text-pink-400 text-xs font-semibold hover:bg-pink-50 transition-all"
+                  >
+                    <Plus size={14} strokeWidth={2.5} />
+                    <span>Add Another Option</span>
+                  </button>
+                )}
+              </div>
+
+              {/* Expiration */}
+              <div className="space-y-1.5 pt-2 border-t border-zinc-100 dark:border-zinc-800">
+                <div className="flex items-center gap-1 text-[11px] font-bold tracking-wider text-pink-600 dark:text-pink-400 uppercase">
+                  <Calendar size={12} /> Expiration Date
+                  <span className="font-normal lowercase text-zinc-400">(optional)</span>
+                </div>
+                <input
+                  type="datetime-local"
+                  value={expiresAt}
+                  onChange={(e) => setExpiresAt(e.target.value)}
+                  min={new Date().toISOString().slice(0, 16)}
+                  className="w-full h-9 text-xs sm:text-sm px-3 rounded-xl bg-zinc-50 dark:bg-zinc-800/60 border border-zinc-200 dark:border-zinc-700/60 focus:bg-white dark:focus:bg-zinc-800 focus:border-pink-500 focus:ring-2 focus:ring-pink-500/20 outline-none transition-all text-zinc-700 dark:text-zinc-200"
+                />
+              </div>
+
+              {/* Actions */}
+              <div className="flex items-center gap-2.5 pt-2">
+                <button
+                  type="button"
+                  onClick={handleClose}
+                  className="flex-1 py-2.5 rounded-xl text-xs sm:text-sm font-semibold text-zinc-600 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  disabled={isSubmitting || !isValid}
+                  className={`flex-1 py-2.5 rounded-xl text-xs sm:text-sm font-semibold flex items-center justify-center gap-1.5 transition-all ${
+                    isValid && !isSubmitting
+                      ? "bg-pink-500 hover:bg-pink-600 text-white shadow-lg shadow-pink-500/25 active:scale-[0.98]"
+                      : "bg-zinc-100 dark:bg-zinc-800 text-zinc-400 dark:text-zinc-600 cursor-not-allowed"
+                  }`}
+                >
+                  {isSubmitting ? (
+                    <span className="loading loading-spinner loading-xs" />
+                  ) : (
+                    <>
+                      <Sparkles size={14} />
+                      <span>Create Poll</span>
+                    </>
+                  )}
+                </button>
+              </div>
+            </form>
+          </motion.div>
+        </div>
+      )}
+    </AnimatePresence>,
+    document.body
+  );
+};
+
+export default PollCreatorModal;
\ No newline at end of file
diff --git a/frontend/src/pages/SignUpPage.jsx b/frontend/src/pages/SignUpPage.jsx
index a559ccc7..63a56945 100644
--- a/frontend/src/pages/SignUpPage.jsx
+++ b/frontend/src/pages/SignUpPage.jsx
@@ -58,6 +58,13 @@ const SignUpPage = () => {
     if (!validateForm()) return;
     const result = await signup(formData);
     if (result) {
+      // A development OTP bypass returns an authenticated session directly.
+      // Only show the verification screen when the backend requests it.
+      if (result.token) {
+        navigate("/");
+        return;
+      }
+
       const email = result.email || formData.email.trim();
       sessionStorage.setItem("pendingVerificationEmail", email);
       navigate("/verify-email", { state: { email } });
@@ -238,4 +245,4 @@ const SignUpPage = () => {
   );
 };
 
-export default SignUpPage;
\ No newline at end of file
+export default SignUpPage;
diff --git a/frontend/src/store/useAuthStore.js b/frontend/src/store/useAuthStore.js
index e2d07404..747e1558 100644
--- a/frontend/src/store/useAuthStore.js
+++ b/frontend/src/store/useAuthStore.js
@@ -46,6 +46,14 @@ export const useAuthStore = create((set, get) => ({
     set({ isSigningUp: true });
     try {
       const res = await axiosInstance.post("/auth/signup", data);
+      // Development signup can return an authenticated user when email
+      // verification is deliberately bypassed. Persist that session just as
+      // the regular login flow does.
+      if (res.data.token) {
+        localStorage.setItem("token", res.data.token);
+        set({ authUser: res.data });
+        get().connectSocket();
+      }
       toast.success(res.data.message || "Account created. Please verify your Email.");
       return res.data;
     } catch (error) {
diff --git a/frontend/src/store/usePollStore.js b/frontend/src/store/usePollStore.js
new file mode 100644
index 00000000..6a24cd08
--- /dev/null
+++ b/frontend/src/store/usePollStore.js
@@ -0,0 +1,103 @@
+import { create } from "zustand";
+import toast from "react-hot-toast";
+import { axiosInstance } from "../lib/axios";
+import { useAuthStore } from "./useAuthStore";
+
+export const usePollStore = create((set, get) => ({
+  polls: [],
+  isPollsLoading: false,
+
+  // ─── Fetch ─────────────────────────────────────────────────────────────────
+
+  getGroupPolls: async (groupId) => {
+    set({ isPollsLoading: true });
+    try {
+      const res = await axiosInstance.get(`/polls/groups/${groupId}`);
+      set({ polls: res.data });
+    } catch {
+      toast.error("Failed to load polls");
+    } finally {
+      set({ isPollsLoading: false });
+    }
+  },
+
+  // ─── Create ────────────────────────────────────────────────────────────────
+
+  createPoll: async (groupId, pollData) => {
+    try {
+      const res = await axiosInstance.post(`/polls/groups/${groupId}`, pollData);
+      // Socket will broadcast newGroupPoll — add only if not already present
+      set((state) => {
+        const exists = state.polls.some((p) => p._id === res.data._id);
+        return exists ? {} : { polls: [res.data, ...state.polls] };
+      });
+      toast.success("Poll created!");
+      return res.data;
+    } catch (err) {
+      toast.error(err.response?.data?.message || "Failed to create poll");
+      return null;
+    }
+  },
+
+  // ─── Vote ──────────────────────────────────────────────────────────────────
+
+  votePoll: async (pollId, optionId) => {
+    try {
+      const res = await axiosInstance.post(`/polls/${pollId}/vote`, {
+        optionId,
+      });
+      // Socket will broadcast pollUpdated — update locally as well for instant feedback
+      set((state) => ({
+        polls: state.polls.map((p) => (p._id === pollId ? res.data : p)),
+      }));
+    } catch (err) {
+      toast.error(err.response?.data?.message || "Failed to vote");
+    }
+  },
+
+  // ─── Close ─────────────────────────────────────────────────────────────────
+
+  closePoll: async (pollId) => {
+    try {
+      const res = await axiosInstance.patch(`/polls/${pollId}/close`);
+      set((state) => ({
+        polls: state.polls.map((p) => (p._id === pollId ? res.data : p)),
+      }));
+      toast.success("Poll closed");
+    } catch (err) {
+      toast.error(err.response?.data?.message || "Failed to close poll");
+    }
+  },
+
+  // ─── Socket subscriptions ──────────────────────────────────────────────────
+
+  subscribeToPollEvents: () => {
+    const socket = useAuthStore.getState().socket;
+    if (!socket) return;
+
+    socket.off("newGroupPoll");
+    socket.off("pollUpdated");
+
+    socket.on("newGroupPoll", (poll) => {
+      set((state) => {
+        const exists = state.polls.some((p) => p._id === poll._id);
+        return exists ? {} : { polls: [poll, ...state.polls] };
+      });
+    });
+
+    socket.on("pollUpdated", (poll) => {
+      set((state) => ({
+        polls: state.polls.map((p) => (p._id === poll._id ? poll : p)),
+      }));
+    });
+  },
+
+  unsubscribeFromPollEvents: () => {
+    const socket = useAuthStore.getState().socket;
+    if (!socket) return;
+    socket.off("newGroupPoll");
+    socket.off("pollUpdated");
+  },
+
+  clearPolls: () => set({ polls: [] }),
+}));