From f5adb02567764c1bad99814a5fbde865d3a219c1 Mon Sep 17 00:00:00 2001
From: chaaanuwu <gkchanuwa@gmail.com>
Date: Sat, 2 May 2026 12:54:43 +0530
Subject: [PATCH 1/2] feat: Implement follow/unfollow functionality and enhance
 user profile data fetching

---
 client/src/api/userFollows.api.js             |   5 +
 client/src/pages/Profile.jsx                  | 111 ++++++++++--------
 .../features/profile.controller.js            |  61 ++++------
 server/controllers/user.controller.js         |  12 +-
 server/routes/features/profile.route.js       |   4 +-
 server/routes/user.route.js                   |   2 -
 6 files changed, 108 insertions(+), 87 deletions(-)

diff --git a/client/src/api/userFollows.api.js b/client/src/api/userFollows.api.js
index a5881f2..1d189ea 100644
--- a/client/src/api/userFollows.api.js
+++ b/client/src/api/userFollows.api.js
@@ -3,4 +3,9 @@ import axiosInstance from "./axiosInstance";
 export const followUser = async (followingId) => {
     const res = await axiosInstance.post('/me/follow', { followingId });
     return res;
+}
+
+export const unfollowUser = async (followingId) => {
+    const res = await axiosInstance.post('/me/unfollow', { followingId });
+    return res;
 }
\ No newline at end of file
diff --git a/client/src/pages/Profile.jsx b/client/src/pages/Profile.jsx
index 9bdd00b..2dc0025 100644
--- a/client/src/pages/Profile.jsx
+++ b/client/src/pages/Profile.jsx
@@ -12,7 +12,7 @@ import Modal from "../components/ui/Modal";
 import SearchBar from "../components/ui/SearchBar";
 import { getHistoryBanner } from "../api/history.api";
 import Dropdown from "../components/ui/Dropdown";
