diff --git a/package.json b/package.json
index 9962703..a086af3 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "sociowire-frontend",
   "private": true,
-  "version": "0.0.49",
+  "version": "0.0.50",
   "type": "module",
   "scripts": {
     "dev": "vite --host 0.0.0.0",
diff --git a/src/components/Layout/TopBarNew.jsx b/src/components/Layout/TopBarNew.jsx
index b0b4f29..584442d 100644
--- a/src/components/Layout/TopBarNew.jsx
+++ b/src/components/Layout/TopBarNew.jsx
@@ -473,107 +473,136 @@ export default function TopBarNew({ theme = "dark", onChangeTheme, onIslandsClic
         </div>
       )}
 
-      {/* Header - Premium Social Network Style */}
+      {/* Header - Hot Social Network Style */}
       <motion.header
-        className="sticky top-0 z-[1000] w-full overflow-hidden"
+        className="sticky top-0 z-[1000] w-full"
         initial={{ y: -60, opacity: 0 }}
         animate={{ y: 0, opacity: 1 }}
-        transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
+        transition={{ duration: 0.4, ease: "easeOut" }}
       >
-        {/* Clean dark background */}
-        <div className="absolute inset-0 bg-surface-950/95 backdrop-blur-xl" />
-        {/* Subtle bottom border */}
-        <div className="absolute bottom-0 left-0 right-0 h-px bg-surface-700/50" />
+        {/* Glassmorphism background with gradient */}
+        <div className="absolute inset-0 bg-gradient-to-r from-surface-950/98 via-surface-900/95 to-surface-950/98 backdrop-blur-2xl" />
+        {/* Animated accent line */}
+        <motion.div
+          className="absolute bottom-0 left-0 right-0 h-[2px]"
+          style={{ background: "linear-gradient(90deg, #3b82f6, #06b6d4, #10b981, #06b6d4, #3b82f6)", backgroundSize: "200% 100%" }}
+          animate={{ backgroundPosition: ["0% 0%", "200% 0%"] }}
+          transition={{ duration: 3, repeat: Infinity, ease: "linear" }}
+        />
 
-        <div className="relative flex items-center justify-between gap-2 px-3 py-2.5 sm:px-5 sm:py-3">
-          {/* Left: Clean Logo */}
-          <div className="flex items-center gap-2.5">
-            <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-500 p-0.5">
-              <div className="w-full h-full rounded-[10px] bg-surface-900 flex items-center justify-center">
-                <img src="/logo.png" alt="SocioWire" className="w-6 h-6 object-contain" />
+        <div className="relative flex items-center justify-between gap-3 px-3 py-2 sm:px-4 sm:py-2.5">
+          {/* Left: Logo with pulse effect */}
+          <motion.div
+            className="flex items-center gap-3 cursor-pointer"
+            whileHover={{ scale: 1.02 }}
+            whileTap={{ scale: 0.98 }}
+          >
+            <div className="relative">
+              <motion.div
+                className="absolute -inset-1 rounded-2xl bg-gradient-to-r from-blue-500 to-cyan-500 opacity-50 blur-lg"
+                animate={{ opacity: [0.3, 0.6, 0.3] }}
+                transition={{ duration: 2, repeat: Infinity }}
+              />
+              <div className="relative w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500 via-cyan-500 to-emerald-500 p-[2px] shadow-lg shadow-cyan-500/25">
+                <div className="w-full h-full rounded-[10px] bg-surface-900 flex items-center justify-center">
+                  <img src="/logo.png" alt="S" className="w-6 h-6 object-contain" />
+                </div>
               </div>
             </div>
-            <div className="flex flex-col">
-              <span className="text-base font-bold text-white tracking-tight">sociowire</span>
-              <span className="flex items-center gap-1 text-[9px] text-surface-400">
-                <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" />
+            <div className="hidden sm:flex flex-col">
+              <span className="text-lg font-black text-transparent bg-clip-text bg-gradient-to-r from-white via-blue-100 to-cyan-200">
+                SOCIOWIRE
+              </span>
+              <span className="flex items-center gap-1.5 text-[10px] font-medium text-surface-400">
+                <motion.span
+                  className="w-2 h-2 rounded-full bg-emerald-500"
+                  animate={{ scale: [1, 1.3, 1], opacity: [1, 0.7, 1] }}
+                  transition={{ duration: 1.5, repeat: Infinity }}
+                />
                 {t('topbar.wiredToLife')}
               </span>
             </div>
-          </div>
+          </motion.div>
 
-          {/* Center: Spacer for balance */}
-          <div className="hidden lg:block flex-1" />
-
-          {/* Right: Actions */}
-          <div className="flex items-center gap-2 sm:gap-2.5">
-            {/* PWA Install */}
-            {showInstallBtn && (
-              <ActionButton
-                icon="fa-solid fa-download"
-                label={t('topbar.install')}
-                color="default"
-                onClick={() => promptInstall()}
-                title={t('topbar.installApp')}
-              />
-            )}
-
-            {/* Theme - mobile */}
-            <div className="lg:hidden" ref={themeBtnRef}>
+          {/* Center: Theme pills (desktop) */}
+          <div className="hidden md:flex items-center gap-1 px-1.5 py-1 rounded-full bg-surface-800/40 border border-white/5">
+            {THEMES.map((themeKey) => (
               <motion.button
-                type="button"
-                className={`w-9 h-9 rounded-xl flex items-center justify-center transition-all
-                  ${showThemeMenu
-                    ? "bg-accent/20 text-accent border border-accent/30"
-                    : "bg-surface-800/50 text-surface-400 border border-white/5 hover:text-surface-200 hover:bg-surface-800"
-                  }`}
-                onClick={toggleThemeMenu}
+                key={themeKey}
+                className={`px-4 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider transition-all
+                  ${theme === themeKey
+                    ? "bg-gradient-to-r from-blue-500 to-cyan-500 text-white shadow-lg shadow-cyan-500/25"
+                    : "text-surface-400 hover:text-white hover:bg-white/5"}`}
+                onClick={() => onChangeTheme?.(themeKey)}
                 whileHover={{ scale: 1.05 }}
                 whileTap={{ scale: 0.95 }}
               >
-                <i className="fa-solid fa-palette text-sm" />
+                {t(`theme.${themeKey}`)}
+              </motion.button>
+            ))}
+          </div>
+
+          {/* Right: Action buttons */}
+          <div className="flex items-center gap-1.5 sm:gap-2">
+            {/* Install PWA */}
+            {showInstallBtn && (
+              <motion.button
+                className="flex items-center gap-2 px-3 py-2 rounded-xl
+                           bg-gradient-to-r from-emerald-500/20 to-cyan-500/20
+                           border border-emerald-500/30 text-emerald-400
+                           text-xs font-bold hover:from-emerald-500/30 hover:to-cyan-500/30 transition-all"
+                onClick={() => promptInstall()}
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+              >
+                <i className="fa-solid fa-download" />
+                <span className="hidden sm:inline">{t('topbar.install')}</span>
+              </motion.button>
+            )}
+
+            {/* Theme (mobile) */}
+            <div className="md:hidden" ref={themeBtnRef}>
+              <motion.button
+                className={`w-9 h-9 rounded-xl flex items-center justify-center transition-all
+                  ${showThemeMenu ? "bg-cyan-500/20 text-cyan-400 border-cyan-500/40" : "bg-surface-800/50 text-surface-400 border-white/5"} border`}
+                onClick={toggleThemeMenu}
+                whileHover={{ scale: 1.1 }}
+                whileTap={{ scale: 0.9 }}
+              >
+                <i className="fa-solid fa-palette" />
               </motion.button>
             </div>
 
             {/* Language */}
             <div ref={langBtnRef}>
               <motion.button
-                type="button"
                 className={`w-9 h-9 rounded-xl flex items-center justify-center transition-all
-                  ${showLangMenu
-                    ? "bg-accent/20 text-accent border border-accent/30"
-                    : "bg-surface-800/50 text-surface-400 border border-white/5 hover:text-surface-200 hover:bg-surface-800"
-                  }`}
+                  ${showLangMenu ? "bg-blue-500/20 text-blue-400 border-blue-500/40" : "bg-surface-800/50 text-surface-400 border-white/5"} border`}
                 onClick={toggleLangMenu}
-                whileHover={{ scale: 1.05 }}
-                whileTap={{ scale: 0.95 }}
+                whileHover={{ scale: 1.1 }}
+                whileTap={{ scale: 0.9 }}
               >
-                <i className="fa-solid fa-globe text-sm" />
+                <i className="fa-solid fa-globe" />
               </motion.button>
             </div>
 
             {/* Friends */}
             {authenticated && (
               <motion.button
-                type="button"
                 className={`relative w-9 h-9 rounded-xl flex items-center justify-center transition-all
-                  ${showFriends
-                    ? "bg-amber-500/20 text-amber-400 border border-amber-500/30"
-                    : "bg-surface-800/50 text-surface-400 border border-white/5 hover:text-amber-400 hover:bg-amber-500/10"
-                  }`}
+                  ${showFriends ? "bg-amber-500/20 text-amber-400 border-amber-500/40" : "bg-surface-800/50 text-surface-400 border-white/5"} border`}
                 onClick={() => setShowFriends(!showFriends)}
