diff --git a/messages-app-frontend/public/apple-touch-icon.png b/messages-app-frontend/public/apple-touch-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..4b30e8071270ac254ca7ab54f296dfdfaf6732ba
Binary files /dev/null and b/messages-app-frontend/public/apple-touch-icon.png differ
diff --git a/messages-app-frontend/public/favicon-16x16.png b/messages-app-frontend/public/favicon-16x16.png
new file mode 100644
index 0000000000000000000000000000000000000000..15bdaef400811d4c95f0807e80598f91a6d78781
Binary files /dev/null and b/messages-app-frontend/public/favicon-16x16.png differ
diff --git a/messages-app-frontend/public/favicon-32x32.png b/messages-app-frontend/public/favicon-32x32.png
new file mode 100644
index 0000000000000000000000000000000000000000..3518af3ca65715dfdbc381d6b2bdc9791c19be44
Binary files /dev/null and b/messages-app-frontend/public/favicon-32x32.png differ
diff --git a/messages-app-frontend/public/favicon.ico b/messages-app-frontend/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..f72be261832dfcc0ce393116647288074759f7d5
Binary files /dev/null and b/messages-app-frontend/public/favicon.ico differ
diff --git a/messages-app-frontend/public/index.html b/messages-app-frontend/public/index.html
index 699c64ffecee021e087503a3540d6d5d36fbf16d..aa7ea84ac5fff49329001867cefd2308e8fe8ee2 100644
--- a/messages-app-frontend/public/index.html
+++ b/messages-app-frontend/public/index.html
@@ -3,7 +3,9 @@
   <head>
     <meta charset="utf-8" />
     <title>Messages Application</title>
-    <link rel="icon" type="image/png" href="https://e7.pngegg.com/pngimages/198/585/png-clipart-chatbox-icon-computer-icons-message-sms-icon-message-miscellaneous-grass.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/messages-app-frontend/src/App.tsx b/messages-app-frontend/src/App.tsx
index 357fcf63fade254d97415a38877469e7be82e97a..aa5fb7c7f46ddde5ebecd41b79e5382911cd2bba 100644
--- a/messages-app-frontend/src/App.tsx
+++ b/messages-app-frontend/src/App.tsx
@@ -134,6 +134,7 @@ export class App extends React.Component{
           <Input 
             value={this.state.editedMessage} 
             onChange={(e) => this.setState({editedMessage: e.target.value})}
+            //multiline={true}
           /> 
           
           <Button 
@@ -179,11 +180,23 @@ export class App extends React.Component{
             {this.state.messages.map((p) => this.updatingMessage(p))}
           </Box>
 
-          <NewMessage 
-            inputValue={this.state.newMessage} 
-            createMessage={this.createMessage} 
-            onChangeValue={this.inputValueChanged}
-          />
+          <Box 
+            sx={{
+              bgcolor: appColors.outsideBoxColor,
+              //color: "white",
+              marginX: 30, 
+              padding: 1, 
+              marginY: 3, 
+              borderRadius: 5, 
+              boxShadow: 20
+            }}
+          >
+            <NewMessage 
+              inputValue={this.state.newMessage} 
+              createMessage={this.createMessage} 
+              onChangeValue={this.inputValueChanged}
+            />
+          </Box>
         </Container>
       )
     }
@@ -204,11 +217,24 @@ export class App extends React.Component{
             )}
           </Box>  
           
-          <NewMessage 
-            inputValue={this.state.newMessage} 
-            createMessage={this.createMessage} 
-            onChangeValue={this.inputValueChanged}
-          />
+          <Box 
+            sx={{
+              bgcolor: appColors.outsideBoxColor,
+              //color: "white",
+              marginX: 30, 
+              padding: 1, 
+              marginY: 3, 
+              borderRadius: 5, 
+              boxShadow: 20
+            }}
+          >
+            <NewMessage 
+              inputValue={this.state.newMessage} 
+              createMessage={this.createMessage} 
+              onChangeValue={this.inputValueChanged}
+            />
+                
+          </Box>
         </Container>
 
       )
diff --git a/messages-app-frontend/src/NewMessage.tsx b/messages-app-frontend/src/NewMessage.tsx
index d235a0efa642f28c70c7de0168f1fb07a9680b4f..0021465030ed8faec083892e0b31cc847d2d71cb 100644
--- a/messages-app-frontend/src/NewMessage.tsx
+++ b/messages-app-frontend/src/NewMessage.tsx
@@ -1,32 +1,47 @@
 import React from 'react';
-import {Button, Box, Input} from '@mui/material';
+import {Button, Box, TextField} from '@mui/material';
 import SendIcon from '@mui/icons-material/Send';
 
+
 type IProps = {
     inputValue: string,
     createMessage: Function,
     onChangeValue: Function
 }
 
+const buttonMinWidth = 90;
+
 export default class NewMessage extends React.Component<IProps>{
 
+
     render(){
         return(
-            <Box sx={{textAlign: "center", paddingTop: 5}}>
-
-                <Input 
-                    value={this.props.inputValue} 
-                    onChange={(p) => this.props.onChangeValue(p.target.value)}
-                />
+            <Box sx={{textAlign: "center", paddingY: 3, display: "flex", flexDirection: "row"}}>
+                    
+                    <TextField
+                        label="Tell me something interesting!"
+                        multiline={true}
+                        //fullWidth={true}
+                        variant="outlined"
+                        color="secondary"
+                        //color="white"
+                        value={this.props.inputValue} 
+                        onChange={(p) => this.props.onChangeValue(p.target.value)}
+                        sx={{width: "100%", marginLeft: 3, marginRight: 1}}
+                        //type=""
+                    />
 
-                <Button 
-                    sx={{margin: 1.5}} 
-                    variant="contained" 
-                    endIcon={<SendIcon />} 
-                    onClick={() => this.props.createMessage()}
-                >
-                    Send
-                </Button>
+                    <Button
+                        color="secondary" 
+                        sx={{margin: 1.5, marginX: 3, minWidth: buttonMinWidth + "px"}} 
+                        variant="contained" 
+                        endIcon={<SendIcon />} 
+                        onClick={() => this.props.createMessage()}
+                        //type="submit"
+                        //disabled={submitting}
+                    >
+                        Send
+                    </Button>
                 
             </Box>
         )