diff --git a/src/main/Homepage/image_upload/index.js b/src/main/Homepage/image_upload/index.js
index 6c52e87..d9069b6 100644
--- a/src/main/Homepage/image_upload/index.js
+++ b/src/main/Homepage/image_upload/index.js
@@ -5,14 +5,16 @@ import Button from "@material-ui/core/Button";
 import { makeStyles } from "@material-ui/core/styles";
 import Paper from "@material-ui/core/Paper";
 import Grid from "@material-ui/core/Grid";
-import { UploadButton } from "../../utils/buttons";
+import { UploadButton, RetinaFaceButton } from "../../utils/buttons";
+
 import DefaultImageFRView from "./defaultFR/imageView";
+import RetinaFaceImageFRView from "./retinaFace/retinaFaceView";
 import SimFaceForm from "./simface/SimFaceDialogeForm";
 import SimFaceView from "./simface/SimFaceView";
 import ViewFaceResult from "./simface/ShowResult";
 import NSFWview from "./nsfw/NSFWview";
 import NSFWForm from "./nsfw/NSFWDialogeForm";
-import {BASEURL} from "../../../constant";
+import { BASEURL } from "../../../constant";
 
 const useStyles = makeStyles(theme => ({
     root: {
@@ -47,6 +49,8 @@ class ImageFR extends Component {
         this.handleSimFaceSubmit = this.handleSimFaceSubmit.bind(this);
         this.handleNSFWSubmit = this.handleNSFWSubmit.bind(this);
         this.handleNSFW = this.handleNSFW.bind(this);
+        this.handleRetinaFaceSubmit = this.handleRetinaFaceSubmit.bind(this);
+
     }
     handleState(event) {
         this.setState({
@@ -54,8 +58,8 @@ class ImageFR extends Component {
             preview: URL.createObjectURL(event.target.files[0]),
             filetext: null,
             NSFWimgfile: null,
-            referenceImage:null,
-            compareImage:null,
+            referenceImage: null,
+            compareImage: null,
             renderView: "defaultView",
             simlarFaceResult: null,
         });
@@ -74,8 +78,8 @@ class ImageFR extends Component {
             renderView: "nsfw",
             NSFWimgfile: imgfile,
             filetext: null,
-            referenceImage:null,
-            compareImage:null,
+            referenceImage: null,
+            compareImage: null,
             simlarFaceResult: null,
         });
     }
@@ -102,6 +106,15 @@ class ImageFR extends Component {
                         />
                     </div>
                 );
+            case "retinaFaceView":
+                return (
+
+                    <RetinaFaceImageFRView
+                        filetext={this.state.filetext}
+                        preview={this.state.preview}
+                    />
+
+                );
             default:
                 return (
                     <DefaultImageFRView
@@ -148,6 +161,26 @@ class ImageFR extends Component {
             })
             .catch(console.log);
     }
+    handleRetinaFaceSubmit(event) {
+        event.preventDefault();
+        let form_data = new FormData();
+        form_data.append("file", this.state.file);
+        form_data.append("network", "RetinaFace");
+
+        let url = `${BASEURL}/api/image/`;
+        axios
+            .post(url, form_data, {
+                headers: {
+                    "content-type": "multipart/form-data"
+                }
+            })
+            .then(response => {
+                this.setState({
+                    resultjson: JSON.stringify(response.data, null, 2)
+                });
+            })
+            .catch(console.log);
+    }
     handleSimFaceSubmit(event) {
         event.preventDefault();
         let form_data = new FormData();
@@ -192,6 +225,8 @@ class ImageFR extends Component {
                                     <label htmlFor="contained-button-file">
                                         <UploadButton />
                                     </label>
+
+
                                     <Button
                                         variant="contained"
                                         color="primary"
@@ -206,6 +241,8 @@ class ImageFR extends Component {
                                                 case "simFaceView":
                                                     return this
                                                         .handleSimFaceSubmit;
+                                                case "retinaFaceView":
+                                                    return this.handleRetinaFaceSubmit;
                                                 default:
                                                     return this
                                                         .handleDefaultSubmit;
@@ -214,6 +251,19 @@ class ImageFR extends Component {
                                     >
                                         Process
                                     </Button>
+                                    <Button
+                                        variant="contained"
+                                        color="primary"
+                                        onClick={(() => {
+
+                                            return this
+                                                .handleRetinaFaceSubmit;
+
+
+                                        })()}
+                                    >
+                                        RetinaNet
+                                    </Button>
                                 </div>
                             </form>
 
@@ -232,7 +282,7 @@ class ImageFR extends Component {
                             <div>
                                 {" "}
                                 <pre>{this.state.resultjson}</pre>
-                                {this.state.simlarFaceResult !== null  ? (
+                                {this.state.simlarFaceResult !== null ? (
                                     <ViewFaceResult
                                         responseResult={
                                             this.state.simlarFaceResult
@@ -243,7 +293,7 @@ class ImageFR extends Component {
                         </Paper>
                     </Grid>
                 </Grid>
-            </div>
+            </div >
         );
     }
 }
diff --git a/src/main/Homepage/image_upload/retinaFace/retinaFaceView.js b/src/main/Homepage/image_upload/retinaFace/retinaFaceView.js
new file mode 100644
index 0000000..8128a5a
--- /dev/null
+++ b/src/main/Homepage/image_upload/retinaFace/retinaFaceView.js
@@ -0,0 +1,14 @@
+import React from "react";
+import Paper from "@material-ui/core/Paper";
+function RetinaFaceImageFRView(props) {
+    return (
+        <Paper>
+            <div style={{ textAlign: "center" }}>
+                {props.filetext}
+                <img height="400" src={props.preview} />
+            </div>
+        </Paper>
+    );
+}
+
+export default RetinaFaceImageFRView;
diff --git a/src/main/utils/buttons.js b/src/main/utils/buttons.js
index 73c0e05..96d5cbb 100644
--- a/src/main/utils/buttons.js
+++ b/src/main/utils/buttons.js
@@ -42,6 +42,22 @@ function UploadButton() {
     );
 }
 
+function RetinaFaceButton() {
+    const classes = useStyles();
+
+    return (
+        <div>
+            <Button
+                variant="contained"
+                color="primary"
+                className={classes.button}
+            >
+                RetinaFace
+            </Button>
+        </div>
+    );
+}
+
 function ProcessButton() {
     const classes = useStyles();
 
@@ -91,4 +107,4 @@ function AddNewLink() {
     );
 }
 
-export { UploadButton, ProcessButton, AddNewContent, AddNewLink };
+export { UploadButton, ProcessButton, AddNewContent, AddNewLink, RetinaFaceButton };