-import { followUser } from "../api/userFollows.api";
+import { followUser, unfollowUser } from "../api/userFollows.api";
 import { getAllComments, postComment, updateComment } from "../api/commments.api";
 
 export default function Profile() {
@@ -35,7 +35,7 @@ export default function Profile() {
     useEffect(() => {
         const fetchProfile = async () => {
             try {
-                setProfileData(null);
+                setLoading(true);
                 const res = await getProfile(userId);
                 setProfileData(res);
             } catch (err) {
@@ -47,16 +47,58 @@ export default function Profile() {
         fetchProfile();
     }, [userId]);
 
-    const handleFollow = async () => {
+    // Check following status
+    useEffect(() => {
+        if (user?.user?._id && profileData?.followers) {
+            const loggedInUserId = user.user._id;
+
+            const isFollowing = profileData.followers.some((record) => {
+                const followerId = record.followerId?._id || record.followerId || record._id;
+                return followerId === loggedInUserId;
+            });
+
+            setFollowing(isFollowing);
+        }
+    }, [profileData, user]);
+
+    const handleFollowToggle = async () => {
+        // 1. Store the previous state in case the API fails (to rollback)
+        const wasFollowing = following;
+        const profileId = profileData.user._id;
+
         try {
-            const res = await followUser(profileData.user._id);
-            if (res.status === 200) {
-                setFollowing(true);
+            if (wasFollowing) {
+                // UNFOLLOW LOGIC
+                const res = await unfollowUser(profileId);
+                if (res.status === 200) {
+                    setFollowing(false);
+                    setProfileData(prev => ({
+                        ...prev,
+                        followersCount: Math.max(0, (prev.followersCount || 0) - 1),
+                        // Remove current user from the local followers array
+                        followers: prev.followers.filter(f =>
+                            (f.followerId?._id || f.followerId || f._id) !== user.user._id
+                        )
+                    }));
+                }
+            } else {
+                // FOLLOW LOGIC
+                const res = await followUser(profileId);
+                if (res.status === 200) {
+                    setFollowing(true);
+                    setProfileData(prev => ({
+                        ...prev,
+                        followersCount: (prev.followersCount || 0) + 1,
+                        // Add current user to local followers array to keep useEffect happy
+                        followers: [...prev.followers, { followerId: user.user._id }]
+                    }));
+                }
             }
         } catch (error) {
-            console.error("Failed to follow user", error);
+            console.error("Toggle follow failed", error);
+            // Optional: Alert the user or rollback UI state
         }
-    }
+    };
 
     const handleOpenReplyModal = async (review) => {
         setComments([]);
@@ -77,7 +119,6 @@ export default function Profile() {
         try {
             const res = await postComment(selectedReview._id, content);
             if (res.data.success) {
-                // Refresh comments locally
                 setComments(prev => [...prev, res.data.comment]);
                 commentInputRef.current.value = "";
                 commentInputRef.current.style.height = 'auto';
@@ -134,7 +175,6 @@ export default function Profile() {
 
     return (
         <main className="min-h-screen bg-stone-50 font-sans text-stone-900 selection:bg-amber-100">
-            {/* Cover Section */}
             <div className="relative h-64 md:h-96 w-full bg-stone-200 overflow-hidden">
                 <motion.img
                     initial={{ scale: 1.1, opacity: 0 }}
@@ -156,7 +196,6 @@ export default function Profile() {
                 )}
             </div>
 
-            {/* Profile Info */}
             <div className="max-w-5xl mx-auto px-6 lg:px-8">
                 <div className="relative -mt-20 md:-mt-28 flex flex-col md:flex-row md:items-end gap-6 md:gap-10">
                     <motion.div
@@ -206,12 +245,14 @@ export default function Profile() {
                             {!isMyProfile ? (
                                 !following ? (
                                     <button
-                                        onClick={handleFollow}
+                                        onClick={handleFollowToggle}
                                         className="px-10 py-4 bg-stone-900 text-white rounded-2xl font-bold text-sm hover:bg-stone-800 transition-all shadow-lg active:scale-95">
                                         Follow
                                     </button>
                                 ) : (
-                                    <button className="px-10 py-4 bg-white border border-stone-200 text-stone-600 rounded-2xl font-bold text-sm hover:bg-stone-50 transition-all shadow-sm active:scale-95">
+                                    <button
+                                        onClick={handleFollowToggle}
+                                        className="px-10 py-4 bg-white border border-stone-200 text-stone-700 rounded-2xl font-bold text-sm hover:bg-stone-50 transition-all shadow-sm active:scale-95">
                                         Unfollow
                                     </button>
                                 )
@@ -279,10 +320,9 @@ export default function Profile() {
                 </motion.section>
             </div>
 
-            {/* Comments Modal */}
+            {/* Discussion Modal */}
             <Modal open={isReplyModalOpen} setOpen={setIsReplyModalOpen}>
                 <div className="flex flex-col h-dvh md:h-[90vh] md:max-h-212.5 w-full max-w-5xl mx-auto bg-white md:rounded-[3rem] overflow-hidden shadow-[0_30px_100px_rgba(0,0,0,0.25)] relative">
-
                     <div className="px-4 py-4 md:px-12 md:py-10 flex items-center justify-between border-b border-stone-100 bg-white/95 backdrop-blur-md z-20 shrink-0">
                         <div className="space-y-1.5 md:space-y-1">
                             <div className="flex items-center gap-2">
@@ -299,13 +339,10 @@ export default function Profile() {
                             onClick={() => setIsReplyModalOpen(false)}
                             className="w-10 h-10 md:w-14 md:h-14 flex items-center justify-center bg-stone-100 hover:bg-amber-400 text-stone-900 rounded-full transition-all group active:scale-95 shrink-0"
                         >
-                            <span className="material-symbols-outlined text-xl md:text-2xl group-hover:rotate-90 transition-transform">
-                                close
-                            </span>
+                            <span className="material-symbols-outlined text-xl md:text-2xl group-hover:rotate-90 transition-transform">close</span>
                         </button>
                     </div>
 
-                    {/* Comments Feed */}
                     <div className="flex-1 overflow-y-auto overscroll-contain px-4 py-6 md:px-16 md:py-12 space-y-6 md:space-y-10 custom-scrollbar bg-stone-50/20">
                         {comments?.length > 0 ? (
                             comments.map((c) => (
@@ -320,7 +357,6 @@ export default function Profile() {
                                         className="w-8 h-8 md:w-12 md:h-12 rounded-xl md:rounded-2xl object-cover shrink-0 shadow-md border-2 border-white ring-1 ring-stone-100"
                                         alt="User"
                                     />
-
                                     <div className="flex-1 min-w-0">
                                         <div className="flex flex-wrap items-center justify-between gap-2 mb-2">
                                             <div className="flex flex-wrap items-center gap-2 md:gap-3">
@@ -331,39 +367,28 @@ export default function Profile() {
                                                     {new Date(c.createdAt).toLocaleDateString()}
                                                 </span>
                                             </div>
-
                                             {user?.user?._id === c.userId?._id && (
                                                 <button className="opacity-100 md:opacity-0 group-hover:md:opacity-100 p-2 -m-1 text-stone-400 hover:text-stone-900 transition-all active:text-stone-900">
-                                                    <span className="material-symbols-outlined text-lg md:text-xl">
-                                                        more_horiz
-                                                    </span>
+                                                    <span className="material-symbols-outlined text-lg md:text-xl">more_horiz</span>
                                                 </button>
                                             )}
                                         </div>
-
-                                        <div className="relative w-full">
-                                            <p className="text-stone-600 text-[14px] md:text-[16px] leading-relaxed font-medium bg-white p-4 md:p-6 rounded-2xl md:rounded-4xl rounded-tl-none border border-stone-100 shadow-sm w-full wrap-break-word">
-                                                {c.comment}
-                                            </p>
-                                        </div>
+                                        <p className="text-stone-600 text-[14px] md:text-[16px] leading-relaxed font-medium bg-white p-4 md:p-6 rounded-2xl md:rounded-4xl rounded-tl-none border border-stone-100 shadow-sm w-full wrap-break-word">
+                                            {c.comment}
+                                        </p>
                                     </div>
                                 </motion.div>
                             ))
                         ) : (
                             <div className="h-full flex flex-col items-center justify-center opacity-20 py-12 md:py-20">
-                                <span className="material-symbols-outlined text-5xl md:text-7xl mb-3 md:mb-4">
-                                    forum
-                                </span>
-                                <p className="text-[10px] md:text-xs font-black uppercase tracking-[0.2em] md:tracking-[0.3em] text-center">
-                                    Be the first to speak
-                                </p>
+                                <span className="material-symbols-outlined text-5xl md:text-7xl mb-3 md:mb-4">forum</span>
+                                <p className="text-[10px] md:text-xs font-black uppercase tracking-[0.2em] md:tracking-[0.3em] text-center">Be the first to speak</p>
                             </div>
                         )}
                     </div>
 
                     <div className="shrink-0 p-4 md:p-10 bg-white border-t border-stone-100">
                         <div className="max-w-4xl mx-auto flex items-end gap-2 md:gap-6">
-                            {/* Textarea wrapper */}
                             <div className="flex-1 relative group flex items-center">
                                 <textarea
                                     ref={commentInputRef}
@@ -376,25 +401,17 @@ export default function Profile() {
                                     }}
                                 />
                                 <div className="absolute right-3 bottom-3 md:right-6 md:bottom-6 text-stone-300">
-                                    <span className="material-symbols-outlined text-lg md:text-xl">
-                                        chat_bubble
-                                    </span>
+                                    <span className="material-symbols-outlined text-lg md:text-xl">chat_bubble</span>
                                 </div>
                             </div>
-
                             <button
                                 onClick={handlePostComment}
                                 className="h-12 md:h-18 px-6 md:px-12 bg-stone-900 hover:bg-amber-400 text-white hover:text-stone-900 rounded-xl md:rounded-4xl font-black text-[10px] md:text-[11px] uppercase tracking-[0.15em] md:tracking-[0.2em] transition-all duration-300 active:scale-95 flex items-center justify-center gap-1 md:gap-3 shrink-0"
                             >
                                 <span className="hidden sm:inline">Post Reply</span>
-                                <span className="material-symbols-outlined text-base md:text-xl sm:hidden">
-                                    send
-                                </span>
+                                <span className="material-symbols-outlined text-base md:text-xl sm:hidden">send</span>
                             </button>
                         </div>
-
-                        <div className="h-1 md:hidden" />
-                        <div className="h-safe-bottom md:hidden" />
                     </div>
                 </div>
             </Modal>
diff --git a/server/controllers/features/profile.controller.js b/server/controllers/features/profile.controller.js
index 4b1ebc9..1b3c963 100644
--- a/server/controllers/features/profile.controller.js
+++ b/server/controllers/features/profile.controller.js
@@ -1,4 +1,4 @@
-import { getUserMeData } from "../user.controller.js";
+import { getUserData, getUserMeData } from "../user.controller.js";
 import { getFollowersData, getFollowingData } from "../user_follows.controller.js";
 
 
@@ -30,41 +30,30 @@ export const getUserMeProfile = async (req, res) => {
     }
 };
 
+export const getUserProfile = async (req, res) => {
+    try {
+        const userId = req.params.userId;
 
+        const [user, followers, following] = await Promise.all([
+            getUserData(userId),
+            getFollowersData(userId),
+            getFollowingData(userId)
+        ]);
 
+        res.status(200).json({
+            success: true,
+            user,
+            followersCount: followers.length,
+            followers,
+            followingCount: following.length,
+            following
+        });
 
-
-
-
-
-
-// import { getUserMeData } from "../user.controller.js";
-// import { getFollowersData, getFollowingData } from "../user_follows.controller.js";
-
-// export const getUserMeProfile = async (req, res) => {
-//     try {
-//         const userId = req.user.userId;
-
-//         const [user, followers, following] = await Promise.all([
-//             getUserMeData(userId),
-//             // getFollowersData(userId),
-//             // getFollowingData(userId)
-//         ]);
-
-//         res.status(200).json({
-//             success: true,
-//             user,
-//             // followersCount: followers.length,
-//             // followers,
-//             // followingCount: following.length,
-//             // following
-//         });
-
-//     } catch (error) {
-//         console.error(error);
-//         res.status(500).json({
-//             success: false,
-//             error: "Server error"
-//         });
-//     }
-// };
\ No newline at end of file
+    } catch (error) {
+        console.error(error);
+        res.status(500).json({
+            success: false,
+            error: "Server error"
+        });
+    }
+}
\ No newline at end of file
diff --git a/server/controllers/user.controller.js b/server/controllers/user.controller.js
index 8f1c727..ca5ba0c 100644
--- a/server/controllers/user.controller.js
+++ b/server/controllers/user.controller.js
@@ -12,6 +12,16 @@ export const getUserMeData = async (userId) => {
     }
 };
 
+export const getUserData = async (userId) => {
+    try {
+        const user = await User.findById(userId).select("-password");
+        return user;
+    } catch (error) {
+        console.error("getUserData error:", error);
+        throw new Error("Database error while fetching user");
+    }
+}
+
 export const getUserMe = async (req, res) => {
     try {
         const userId = req.user.userId;
@@ -68,7 +78,7 @@ export const editProfile = async (req, res) => {
 export const getUser = async (req, res) => {
     try {
         const userId = req.params.userId;
-        const user = await User.findById(userId).select('-password');
+        const user = await getUserData(userId);
 
         if (!user) {
             return res.status(404).json({ success: false, error: "User not found" });
diff --git a/server/routes/features/profile.route.js b/server/routes/features/profile.route.js
index 9ef855b..3c036e5 100644
--- a/server/routes/features/profile.route.js
+++ b/server/routes/features/profile.route.js
@@ -1,10 +1,12 @@
 import { Router } from "express";
 
 import authorize from '../../middlewares/auth.middleware.js';
-import { getUserMeProfile } from "../../controllers/features/profile.controller.js";
+import { getUserMeProfile, getUserProfile } from "../../controllers/features/profile.controller.js";
 
 const profileRouter = Router();
 
 profileRouter.get('/profile/me', authorize, getUserMeProfile);
 
+profileRouter.get('/user/:userId', authorize, getUserProfile);
+
 export default profileRouter;
\ No newline at end of file
diff --git a/server/routes/user.route.js b/server/routes/user.route.js
index 65fc621..a745e83 100644
--- a/server/routes/user.route.js
+++ b/server/routes/user.route.js
@@ -11,6 +11,4 @@ userRouter.put('/me', authorize, editProfile);
 
 userRouter.get('/search', authorize, searchUsers);
 
-userRouter.get('/:userId', authorize, getUser);
-
 export default userRouter;
\ No newline at end of file

From e6927512e429b7e10a477a9c59fbc186661e109b Mon Sep 17 00:00:00 2001
From: chaaanuwu <gkchanuwa@gmail.com>
Date: Sun, 3 May 2026 13:50:21 +0530
Subject: [PATCH 2/2] feat: Add edit profile functionality with image upload
 and bio editing

---
 client/src/App.jsx                    |  10 ++
 client/src/api/user.api.js            |  11 +-
 client/src/components/Navbar.jsx      |   4 +-
 client/src/pages/EditProfile.jsx      | 153 ++++++++++++++++++++++++++
 client/src/pages/Profile.jsx          |   6 +-
 server/controllers/user.controller.js |  34 +++++-
 server/routes/user.route.js           |   6 +-
 7 files changed, 212 insertions(+), 12 deletions(-)
 create mode 100644 client/src/pages/EditProfile.jsx

diff --git a/client/src/App.jsx b/client/src/App.jsx
index 8ed8745..df10a10 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -10,6 +10,7 @@ import MoviePage from "./pages/MoviePage";
 import Navbar from "./components/Navbar";
 import TmdbMovie from "./pages/MoviesPage";
 import SearchResultPage from "./pages/SearchResultPage";
+import EditProfile from "./pages/EditProfile";
 
 function isTokenExpired(token) {
     if (!token) return true;
@@ -108,6 +109,15 @@ export default function App() {
                     }
                 />
 
+                <Route
+                    path="/edit-profile"
+                    element={
+                        token && !isExpired
+                            ? <EditProfile />
+                            : <Navigate to="/login" />
+                    }
+                />
+
             </Routes>
         </BrowserRouter>
     );
diff --git a/client/src/api/user.api.js b/client/src/api/user.api.js
index a7fec1d..9c278aa 100644
--- a/client/src/api/user.api.js
+++ b/client/src/api/user.api.js
@@ -7,13 +7,22 @@ export const getProfile = async (userId) => {
 };
 
 export const setProfileCover = async (backdrop) => {
-    const res = await axiosInstance.put('/user/me', {
+    const res = await axiosInstance.put('/user/me/edit', {
         cover: backdrop
     });
 
     return res.data;
 }
 
+export const editProfileData = async (pfp, about) => {
+    const res = await axiosInstance.put('/user/me/edit', {
+        pfp,
+        about
+    });
+
+    return res.data;
+}
+
 export const searchUsers = async (query) => {
     const res = await axiosInstance.get(`/user/search?q=${query}`);
     return res.data;
diff --git a/client/src/components/Navbar.jsx b/client/src/components/Navbar.jsx
index a5d30ee..b5a19f5 100644
--- a/client/src/components/Navbar.jsx
+++ b/client/src/components/Navbar.jsx
@@ -15,7 +15,7 @@ import { ClockIcon } from "lucide-react";
 export default function Navbar() {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const { user, logout } = useUserStore();
+  const { user, setUser, logout } = useUserStore();
   const location = useLocation();
   const navigate = useNavigate();
 
@@ -87,14 +87,12 @@ export default function Navbar() {
             <NavLink to="/movies" active={isActive('/movies')} icon={<TicketIcon className="size-4 text-amber-600" />} label="Movies" />
           </div>
 
-          {/* SEARCH BAR + DROPDOWN */}
           <div ref={searchWrapperRef} className="relative w-full max-w-md mx-auto">
             <SearchBar
               onSearch={handleSearch}
               onFocus={() => setIsDropdownOpen(true)}
             />
 
-            {/* We move the dropdown styles here or into the component */}
             <Dropdown open={isDropdownOpen}>
               <div className="w-full min-w-75 md:min-w-112.5 p-2 bg-white/90 backdrop-blur-xl">
                 <div className="px-3 py-2 border-b border-stone-100 mb-2">
diff --git a/client/src/pages/EditProfile.jsx b/client/src/pages/EditProfile.jsx
new file mode 100644
index 0000000..4468cff
--- /dev/null
+++ b/client/src/pages/EditProfile.jsx
@@ -0,0 +1,153 @@
+import { useState, useRef } from "react";
+import { motion } from "framer-motion";
+import useUserStore from "../store/userStore";
+import defaultPfp from "../assets/default-pfp.jpg";
+import { editProfileData } from "../api/user.api";
+import axios from "axios";
+
+export default function EditProfile() {
+    const { user, setUser } = useUserStore();
+    const [loading, setLoading] = useState(false);
+    const [about, setAbout] = useState(user?.user?.about || "");
+    const [previewPfp, setPreviewPfp] = useState(user?.user?.pfp || defaultPfp);
+    const [selectedPfpFile, setSelectedPfpFile] = useState(null);
+
+    const fileInputRef = useRef(null);
+
+    const handleSave = async (e) => {
+        e.preventDefault();
+        setLoading(true);
+        try {
+            const formData = new FormData();
+            formData.append("file", selectedPfpFile);
+            formData.append("upload_preset", import.meta.env.VITE_CLOUDINARY_PRESET);
+            formData.append("folder", import.meta.env.VITE_CLOUDINARY_ASSET_FOLDER);
+
+            const cloudName = import.meta.env.VITE_CLOUDINARY_CLOUD;
+
+            const cloudinaryRes = await axios.post(
+                `https://api.cloudinary.com/v1_1/${cloudName}/image/upload`,
+                formData
+            );
+
+            const res = await editProfileData(cloudinaryRes.data.secure_url, about);
+            if (res.success) {
+                setUser({ ...user, user: res.user });
+            }
+            setLoading(false);
+        } catch (err) {
+            console.error(err);
+            setLoading(false);
+        }
+    };
+
+    return (
+        <main className="min-h-screen bg-stone-50 py-12 px-6 pt-36">
+            <div className="max-w-3xl mx-auto">
+                {/* Header */}
+                <header className="mb-12">
+                    <div className="flex items-center gap-2 mb-2">
+                        <div className="h-1 w-6 bg-amber-500 rounded-full" />
+                        <span className="text-[10px] font-black tracking-[0.4em] text-stone-400 uppercase">Public Persona</span>
+                    </div>
+                    <h1 className="text-4xl font-black text-stone-900 tracking-tighter">
+                        Edit <span className="text-stone-400 font-light italic">Profile</span>
+                    </h1>
+                </header>
+
+                <form onSubmit={handleSave} className="space-y-10">
+
+                    {/* PFP Upload Section */}
+                    <section className="bg-white p-8 rounded-[2.5rem] border border-stone-200 shadow-sm">
+                        <h3 className="text-xs font-black uppercase tracking-widest text-stone-500 mb-6">Profile Picture</h3>
+                        <div className="flex flex-col md:flex-row items-center gap-8">
+                            <div className="relative group">
+                                <div className="w-32 h-32 rounded-4xl overflow-hidden border-4 border-amber-50 shadow-xl">
+                                    <img
+                                        src={previewPfp}
+                                        alt="Preview"
+                                        className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
+                                    />
+                                </div>
+                                <button
+                                    type="button"
+                                    onClick={() => fileInputRef.current.click()}
+                                    className="absolute -bottom-2 -right-2 w-10 h-10 bg-stone-900 text-white rounded-xl flex items-center justify-center hover:bg-amber-500 transition-colors shadow-lg"
+                                >
+                                    <span className="material-symbols-outlined text-sm">photo_camera</span>
+                                </button>
+                                <input
+                                    type="file"
+                                    ref={fileInputRef}
+                                    className="hidden"
+                                    accept="image/*"
+                                    onChange={(e) => {
+                                        const file = e.target.files[0];
+                                        if (file) {
+                                            setSelectedPfpFile(file);
+                                            setPreviewPfp(URL.createObjectURL(file));
+                                        }
+                                    }}
+                                />
+                            </div>
+                            <div className="flex-1 text-center md:text-left">
+                                <p className="text-stone-900 font-bold text-lg">Change Avatar</p>
+                                <p className="text-stone-400 text-sm leading-relaxed">
+                                    Upload a high-quality cinematic square image. <br />
+                                    Supports JPG, PNG or WebP.
+                                </p>
+                            </div>
+                        </div>
+                    </section>
+
+                    {/* Bio / About Section */}
+                    <section className="bg-white p-8 rounded-[2.5rem] border border-stone-200 shadow-sm">
+                        <h3 className="text-xs font-black uppercase tracking-widest text-stone-500 mb-6">Director's Statement</h3>
+                        <div className="relative">
+                            <textarea
+                                value={about}
+                                onChange={(e) => setAbout(e.target.value)}
+                                rows="5"
+                                placeholder="Write a short bio about your cinematic journey..."
+                                className="w-full p-6 bg-stone-50 border-2 border-transparent focus:border-amber-400/20 focus:bg-white rounded-3xl outline-none transition-all duration-300 text-stone-800 font-serif italic text-lg leading-relaxed resize-none"
+                            />
+                            <div className="absolute right-4 bottom-4 text-[10px] font-black text-stone-300 uppercase tracking-widest">
+                                {about.length} / 250
+                            </div>
+                        </div>
+                    </section>
+
+                    {/* Actions */}
+                    <div className="flex items-center justify-end gap-4 pt-4">
+                        <button
+                            type="button"
+                            className="px-8 py-4 text-stone-400 font-bold hover:text-stone-900 transition-colors"
+                        >
+                            Cancel
+                        </button>
+                        <button
+                            type="submit"
+                            disabled={loading}
+                            className={`px-12 py-4 bg-stone-900 text-white rounded-2xl font-black transition-all shadow-xl active:scale-95 flex items-center gap-3
+                                ${loading ? 'opacity-70 cursor-not-allowed' : 'hover:bg-amber-500 hover:text-stone-900'}
+                            `}
+                        >
+                            {loading ? 'Saving Changes...' : 'Update Profile'}
+                            {!loading && <span className="material-symbols-outlined text-sm">check_circle</span>}
+                        </button>
+                    </div>
+                </form>
+
+                {/* Settings Link */}
+                <div className="mt-12 pt-8 border-t border-stone-200 text-center">
+                    <p className="text-stone-400 text-sm font-medium">
+                        Looking to change your name or password?
+                        <a href="/settings" className="ml-2 text-amber-600 font-black uppercase tracking-widest text-[10px] hover:underline">
+                            Go to Account Settings
+                        </a>
+                    </p>
+                </div>
+            </div>
+        </main>
+    );
+}
\ No newline at end of file
diff --git a/client/src/pages/Profile.jsx b/client/src/pages/Profile.jsx
index 2dc0025..aecf12b 100644
--- a/client/src/pages/Profile.jsx
+++ b/client/src/pages/Profile.jsx
@@ -257,7 +257,11 @@ export default function Profile() {
                                     </button>
                                 )
                             ) : (
-                                <button className="px-10 py-4 bg-white border border-stone-200 text-stone-600 rounded-2xl font-bold text-sm hover:bg-stone-50 transition-all shadow-sm active:scale-95">
+                                <button
+                                    onClick={() => {
+                                        navigation.navigate('/edit-profile')
+                                    }}
+                                    className="px-10 py-4 bg-white border border-stone-200 text-stone-600 rounded-2xl font-bold text-sm hover:bg-stone-50 transition-all shadow-sm active:scale-95">
                                     Edit Profile
                                 </button>
                             )}
diff --git a/server/controllers/user.controller.js b/server/controllers/user.controller.js
index ca5ba0c..ea0cd99 100644
--- a/server/controllers/user.controller.js
+++ b/server/controllers/user.controller.js
@@ -45,7 +45,34 @@ export const getUserMe = async (req, res) => {
 export const editProfile = async (req, res) => {
     try {
         const userId = req.user.userId;
-        const { firstName, lastName, password, gender, about, pfp, cover } = req.body;
+        const { about, pfp, cover } = req.body;
+
+        const user = await User.findById(userId);
+        if (!user) {
+            return res.status(404).json({ success: false, error: "User not found" });
+        }
+
+        if (about) user.about = about;
+        if (pfp) user.pfp = pfp;
+        if (cover) user.cover = cover;
+
+        await user.save();
+
+        const userObj = user.toObject();
+        delete userObj.password;
+
+        res.status(200).json({ success: true, user: userObj });
+
+    } catch (error) {
+        console.error(error);
+        res.status(500).json({ success: false, error: "Server error" });
+    }
+};
+
+export const updateAccountSettings = async (req, res) => {
+    try {
+        const userId = req.user.userId;
+        const { firstName, lastName, password, gender } = req.body;
 
         const user = await User.findById(userId);
         if (!user) {
@@ -58,9 +85,6 @@ export const editProfile = async (req, res) => {
             user.password = await bcrypt.hash(password, 10);
         }
         if (gender) user.gender = gender;
-        if (about) user.about = about;
-        if (pfp) user.pfp = pfp;
-        if (cover) user.cover = cover;
 
         await user.save();
 
@@ -68,7 +92,7 @@ export const editProfile = async (req, res) => {
         delete userObj.password;
 
         res.status(200).json({ success: true, user: userObj });
-
+        
     } catch (error) {
         console.error(error);
         res.status(500).json({ success: false, error: "Server error" });
diff --git a/server/routes/user.route.js b/server/routes/user.route.js
index a745e83..76d45ab 100644
--- a/server/routes/user.route.js
+++ b/server/routes/user.route.js
@@ -1,13 +1,15 @@
 import { Router } from "express";
 
 import authorize from "../middlewares/auth.middleware.js";
-import { getUserMe, editProfile, getUser, searchUsers } from "../controllers/user.controller.js";
+import { getUserMe, editProfile, getUser, searchUsers, updateAccountSettings } from "../controllers/user.controller.js";
 
 const userRouter = Router();
 
 userRouter.get('/me', authorize, getUserMe);
 
-userRouter.put('/me', authorize, editProfile);
+userRouter.put('/me/edit', authorize, editProfile);
+
+userRouter.put('/me/update-account', authorize, updateAccountSettings);
 
 userRouter.get('/search', authorize, searchUsers);