diff --git a/frontend/src/components/Chat.js b/frontend/src/components/Chat.js
index 00e53a8f..7f99c31b 100644
--- a/frontend/src/components/Chat.js
+++ b/frontend/src/components/Chat.js
@@ -84,87 +84,88 @@ class Chat extends Component {
     const { t } = this.props;
     return (
       <Container component="main" maxWidth="xs" >
-            <Grid container xs={12} spacing={0.5}>
-              <Grid item xs={0.3}/>
-              <Grid item xs={5.5}>
-                <Paper elevation={1} style={this.state.connected ? {backgroundColor: '#e8ffe6'}: {backgroundColor: '#FFF1C5'}}>
-                  <Typography variant='caption' sx={{color: '#111111'}}>
-                    {t("You")+": "}{this.state.connected ? t("connected"): t("disconnected")}
-                  </Typography>
-                </Paper>
-              </Grid>
-              <Grid item xs={0.4}/>
-              <Grid item xs={5.5}>
-                <Paper elevation={1} style={this.state.peer_connected ? {backgroundColor: '#e8ffe6'}: {backgroundColor: '#FFF1C5'}}>
-                  <Typography variant='caption' sx={{color: '#111111'}}>
-                  {t("Peer")+": "}{this.state.peer_connected ? t("connected"): t("disconnected")}
-                  </Typography>
-                </Paper>
-              </Grid>
-              <Grid item xs={0.3}/>
-            </Grid>
-            <Paper elevation={1} style={{ height: '300px', maxHeight: '300px' , width: '280px' ,overflow: 'auto', backgroundColor: '#F7F7F7' }}>
-              {this.state.messages.map(message => <>
-              <Card elevation={5} align="left" >
-              {/* If message sender is not our nick, gray color, if it is our nick, green color */}
-              {message.userNick == this.props.ur_nick ?
-                <CardHeader sx={{color: '#111111'}}
-                  avatar={
-                    <Badge variant="dot" overlap="circular" badgeContent="" color={this.state.connected ? "success" : "error"}>
-                      <Avatar className="flippedSmallAvatar"
-                        alt={message.userNick}
-                        src={window.location.origin +'/static/assets/avatars/' + message.userNick + '.png'}
-                        />
-                    </Badge>
-                  }
-                  style={{backgroundColor: '#eeeeee'}}
-                  title={message.userNick}
-                  subheader={message.msg}
-                  subheaderTypographyProps={{sx: {wordWrap: "break-word", width: '200px', color: '#444444'}}}
-                />
-                :
-                <CardHeader sx={{color: '#111111'}}
-                  avatar={
-                    <Badge variant="dot" overlap="circular" badgeContent="" color={this.state.peer_connected ? "success" : "error"}>
-                      <Avatar className="flippedSmallAvatar"
-                        alt={message.userNick}
-                        src={window.location.origin +'/static/assets/avatars/' + message.userNick + '.png'}
-                        />
-                    </Badge>
-                  }
-                  style={{backgroundColor: '#fafafa'}}
-                  title={message.userNick}
-                  subheader={message.msg}
-                  subheaderTypographyProps={{sx: {wordWrap: "break-word", width: '200px', color: '#444444'}}}
-                />}
-                </Card>
-              </>)}
-              <div style={{ float:"left", clear: "both" }} ref={(el) => { this.messagesEnd = el; }}></div>
+        <Grid container spacing={0.5}>
+          <Grid item xs={0.3}/>
+          <Grid item xs={5.5}>
+            <Paper elevation={1} style={this.state.connected ? {backgroundColor: '#e8ffe6'}: {backgroundColor: '#FFF1C5'}}>
+              <Typography variant='caption' sx={{color: '#111111'}}>
+                {t("You")+": "}{this.state.connected ? t("connected"): t("disconnected")}
+              </Typography>
             </Paper>
-            <form noValidate onSubmit={this.onButtonClicked}>
-              <Grid containter alignItems="stretch" style={{ display: "flex" }}>
-                <Grid item alignItems="stretch" style={{ display: "flex"}}>
-                  <TextField
-                    label={t("Type a message")}
-                    variant="standard"
-                    size="small"
-                    helperText={this.state.connected ? null : t("Connecting...")}
-                    value={this.state.value}
-                    onChange={e => {
-                      this.setState({ value: e.target.value });
-                      this.value = this.state.value;
-                    }}
-                    sx={{width: 214}}
-                  />
-                </Grid>
-                <Grid item alignItems="stretch" style={{ display: "flex" }}>
-                  <Button sx={{'width':68}} disabled={!this.state.connected} type="submit" variant="contained" color="primary">{t("Send")} </Button>
-                </Grid>
-              </Grid>
-            </form>
-            <FormHelperText>
-              {t("The chat has no memory: if you leave, messages are lost.")} <Link target="_blank" href={t("PGP_guide_url")}> {t("Learn easy PGP encryption.")}</Link>
-            </FormHelperText>
+          </Grid>
+          <Grid item xs={0.4}/>
+          <Grid item xs={5.5}>
+            <Paper elevation={1} style={this.state.peer_connected ? {backgroundColor: '#e8ffe6'}: {backgroundColor: '#FFF1C5'}}>
+              <Typography variant='caption' sx={{color: '#111111'}}>
+              {t("Peer")+": "}{this.state.peer_connected ? t("connected"): t("disconnected")}
+              </Typography>
+            </Paper>
+          </Grid>
+          <Grid item xs={0.3}/>
+        </Grid>
+        <Paper elevation={1} style={{ height: '300px', maxHeight: '300px' , width: '280px' ,overflow: 'auto', backgroundColor: '#F7F7F7' }}>
+          {this.state.messages.map((message, index) =>
+          <li style={{listStyleType:"none"}} key={index}>
+            <Card elevation={5} align="left" >
+            {/* If message sender is not our nick, gray color, if it is our nick, green color */}
+            {message.userNick == this.props.ur_nick ?
+              <CardHeader sx={{color: '#111111'}}
+                avatar={
+                  <Badge variant="dot" overlap="circular" badgeContent="" color={this.state.connected ? "success" : "error"}>
+                    <Avatar className="flippedSmallAvatar"
+                      alt={message.userNick}
+                      src={window.location.origin +'/static/assets/avatars/' + message.userNick + '.png'}
+                      />
+                  </Badge>
+                }
+                style={{backgroundColor: '#eeeeee'}}
+                title={message.userNick}
+                subheader={message.msg}
+                subheaderTypographyProps={{sx: {wordWrap: "break-word", width: '200px', color: '#444444'}}}
+              />
+              :
+              <CardHeader sx={{color: '#111111'}}
+                avatar={
+                  <Badge variant="dot" overlap="circular" badgeContent="" color={this.state.peer_connected ? "success" : "error"}>
+                    <Avatar className="flippedSmallAvatar"
+                      alt={message.userNick}
+                      src={window.location.origin +'/static/assets/avatars/' + message.userNick + '.png'}
+                      />
+                  </Badge>
+                }
+                style={{backgroundColor: '#fafafa'}}
+                title={message.userNick}
+                subheader={message.msg}
+                subheaderTypographyProps={{sx: {wordWrap: "break-word", width: '200px', color: '#444444'}}}
+              />}
+              </Card>
+            </li>)}
+          <div style={{ float:"left", clear: "both" }} ref={(el) => { this.messagesEnd = el; }}></div>
+        </Paper>
+        <form noValidate onSubmit={this.onButtonClicked}>
+          <Grid alignItems="stretch" style={{ display: "flex" }}>
+            <Grid item alignItems="stretch" style={{ display: "flex"}}>
+              <TextField
+                label={t("Type a message")}
+                variant="standard"
+                size="small"
+                helperText={this.state.connected ? null : t("Connecting...")}
+                value={this.state.value}
+                onChange={e => {
+                  this.setState({ value: e.target.value });
+                  this.value = this.state.value;
+                }}
+                sx={{width: 214}}
+              />
+            </Grid>
+            <Grid item alignItems="stretch" style={{ display: "flex" }}>
+              <Button sx={{'width':68}} disabled={!this.state.connected} type="submit" variant="contained" color="primary">{t("Send")} </Button>
+            </Grid>
+          </Grid>
+        </form>
+        <FormHelperText>
+          {t("The chat has no memory: if you leave, messages are lost.")} <Link target="_blank" href={t("PGP_guide_url")}> {t("Learn easy PGP encryption.")}</Link>
+        </FormHelperText>
       </Container>
     )
   }
