diff --git a/messages-app-frontend/src/App.tsx b/messages-app-frontend/src/App.tsx
index 0dc1d88ccea4b22030fb5fb98f07e5df5a00e879..3866f511aaa0979634f82ce1b4e91e5459b43794 100644
--- a/messages-app-frontend/src/App.tsx
+++ b/messages-app-frontend/src/App.tsx
@@ -4,6 +4,7 @@ import {Button, IconButton, Container, Typography, Box, Input, Paper} from '@mui
 import SendIcon from '@mui/icons-material/Send';
 import DeleteIcon from '@mui/icons-material/Delete';
 import EditIcon from '@mui/icons-material/Edit';
+import NewMessage from "./NewMessage"
 //import IconButton from '@mui/material';
 
 //import SendIcon from '@mui/icons-material';
@@ -75,6 +76,11 @@ export default class App extends React.Component{
     this.getMessages();
   }
 
+  inputValueChanged(newValue: any){
+    this.setState({newMessage: newValue})
+    //(p) => this.setState({newMessage: p.target.value})
+  }
+
   updatingMessage = (p: messageType) => {
     if(p._id === this.state.editingMessage._id){
       return (
@@ -159,10 +165,19 @@ export default class App extends React.Component{
             <Input value={this.state.newMessage} onChange={(p) => this.setState({newMessage: p.target.value})}></Input>
             <Button /*color="success"*/ sx={{margin: 1.5}} variant="contained" endIcon={<SendIcon />} onClick={this.createMessage}>Send</Button>
           </Box>
-
+          
         </Container>
 
       )
     }
   }
-}
\ No newline at end of file
+}
+//<NewMessage inputValue={this.state.newMessage} createMessage={this.createMessage} onChangeValue={this.inputValueChanged}/>
+
+/*
+
+    inputValue: string,
+    createMessage: Function,
+    onChangeValue: Function
+
+*/
\ No newline at end of file
diff --git a/messages-app-frontend/src/Message.tsx b/messages-app-frontend/src/Message.tsx
index 92e8ca7b72fd3c40dbc205503438b53a6f142f46..d7358ce287ca334204d3cb6bb491d75a2a6d0bc0 100644
--- a/messages-app-frontend/src/Message.tsx
+++ b/messages-app-frontend/src/Message.tsx
@@ -3,7 +3,7 @@ import { Component } from "react";
 interface IState {
     message: String;
     _id: String;
-  }
+}
 
 class Message extends Component<IState>{
 
diff --git a/messages-app-frontend/src/NewMessage.tsx b/messages-app-frontend/src/NewMessage.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..20cdb8d34c0a44168f4b2ec5ccb5129430ccd6ba
--- /dev/null
+++ b/messages-app-frontend/src/NewMessage.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import {Button, IconButton, Container, Typography, Box, Input, Paper} from '@mui/material';
+import SendIcon from '@mui/icons-material/Send';
+import DeleteIcon from '@mui/icons-material/Delete';
+import EditIcon from '@mui/icons-material/Edit';
+import { AxiosInstance } from 'axios';
+
+type hello = {
+    inputValue: string,
+    createMessage: Function,
+    onChangeValue: Function
+}
+
+type NewMessageState = {
+
+}
+
+export default class NewMessage extends React.Component<hello>{
+
+    state: NewMessageState = {
+
+    }
+
+    /*
+    createMessage = async () => {
+        await this.props.api.post('/messages', {message: this.state.newMessage});
+        this.setState({newMessage: ""});
+        //this.getMessages();
+    }
+    */
+
+    /*
+
+                <Box sx={{textAlign: "center", paddingTop: 5}}>
+                <Input value={this.state.newMessage} onChange={(p) => this.setState({newMessage: p.target.value})}></Input>
+                <Button /*color="success"*//* sx={{margin: 1.5}} variant="contained" endIcon={<SendIcon />} onClick={this.createMessage}>Send</Button>
+                </Box>
+
+    */
+    render(){
+        return(
+            <Box sx={{textAlign: "center", paddingTop: 5}}>
+                <Input value={this.props.inputValue} onChange={(p) => this.props.onChangeValue(p.target.value)}></Input>
+                <Button /*color="success"*/ sx={{margin: 1.5}} variant="contained" endIcon={<SendIcon />} onClick={this.props.createMessage()}>Send</Button>
+            </Box>
+        )
+    }
+}
\ No newline at end of file
diff --git a/messagesAppBackend/src/server.ts b/messagesAppBackend/src/server.ts
index 83d3acf59ba99a6f65bed7731eea6f6f7cfad281..5dc201c76bdff6225b070e0e31c08f8314b7cd6a 100644
--- a/messagesAppBackend/src/server.ts
+++ b/messagesAppBackend/src/server.ts
@@ -7,7 +7,7 @@ const app = express()
 app.use(express.json());
 app.use(cors());
 
-mongoose.connect("mongodb+srv://joasep:koira@messagescluster0.nvb8tqc.mongodb.net/?retryWrites=true&w=majority");
+//mongoose.connect("mongodb+srv://joasep:koira@messagescluster0.nvb8tqc.mongodb.net/?retryWrites=true&w=majority");
 
 app.get("/", async (req, res) => {
     res.send("This is the root of the API!");