diff --git a/client/src/Pages/ResultsPage.tsx b/client/src/Pages/ResultsPage.tsx
index 650d2dd..46b4fb1 100644
--- a/client/src/Pages/ResultsPage.tsx
+++ b/client/src/Pages/ResultsPage.tsx
@@ -211,7 +211,7 @@ function ResultsPage() {
diff --git a/client/src/Pages/Selection.tsx b/client/src/Pages/Selection.tsx
new file mode 100644
index 0000000..650d2dd
--- /dev/null
+++ b/client/src/Pages/Selection.tsx
@@ -0,0 +1,231 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import axios from 'axios';
+import {
+ Typography,
+ Container,
+ Button,
+ Paper,
+ Box,
+ Card,
+ CardContent,
+ Grid,
+ LinearProgress,
+ useTheme
+} from '@mui/material';
+import {
+ Check as CheckIcon,
+ VolumeUp as VolumeUpIcon
+} from '@mui/icons-material';
+import StepperComponent from '../components/StepperComponent';
+import { useMediaContext } from '../contexts/MediaContext';
+
+function ResultsPage() {
+ const navigate = useNavigate();
+ const theme = useTheme();
+ const { mediaFile, clearMedia,response } = useMediaContext();
+ const [isPlaying, setIsPlaying] = useState(false);
+ const videoRef = useRef(null);
+
+ const processDownload = async() => {
+ try {
+ console.log('download started..')
+ const res = await axios.get("http://127.0.0.1:8000/api/download", {
+ params: { file_uuid: response.file_uuid }, // Attach file_uuid as a query param
+ responseType: "blob", // Treat response as a file
+ });
+
+ if (res.status === 200) {
+ const blob = new Blob([res.data]);
+ const url = window.URL.createObjectURL(blob);
+
+ // Extract filename from headers or use default
+ const contentDisposition = res.headers["content-disposition"];
+ const filename = contentDisposition
+ ? contentDisposition.split("filename=")[1]
+ : "downloaded_file";
+
+ // Auto-download the file (no user interaction needed)
+ const link = document.createElement("a");
+ link.href = url;
+ link.setAttribute("download", filename);
+ document.body.appendChild(link);
+ link.click();
+
+ // Cleanup
+ document.body.removeChild(link);
+ window.URL.revokeObjectURL(url);
+ } else {
+ console.error("Download failed, server responded with:", res);
+ }
+ } catch (error) {
+ console.error("Download error:", error);
+ }
+ };
+
+ useEffect(() => {
+ if (!mediaFile) {
+ navigate('/upload');
+ }
+ }, [mediaFile, navigate]);
+
+ const togglePlay = () => {
+ if (videoRef.current) {
+ if (isPlaying) {
+ videoRef.current.pause();
+ } else {
+ videoRef.current.play();
+ }
+ setIsPlaying(!isPlaying);
+ }
+ };
+
+ const handleProcessAnother = () => {
+ clearMedia();
+ navigate('/upload');
+ };
+
+ if (!mediaFile) return ;
+
+ const isVideo = mediaFile.type.includes('video');
+
+ return (
+
+
+
+
+
+
+
+ Processing Complete!
+
+
+
+
+ Your processed media is ready to view and download
+
+
+
+ {isVideo ? (
+
+
+ ) : (
+
+
+
+ {mediaFile.name} (Processed)
+
+
+
+
+ )}
+
+
+
+
+
+
+
+ File Details
+
+
+ Name: {mediaFile.name} (Processed)
+
+
+ Type: {mediaFile.type}
+
+
+ Size: {(mediaFile.size / (1024 * 1024)).toFixed(2)} MB
+
+
+
+
+
+
+
+
+ Actions
+
+
+ Download or share your processed media
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default ResultsPage;
\ No newline at end of file
diff --git a/client/src/components/StepperComponent.tsx b/client/src/components/StepperComponent.tsx
index 6d07751..67a36ba 100644
--- a/client/src/components/StepperComponent.tsx
+++ b/client/src/components/StepperComponent.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import { Box, Stepper, Step, StepLabel } from '@mui/material';
-const steps = ['Upload', 'Preview', 'Process', 'Results'];
+const steps = ['Upload', 'Preview', 'Process', ,'Results'];
function StepperComponent({ activeStep }) {
return (