diff --git a/package-lock.json b/package-lock.json
index 4613ebb..2bee5d4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,9 +13,11 @@
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "axios": "^1.6.5",
+        "buffer": "^6.0.3",
         "jwt-decode": "^4.0.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-image-picker-editor": "^1.3.3",
         "react-redux": "^8.1.3",
         "react-router-dom": "^6.18.0",
         "react-scripts": "^5.0.1",
@@ -6442,7 +6444,6 @@
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
       "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -6650,10 +6651,9 @@
       }
     },
     "node_modules/buffer": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
-      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
-      "dev": true,
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
       "funding": [
         {
           "type": "github",
@@ -6670,7 +6670,7 @@
       ],
       "dependencies": {
         "base64-js": "^1.3.1",
-        "ieee754": "^1.1.13"
+        "ieee754": "^1.2.1"
       }
     },
     "node_modules/buffer-crc32": {
@@ -7810,6 +7810,30 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/cypress/node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
     "node_modules/cypress/node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -10981,7 +11005,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
       "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -17035,6 +17058,18 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-image-picker-editor": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/react-image-picker-editor/-/react-image-picker-editor-1.3.3.tgz",
+      "integrity": "sha512-LYrVJ+mk9J04xFQR12qI3yIAdQe6tOt0/BMKGxr0fa6fv+1aFQr3ZNq2fMviAc3EHYnFaWHzXjo/aDl9xX/0MQ==",
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
diff --git a/package.json b/package.json
index b5ce393..e691f8a 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "jwt-decode": "^4.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-image-picker-editor": "^1.3.3",
     "react-redux": "^8.1.3",
     "react-router-dom": "^6.18.0",
     "react-scripts": "^5.0.1",
diff --git a/src/utils/photo-picker/PhotoPicker.js b/src/utils/photo-picker/PhotoPicker.js
new file mode 100644
index 0000000..10f3a8f
--- /dev/null
+++ b/src/utils/photo-picker/PhotoPicker.js
@@ -0,0 +1,48 @@
+import ReactImagePickerEditor, { ImagePickerConf } from 'react-image-picker-editor';
+import 'react-image-picker-editor/dist/index.css'
+import './PhotoPicker.scss';
+import { useState } from 'react';
+
+import Popup from 'reactjs-popup';
+
+export default function PhotoPicker({triggerButton, onSelect}){
+    const [imageBuffor, setImageBuffor] = useState('');
+    const config = {
+        borderRadius: '5px',
+        aspectRatio: 1,
+        language: 'en',
+        width: '300px',
+        height: '250px',
+        objectFit: 'contain',
+        compressInitial: null,
+        hideDeleteBtn: true,
+        hideDownloadBtn: true,
+        hideEditBtn: true,
+        hideAddBtn: true
+      };
+      // const initialImage: string = '/assets/images/8ptAya.webp';
+     return (<>
+        <Popup className='photo-picker-popup' trigger={triggerButton}>
+                {close => <>
+                    <div className='user-setting-popup-window-background'>
+                        <div className='photo-picker-popup-window'>
+                            <div className='photo-picker-popup-container'>
+                                <button className='photo-picker-popup-close-btn' onClick={close}>&times;</button>
+                                <div className='photo-picker-component'>
+                                    < ReactImagePickerEditor                
+                                        config={config}
+                                        imageSrcProp={imageBuffor}
+                                        imageChanged={setImageBuffor} /> 
+                                </div>
+                                <div className='photo-picker-popup-operation-btns'>
+                                    <button className='photo-picker-popup-save-btn' disabled={imageBuffor === ''} onClick={() => {onSelect(imageBuffor); close()}}>Save</button>
+                                    <button className='photo-picker-popup-cancel-btn' onClick={close}>Cancel</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </>
+                }
+            </Popup>
+        </>)
+}
\ No newline at end of file
diff --git a/src/utils/photo-picker/PhotoPicker.scss b/src/utils/photo-picker/PhotoPicker.scss
new file mode 100644
index 0000000..489a4c3
--- /dev/null
+++ b/src/utils/photo-picker/PhotoPicker.scss
@@ -0,0 +1,54 @@
+.photo-picker-popup {
+
+}
+
+.photo-picker-popup-window {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    width: 500px;
+    height: fit-content;
+
+    padding: 20px;
+    
+    border-radius: 10px;
+    background-color: #6a6a6a;
+}
+
+.user-setting-popup-window-background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+.photo-picker-popup-container {
+    display: flex;
+    flex-direction: column;
+}
+
+.photo-picker-popup-operation-btns {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+}
+
+.photo-picker-popup-arrow {
+    visibility: hidden;
+}
+
+.photo-picker-popup-close-btn {
+    width: 50px;
+    margin-left: auto;
+
+    border-radius: 50%;
+}
+
+
+.photo-picker-component {
+    margin-left: auto;
+    margin-right: auto;
+}
\ No newline at end of file