diff --git a/Frontend/CatApp/src/App.tsx b/Frontend/CatApp/src/App.tsx
index 7caf9e5..98a35ca 100644
--- a/Frontend/CatApp/src/App.tsx
+++ b/Frontend/CatApp/src/App.tsx
@@ -1,7 +1,11 @@
+import Detector from "./components/Detector";
+import Nav from "./components/Nav";
+
 export default function App() {
   return (
-    <h1 className="text-3xl font-bold underline">
-      Hello world!
-    </h1>
+    <>
+      <Nav/>
+      <Detector/>
+    </>
   )
 }
\ No newline at end of file
diff --git a/Frontend/CatApp/src/components/Detector.tsx b/Frontend/CatApp/src/components/Detector.tsx
new file mode 100644
index 0000000..321c437
--- /dev/null
+++ b/Frontend/CatApp/src/components/Detector.tsx
@@ -0,0 +1,47 @@
+import { ChangeEvent, useState } from 'react';
+
+const Detector = () => {
+  const [file, setFile] = useState<File | undefined>();
+  const [result, setResult] = useState<string | undefined>();
+
+  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files) {
+      setFile(e.target.files[0]);
+    }
+  };
+
+  const handleSubmit = async () => {
+    try {
+      if (file) {
+        const formData = new FormData();
+        formData.append('image', file);
+
+        const response = await fetch('http://127.0.0.1:5000/detect-cat', {
+          method: 'POST',
+          body: formData,
+          mode: 'cors'
+        });
+
+        const resultFromServer = await response.text();
+        console.log('Wynik:', resultFromServer);
+        setResult(resultFromServer);
+
+        console.log('File send.');
+      } else {
+        console.error('No file to send.');
+      }
+    } catch (error) {
+      console.error('Error:', error);
+    }
+  };
+
+  return (
+    <div>
+      <input type="file" onChange={handleFileChange}></input>
+      <button className='px-4 py-2 border-[1px] text-orange-500 border-orange-500 rounded-lg shadow-lg hover:scale-125 hover:text-white hover:bg-orange-500 duration-500 font-bold' onClick={handleSubmit}>IS IT?</button>
+      {result && <div>Wynik: {result}</div>}
+    </div>
+  );
+};
+
+export default Detector;
diff --git a/Frontend/CatApp/src/components/Nav.tsx b/Frontend/CatApp/src/components/Nav.tsx
new file mode 100644
index 0000000..e32a24c
--- /dev/null
+++ b/Frontend/CatApp/src/components/Nav.tsx
@@ -0,0 +1,11 @@
+
+const Nav = () => {
+  return (
+    <div className='w-full h-32 px-20 shadow-2xl flex items-center justify-center'>
+      <img className="h-32 w-32 p-4" src="https://github.com/UniSzef/test/blob/main/logo.png?raw=true"></img>
+      <div className="text-4xl font">Be sure that your <span className="text-orange-400">cat</span> is real!</div>
+    </div>
+  )
+}
+
+export default Nav
\ No newline at end of file
diff --git a/Frontend/CatApp/src/images/logo.png b/Frontend/CatApp/src/images/logo.png
new file mode 100644
index 0000000..70b999e
Binary files /dev/null and b/Frontend/CatApp/src/images/logo.png differ
diff --git a/__pycache__/cat_detection.cpython-39.pyc b/__pycache__/cat_detection.cpython-39.pyc
new file mode 100644
index 0000000..8a25053
Binary files /dev/null and b/__pycache__/cat_detection.cpython-39.pyc differ
diff --git a/test.py b/test.py
new file mode 100644
index 0000000..281b2ae
--- /dev/null
+++ b/test.py
@@ -0,0 +1,9 @@
+import requests
+
+url = 'http://127.0.0.1:5000/detect-cat'
+
+files = {'image': (open('cat1.jpg', 'rb'))}
+
+response = requests.post(url, files=files)
+
+print(response.text)