diff --git a/package-lock.json b/package-lock.json
index 8756607..bb962ea 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "@testing-library/user-event": "^13.5.0",
         "@themesberg/flowbite": "^1.3.0",
         "apexcharts": "^3.33.1",
+        "axios": "^0.26.0",
         "date-fns": "^2.28.0",
         "react": "^17.0.2",
         "react-apexcharts": "^1.3.9",
@@ -4623,6 +4624,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "0.26.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.0.tgz",
+      "integrity": "sha512-lKoGLMYtHvFrPVt3r+RBMp9nh34N0M8zEfCWqdWZx6phynIEhQqAdydpyBAAG211zlhX9Rgu08cOamy6XjE5Og==",
+      "dependencies": {
+        "follow-redirects": "^1.14.8"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -7885,9 +7894,9 @@
       "integrity": "sha512-8/sOawo8tJ4QOBX8YlQBMxL8+RLZfxMQOif9o0KUKTNTjMYElWPE0r/m5VNFxTRd0NSw8qSy8dajrwX4RYI1Hw=="
     },
     "node_modules/follow-redirects": {
-      "version": "1.14.6",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.6.tgz",
-      "integrity": "sha512-fhUl5EwSJbbl8AR+uYL2KQDxLkdSjZGR36xy46AO7cOMTrCMON6Sa28FmAnC2tRTDbd/Uuzz3aJBv7EBN7JH8A==",
+      "version": "1.14.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
+      "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==",
       "funding": [
         {
           "type": "individual",
@@ -20347,6 +20356,14 @@
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.3.5.tgz",
       "integrity": "sha512-WKTW1+xAzhMS5dJsxWkliixlO/PqC4VhmO9T4juNYcaTg9jzWiJsou6m5pxWYGfigWbwzJWeFY6z47a+4neRXA=="
     },
+    "axios": {
+      "version": "0.26.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.0.tgz",
+      "integrity": "sha512-lKoGLMYtHvFrPVt3r+RBMp9nh34N0M8zEfCWqdWZx6phynIEhQqAdydpyBAAG211zlhX9Rgu08cOamy6XjE5Og==",
+      "requires": {
+        "follow-redirects": "^1.14.8"
+      }
+    },
     "axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -22810,9 +22827,9 @@
       "integrity": "sha512-8/sOawo8tJ4QOBX8YlQBMxL8+RLZfxMQOif9o0KUKTNTjMYElWPE0r/m5VNFxTRd0NSw8qSy8dajrwX4RYI1Hw=="
     },
     "follow-redirects": {
-      "version": "1.14.6",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.6.tgz",
-      "integrity": "sha512-fhUl5EwSJbbl8AR+uYL2KQDxLkdSjZGR36xy46AO7cOMTrCMON6Sa28FmAnC2tRTDbd/Uuzz3aJBv7EBN7JH8A=="
+      "version": "1.14.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
+      "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w=="
     },
     "fork-ts-checker-webpack-plugin": {
       "version": "6.5.0",
diff --git a/package.json b/package.json
index 01a10ef..93601b6 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@testing-library/user-event": "^13.5.0",
     "@themesberg/flowbite": "^1.3.0",
     "apexcharts": "^3.33.1",
+    "axios": "^0.26.0",
     "date-fns": "^2.28.0",
     "react": "^17.0.2",
     "react-apexcharts": "^1.3.9",
diff --git a/src/components/FileManager/index.js b/src/components/FileManager/index.js
index 0171973..166f328 100644
--- a/src/components/FileManager/index.js
+++ b/src/components/FileManager/index.js
@@ -97,10 +97,10 @@ const FileManager = () => {
       </div>
       {/* left Section */}
       <div className="w-3/12 py-5 flex flex-col">
-        <TitleSubtitle />
+        <TitleSubtitle subTitleShow={false} />
         <SemiDonut />
         <div className="px-4" style={{ marginTop: "-113px" }}>
-          <TitleSubtitle />
+          <TitleSubtitle subTitleShow={false} />
           <div className="flex flex-col items-center justify-center">
             {/* {[0, 1, 2].map((item, index) => (
               <CardHolder />
diff --git a/src/components/SemiDonut/index.js b/src/components/SemiDonut/index.js
index ad7614e..4ec3542 100644
--- a/src/components/SemiDonut/index.js
+++ b/src/components/SemiDonut/index.js
@@ -17,8 +17,8 @@ class SemiDonut extends Component {
         legend: {
           show: true,
           position: "top",
-          // horizontalAlign: "center",
         },
+        labels: ["عکس", "صوتی", "ویدیو", "فایل های مختلف", "فضای خالی"],
         plotOptions: {
           pie: {
             startAngle: -90,
diff --git a/src/components/SemiDonut/index.scss b/src/components/SemiDonut/index.scss
index aac6b5b..6eace95 100644
--- a/src/components/SemiDonut/index.scss
+++ b/src/components/SemiDonut/index.scss
@@ -1,13 +1,32 @@
 .apexcharts-legend {
-  justify-content: center !important;
   display: flex;
   overflow: auto;
   padding: 0 10px;
   position: absolute !important;
   left: 0px;
   top: 200px !important;
+  justify-content: center !important;
 }
 
 .apexcharts-canvas {
-  top: -33px !important;
+  top: -54px !important;
+}
+
+.apexcharts-legend-text {
+  margin-right: 5px !important;
+  font-family: iransans-medium !important;
+}
+
+.apexcharts-legend-marker {
+  border-radius: 0px !important;
+  width: 15px !important;
+  height: 15px !important;
+}
+
+.apexcharts-legend-series {
+  margin-top: 10px !important;
+}
+
+.apexcharts-datalabels {
+  display: none !important;
 }
diff --git a/src/components/TitleSubtitle/index.js b/src/components/TitleSubtitle/index.js
index b05a3be..8b82bad 100644
--- a/src/components/TitleSubtitle/index.js
+++ b/src/components/TitleSubtitle/index.js
@@ -1,18 +1,22 @@
 import React from "react";
 
-const TitleSubtitle = ({ title, subTitle }) => {
+const TitleSubtitle = ({ title, subTitle, titleShow, subTitleShow }) => {
   return (
     <div>
       {/*  page Title */}
-      <div className="flex flex-row items-center">
-        <div className="w-1 h-5 bg-blue-500 rounded ml-1"></div>
-        <h2 className="text-base text-blue-900">{title}</h2>
-      </div>
+      {titleShow && (
+        <div className="flex flex-row items-center">
+          <div className="w-1 h-5 bg-blue-500 rounded ml-1"></div>
+          <h2 className="text-base text-blue-900">{title}</h2>
+        </div>
+      )}
       {/* page subTitle */}
-      <div className="flex flex-row items-center mt-4">
-        <div className="w-1 h-5 bg-gray-400 rounded ml-1"></div>
-        <h2 className="text-xs">{subTitle}</h2>
-      </div>
+      {subTitleShow && (
+        <div className="flex flex-row items-center mt-4">
+          <div className="w-1 h-5 bg-gray-400 rounded ml-1"></div>
+          <h2 className="text-xs">{subTitle}</h2>
+        </div>
+      )}
     </div>
   );
 };
@@ -22,4 +26,7 @@ export default TitleSubtitle;
 TitleSubtitle.defaultProps = {
   title: "میزان فروش محصولات",
   subTitle: "اطلاعات جداول مشخصاتی کارکنان مجموعه ایران تایر",
+
+  titleShow: true,
+  subTitleShow: true,
 };
diff --git a/src/components/UploadFile/index.js b/src/components/UploadFile/index.js
index 34db082..645371a 100644
--- a/src/components/UploadFile/index.js
+++ b/src/components/UploadFile/index.js
@@ -1,25 +1,70 @@
-import React from "react";
+import React, { Component } from "react";
 
 import file from "./images/file.svg";
+import axios from "axios";
 
-const index = () => {
-  return (
-    <div className="relative bg-white w-fit flex flex-col items-center p-10 rounded-lg border-2 border-dashed border-blue-300 mt-5">
-      <div className=" ">
-        <img src={file} className="" />
-        <input
-          type="file"
-          className="opacity-0 absolute left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-20 cursor-pointer"
-          style={{ top: "39%" }}
-          name=""
-        />
+export default class UploadFile extends Component {
+  state = {
+    uploadPercentage: 0,
+    avatar: "",
+  };
+
+  uploadFile = ({ target: { files } }) => {
+    console.log(files[0]);
+    let data = new FormData();
+    data.append("file", files[0]);
+
+    const options = {
+      onUploadProgress: (progressEvent) => {
+        const { loaded, total } = progressEvent;
+        let percent = Math.floor((loaded * 100) / total);
+        console.log(`${loaded}kb of ${total}kb | ${percent}%`);
+
+        if (percent < 100) {
+          this.setState({ uploadPercentage: percent });
+        }
+      },
+    };
+
+    axios
+      .post("https://www.mocky.io/v2/5cc8019d300000980a055e76", data, options)
+      .then((res) => {
+        console.log(res);
+        this.setState({ avatar: res.data.url, uploadPercentage: 100 }, () => {
+          setTimeout(() => {
+            this.setState({ uploadPercentage: 0 });
+          }, 1000);
+        });
+      });
+  };
+
+  render() {
+    const { uploadPercentage } = this.state;
+
+    return (
+      <div className=" relative bg-white w-full flex flex-col items-center px-4 py-7 rounded-lg border-2 border-dashed border-blue-300 mt-5">
+        <div className=" ">
+          <img src={file} className="" />
+          <input
+            onChange={this.uploadFile}
+            type="file"
+            className="opacity-0 absolute left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-20 cursor-pointer"
+            style={{ top: "39%" }}
+            name=""
+          />{" "}
+          {uploadPercentage > 0 && (
+            <div
+              className="w-50 bg-red-500 h-2 z-50"
+              now={uploadPercentage}
+              label={`${uploadPercentage}%`}
+            ></div>
+          )}
+        </div>
+        <p className="text-xs mt-5">
+          یک فایل را اینجا بکشید یا از{" "}
+          <span className="text-blue-300">رایانه خود انتخاب کنید</span>
+        </p>
       </div>
-      <p className="text-sm mt-5">
-        یک فایل را اینجا بکشید یا از{" "}
-        <span className="text-blue-300">رایانه خود انتخاب کنید</span>
-      </p>
-    </div>
-  );
-};
-
-export default index;
+    );
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index 27edf46..250cffd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2590,6 +2590,13 @@
   "resolved" "https://registry.npmjs.org/axe-core/-/axe-core-4.3.5.tgz"
   "version" "4.3.5"
 
+"axios@^0.26.0":
+  "integrity" "sha512-lKoGLMYtHvFrPVt3r+RBMp9nh34N0M8zEfCWqdWZx6phynIEhQqAdydpyBAAG211zlhX9Rgu08cOamy6XjE5Og=="
+  "resolved" "https://registry.npmjs.org/axios/-/axios-0.26.0.tgz"
+  "version" "0.26.0"
+  dependencies:
+    "follow-redirects" "^1.14.8"
+
 "axobject-query@^2.2.0":
   "integrity" "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA=="
   "resolved" "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz"
@@ -4588,10 +4595,10 @@
   "resolved" "https://registry.npmjs.org/flatted/-/flatted-3.2.4.tgz"
   "version" "3.2.4"
 
-"follow-redirects@^1.0.0":
-  "integrity" "sha512-fhUl5EwSJbbl8AR+uYL2KQDxLkdSjZGR36xy46AO7cOMTrCMON6Sa28FmAnC2tRTDbd/Uuzz3aJBv7EBN7JH8A=="
-  "resolved" "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.6.tgz"
-  "version" "1.14.6"
+"follow-redirects@^1.0.0", "follow-redirects@^1.14.8":
+  "integrity" "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w=="
+  "resolved" "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz"
+  "version" "1.14.9"
 
 "fork-ts-checker-webpack-plugin@^6.5.0":
   "integrity" "sha512-cS178Y+xxtIjEUorcHddKS7yCMlrDPV31mt47blKKRfMd70Kxu5xruAFE2o9sDY6wVC5deuob/u/alD04YYHnw=="