diff --git a/components/panel/addDoctor/listMenu/generalInformation/Head.js b/components/panel/addDoctor/listMenu/generalInformation/Head.js
index 109723b..9a68046 100644
--- a/components/panel/addDoctor/listMenu/generalInformation/Head.js
+++ b/components/panel/addDoctor/listMenu/generalInformation/Head.js
@@ -1,15 +1,27 @@
-import ArrowLeftPU from "@/components/icons/ArrowLeftPU";
-import ProfileP from "@/components/icons/ProfileP";
+"use client";
+
+import { useRef } from "react";
 import { Button } from "@mui/material";
+import ProfileP from "@/components/icons/ProfileP";
+import ArrowLeftPU from "@/components/icons/ArrowLeftPU";
 
 function Head() {
+  const fileRef = useRef();
+
+  const openInput = () => fileRef.current.click();
+
   return (
     <div className="flex items-center justify-center md:justify-start gap-[10px]">
-      <div className="p-[24px] grid place-items-center border border-solid border-[#EFEFEF] bg-[#EFEFEF] rounded-full">
+      <input className="contents" ref={fileRef} type="file" />
+      <div
+        className="p-[24px] grid cursor-pointer place-items-center border border-solid border-[#EFEFEF] bg-[#EFEFEF] rounded-full"
+        onClick={() => openInput()}
+      >
         <ProfileP />
       </div>
       <Button
         variant="text"
+        onClick={() => openInput()}
         className="!flex !p-1 dark:!text-[#A1A1A1] !text-[#525252] !text-[16px] !font-medium !items-center !justify-center !gap-[4px]"
       >
         انتخاب تصویر
diff --git a/components/panel/userAccount/Head.js b/components/panel/userAccount/Head.js
index 3c82023..9a68046 100644
--- a/components/panel/userAccount/Head.js
+++ b/components/panel/userAccount/Head.js
@@ -1,16 +1,28 @@
-import ArrowLeftPU from "@/components/icons/ArrowLeftPU";
-import ProfileP from "@/components/icons/ProfileP";
+"use client";
+
+import { useRef } from "react";
 import { Button } from "@mui/material";
+import ProfileP from "@/components/icons/ProfileP";
+import ArrowLeftPU from "@/components/icons/ArrowLeftPU";
 
 function Head() {
+  const fileRef = useRef();
+
+  const openInput = () => fileRef.current.click();
+
   return (
     <div className="flex items-center justify-center md:justify-start gap-[10px]">
-      <div className="p-[24px] grid place-items-center border border-solid border-[#EFEFEF] bg-[#EFEFEF] rounded-full">
+      <input className="contents" ref={fileRef} type="file" />
+      <div
+        className="p-[24px] grid cursor-pointer place-items-center border border-solid border-[#EFEFEF] bg-[#EFEFEF] rounded-full"
+        onClick={() => openInput()}
+      >
         <ProfileP />
       </div>
       <Button
         variant="text"
-        className="!flex !p-1 !text-[#525252] dark:!text-[#A1A1A1] !text-[14px] md:!text-[16px] !font-medium !items-center !justify-center !gap-[4px]"
+        onClick={() => openInput()}
+        className="!flex !p-1 dark:!text-[#A1A1A1] !text-[#525252] !text-[16px] !font-medium !items-center !justify-center !gap-[4px]"
       >
         انتخاب تصویر
         <ArrowLeftPU />