diff --git a/sk1/frontend/src/components/ChatInput.jsx b/sk1/frontend/src/components/ChatInput.jsx
new file mode 100644
index 0000000..7f88423
--- /dev/null
+++ b/sk1/frontend/src/components/ChatInput.jsx
@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import { Send } from 'lucide-react';
+
+const ChatInput = ({ onSubmit }) => {
+  const [input, setInput] = useState('');
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    console.log("Formulár bol odoslaný!", input); // Добавили лог
+    if (input.trim()) {
+      try {
+      const response = await fetch("https://hate-backend-production.up.railway.app/api/predict", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ text: input }),
+      });
+      const data = await response.json();
+      //alert(`Výsledok analýzy: ${data.prediction}`);
+      
+      if (onSubmit) 
+      {
+        onSubmit(input, data.prediction);
+      }
+      setInput('');
+    }  catch (error) {
+      console.error("Ошибка запроса:", error);
+      alert("Chyba pri analýze textu!");
+    }
+    }
+  };
+
+
+  return (
+    <div className="input-container">
+      <form onSubmit={handleSubmit} className="input-wrapper">
+        <input
+          type="text"
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          placeholder="Zadajte text na analýzu"
+          className="text-input"
+        />
+        <button type="submit" className="submit-button">
+          <Send size={24} />
+        </button>
+      </form>
+    </div>
+  );
+};
+
+export default ChatInput;
diff --git a/sk1/frontend/src/components/ChatInput.jsxZone.Identifier b/sk1/frontend/src/components/ChatInput.jsxZone.Identifier
new file mode 100644
index 0000000..a45e1ac
--- /dev/null
+++ b/sk1/frontend/src/components/ChatInput.jsxZone.Identifier
@@ -0,0 +1,2 @@
+[ZoneTransfer]
+ZoneId=3
diff --git a/sk1/frontend/src/components/ChatInput.jsxZone.IdentifierZone.Identifier b/sk1/frontend/src/components/ChatInput.jsxZone.IdentifierZone.Identifier
new file mode 100644
index 0000000..06d7405
Binary files /dev/null and b/sk1/frontend/src/components/ChatInput.jsxZone.IdentifierZone.Identifier differ
diff --git a/sk1/frontend/src/components/ChatWindow.jsx b/sk1/frontend/src/components/ChatWindow.jsx
new file mode 100644
index 0000000..1bdd6c2
--- /dev/null
+++ b/sk1/frontend/src/components/ChatWindow.jsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+
+const ChatWindow = ({ messages }) => {
+  return (
+    <div className="chat-window">
+      {messages.map((msg, index) => (
+        <div key={index} className={`message ${msg.sender}`}>
+          {msg.text}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default ChatWindow;
diff --git a/sk1/frontend/src/components/ChatWindow.jsxZone.Identifier b/sk1/frontend/src/components/ChatWindow.jsxZone.Identifier
new file mode 100644
index 0000000..a45e1ac
--- /dev/null
+++ b/sk1/frontend/src/components/ChatWindow.jsxZone.Identifier
@@ -0,0 +1,2 @@
+[ZoneTransfer]
+ZoneId=3
diff --git a/sk1/frontend/src/components/ChatWindow.jsxZone.IdentifierZone.Identifier b/sk1/frontend/src/components/ChatWindow.jsxZone.IdentifierZone.Identifier
new file mode 100644
index 0000000..06d7405
Binary files /dev/null and b/sk1/frontend/src/components/ChatWindow.jsxZone.IdentifierZone.Identifier differ
diff --git a/sk1/frontend/src/components/Footer.jsx b/sk1/frontend/src/components/Footer.jsx
new file mode 100644
index 0000000..b829488
--- /dev/null
+++ b/sk1/frontend/src/components/Footer.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { FaTelegram, FaGooglePlay } from 'react-icons/fa';
+
+const Footer = () => {
+  return (
+    <footer className="footer-container">
+      <p>Created by Tetiana Mohorian</p>
+      <div className="footer-icons">
+        <a href="https://t.me/hate_speech_slovak_bot" target="_blank" rel="noopener noreferrer">
+          <FaTelegram size={32} />
+        </a>
+        <a href="https://play.google.com/store" target="_blank" rel="noopener noreferrer">
+          <FaGooglePlay size={28} />
+        </a>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/sk1/frontend/src/components/Footer.jsxZone.Identifier b/sk1/frontend/src/components/Footer.jsxZone.Identifier
new file mode 100644
index 0000000..a45e1ac
--- /dev/null
+++ b/sk1/frontend/src/components/Footer.jsxZone.Identifier
@@ -0,0 +1,2 @@
+[ZoneTransfer]
+ZoneId=3
diff --git a/sk1/frontend/src/components/Footer.jsxZone.IdentifierZone.Identifier b/sk1/frontend/src/components/Footer.jsxZone.IdentifierZone.Identifier
new file mode 100644
index 0000000..06d7405
Binary files /dev/null and b/sk1/frontend/src/components/Footer.jsxZone.IdentifierZone.Identifier differ
diff --git a/sk1/frontend/src/components/Header.jsx b/sk1/frontend/src/components/Header.jsx
new file mode 100644
index 0000000..83606e7
--- /dev/null
+++ b/sk1/frontend/src/components/Header.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Header = () => (
+  <header className="header-container">
+    <h1 className="app-title">Detektor nenávistného jazyka</h1>
+  </header>
+);
+
+export default Header;
diff --git a/sk1/frontend/src/components/Header.jsxZone.Identifier b/sk1/frontend/src/components/Header.jsxZone.Identifier
new file mode 100644
index 0000000..a45e1ac
--- /dev/null
+++ b/sk1/frontend/src/components/Header.jsxZone.Identifier
@@ -0,0 +1,2 @@
+[ZoneTransfer]
+ZoneId=3
diff --git a/sk1/frontend/src/components/Header.jsxZone.IdentifierZone.Identifier b/sk1/frontend/src/components/Header.jsxZone.IdentifierZone.Identifier
new file mode 100644
index 0000000..06d7405
Binary files /dev/null and b/sk1/frontend/src/components/Header.jsxZone.IdentifierZone.Identifier differ
diff --git a/sk1/frontend/src/components/InfoBox.jsx b/sk1/frontend/src/components/InfoBox.jsx
new file mode 100644
index 0000000..7e67568
--- /dev/null
+++ b/sk1/frontend/src/components/InfoBox.jsx
@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+import ChatInput from './ChatInput.jsx';
+
+const InfoBox = () => {
+  
+
+
+  const [headerText, setHeaderText] = useState('Analyzujte text na nenávistný jazyk');
+  const [paragraphText, setParagraphText] = useState('Tento nástroj využíva umelú inteligenciu na identifikáciu toxického obsahu v textoch. Stačí zadať text a zistiť, či obsahuje nenávistný jazyk.');
+
+  const handleSendMessage = (userMessage, serverResponse) => {
+    console.log('Отправлено сообщение:', userMessage);
+    console.log('Ответ от сервера:', serverResponse);
+
+    setHeaderText(serverResponse); // В заголовок пишем ответ от сервера
+    setParagraphText(`Váš text bol: "${userMessage}"`);// В параграф пишем сообщение пользователя
+  };
+
+
+ return  (
+
+  
+
+  <div className="info-container">
+    <h2>{headerText}</h2>
+    <p>{paragraphText}</p>
+
+    <ChatInput onSubmit={handleSendMessage} /> {}
+
+  </div>
+);
+}
+
+export default InfoBox;
diff --git a/sk1/frontend/src/components/InfoBox.jsxZone.Identifier b/sk1/frontend/src/components/InfoBox.jsxZone.Identifier
new file mode 100644
index 0000000..a45e1ac
--- /dev/null
+++ b/sk1/frontend/src/components/InfoBox.jsxZone.Identifier
@@ -0,0 +1,2 @@
+[ZoneTransfer]
+ZoneId=3
diff --git a/sk1/frontend/src/components/InfoBox.jsxZone.IdentifierZone.Identifier b/sk1/frontend/src/components/InfoBox.jsxZone.IdentifierZone.Identifier
new file mode 100644
index 0000000..06d7405
Binary files /dev/null and b/sk1/frontend/src/components/InfoBox.jsxZone.IdentifierZone.Identifier differ