diff --git a/frontend/src/components/detection/image/ImageUploadForm.js b/frontend/src/components/detection/image/ImageUploadForm.js
index cc523851637f1c92779426c9b760aaf1923cfc72..268b51f72ee720e4e65483e1d5a2de99267c3c5b 100644
--- a/frontend/src/components/detection/image/ImageUploadForm.js
+++ b/frontend/src/components/detection/image/ImageUploadForm.js
@@ -6,8 +6,22 @@ import '../../../styles/buttons/uploadButton.css';
 import UploadButton from '../../common/buttons/UploadButton';
 import TakePhotoButton from '../../common/buttons/TakePhotoButton';
 
-
 const ImageUploadForm = ({ handleFileChange, handleSubmit, handleCameraClick, handleGalleryClick, isLoading }) => {
+
+    const validateFileType = (file) => {
+        const validTypes = ['image/jpeg', 'image/png'];
+        return validTypes.includes(file.type);
+    };
+
+    const handleFileValidation = (event) => {
+        const file = event.target.files[0];
+        if (file && validateFileType(file)) {
+            handleFileChange(event);
+        } else {
+            alert('Invalid file type. Please select a PNG or JPG image.');
+        }
+    };
+
     return (
         <form id="uploadForm" className="text-center" onSubmit={handleSubmit} encType="multipart/form-data">
             <div className="form-group">
@@ -17,7 +31,7 @@ const ImageUploadForm = ({ handleFileChange, handleSubmit, handleCameraClick, ha
                     accept="image/*"
                     id="cameraInput"
                     className="d-none"
-                    onChange={handleFileChange}
+                    onChange={handleFileValidation}
                 />
                 <button
                     type="button"
@@ -33,7 +47,7 @@ const ImageUploadForm = ({ handleFileChange, handleSubmit, handleCameraClick, ha
                     accept="image/*"
                     id="galleryInput"
                     className="d-none"
-                    onChange={handleFileChange}
+                    onChange={handleFileValidation}
                 />
             </div>
             <UploadButton handleClick={handleSubmit} isLoading={isLoading} />
diff --git a/frontend/src/pages/NormalDetection/NormalDetectionPage.js b/frontend/src/pages/NormalDetection/NormalDetectionPage.js
index b7dc0cfbc192e088dd0af926cc9e0d44403b8032..bf9472cc9946e8bfe7978bdc5079771a0a221a34 100644
--- a/frontend/src/pages/NormalDetection/NormalDetectionPage.js
+++ b/frontend/src/pages/NormalDetection/NormalDetectionPage.js
@@ -1,4 +1,4 @@
-/* src/pages/NormalDetection/NormalDetectionPage.js */
+// src/pages/NormalDetection/NormalDetectionPage.js
 import React, { useState } from 'react';
 import { Modal, Button } from 'react-bootstrap';
 import { normalDetection } from '../../services/processMisplacedManagerApi';
@@ -14,6 +14,7 @@ const NormalDetectionPage = () => {
     const [misplacedObjects, setMisplacedObjects] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
     const [showModal, setShowModal] = useState(false);
+    const [detectionComplete, setDetectionComplete] = useState(false);
 
     const handleCameraClick = () => {
         document.getElementById('cameraInput').click();
@@ -38,6 +39,7 @@ const NormalDetectionPage = () => {
                 const response = await normalDetection(formData);
                 setResultImageUrl(response.output_image_url);
                 setMisplacedObjects(response.misplaced_objects);
+                setDetectionComplete(true); // Set detection as complete
             } catch (error) {
                 console.error('Upload failed', error);
             } finally {
@@ -56,10 +58,17 @@ const NormalDetectionPage = () => {
         setShowModal(false);
     };
 
+    const handleReset = () => {
+        setImageFile(null);
+        setResultImageUrl(null);
+        setMisplacedObjects([]);
+        setDetectionComplete(false);
+    };
+
     return (
         <DetectionContainer title="Upload Image for Normal Detection">
             <LoadingIndicator isLoading={isLoading} message="Your photo is being processed, please wait..." />
-            {!isLoading && (
+            {!isLoading && !detectionComplete && (
                 <ImageUploadForm
                     handleFileChange={handleFileChange}
                     handleSubmit={handleSubmit}
@@ -68,12 +77,16 @@ const NormalDetectionPage = () => {
                     isLoading={isLoading}
                 />
             )}
-            <DetectionResults result={{ output_image_url: resultImageUrl, misplaced_objects: misplacedObjects }} />
-            <div className="text-center mt-4">
-                <a href="/detection-options" className="btn btn-link">
-                    <i className="fas fa-arrow-left"></i> Back to Detection Options
-                </a>
-            </div>
+            {!isLoading && detectionComplete && (
+                <>
+                    <DetectionResults result={{ output_image_url: resultImageUrl, misplaced_objects: misplacedObjects }} />
+                    <div className="text-center mt-4">
+                        <Button onClick={handleReset} className="btn btn-primary">
+                            Detect Another Image
+                        </Button>
+                    </div>
+                </>
+            )}
             <Modal show={showModal} onHide={handleCloseModal} size="xl" centered>
                 <Modal.Header closeButton>
                     <Modal.Title>Full-Size Image</Modal.Title>