diff --git a/src/App.tsx b/src/App.tsx
index e208003..055c9a9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -11,72 +11,82 @@ function App() {
   const [loading, setLoading] = useState(false);
 
   const sendMessage = async () => {
-    if(inputMessage!==""){
+    if (inputMessage !== "") {
       setLoading(true);
-      setShowMessage((prev) => [...prev, { text: inputMessage, sender: "User" }]);
+      setShowMessage((prev) => [
+        ...prev,
+        { text: inputMessage, sender: "User" },
+      ]);
       setInputMessage("");
       await axios
         .post("http://localhost:3000/", {
           text: inputMessage,
-          userId: "vinicius",
         })
         .then((e) => {
           setLoading(false);
-          console.log(e);
           setShowMessage((prev) => [
             ...prev,
             { text: e.data, sender: "Robosch" },
           ]);
-      const windowMessage = document.getElementById("messageWindow")
-          if (windowMessage){
-            windowMessage.scrollTop = windowMessage.scrollHeight - windowMessage.clientHeight;
+          const windowMessage = document.getElementById("messageWindow");
+          if (windowMessage) {
+            windowMessage.scrollTop =
+              windowMessage.scrollHeight - windowMessage.clientHeight;
           }
         });
     }
   };
 
-  useEffect(()=>{
-    const windowMessage = document.getElementById("messageWindow")
-          if (windowMessage){
-            windowMessage.scrollTop = windowMessage.scrollHeight - windowMessage.clientHeight;
-          }
-  },[sendMessage, showMessage])
+  useEffect(() => {
+    const windowMessage = document.getElementById("messageWindow");
+    if (windowMessage) {
+      windowMessage.scrollTop =
+        windowMessage.scrollHeight - windowMessage.clientHeight;
+    }
+  }, [sendMessage, showMessage]);
+
+console.log(showMessage.length)
 
   return (
     <main>
       <div>
         <div className="w-full z-50 fixed h-1.5 bg-gradient-to-r from-purple to-pink"></div>
-      <div className="flex font-fonte gap-5">
-        <Sidebar />
-        <div className="md:pl-72 md:pb-80 h-screen w-full box-border bg-cover">
-          <TalkArea loading={loading} text={showMessage} />
-          <div className="flex gap-2 md:px-12 fixed bottom-8 md:bottom-5 px-4 w-full md:w-9/12 2xl:w-10/12">
-            <div className="relative w-full flex items-center">
-              <input
-                onKeyDown={(e) => {
-                  if (e.key === "Enter") {
-                    sendMessage();
-                  }
-                }}
-                placeholder="Escreva sua mensagem aqui..."
-                className="p-3 px-4 bg-white outline-none rounded-full w-full z-40"
-                value={inputMessage}
-                onChange={(e) => setInputMessage(e.target.value)}
-                type="text"
-              />
+        <div className="flex font-fonte gap-5">
+          <Sidebar />
+          <div className="md:pl-72 md:pb-80 h-screen w-full box-border bg-cover">
+            {showMessage.length == 0 ? (
+              <p className="font-fonte text-purple flex items-center justify-center h-full">Envie uma mensagem</p>
+            ) : (
+              <TalkArea loading={loading} text={showMessage} />
+            )}
 
-              <button
-                type="submit"
-                onClick={sendMessage}
-                className="p-2 absolute right-4 rounded-full z-50"
-              >
-                <img className="w-6" src="./icon_send.svg" />
-              </button>
+            <div className="flex gap-2 md:px-12 fixed bottom-8 md:bottom-5 px-4 w-full md:w-9/12 2xl:w-10/12">
+              <div className="relative w-full flex items-center">
+                <input
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      sendMessage();
+                    }
+                  }}
+                  placeholder="Escreva sua mensagem aqui..."
+                  className="p-3 px-4 bg-white outline-none rounded-full w-full z-40"
+                  value={inputMessage}
+                  onChange={(e) => setInputMessage(e.target.value)}
+                  type="text"
+                />
+
+                <button
+                  type="submit"
+                  onClick={sendMessage}
+                  className="p-2 absolute right-4 rounded-full z-50"
+                >
+                  <img className="w-6" src="./icon_send.svg" />
+                </button>
+              </div>
             </div>
           </div>
         </div>
       </div>
-      </div>
     </main>
   );
 }
diff --git a/src/components/TalkArea.tsx b/src/components/TalkArea.tsx
index c516534..a13d846 100644
--- a/src/components/TalkArea.tsx
+++ b/src/components/TalkArea.tsx
@@ -7,17 +7,22 @@ export const TalkArea = ({
   loading: boolean;
   text: { text: string; sender: string }[];
 }) => {
+  console.log(text.length);
   return (
-    <div className="font-fonte lg:w-full flex flex-col space-y-8 px-3 md:px-16 pt-32 md:pt-10 pb-32 lg:pb-6 overflow-y-scroll h-full md:h-[90vh]" id="messageWindow">
+    <div
+      className="font-fonte lg:w-full flex flex-col space-y-8 px-3 md:px-16 pt-32 md:pt-10 pb-32 lg:pb-6 overflow-y-scroll h-full md:h-[90vh]"
+      id="messageWindow"
+    >
       {text.map((msg, index) => (
-        <p key={index}
+        <p
+          key={index}
           className={`${
             msg.sender === "Robosch"
               ? "bg-white max-w-prose rounded-bl-none"
               : "bg-purple text-white flex self-end max-w-prose rounded-br-none"
           } rounded-2xl p-2 px-4 whitespace-pre-line text-sm 2xl:text-base`}
         >
-          {msg.text}
+          {msg.text.split("*")}
         </p>
       ))}
       <div