diff --git a/src/components/UploadFile/images/file.svg b/public/images/UploadFilefile.svg
similarity index 100%
rename from src/components/UploadFile/images/file.svg
rename to public/images/UploadFilefile.svg
diff --git a/src/components/UploadFile/images/pause.svg b/public/images/UploadFilepause.svg
similarity index 100%
rename from src/components/UploadFile/images/pause.svg
rename to public/images/UploadFilepause.svg
diff --git a/src/App.js b/src/App.js
index 0532723..59fc1bf 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,7 +5,7 @@ import { Provider } from "react-redux";
 import store from "./redux/store";
 import "./App.scss";
 
-// const MyComp = lazy(() => import("./components/myComp"));
+const MyMahdi = lazy(() => import("./mahdi"));
 
 // import "rc-slider/assets/index.css";
 // import "react-circular-progressbar/dist/styles.css";
@@ -15,12 +15,17 @@ function App() {
     <>
       <div className="bg-red-400">mahdi lazy loaded</div>
       <Suspense fallback={<div>Loading...</div>}>
-        <h2>hi there i am loaded NOWW</h2>
         <Provider store={store}>
           <Router />
         </Provider>
       </Suspense>
     </>
+    //   <>
+    //   <div className="bg-red-400">mahdi lazy loaded</div>
+    //   <Suspense fallback={<div>Loading...</div>}>
+    //     <MyMahdi />
+    //   </Suspense>
+    // </>
   );
 }
 
diff --git a/src/components/UploadFile/index.js b/src/components/UploadFile/index.js
index 0b8802f..87f5a43 100644
--- a/src/components/UploadFile/index.js
+++ b/src/components/UploadFile/index.js
@@ -1,8 +1,5 @@
 import React, { Component } from "react";
 
-import file from "./images/file.svg";
-
-import pause from "./images/pause.svg";
 import axios from "axios";
 
 export default class UploadFile extends Component {
@@ -48,12 +45,11 @@ export default class UploadFile extends Component {
         {/* ? upload input File  */}
         <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="" alt="" />
+            <img src="images/UploadFilefile.svg" className="" alt="" />
             <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%" }}
+              className="opacity-0 absolute top-[39%] left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-20 cursor-pointer"
               name=""
             />
             {uploadPercentage > 0 && (
@@ -65,7 +61,7 @@ export default class UploadFile extends Component {
             )}
           </div>
           <p className="text-xs mt-5">
-            یک فایل را اینجا بکشید یا از{" "}
+            یک فایل را اینجا بکشید یا از
             <span className="text-blue-300">رایانه خود انتخاب کنید</span>
           </p>
         </div>
@@ -86,13 +82,13 @@ export default class UploadFile extends Component {
                 <span className="text-xs mr-2">3 دقیقه باقیمانده</span>
                 {/* pause button */}
                 <div className="bg-blue-100 bg-opacity-50 p-2 rounded-full cursor-pointer mr-2">
-                  <img src={pause} />
+                  <img src="images/UploadFilepause.svg" alt="pic" />
                 </div>
               </div>
             </div>
-            <div className="bg-rangeBgColor h-3 w-full rounded mt-2">
+            <div className="bg-[#D3E9FF] h-3 w-full rounded mt-2">
               <div
-                className={`bg-rangeFillBgColor h-3 rounded duration-500 w-72`}
+                className={`bg-[#68A8E6] h-3 rounded duration-500 w-72`}
               ></div>
             </div>
           </div>
diff --git a/src/mahdi.js b/src/mahdi.js
new file mode 100644
index 0000000..c053496
--- /dev/null
+++ b/src/mahdi.js
@@ -0,0 +1,18 @@
+import React, { Component, lazy, Suspense } from "react";
+import { Provider } from "react-redux";
+import store from "./redux/store";
+import Router from "./router.js";
+
+const mahdi = () => {
+  return (
+    <>
+      <h2>hi there i am loaded NOWW</h2>
+      <Provider store={store}>
+        <Router />
+      </Provider>
+      ;
+    </>
+  );
+};
+
+export default mahdi;
diff --git a/src/redux/data.js b/src/redux/data.js
index cc73ca1..5bc9c56 100644
--- a/src/redux/data.js
+++ b/src/redux/data.js
@@ -35,6 +35,7 @@ import SelectBox from "../components/SelectBox";
 import ProductCategories from "../components/ProductCategories";
 import RangeSlider from "../components/RangeSlider";
 import Stepper from "../components/Stepper";
+import UploadFile from "../components/UploadFile";
 
 // mini components
 import MiniComponents from "../components/MiniComponents";
@@ -698,6 +699,16 @@ const components = [
       code: null,
     },
   },
+  {
+    name: "Upload File",
+    author: "Andalib",
+    props: [],
+    content: {
+      name: "Upload File",
+      component: <UploadFile />,
+      code: null,
+    },
+  },
   // mini components
   {
     name: "Mini Components",