diff --git a/layouts/default.vue b/layouts/default.vue
index e1fac18..d0cf881 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -283,10 +283,17 @@
 
         <nuxt-link to="/account" v-if="authUser">
           <img
+          v-if="authUser.avatarMedia"
             :src="authUser?.avatarMedia"
             alt="profile"
             class="h-[3.698vw] w-[3.698vw] rounded-full p-[0.521vw]"
           />
+          <img
+          v-else
+            src="/public/images/alt.png"
+            alt="profile"
+            class="h-[3.698vw] w-[3.698vw] rounded-full p-[0.521vw]"
+          />
         </nuxt-link>
         <nuxt-link to="/login" v-else>
           <svg
@@ -313,7 +320,7 @@
       class="z-[10] w-[28vw] pt-[0.5vw] pb-[2vw] flex flex-col absolute mt-[8vw] rounded-[0.521vw] bg-[#F5F5F5] border shadow-md"
     >
       <span
-        class="text-[0.vw] w-full text-end pe-[0.8vw] cursor-pointer"
+        class="text-[0.6vw] w-full text-end pe-[0.8vw] cursor-pointer"
         @click="closeSearchBox"
         >بستن</span
       >
diff --git a/package-lock.json b/package-lock.json
index aa25ca4..d75a588 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,8 @@
       "dependencies": {
         "@formkit/nuxt": "^1.6.5",
         "@nuxt/image": "^1.7.0",
+        "form-data": "^4.0.0",
+        "h3-formidable": "^0.2.2",
         "nuxt": "^3.11.2",
         "vue": "^3.4.27",
         "vue-router": "^4.3.2",
@@ -4500,6 +4502,11 @@
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
     },
+    "node_modules/asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="
+    },
     "node_modules/ast-kit": {
       "version": "0.12.1",
       "resolved": "https://registry.npmjs.org/ast-kit/-/ast-kit-0.12.1.tgz",
@@ -4547,6 +4554,11 @@
       "resolved": "https://registry.npmjs.org/async-sema/-/async-sema-3.1.1.tgz",
       "integrity": "sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg=="
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/at-least-node": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
@@ -5271,6 +5283,17 @@
       "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
       "peer": true
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
@@ -5754,6 +5777,14 @@
       "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.4.tgz",
       "integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg=="
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/delegates": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
@@ -5802,6 +5833,15 @@
       "resolved": "https://registry.npmjs.org/devalue/-/devalue-4.3.3.tgz",
       "integrity": "sha512-UH8EL6H2ifcY8TbD2QsxwCC/pr5xSwPvv85LrLXVihmHVC3T3YqTCIwnR5ak0yO1KYqlxrPVOA/JVZJYPy2ATg=="
     },
+    "node_modules/dezalgo": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/dezalgo/-/dezalgo-1.0.4.tgz",
+      "integrity": "sha512-rXSP0bf+5n0Qonsb+SVVfNfIsimO4HEtmnIpPHY8Q1UCzKlQrDMfdobr8nJOOsRgWCyMRqeSBQzmWUMq7zvVig==",
+      "dependencies": {
+        "asap": "^2.0.0",
+        "wrappy": "1"
+      }
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -6251,6 +6291,32 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/formidable": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/formidable/-/formidable-3.5.1.tgz",
+      "integrity": "sha512-WJWKelbRHN41m5dumb0/k8TeAx7Id/y3a+Z7QfhxP/htI9Js5zYaEDtG8uMgG0vM0lOlqnmjE99/kfpOYi/0Og==",
+      "dependencies": {
+        "dezalgo": "^1.0.4",
+        "hexoid": "^1.0.0",
+        "once": "^1.4.0"
+      },
+      "funding": {
+        "url": "https://ko-fi.com/tunnckoCore/commissions"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -6533,6 +6599,17 @@
         "unenv": "^1.9.0"
       }
     },
+    "node_modules/h3-formidable": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/h3-formidable/-/h3-formidable-0.2.2.tgz",
+      "integrity": "sha512-E80oEJMODFop8PGRVmvn4Aa7C076EfA069xh9i22dxNJswbXgtnQreUHBimoBU0/fH1oPhpAvRz/CQQzGBZ5/Q==",
+      "dependencies": {
+        "formidable": "v3"
+      },
+      "peerDependencies": {
+        "h3": ">=1.0.0"
+      }
+    },
     "node_modules/has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -6589,6 +6666,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hexoid": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/hexoid/-/hexoid-1.0.0.tgz",
+      "integrity": "sha512-QFLV0taWQOZtvIRIAdBChesmogZrtuXvVWsFHZTk2SU+anspqZ2vMnoLg7IE1+Uk16N19APic1BuF8bC8c2m5g==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/hookable": {
       "version": "5.5.3",
       "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
@@ -7757,7 +7842,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -7766,7 +7850,6 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
diff --git a/package.json b/package.json
index 113df44..fd24401 100644
--- a/package.json
+++ b/package.json
@@ -10,15 +10,11 @@
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare"
   },