diff --git a/frontend/src/components/OrderPage.js b/frontend/src/components/OrderPage.js
index db35efdd..f610f315 100644
--- a/frontend/src/components/OrderPage.js
+++ b/frontend/src/components/OrderPage.js
@@ -36,6 +36,7 @@ class OrderPage extends Component {
         openCancel: false,
         openCollaborativeCancel: false,
         openInactiveMaker: false,
+        openStoreToken: false,
         tabValue: 1,
         orderId: this.props.match.params.orderId,
     };
@@ -180,8 +181,8 @@ class OrderPage extends Component {
     if(this.state.has_range){
     return(
         <Grid container align="center" alignItems="stretch" justifyContent="center" style={{ display: "flex"}}>
-          <this.InactiveMakerDialog/>
-          <this.StoreTokenDialog/>
+          {this.InactiveMakerDialog()}
+          {this.StoreTokenDialog()}
           <div style={{maxWidth:120}}>
           <Tooltip placement="top" enterTouchDelay={500} enterDelay={700} enterNextDelay={2000} title={t("Enter amount of fiat to exchange for bitcoin")}>
             <Paper elevation={5} sx={{maxHeight:40}}>
@@ -226,8 +227,8 @@ class OrderPage extends Component {
     }else{
       return(
         <>
-        <this.InactiveMakerDialog/>
-        <this.StoreTokenDialog/>
+        {this.InactiveMakerDialog()}
+        {this.StoreTokenDialog()}
         <Button sx={{height:38}} variant='contained' color='primary'
                 onClick={this.props.copiedToken ? (this.state.maker_status=='Inactive' ? this.handleClickOpenInactiveMakerDialog : this.takeOrder) : (() => this.setState({openStoreToken:true}))}>
                 {t("Take Order")}
@@ -383,7 +384,7 @@ class OrderPage extends Component {
                         size='small'
                         InputProps={{
                             endAdornment:
-                            <Tooltip disableHoverListener enterTouchDelay="0" title={t("Copied!")}>
+                            <Tooltip disableHoverListener enterTouchDelay={0} title={t("Copied!")}>
                                 <IconButton onClick= {()=> (navigator.clipboard.writeText(getCookie("robot_token")) & this.props.setAppState({copiedToken:true}))}>
                                     <ContentCopy color={this.props.copiedToken ? "inherit" : "primary"}/>
                                 </IconButton>
@@ -532,7 +533,7 @@ class OrderPage extends Component {
               {t("Order Box")}
             </Typography>
           </MediaQuery>
-          <Paper elevation={12} style={{ padding: 8,}}>
+          <Paper elevation={12} >
           <List dense={true}>
             <ListItem >
               <ListItemAvatar sx={{ width: 56, height: 56 }}>
diff --git a/frontend/src/components/TradeBox.js b/frontend/src/components/TradeBox.js
index 1d37f01a..e8ecd14a 100644
--- a/frontend/src/components/TradeBox.js
+++ b/frontend/src/components/TradeBox.js
@@ -636,11 +636,21 @@ class TradeBox extends Component {
               <b> {t("We have received your statement")} </b>
             </Typography>
           </Grid>
-          <Grid item xs={12} align="left">
-            <Typography  variant="body2">
-              <p>{t("We are waiting for your trade counterpart statement. If you are hesitant about the state of the dispute or want to add more information, contact robosats@protonmail.com.")}</p>
-              <p>{t("Please, save the information needed to identify your order and your payments: order ID; payment hashes of the bonds or escrow (check on your lightning wallet); exact amount of satoshis; and robot nickname. You will have to identify yourself as the user involved in this trade via email (or other contact methods).")}</p>
-            </Typography>
+          <Grid item xs={12} align="center">
+            <List dense={true}>
+              <Divider/>
+              <ListItem>
+                <Typography  variant="body2">
+                  {t("We are waiting for your trade counterpart statement. If you are hesitant about the state of the dispute or want to add more information, contact robosats@protonmail.com.")}
+                </Typography>
+              </ListItem>
+              <ListItem>
+                <Typography  variant="body2">
+                  {t("Please, save the information needed to identify your order and your payments: order ID; payment hashes of the bonds or escrow (check on your lightning wallet); exact amount of satoshis; and robot nickname. You will have to identify yourself as the user involved in this trade via email (or other contact methods).")}
+                </Typography>
+              </ListItem>
+              <Divider/>
+            </List>
           </Grid>
           {this.showBondIsSettled()}
         </Grid>
@@ -752,10 +762,20 @@ class TradeBox extends Component {
           </Typography>
         </Grid>
         <Grid item xs={12} align="center">
-          <Typography  variant="body2" align="left">
-            <p>{t("We are waiting for the seller lock the trade amount.")}</p>
-            <p>{t("Just hang on for a moment. If the seller does not deposit, you will get your bond back automatically. In addition, you will receive a compensation (check the rewards in your profile).")}</p>
-          </Typography>
+          <List dense={true}>
+            <Divider/>
+            <ListItem>
+              <Typography  variant="body2" align="left">
+                {t("We are waiting for the seller lock the trade amount.")}
+              </Typography>
+            </ListItem>
+            <ListItem>
+              <Typography  variant="body2" align="left">
+                {t("Just hang on for a moment. If the seller does not deposit, you will get your bond back automatically. In addition, you will receive a compensation (check the rewards in your profile).")}
+              </Typography>
+            </ListItem>
+            <Divider/>
+          </List>
         </Grid>
         {this.showBondIsLocked()}
       </Grid>
@@ -774,10 +794,21 @@ class TradeBox extends Component {
           </Typography>
         </Grid>
         <Grid item xs={12} align="center">
-          <Typography  variant="body2" align="left">
-            <p>{t("We are waiting for the buyer to post a lightning invoice. Once he does, you will be able to directly communicate the fiat payment details.")} </p>
-            <p>{t("Just hang on for a moment. If the buyer does not cooperate, you will get back the trade collateral and your bond automatically. In addition, you will receive a compensation (check the rewards in your profile).")}</p>
-          </Typography>
+          <List dense={true}>
+            <Divider/>
+            <ListItem>
+              <Typography  variant="body2" align="left">
+                {t("We are waiting for the buyer to post a lightning invoice. Once he does, you will be able to directly communicate the fiat payment details.")}
+              </Typography>
+            </ListItem>
+
+            <ListItem>
+              <Typography  variant="body2" align="left">
+                {t("Just hang on for a moment. If the buyer does not cooperate, you will get back the trade collateral and your bond automatically. In addition, you will receive a compensation (check the rewards in your profile).")}
+              </Typography>
+            </ListItem>
+            <Divider/>
+          </List>
         </Grid>
         {this.showBondIsLocked()}
       </Grid>