-                whileHover={{ scale: 1.05 }}
-                whileTap={{ scale: 0.95 }}
+                whileHover={{ scale: 1.1 }}
+                whileTap={{ scale: 0.9 }}
               >
-                <i className="fa-solid fa-user-group text-sm" />
+                <i className="fa-solid fa-user-group" />
                 {pendingRequestsCount > 0 && (
                   <motion.span
-                    className="absolute -top-1 -right-1 min-w-[18px] h-[18px] px-1
-                               rounded-full bg-red-500 text-white text-[10px] font-bold
-                               flex items-center justify-center border-2 border-surface-900"
+                    className="absolute -top-1.5 -right-1.5 min-w-[18px] h-[18px] px-1
+                               rounded-full bg-gradient-to-r from-red-500 to-pink-500 text-white text-[10px] font-bold
+                               flex items-center justify-center shadow-lg shadow-red-500/50"
                     initial={{ scale: 0 }}
                     animate={{ scale: 1 }}
-                    transition={{ type: "spring", stiffness: 500 }}
                   >
                     {pendingRequestsCount}
                   </motion.span>
@@ -581,8 +610,8 @@ export default function TopBarNew({ theme = "dark", onChangeTheme, onIslandsClic
               </motion.button>
             )}
 
-            {/* Divider */}
-            <div className="hidden sm:block w-px h-6 bg-gradient-to-b from-transparent via-surface-600/50 to-transparent" />
+            {/* Separator */}
+            <div className="hidden sm:block w-px h-7 bg-gradient-to-b from-transparent via-white/20 to-transparent mx-1" />
 
             {/* User/Auth */}
             {authenticated ? (
diff --git a/src/components/Posts/PostCreateModal.jsx b/src/components/Posts/PostCreateModal.jsx
index f8147f6..401c0dd 100644
--- a/src/components/Posts/PostCreateModal.jsx
+++ b/src/components/Posts/PostCreateModal.jsx
@@ -1,7 +1,15 @@
 import React, { useState, useRef, useCallback, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { useTranslation } from "react-i18next";
-import { uploadImage } from "../../api/client";
+import { uploadImage, fetchLinkPreview } from "../../api/client";
+
+// Content modes
+const CONTENT_MODES = [
+  { id: "text", icon: "fa-pen", label: "Text", color: "from-blue-500 to-cyan-500" },
+  { id: "photo", icon: "fa-image", label: "Photo", color: "from-emerald-500 to-green-500" },
+  { id: "link", icon: "fa-link", label: "Link", color: "from-purple-500 to-violet-500" },
+  { id: "live", icon: "fa-broadcast-tower", label: "Live", color: "from-red-500 to-rose-500" },
+];
 
 const CATEGORIES = [
   { id: "News", icon: "fa-newspaper", color: "from-blue-500 to-cyan-500" },
@@ -21,27 +29,36 @@ export default function PostCreateModal({
   isOpen,
   onClose,
   onSubmit,
+  onGoLive,
   coords,
   initialCategory = "News",
   isSaving = false,
   saveError = "",
 }) {
   const { t } = useTranslation();
+  const [mode, setMode] = useState("text");
   const [category, setCategory] = useState(initialCategory);
   const [subCategory, setSubCategory] = useState(SUB_CATEGORIES[initialCategory]?.[0] || "");
   const [title, setTitle] = useState("");
   const [body, setBody] = useState("");
+  const [linkUrl, setLinkUrl] = useState("");
+  const [linkPreview, setLinkPreview] = useState(null);
+  const [linkLoading, setLinkLoading] = useState(false);
   const [images, setImages] = useState([]);
   const [uploading, setUploading] = useState(false);
   const fileInputRef = useRef(null);
   const cameraInputRef = useRef(null);
   const textareaRef = useRef(null);
+  const linkTimeoutRef = useRef(null);
 
   // Reset on open
   useEffect(() => {
     if (isOpen) {
+      setMode("text");
       setTitle("");
       setBody("");
+      setLinkUrl("");
+      setLinkPreview(null);
       setImages([]);
       setCategory(initialCategory);
       setSubCategory(SUB_CATEGORIES[initialCategory]?.[0] || "");
@@ -52,10 +69,33 @@ export default function PostCreateModal({
   useEffect(() => {
     if (textareaRef.current) {
       textareaRef.current.style.height = "auto";
-      textareaRef.current.style.height = textareaRef.current.scrollHeight + "px";
+      textareaRef.current.style.height = Math.min(textareaRef.current.scrollHeight, 200) + "px";
     }
   }, [body]);
 
+  // Link preview fetch
+  useEffect(() => {
+    if (mode !== "link" || !linkUrl.trim()) {
+      setLinkPreview(null);
+      return;
+    }
+
+    clearTimeout(linkTimeoutRef.current);
+    linkTimeoutRef.current = setTimeout(async () => {
+      try {
+        setLinkLoading(true);
+        const preview = await fetchLinkPreview(linkUrl.trim());
+        if (preview) {
+          setLinkPreview(preview);
+          if (!title && preview.title) setTitle(preview.title);
+        }
+      } catch {}
+      setLinkLoading(false);
+    }, 500);
+
+    return () => clearTimeout(linkTimeoutRef.current);
+  }, [linkUrl, mode, title]);
+
   const handleFileChange = useCallback(async (e) => {
     const files = Array.from(e.target.files || []);
     if (files.length === 0) return;
@@ -80,19 +120,28 @@ export default function PostCreateModal({
   };
 
   const handleSubmit = () => {
-    if (!title.trim() && !body.trim() && images.length === 0) return;
+    if (mode === "live") {
+      onGoLive?.({ category, subCategory, title, body, coords });
+      return;
+    }
+
+    if (!title.trim() && !body.trim() && images.length === 0 && !linkUrl.trim()) return;
 
     onSubmit?.({
+      mode,
       title: title.trim(),
       body: body.trim(),
       category,
       subCategory,
       images,
+      linkUrl: linkUrl.trim(),
+      linkPreview,
       coords,
     });
   };
 
-  const canSubmit = (title.trim() || body.trim() || images.length > 0) && !isSaving && !uploading;
+  const canSubmit = mode === "live" ||
+    (title.trim() || body.trim() || images.length > 0 || linkUrl.trim()) && !isSaving && !uploading;
 
   if (!isOpen) return null;
 
@@ -106,70 +155,94 @@ export default function PostCreateModal({
       >
         {/* Backdrop */}
         <motion.div
-          className="absolute inset-0 bg-black/70 backdrop-blur-sm"
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
+          className="absolute inset-0 bg-black/80 backdrop-blur-md"
           onClick={onClose}
         />
 
         {/* Modal */}
         <motion.div
-          className="relative w-full max-w-lg mx-4 mb-0 sm:mb-0
-                     bg-gradient-to-br from-surface-900 via-surface-950 to-surface-900
+          className="relative w-full max-w-xl mx-2 sm:mx-4
+                     bg-gradient-to-b from-surface-800 to-surface-900
                      rounded-t-3xl sm:rounded-3xl border border-white/10
-                     shadow-2xl overflow-hidden"
+                     shadow-2xl shadow-black/50 overflow-hidden"
           initial={{ y: "100%", opacity: 0 }}
           animate={{ y: 0, opacity: 1 }}
           exit={{ y: "100%", opacity: 0 }}
-          transition={{ type: "spring", damping: 25, stiffness: 300 }}
+          transition={{ type: "spring", damping: 30, stiffness: 400 }}
         >
+          {/* Glowing top border */}
+          <div className="absolute top-0 left-0 right-0 h-[2px] bg-gradient-to-r from-blue-500 via-cyan-500 to-emerald-500" />
+
           {/* Header */}
-          <div className="flex items-center justify-between px-5 py-4 border-b border-white/10">
+          <div className="flex items-center justify-between px-4 py-3 border-b border-white/5">
             <motion.button
-              className="w-9 h-9 rounded-full bg-surface-800/80 border border-white/10
-                         flex items-center justify-center text-surface-300 hover:text-white
-                         hover:bg-red-500/20 hover:border-red-500/40 transition-all"
-              whileHover={{ scale: 1.1 }}
+              className="w-8 h-8 rounded-full bg-surface-700/50 border border-white/10
+                         flex items-center justify-center text-surface-400 hover:text-white
+                         hover:bg-red-500/20 hover:border-red-500/30 transition-all"
               whileTap={{ scale: 0.9 }}
               onClick={onClose}
             >
-              <i className="fa-solid fa-times" />
+              <i className="fa-solid fa-times text-sm" />
             </motion.button>
 
-            <h2 className="text-lg font-bold text-surface-100">Create Post</h2>
+            <h2 className="text-base font-bold text-white">Create Post</h2>
 
             <motion.button
-              className={`px-5 py-2 rounded-full font-bold text-sm transition-all
+              className={`px-4 py-1.5 rounded-full font-bold text-sm transition-all
                          ${canSubmit
-                           ? "bg-gradient-to-r from-blue-500 to-cyan-500 text-white shadow-lg shadow-blue-500/30"
-                           : "bg-surface-700/50 text-surface-400 cursor-not-allowed"}`}
+                           ? mode === "live"
+                             ? "bg-gradient-to-r from-red-500 to-rose-500 text-white shadow-lg shadow-red-500/30"
+                             : "bg-gradient-to-r from-blue-500 to-cyan-500 text-white shadow-lg shadow-cyan-500/30"
+                           : "bg-surface-700/50 text-surface-500 cursor-not-allowed"}`}
               whileHover={canSubmit ? { scale: 1.05 } : {}}
               whileTap={canSubmit ? { scale: 0.95 } : {}}
               onClick={handleSubmit}
               disabled={!canSubmit}
             >
               {isSaving ? (
-                <><i className="fa-solid fa-spinner fa-spin mr-2" />Posting...</>
+                <i className="fa-solid fa-spinner fa-spin" />
+              ) : mode === "live" ? (
+                <>
+                  <i className="fa-solid fa-broadcast-tower mr-1.5" />
+                  Go Live
+                </>
               ) : (
                 "Post"
               )}
             </motion.button>
           </div>
 
-          {/* Content */}
-          <div className="p-5 max-h-[70vh] overflow-y-auto">
-            {/* Category chips */}
-            <div className="flex gap-2 mb-4 overflow-x-auto pb-2">
+          {/* Content modes */}
+          <div className="flex gap-1 px-4 py-3 border-b border-white/5 overflow-x-auto">
+            {CONTENT_MODES.map((m) => (
+              <motion.button
+                key={m.id}
+                className={`flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold whitespace-nowrap
+                           transition-all ${mode === m.id
+                             ? `bg-gradient-to-r ${m.color} text-white shadow-lg`
+                             : "bg-surface-700/30 text-surface-400 hover:text-white hover:bg-surface-700/50"}`}
+                whileHover={{ scale: 1.02 }}
+                whileTap={{ scale: 0.98 }}
+                onClick={() => setMode(m.id)}
+              >
+                <i className={`fa-solid ${m.icon}`} />
+                {m.label}
+              </motion.button>
+            ))}
+          </div>
+
+          {/* Scrollable content */}
+          <div className="p-4 max-h-[60vh] overflow-y-auto space-y-4">
+            {/* Category row */}
+            <div className="flex gap-2 overflow-x-auto pb-1">
               {CATEGORIES.map((cat) => (
                 <motion.button
                   key={cat.id}
-                  className={`flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium whitespace-nowrap
+                  className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-bold whitespace-nowrap
                              transition-all border ${category === cat.id
-                               ? `bg-gradient-to-r ${cat.color} text-white border-white/20 shadow-lg`
-                               : "bg-surface-800/50 text-surface-300 border-white/5 hover:border-white/20"}`}
-                  whileHover={{ scale: 1.02 }}
-                  whileTap={{ scale: 0.98 }}
+                               ? `bg-gradient-to-r ${cat.color} text-white border-transparent`
+                               : "bg-transparent text-surface-400 border-surface-600/50 hover:border-surface-500"}`}
+                  whileTap={{ scale: 0.95 }}
                   onClick={() => {
                     setCategory(cat.id);
                     setSubCategory(SUB_CATEGORIES[cat.id]?.[0] || "");
@@ -181,60 +254,122 @@ export default function PostCreateModal({
               ))}
             </div>
 
-            {/* Sub-category chips */}
-            <div className="flex gap-2 mb-5 overflow-x-auto pb-2">
+            {/* Sub-category */}
+            <div className="flex gap-1.5 overflow-x-auto pb-1">
               {SUB_CATEGORIES[category]?.map((sub) => (
-                <motion.button
+                <button
                   key={sub}
-                  className={`px-3 py-1.5 rounded-full text-xs font-medium whitespace-nowrap
-                             transition-all border ${subCategory === sub
-                               ? "bg-accent/20 text-accent border-accent/40"
-                               : "bg-surface-800/30 text-surface-400 border-white/5 hover:border-white/20"}`}
-                  whileTap={{ scale: 0.95 }}
+                  className={`px-2.5 py-1 rounded-lg text-[11px] font-medium whitespace-nowrap transition-all
+                             ${subCategory === sub
+                               ? "bg-accent/20 text-accent border border-accent/40"
+                               : "bg-surface-700/30 text-surface-500 border border-transparent hover:text-surface-300"}`}
                   onClick={() => setSubCategory(sub)}
                 >
                   {sub}
-                </motion.button>
+                </button>
               ))}
             </div>
 
+            {/* Link input (for link mode) */}
+            {mode === "link" && (
+              <div className="space-y-2">
+                <div className="relative">
+                  <i className="fa-solid fa-link absolute left-3 top-1/2 -translate-y-1/2 text-surface-500 text-sm" />
+                  <input
+                    type="url"
+                    placeholder="Paste a link..."
+                    value={linkUrl}
+                    onChange={(e) => setLinkUrl(e.target.value)}
+                    className="w-full pl-10 pr-4 py-3 rounded-xl
+                               bg-surface-700/50 border border-white/10
+                               text-surface-100 text-sm
+                               placeholder:text-surface-500
+                               focus:outline-none focus:border-cyan-500/50"
+                  />
+                  {linkLoading && (
+                    <i className="fa-solid fa-spinner fa-spin absolute right-3 top-1/2 -translate-y-1/2 text-surface-400" />
+                  )}
+                </div>
+                {/* Link preview card */}
+                {linkPreview && (
+                  <motion.div
+                    className="rounded-xl bg-surface-700/30 border border-white/5 overflow-hidden"
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                  >
+                    {linkPreview.image && (
+                      <img src={linkPreview.image} alt="" className="w-full h-32 object-cover" />
+                    )}
+                    <div className="p-3">
+                      <p className="text-xs text-surface-500 mb-1">{linkPreview.site_name || new URL(linkUrl).hostname}</p>
+                      <p className="text-sm font-medium text-surface-200 line-clamp-2">{linkPreview.title}</p>
+                    </div>
+                  </motion.div>
+                )}
+              </div>
+            )}
+
+            {/* Live mode info */}
+            {mode === "live" && (
+              <motion.div
+                className="p-4 rounded-xl bg-gradient-to-br from-red-500/10 to-rose-500/10 border border-red-500/20"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+              >
+                <div className="flex items-center gap-3 mb-3">
+                  <div className="w-12 h-12 rounded-full bg-gradient-to-br from-red-500 to-rose-500 flex items-center justify-center">
+                    <i className="fa-solid fa-broadcast-tower text-white text-xl" />
+                  </div>
+                  <div>
+                    <p className="text-white font-bold">Start a Live Stream</p>
+                    <p className="text-surface-400 text-sm">Broadcast to your followers in real-time</p>
+                  </div>
+                </div>
+                <p className="text-surface-400 text-xs">
+                  Your location will be visible to viewers. The stream will appear on the map.
+                </p>
+              </motion.div>
+            )}
+
             {/* Title input */}
             <input
               type="text"
-              placeholder="What's happening?"
+              placeholder={mode === "live" ? "Stream title..." : "What's happening?"}
               value={title}
               onChange={(e) => setTitle(e.target.value)}
-              className="w-full px-4 py-3 mb-3 rounded-xl
-                         bg-surface-800/50 border border-white/10
-                         text-surface-100 text-lg font-medium
+              className="w-full px-4 py-3 rounded-xl
+                         bg-surface-700/50 border border-white/10
+                         text-white text-base font-medium
                          placeholder:text-surface-500
-                         focus:outline-none focus:border-accent/50
-                         transition-colors"
+                         focus:outline-none focus:border-cyan-500/50"
             />
 
-            {/* Body textarea */}
-            <textarea
-              ref={textareaRef}
-              placeholder="Add more details..."
-              value={body}
-              onChange={(e) => setBody(e.target.value)}
-              rows={2}
-              className="w-full px-4 py-3 mb-4 rounded-xl
-                         bg-surface-800/50 border border-white/10
-                         text-surface-200 text-sm
-                         placeholder:text-surface-500
-                         focus:outline-none focus:border-accent/50
-                         transition-colors resize-none"
-            />
+            {/* Body textarea (hidden for live mode) */}
+            {mode !== "live" && (
+              <textarea
+                ref={textareaRef}
+                placeholder="Add more details..."
+                value={body}
+                onChange={(e) => setBody(e.target.value)}
+                rows={2}
+                className="w-full px-4 py-3 rounded-xl
+                           bg-surface-700/50 border border-white/10
+                           text-surface-200 text-sm leading-relaxed
+                           placeholder:text-surface-500
+                           focus:outline-none focus:border-cyan-500/50
+                           resize-none"
+              />
+            )}
 
-            {/* Image gallery */}
-            {images.length > 0 && (
-              <div className="grid grid-cols-3 gap-2 mb-4">
+            {/* Image gallery (for photo/text modes) */}
+            {(mode === "photo" || mode === "text") && images.length > 0 && (
+              <div className="grid grid-cols-3 gap-2">
                 {images.map((url, idx) => (
                   <div key={idx} className="relative aspect-square rounded-xl overflow-hidden group">
                     <img src={url} alt="" className="w-full h-full object-cover" />
+                    <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity" />
                     <motion.button
-                      className="absolute top-2 right-2 w-6 h-6 rounded-full bg-black/60
+                      className="absolute top-2 right-2 w-6 h-6 rounded-full bg-red-500/80
                                  flex items-center justify-center text-white text-xs
                                  opacity-0 group-hover:opacity-100 transition-opacity"
                       whileTap={{ scale: 0.9 }}
@@ -249,65 +384,65 @@ export default function PostCreateModal({
 
             {/* Upload progress */}
             {uploading && (
-              <div className="flex items-center gap-2 mb-4 text-surface-400 text-sm">
-                <i className="fa-solid fa-spinner fa-spin" />
+              <div className="flex items-center justify-center gap-2 py-3 text-cyan-400 text-sm">
+                <i className="fa-solid fa-cloud-arrow-up animate-bounce" />
                 Uploading...
               </div>
             )}
 
             {/* Error */}
             {saveError && (
-              <div className="flex items-center gap-2 mb-4 p-3 rounded-xl bg-red-500/10 border border-red-500/30 text-red-400 text-sm">
+              <div className="flex items-center gap-2 p-3 rounded-xl bg-red-500/10 border border-red-500/30 text-red-400 text-sm">
                 <i className="fa-solid fa-exclamation-circle" />
                 {saveError}
               </div>
             )}
 
-            {/* Location indicator */}
+            {/* Location */}
             {coords && (
-              <div className="flex items-center gap-2 mb-4 text-surface-400 text-sm">
-                <i className="fa-solid fa-location-dot text-accent" />
-                <span>Location selected on map</span>
+              <div className="flex items-center gap-2 text-surface-400 text-sm">
+                <i className="fa-solid fa-location-dot text-emerald-500" />
+                <span>Location pinned on map</span>
               </div>
             )}
           </div>
 
           {/* Bottom toolbar */}
-          <div className="flex items-center gap-3 px-5 py-4 border-t border-white/10 bg-surface-900/50">
-            <motion.button
-              className="flex items-center gap-2 px-4 py-2.5 rounded-xl
-                         bg-surface-800/50 border border-white/10
-                         text-surface-300 text-sm font-medium
-                         hover:bg-surface-700/50 hover:text-white transition-all"
-              whileHover={{ scale: 1.02 }}
-              whileTap={{ scale: 0.98 }}
-              onClick={() => fileInputRef.current?.click()}
-              disabled={uploading}
-            >
-              <i className="fa-solid fa-image" />
-              Photo
-            </motion.button>
+          {(mode === "photo" || mode === "text") && (
+            <div className="flex items-center gap-2 px-4 py-3 border-t border-white/5 bg-surface-800/50">
+              <motion.button
+                className="flex items-center gap-2 px-3 py-2 rounded-xl
+                           bg-surface-700/50 border border-white/10
+                           text-surface-300 text-sm font-medium
+                           hover:text-white hover:bg-surface-600/50 transition-all"
+                whileTap={{ scale: 0.95 }}
+                onClick={() => fileInputRef.current?.click()}
+                disabled={uploading}
+              >
+                <i className="fa-solid fa-image text-emerald-400" />
+                Photo
+              </motion.button>
 
-            <motion.button
-              className="flex items-center gap-2 px-4 py-2.5 rounded-xl
-                         bg-surface-800/50 border border-white/10
-                         text-surface-300 text-sm font-medium
-                         hover:bg-surface-700/50 hover:text-white transition-all"
-              whileHover={{ scale: 1.02 }}
-              whileTap={{ scale: 0.98 }}
-              onClick={() => cameraInputRef.current?.click()}
-              disabled={uploading}
-            >
-              <i className="fa-solid fa-camera" />
-              Camera
-            </motion.button>
+              <motion.button
+                className="flex items-center gap-2 px-3 py-2 rounded-xl
+                           bg-surface-700/50 border border-white/10
+                           text-surface-300 text-sm font-medium
+                           hover:text-white hover:bg-surface-600/50 transition-all"
+                whileTap={{ scale: 0.95 }}
+                onClick={() => cameraInputRef.current?.click()}
+                disabled={uploading}
+              >
+                <i className="fa-solid fa-camera text-blue-400" />
+                Camera
+              </motion.button>
 
-            <div className="flex-1" />
+              <div className="flex-1" />
 
-            <span className="text-xs text-surface-500">
-              {title.length + body.length}/500
-            </span>
-          </div>
+              <span className="text-xs text-surface-500">
+                {title.length + body.length}/500
+              </span>
+            </div>
+          )}
 
           {/* Hidden file inputs */}
           <input