-
-
-
-
-
-  
   "dependencies": {
     "@formkit/nuxt": "^1.6.5",
     "@nuxt/image": "^1.7.0",
+    "form-data": "^4.0.0",
+    "h3-formidable": "^0.2.2",
     "nuxt": "^3.11.2",
     "vue": "^3.4.27",
     "vue-router": "^4.3.2",
diff --git a/pages/account/profile.vue b/pages/account/profile.vue
index 7769ed2..bd3721e 100644
--- a/pages/account/profile.vue
+++ b/pages/account/profile.vue
@@ -1,11 +1,17 @@
 <template>
   <div class="flex justify-between flex-col text-[#383E43]">
-   
     <div class="relative">
       <img
+      v-if="authUser.avatarMedia"
         :src="authUser?.avatarMedia"
         class="w-[40.256vw] md:w-[8.177vw] h-[40.256vw] md:h-[8.177vw] rounded-[50%]"
-        alt=""
+        alt="profile"
+      />
+      <img
+      v-else
+        src="/public/images/alt.png"
+        class="w-[40.256vw] md:w-[8.177vw] h-[40.256vw] md:h-[8.177vw] rounded-[50%]"
+        alt="profile"
       />
       <label for="file-upload" class="custom-file-upload">
         <svg
@@ -73,10 +79,8 @@
           />
         </svg>
       </label>
-      <input type="file" id="file-upload" @change="changePhoto" />
+      <input type="file" id="file-upload" @change="changePhoto"/>
     </div>
-
-
     <FormKit
       type="form"
       @submit="edit"
@@ -151,6 +155,7 @@ import { useToast } from "vue-toastification";
 const toast = useToast();
 const { authUser } = useAuth();
 const loading = ref(false);
+const name = ref("avater");
 const edit = async (formData) => {
   try {
     loading.value = true;
@@ -165,19 +170,28 @@ const edit = async (formData) => {
     loading.value = false;
   }
 };
-const changePhoto = async (val) => {
-  const fd = new FormData('hi')
-  fd.append('name', 'hi')
-  console.log('fd', fd);
+async function changePhoto(val) {
+  console.log("image", val.target.files[0]);
+  const formData = new FormData();
+  formData.append('file', val.target.files[0]);
+  formData.append('directoryName', name.value);
+  console.log('keys', formData.values());
+  try {
+    await $fetch("/api/uploader", {
+      method: "POST",
+      body: formData,
+    });
+  } catch (error) {
+    console.log('error client', error);
+  }
+  //        console.log('ss', formData);
+
   // const data = await useFetch("/api/uploader", {
   //   method: "POST",
-  //   body: {
-  //     file: val.target.value,
-  //     directoryName: "profileAvatar",
-  //   },
+  //   body: formData
   // });
-  // console.log("done", data);
-};
+  //  console.log("done", data.data);
+}
 </script>
 
 <style scoped>
diff --git a/public/images/alt.png b/public/images/alt.png
new file mode 100644
index 0000000..4e47c08
Binary files /dev/null and b/public/images/alt.png differ
diff --git a/server/api/auth/login-step-two.post.js b/server/api/auth/login-step-two.post.js
index b8be856..deb6cb3 100644
--- a/server/api/auth/login-step-two.post.js
+++ b/server/api/auth/login-step-two.post.js
@@ -12,7 +12,7 @@ export default defineEventHandler(async (event) => {
         setCookie(event, 'token', data.token, {
             httpOnly: true,
             secure: true,
-            maxAge: 60 * 60 * 24 * 7, // 1 week
+            maxAge: 60 * 60 * 24 * 7 , // 1 week
             path: '/'
         })
              return data;
diff --git a/server/api/uploader.post.js b/server/api/uploader.post.js
index 42478ed..a196949 100644
--- a/server/api/uploader.post.js
+++ b/server/api/uploader.post.js
@@ -1,33 +1,32 @@
+import { readFiles } from 'h3-formidable'
+import FormData from 'form-data';
+import fs from 'fs';
 export default defineEventHandler(async (event) => {
     const { public: { apiBase } } = useRuntimeConfig();
     const token = getCookie(event, 'token');
-    const body = await readBody(event);
-    console.log(body);
+    // const body = await readBody(event);
+    // console.log('body', body);
+    const { fields, files } = await readFiles(event, {
+        includeFields: true,
+    })
+
+ 
+    let formDat = new FormData();
+    formDat.append('file',  fs.createReadStream(files.file[0].filepath));
+    formDat.append('directoryName',  fields.directoryName[0]);
     try {
-        const data = await $fetch(`${apiBase}/uploader`, {
-            method: 'POST',
-            headers: {
-              //  'Accept': 'multipart/form-data',
-                'Content-Type': 'multipart/form-data',
-                'Authorization': `Bearer ${token}`
-            },
-             body: {
-                file: body.file,
-                directoryName: body.directoryName
-             }
-        });
-        console.log('uploader data', data);
-        return data;
+            const data = await $fetch(`${apiBase}/uploader`, {
+                method: 'POST',
+                 body: formDat,
+                headers: {
+                    'Accept': 'application/json',
+                    'Authorization': `Bearer ${token}`
+                },
+            });
+            console.log('uploader data', data);
+            return data;
     } catch (error) {
-        console.log(error.data);
-        // if (error.statusCode == 401) {
-        //     setCookie(event, 'token', '', {
-        //         httpOnly: true,
-        //         secure: true,
-        //         maxAge: new Date(0),
-        //         path: '/'
-        //     })
-        // }
+        console.log('error', error);
         return error;
     }