diff --git a/src/Common/hooks/useAuthUser.ts b/src/Common/hooks/useAuthUser.ts
index 78bf93fa8f8..ae181f62ca8 100644
--- a/src/Common/hooks/useAuthUser.ts
+++ b/src/Common/hooks/useAuthUser.ts
@@ -9,6 +9,7 @@ type AuthContextType = {
   user: UserModel | undefined;
   signIn: (creds: LoginCredentials) => Promise<SignInReturnType>;
   signOut: () => Promise<void>;
+  refetchUser: () => Promise<RequestResult<UserModel>>;
 };
 
 export const AuthUserContext = createContext<AuthContextType | null>(null);
diff --git a/src/Components/Common/Sidebar/SidebarUserCard.tsx b/src/Components/Common/Sidebar/SidebarUserCard.tsx
index 69678f676d4..f8078f405c8 100644
--- a/src/Components/Common/Sidebar/SidebarUserCard.tsx
+++ b/src/Components/Common/Sidebar/SidebarUserCard.tsx
@@ -1,7 +1,7 @@
 import { Link } from "raviger";
 import { useTranslation } from "react-i18next";
 import CareIcon from "../../../CAREUI/icons/CareIcon";
-import { formatName } from "../../../Utils/utils";
+import { classNames, formatName } from "../../../Utils/utils";
 import useAuthUser, { useAuthContext } from "../../../Common/hooks/useAuthUser";
 
 const SidebarUserCard = ({ shrinked }: { shrinked: boolean }) => {
@@ -15,8 +15,15 @@ const SidebarUserCard = ({ shrinked }: { shrinked: boolean }) => {
         shrinked ? "mx-auto flex-col" : "mx-5"
       } transition-all duration-200 ease-in-out`}
     >
-      <Link href="/user/profile" className="flex-none py-3">
-        <CareIcon icon="l-user-circle" className="text-3xl text-white" />
+      <Link href="/user/profile">
+        <img
+          src={user.read_profile_picture_url || "/images/empty_avatar.jpg"}
+          alt="profile"
+          className={classNames(
+            "mb-3 size-10 rounded-full object-cover",
+            shrinked && "mb-2 mt-1",
+          )}
+        />
       </Link>
       <div className="flex cursor-pointer justify-center" onClick={signOut}>
         <CareIcon
diff --git a/src/Components/Users/ProfilePicUploadModal.tsx b/src/Components/Users/ProfilePicUploadModal.tsx
new file mode 100644
index 00000000000..ef3f2f54d01
--- /dev/null
+++ b/src/Components/Users/ProfilePicUploadModal.tsx
@@ -0,0 +1,450 @@
+import {
+  ChangeEventHandler,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { Success } from "../../Utils/Notifications";
+import useDragAndDrop from "../../Utils/useDragAndDrop";
+import ButtonV2, { Cancel, Submit } from "../Common/components/ButtonV2";
+import Webcam from "react-webcam";
+import useWindowDimensions from "../../Common/hooks/useWindowDimensions";
+import CareIcon from "../../CAREUI/icons/CareIcon";
+import * as Notification from "../../Utils/Notifications.js";
+import { useTranslation } from "react-i18next";
+import { LocalStorageKeys } from "../../Common/constants";
+import DialogModal from "../Common/Dialog";
+import request from "../../Utils/request/request";
+import routes from "../../Redux/api";
+import uploadFile from "../../Utils/request/uploadFile";
+import useAuthUser from "../../Common/hooks/useAuthUser";
+interface Props {
+  open: boolean;
+  onClose: () => void;
+  onSave?: () => void;
+  onDelete?: () => void;
+  onRefetch?: () => void;
+}
+
+const ProfilePicUploadModal = ({
+  open,
+  onClose,
+  onSave,
+  onDelete,
+  onRefetch,
+}: Props) => {
+  const user = useAuthUser();
+  const [isUploading, setIsUploading] = useState<boolean>(false);
+  const [selectedFile, setSelectedFile] = useState<File>();
+  const [preview, setPreview] = useState<string>();
+  const [isCameraOpen, setIsCameraOpen] = useState<boolean>(false);
+  const webRef = useRef<Webcam>(null);
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const FACING_MODE_USER = "user";
+  const FACING_MODE_ENVIRONMENT = { exact: "environment" };
+  const [uploadPercent, setUploadPercent] = useState(0);
+
+  const [facingMode, setFacingMode] = useState<"front" | "rear">("front");
+  const videoConstraints = {
+    width: 1280,
+    height: 720,
+    facingMode:
+      facingMode === "front" ? FACING_MODE_USER : FACING_MODE_ENVIRONMENT,
+  };
+  const { width } = useWindowDimensions();
+  const LaptopScreenBreakpoint = 640;
+  const isLaptopScreen = width >= LaptopScreenBreakpoint;
+  const { t } = useTranslation();
+  const handleSwitchCamera = useCallback(() => {
+    setFacingMode((prev) => (prev === "front" ? "rear" : "front"));
+  }, []);
+
+  const captureImage = () => {
+    if (!webRef.current) return;
+    setPreviewImage(webRef.current.getScreenshot());
+    const canvas = webRef.current.getCanvas();
+    canvas?.toBlob((blob: Blob | null) => {
+      if (!blob) return;
+      const myFile = new File([blob], "image.png", {
+        type: blob.type,
+      });
+      setSelectedFile(myFile);
+    });
+  };
+  const closeModal = () => {
+    setPreview(undefined);
+    setSelectedFile(undefined);
+    onClose?.();
+  };
+
+  useEffect(() => {
+    if (selectedFile) {
+      const objectUrl = URL.createObjectURL(selectedFile);
+      setPreview(objectUrl);
+      return () => URL.revokeObjectURL(objectUrl);
+    }
+  }, [selectedFile]);
+
+  const onSelectFile: ChangeEventHandler<HTMLInputElement> = (e) => {
+    if (!e.target.files || e.target.files.length === 0) {
+      setSelectedFile(undefined);
+      return;
+    }
+    setSelectedFile(e.target.files[0]);
+  };
+
+  useEffect(() => {
+    if (uploadPercent === 100) {
+      setIsUploading(false);
+      onSave?.();
+      closeModal();
+      setUploadPercent(0);
+      onRefetch?.();
+    }
+  }, [uploadPercent]);
+
+  const handleUpload = async () => {
+    setIsUploading(true);
+    if (!selectedFile) {
+      setIsUploading(false);
+      closeModal();
+      return;
+    }
+
+    const formData = new FormData();
+    formData.append("profile_picture_url", selectedFile);
+    const url = `/api/v1/users/${user.username}/profile_picture/`;
+    setIsUploading(true);
+
+    uploadFile(
+      url,
+      formData,
+      "POST",
+      {
+        Authorization:
+          "Bearer " + localStorage.getItem(LocalStorageKeys.accessToken),
+      },
+      (xhr: XMLHttpRequest) => {
+        if (xhr.status === 200) {
+          Success({ msg: "Profile Picture updated." });
+        } else {
+          Notification.Error({
+            msg: "Something went wrong!",
+          });
+          setIsUploading(false);
+        }
+      },
+      setUploadPercent,
+      () => {
+        Notification.Error({
+          msg: "Network Failure. Please check your internet connectivity.",
+        });
+        setIsUploading(false);
+      },
+    );
+  };
+
+  const handleDelete = async () => {
+    const { res } = await request(routes.deleteProfilePicture, {
+      pathParams: { username: user.username },
+    });
+    if (res?.ok) {
+      Success({ msg: "Profile picture deleted" });
+      onDelete?.();
+      closeModal();
+    }
+  };
+
+  const hasImage = !!(preview || user.read_profile_picture_url);
+  const imgSrc =
+    preview || `${user.read_profile_picture_url}?requested_on=${Date.now()}`;
+
+  const dragProps = useDragAndDrop();
+  const onDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    dragProps.setDragOver(false);
+    const dropedFile = e?.dataTransfer?.files[0];
+    if (dropedFile.type.split("/")[0] !== "image")
+      return dragProps.setFileDropError("Please drop an image file to upload!");
+    setSelectedFile(dropedFile);
+  };
+  const commonHint = (
+    <>
+      {t("max_size_for_image_uploaded_should_be")} 1mb.
+      <br />
+      {t("allowed_formats_are")} jpg,png,jpeg.
+      {t("recommended_aspect_ratio_for")} user profile image is 1:1
+    </>
+  );
+
+  return (
+    <DialogModal
+      show={open}
+      onClose={closeModal}
+      title="Upload Profile Picture"
+      className="md:max-w-4xl"
+    >
+      <div className="flex h-full w-full items-center justify-center overflow-y-auto">
+        {!isCameraOpen ? (
+          <form className="flex max-h-screen min-h-96 w-full flex-col overflow-auto">
+            {hasImage ? (
+              <>
+                <div className="flex flex-1 items-center justify-center rounded-lg">
+                  <img
+                    src={imgSrc}
+                    alt="profile-pic"
+                    className="h-full w-full object-cover"
+                  />
+                </div>
+              </>
+            ) : (
+              <div
+                onDragOver={dragProps.onDragOver}
+                onDragLeave={dragProps.onDragLeave}
+                onDrop={onDrop}
+                className={`mt-8 flex flex-1 flex-col items-center justify-center rounded-lg border-[3px] border-dashed px-3 py-6 ${
+                  dragProps.dragOver && "border-primary-500"
+                } ${
+                  dragProps.fileDropError !== ""
+                    ? "border-red-500"
+                    : "border-gray-500"
+                }`}
+              >
+                <CareIcon
+                  icon="l-image-plus"
+                  className={`h-12 w-12 stroke-[2px] ${
+                    dragProps.dragOver && "text-primary-500"
+                  } ${
+                    dragProps.fileDropError !== ""
+                      ? "text-red-500"
+                      : "text-gray-600"
+                  }`}
+                />
+                <p
+                  className={`text-sm ${
+                    dragProps.dragOver && "text-primary-500"
+                  } ${
+                    dragProps.fileDropError !== ""
+                      ? "text-red-500"
+                      : "text-gray-700"
+                  } text-center`}
+                >
+                  {dragProps.fileDropError !== ""
+                    ? dragProps.fileDropError
+                    : `${t("drag_drop_image_to_upload")}`}
+                </p>
+                <p className="mt-4 text-center font-medium text-gray-700">
+                  No Profile image uploaded yet. {commonHint}
+                </p>
+              </div>
+            )}
+
+            <div className="flex flex-col gap-2 pt-4 sm:flex-row">
+              <div>
+                <label className="flex w-full cursor-pointer items-center justify-center gap-1 rounded-lg border border-primary-500 bg-white px-4 py-2 text-sm font-medium text-primary-500 transition-all hover:border-primary-400 hover:text-primary-400">
+                  <CareIcon icon="l-cloud-upload" className="text-lg" />
+                  {t("upload_an_image")}
+                  <input
+                    title="changeFile"
+                    type="file"
+                    accept="image/*"
+                    className="hidden"
+                    onChange={onSelectFile}
+                  />
+                </label>
+              </div>
+              <div className="sm:flex-1" />
+              <ButtonV2
+                onClick={() => {
+                  setIsCameraOpen(true);
+                }}
+              >
+                {`${t("open")} ${t("camera")}`}
+              </ButtonV2>
+              <Cancel
+                onClick={(e) => {
+                  e.stopPropagation();
+                  closeModal();
+                  dragProps.setFileDropError("");
+                }}
+                disabled={isUploading}
+              />
+              {user.read_profile_picture_url && (
+                <ButtonV2
+                  variant="danger"
+                  onClick={handleDelete}
+                  disabled={isUploading}
+                >
+                  {t("delete")}
+                </ButtonV2>
+              )}
+              <ButtonV2 onClick={handleUpload} disabled={isUploading}>
+                {isUploading ? (
+                  <CareIcon icon="l-spinner" className="animate-spin text-lg" />
+                ) : (
+                  <CareIcon icon="l-save" className="text-lg" />
+                )}
+                <span>
+                  {isUploading ? `${t("uploading")}...` : `${t("save")}`}
+                </span>
+              </ButtonV2>
+            </div>
+          </form>
+        ) : (
+          <div className="flex max-h-screen min-h-96 flex-col overflow-auto">
+            <div className="flex flex-1 items-center justify-center">
+              {!previewImage ? (
+                <>
+                  <Webcam
+                    audio={false}
+                    height={720}
+                    screenshotFormat="image/jpeg"
+                    width={1280}
+                    ref={webRef}
+                    videoConstraints={videoConstraints}
+                  />
+                </>
+              ) : (
+                <>
+                  <img src={previewImage} />
+                </>
+              )}
+            </div>
+            {/* buttons for mobile screens */}
+            <div className="m-4 flex flex-col justify-evenly sm:hidden">
+              <div>
+                {!previewImage ? (
+                  <ButtonV2
+                    onClick={handleSwitchCamera}
+                    className="my-2 w-full"
+                  >
+                    {t("switch")}
+                  </ButtonV2>
+                ) : (
+                  <></>
+                )}
+              </div>
+              <div>
+                {!previewImage ? (
+                  <>
+                    <div>
+                      <ButtonV2
+                        onClick={() => {
+                          captureImage();
+                        }}
+                        className="my-2 w-full"
+                      >
+                        {t("capture")}
+                      </ButtonV2>
+                    </div>
+                  </>
+                ) : (
+                  <>
+                    <div className="flex flex-col">
+                      <ButtonV2
+                        onClick={() => {
+                          setPreviewImage(null);
+                        }}
+                        className="my-2 w-full"
+                        disabled={isUploading}
+                      >
+                        {t("retake")}
+                      </ButtonV2>
+                      <ButtonV2 onClick={handleUpload} className="my-2 w-full">
+                        {isUploading && (
+                          <CareIcon
+                            icon="l-spinner"
+                            className="animate-spin text-lg"
+                          />
+                        )}
+                        {t("submit")}
+                      </ButtonV2>
+                    </div>
+                  </>
+                )}
+              </div>
+              <div className="sm:flex-1">
+                <ButtonV2
+                  variant="secondary"
+                  onClick={() => {
+                    setPreviewImage(null);
+                    setIsCameraOpen(false);
+                  }}
+                  className="border-grey-200 my-2 w-full border-2"
+                >
+                  {t("close")}
+                </ButtonV2>
+              </div>
+            </div>
+            {/* buttons for laptop screens */}
+            <div className={`${isLaptopScreen ? " " : "hidden"}`}>
+              <div className="m-4 flex lg:hidden">
+                <ButtonV2 onClick={handleSwitchCamera}>
+                  <CareIcon icon="l-camera-change" className="text-lg" />
+                  {`${t("switch")} ${t("camera")}`}
+                </ButtonV2>
+              </div>
+
+              <div className="flex justify-end gap-2 p-4">
+                <div>
+                  {!previewImage ? (
+                    <>
+                      <div>
+                        <ButtonV2
+                          onClick={() => {
+                            captureImage();
+                          }}
+                        >
+                          <CareIcon icon="l-capture" className="text-lg" />
+                          {t("capture")}
+                        </ButtonV2>
+                      </div>
+                    </>
+                  ) : (
+                    <>
+                      <div className="flex space-x-2">
+                        <ButtonV2
+                          onClick={() => {
+                            setPreviewImage(null);
+                          }}
+                        >
+                          {t("retake")}
+                        </ButtonV2>
+                        <Submit disabled={isUploading} onClick={handleUpload}>
+                          {isUploading ? (
+                            <>
+                              <CareIcon
+                                icon="l-spinner"
+                                className="animate-spin text-lg"
+                              />
+                              {`${t("submitting")}...`}
+                            </>
+                          ) : (
+                            <> {t("submit")}</>
+                          )}
+                        </Submit>
+                      </div>
+                    </>
+                  )}
+                </div>
+                <div className="sm:flex-1" />
+                <ButtonV2
+                  variant="secondary"
+                  onClick={() => {
+                    setPreviewImage(null);
+                    setIsCameraOpen(false);
+                  }}
+                >
+                  {`${t("close")} ${t("camera")}`}
+                </ButtonV2>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </DialogModal>
+  );
+};
+
+export default ProfilePicUploadModal;
diff --git a/src/Components/Users/UserProfile.tsx b/src/Components/Users/UserProfile.tsx
index 21a2e077442..463ed66fc8b 100644
--- a/src/Components/Users/UserProfile.tsx
+++ b/src/Components/Users/UserProfile.tsx
@@ -26,6 +26,7 @@ import routes from "../../Redux/api";
 import request from "../../Utils/request/request";
 import DateFormField from "../Form/FormFields/DateFormField";
 import { validateRule } from "./UserAdd";
+import ProfilePicUploadModal from "./ProfilePicUploadModal";
 import { useTranslation } from "react-i18next";
 const Loading = lazy(() => import("../Common/Loading"));
 
@@ -112,8 +113,9 @@ const editFormReducer = (state: State, action: Action) => {
 
 export default function UserProfile() {
   const { t } = useTranslation();
-  const { signOut } = useAuthContext();
+  const { signOut, refetchUser } = useAuthContext();
   const [states, dispatch] = useReducer(editFormReducer, initialState);
+  const [editProfilePic, setEditProfilePic] = useState(false);
   const [updateStatus, setUpdateStatus] = useState({
     isChecking: false,
     isUpdateAvailable: false,
@@ -454,6 +456,13 @@ export default function UserProfile() {
   };
   return (
     <div>
+      <ProfilePicUploadModal
+        open={editProfilePic}
+        onSave={() => refetchUser()}
+        onClose={() => setEditProfilePic(false)}
+        onDelete={() => refetchUserData()}
+        onRefetch={() => refetchUserData()}
+      />
       <div className="p-10 lg:p-16">
         <div className="lg:grid lg:grid-cols-3 lg:gap-6">
           <div className="lg:col-span-1">
@@ -464,6 +473,34 @@ export default function UserProfile() {
               <p className="my-1 text-sm leading-5 text-secondary-600">
                 Local Body, District and State are Non Editable Settings.
               </p>
+              <div className="my-4 flex items-center">
+                <div
+                  className="relative cursor-pointer"
+                  onClick={() => setEditProfilePic(!editProfilePic)}
+                >
+                  <img
+                    className="size-24 rounded-lg object-cover"
+                    src={
+                      userData?.read_profile_picture_url
+                        ? `${userData?.read_profile_picture_url}?imgKey=${Date.now()}`
+                        : "/images/empty_avatar.jpg"
+                    }
+                    alt=""
+                  />
+                  <div className="absolute inset-0 z-10 flex h-full w-full flex-col items-center justify-center rounded-lg bg-black text-sm text-gray-300 opacity-0 transition-opacity hover:opacity-60">
+                    <CareIcon icon="l-pen" className="text-lg" />
+                    <span className="mt-2">{`${userData?.read_profile_picture_url ? "Edit" : "Upload"}`}</span>
+                  </div>
+                </div>
+                <div className="my-4 ml-4">
+                  <h3 className="text-lg font-medium leading-6 text-gray-900">
+                    {userData?.first_name} {userData?.last_name}
+                  </h3>
+                  <p className="text-sm leading-5 text-gray-500">
+                    @{userData?.username}
+                  </p>
+                </div>
+              </div>
               <div className="flex flex-col gap-2">
                 <ButtonV2
                   onClick={(_) => setShowEdit(!showEdit)}
diff --git a/src/Components/Users/models.tsx b/src/Components/Users/models.tsx
index 1bbe494b9ed..3dbb637e11a 100644
--- a/src/Components/Users/models.tsx
+++ b/src/Components/Users/models.tsx
@@ -32,6 +32,7 @@ export type UserModel = UserBareMinimum & {
   phone_number?: string;
   alt_phone_number?: string;
   gender?: GenderType;
+  read_profile_picture_url?: string;
   date_of_birth: Date | null | string;
   is_superuser?: boolean;
   verified?: boolean;
diff --git a/src/Providers/AuthUserProvider.tsx b/src/Providers/AuthUserProvider.tsx
index df2997abe2e..cda5fbfe671 100644
--- a/src/Providers/AuthUserProvider.tsx
+++ b/src/Providers/AuthUserProvider.tsx
@@ -87,7 +87,14 @@ export default function AuthUserProvider({ children, unauthorized }: Props) {
   }
 
   return (
-    <AuthUserContext.Provider value={{ signIn, signOut, user }}>
+    <AuthUserContext.Provider
+      value={{
+        signIn,
+        signOut,
+        user,
+        refetchUser: refetch,
+      }}
+    >
       {!res.ok || !user ? unauthorized : children}
     </AuthUserContext.Provider>
   );
diff --git a/src/Redux/api.tsx b/src/Redux/api.tsx
index e53342e3d7c..686201043ed 100644
--- a/src/Redux/api.tsx
+++ b/src/Redux/api.tsx
@@ -304,6 +304,19 @@ const routes = {
     TBody: Type<Partial<UserModel>>(),
   },
 
+  updateProfilePicture: {
+    path: "/api/v1/users/{username}/profile_picture/",
+    method: "PATCH",
+    TRes: Type<UserModel>(),
+    TBody: Type<{ profile_picture_url: string }>(),
+  },
+
+  deleteProfilePicture: {
+    path: "/api/v1/users/{username}/profile_picture/",
+    method: "DELETE",
+    TRes: Type<UserModel>(),
+  },
+
   deleteUser: {
     path: "/api/v1/users/{username}/",
     method: "DELETE",