diff --git a/src/App.tsx b/src/App.tsx
index 4c774233..a72b9c43 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,6 @@
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import HomePage from "./Pages/HomePage/HomePage";
+import JsonPage from "./Pages/JsonPage/Json"
 import NoPage from "./Pages/NoPage/NoPage";
 import "./App.css";
 import Header from "./Components/Header/Header";
@@ -11,6 +12,7 @@ function App() {
       <Routes>
         <Route path="/">
           <Route index element={<HomePage />} />
+          <Route path="Json" element={<JsonPage/>}/>
           <Route path="*" element={<NoPage />} />
         </Route>
       </Routes>
diff --git a/src/Pages/HomePage/HomePage.css b/src/Pages/HomePage/HomePage.css
index 298d54bc..3d24302c 100644
--- a/src/Pages/HomePage/HomePage.css
+++ b/src/Pages/HomePage/HomePage.css
@@ -1,7 +1,15 @@
 .container{
     display: grid;
-    grid-template: "x a b";
+    grid-template-rows: auto;
+    grid-template-columns: auto;
+    grid-template-areas: ". a b";
     gap:10px;
     justify-content: space-evenly;
     padding: 0% 3%;
 }
+
+.submit-btn{
+    margin-top:50px;
+    position:relative;
+    width: 30%;
+}
\ No newline at end of file
diff --git a/src/Pages/HomePage/HomePage.tsx b/src/Pages/HomePage/HomePage.tsx
index ad335bdb..2b089458 100644
--- a/src/Pages/HomePage/HomePage.tsx
+++ b/src/Pages/HomePage/HomePage.tsx
@@ -2,6 +2,7 @@ import React, { useState, ChangeEvent } from "react";
 import "./HomePage.css";
 import DragDropFileInput from "../../Components/DragDropFileInput/DragDropFileInput";
 import FileList from "../../Components/FileList/FileList";
+import { useNavigate } from "react-router-dom";
 
 function HomePage() {
   const [files, setFiles] = useState<File[]>([]);
@@ -61,13 +62,18 @@ function HomePage() {
     }
   };
 
+  const navigate = useNavigate();
+  const Submit = ()=>{
+    navigate('/Json',{state:{data:files}})
+  }
 
   return (
     <div className="App">
       <div className="container">
         <DragDropFileInput sendChange={handlePhotoChange} />
-        <FileList files={files} />     
+        {/*<FileList files={files} />*/}
       </div>
+      <button className="submit-btn" type="submit" onClick={Submit}>Submit</button>
     </div>
   );
 }
diff --git a/src/Pages/JsonPage/Json.css b/src/Pages/JsonPage/Json.css
new file mode 100644
index 00000000..97d4184b
--- /dev/null
+++ b/src/Pages/JsonPage/Json.css
@@ -0,0 +1,24 @@
+.loader-container.active{
+    display: block;
+    width: 100%;
+    height: 100vh;
+    position: fixed;
+    background: rgba(0, 0, 0, 0.834)
+        url("../../assets/6.svg") center
+        no-repeat;
+    z-index: 1;
+}
+.loader-container p{
+    position: absolute;
+    top: 55%;
+    right:35%;
+    left:35%;
+}
+
+.loader-container{
+    display: none;
+}
+
+pre{
+    text-align: left;
+}
\ No newline at end of file
diff --git a/src/Pages/JsonPage/Json.tsx b/src/Pages/JsonPage/Json.tsx
new file mode 100644
index 00000000..863db864
--- /dev/null
+++ b/src/Pages/JsonPage/Json.tsx
@@ -0,0 +1,58 @@
+import { useEffect, useState } from "react";
+import { useLocation } from "react-router-dom";
+import "./Json.css"
+
+
+function JsonPage(){
+    const [loading, setLoading] = useState(true)
+    const [form, setForm]=useState({})
+    const [fetchError, setError]=useState<Error|null>(null)
+    const location = useLocation();
+    const file:File = location.state.data[0];
+
+    console.log(file)
+    
+    const api_url = "http://localhost:5000"
+    useEffect(()=>{
+        const formData = new FormData()
+        formData.append("file",file)
+        fetch(api_url+"/upload",{
+            method:'POST',
+            headers:{
+
+            }, 
+            body:formData
+        }).then((res:Response)=>{
+            fetch(api_url+"/analyze",{
+                method:'GET',
+                headers:{
+
+                }
+            }).then((response:Response)=>{
+                response.json().then((data)=>{
+                    console.log(data)
+                    setForm(data)
+                    setLoading(false)
+                }).catch(e=>{
+                    setLoading(false)
+                    setError(e)
+                    console.log(e)
+                })
+            })
+        })
+    },[])
+    return (
+        <div>
+            <div className={`loader-container ${loading?'active':''}`}>
+                <div className="spinner"></div>
+                <p>
+                    Votre fichier est en cours d'analyse
+                    Your file is being analyzed
+                </p>
+            </div>
+            <pre>{(fetchError ? <p>{fetchError.message}</p> : JSON.stringify(form, null, 2))}</pre>
+        </div>
+    );
+}
+
+export default JsonPage
\ No newline at end of file
diff --git a/src/assets/6.svg b/src/assets/6.svg
new file mode 100644
index 00000000..971841cb
--- /dev/null
+++ b/src/assets/6.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="64px" height="64px" viewBox="0 0 128 128" xml:space="preserve"><g><linearGradient id="linear-gradient"><stop offset="0%" stop-color="#ffffff"/><stop offset="100%" stop-color="#000000"/></linearGradient><path d="M63.85 0A63.85 63.85 0 1 1 0 63.85 63.85 63.85 0 0 1 63.85 0zm.65 19.5a44 44 0 1 1-44 44 44 44 0 0 1 44-44z" fill="url(#linear-gradient)" fill-rule="evenodd"/><animateTransform attributeName="transform" type="rotate" from="0 64 64" to="360 64 64" dur="1080ms" repeatCount="indefinite"></animateTransform></g></svg>
\ No newline at end of file