diff --git a/frontend/src/components/BookPage.js b/frontend/src/components/BookPage.js
index 771b9f4e..c2fe2713 100644
--- a/frontend/src/components/BookPage.js
+++ b/frontend/src/components/BookPage.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Paper, Button , CircularProgress, ListItemButton, Typography, Grid, Select, MenuItem, FormControl, FormHelperText, List, ListItem, ListItemText, Avatar, RouterLink, ListItemAvatar} from "@mui/material";
+import { Tooltip, Paper, Button , CircularProgress, ListItemButton, Typography, Grid, Select, MenuItem, FormControl, FormHelperText, List, ListItem, ListItemText, Avatar, RouterLink, ListItemAvatar, IconButton} from "@mui/material";
 import { Link } from 'react-router-dom'
 import { DataGrid } from '@mui/x-data-grid';
 import MediaQuery from 'react-responsive'
@@ -79,7 +79,7 @@ export default class BookPage extends Component {
             ({id: order.id,
               avatar: window.location.origin +'/static/assets/avatars/' + order.maker_nick + '.png',
               robosat: order.maker_nick, 
-              type: order.type ? "Sell": "Buy",
+              type: order.type ? "Seller": "Buyer",
               amount: parseFloat(parseFloat(order.amount).toFixed(4)),
               currency: this.getCurrencyCode(order.currency),
               payment_method: order.payment_method,
@@ -108,7 +108,7 @@ export default class BookPage extends Component {
               </ListItemButton>
             );
           } },
-          { field: 'type', headerName: 'Type', width: 60 },
+          { field: 'type', headerName: 'Is', width: 60 },
           { field: 'amount', headerName: 'Amount', type: 'number', width: 80 },
           { field: 'currency', headerName: 'Currency', width: 100, 
           renderCell: (params) => {return (
@@ -135,14 +135,14 @@ export default class BookPage extends Component {
 
   bookListTablePhone=()=>{
     return (
-      <div style={{ height: 425, width: '100%' }}>
+      <div style={{ height: 422, width: '100%' }}>
       <DataGrid
         rows={
             this.state.orders.map((order) =>
             ({id: order.id,
               avatar: window.location.origin +'/static/assets/avatars/' + order.maker_nick + '.png',
               robosat: order.maker_nick, 
-              type: order.type ? "Sell": "Buy",
+              type: order.type ? "Seller": "Buyer",
               amount: parseFloat(parseFloat(order.amount).toFixed(4)),
               currency: this.getCurrencyCode(order.currency),
               payment_method: order.payment_method,
@@ -155,9 +155,8 @@ export default class BookPage extends Component {
           // { field: 'id', headerName: 'ID', width: 40 },
           { field: 'robosat', headerName: 'Robot', width: 80, 
             renderCell: (params) => {return (
-              <ListItemButton style={{ cursor: "pointer" }}>
-                <ListItemAvatar>
-                  <div style={{ width: 48, height: 48 }}>
+              <Tooltip placement="right" enterTouchDelay="0" title={params.row.robosat+" ("+params.row.type+")"}>
+                  <div style={{ width: 45, height: 45 }}>
                     <Image className='bookAvatar' 
                         disableError='true'
                         disableSpinner='true'
@@ -166,15 +165,16 @@ export default class BookPage extends Component {
                         src={params.row.avatar}
                     />
                   </div>
-                </ListItemAvatar>
-              </ListItemButton>
+              </Tooltip>
             );
           } },
-          { field: 'type', headerName: 'Type', width: 60, hide:'true'},
+          { field: 'type', headerName: 'Is', width: 60, hide:'true'},
           { field: 'amount', headerName: 'Amount', type: 'number', width: 80 },
           { field: 'currency', headerName: 'Currency', width: 100, 
           renderCell: (params) => {return (
+            <Tooltip placement="left" enterTouchDelay="0" title={params.row.payment_method}>
             <div style={{ cursor: "pointer" }}>{params.row.currency + " " + getFlags(params.row.currency)}</div>
+            </Tooltip>
           )} },
           { field: 'payment_method', headerName: 'Payment Method', width: 180, hide:'true'},
           { field: 'price', headerName: 'Price', type: 'number', width: 140, hide:'true',
@@ -183,7 +183,9 @@ export default class BookPage extends Component {
           )} },
           { field: 'premium', headerName: 'Premium', type: 'number', width: 85,
             renderCell: (params) => {return (
+              <Tooltip placement="left" enterTouchDelay="0" title={this.pn(params.row.price) + " " +params.row.currency+ "/BTC" }>
               <div style={{ cursor: "pointer" }}>{parseFloat(parseFloat(params.row.premium).toFixed(4))+"%" }</div>
+              </Tooltip>
             )} },
           ]}
 
diff --git a/frontend/src/components/BottomBar.js b/frontend/src/components/BottomBar.js
index e704d502..42cb7c86 100644
--- a/frontend/src/components/BottomBar.js
+++ b/frontend/src/components/BottomBar.js
@@ -484,10 +484,10 @@ bottomBarPhone =()=>{
                     <div style={{display: this.props.avatarLoaded ? '':'none'}}>
                     <Tooltip open={(this.state.active_order_id > 0 & !this.state.profileShown & this.props.avatarLoaded) ? true: false}
                         title="You have an active order">
-                        <IconButton onClick={this.handleClickOpenProfile} sx={{margin: 0, bottom: 22, right: 8}} >
+                        <IconButton onClick={this.handleClickOpenProfile} sx={{margin: 0, bottom: 17, right: 8}} >
                             <Badge badgeContent={(this.state.active_order_id >0 & !this.state.profileShown) ? "": null} color="primary">
                                 <Avatar className='phoneFlippedSmallAvatar'
-                                sx={{ width: 65, height:65 }} 
+                                sx={{ width: 55, height:55 }} 
                                 alt={this.props.nickname} 
                                 imgProps={{
                                     onLoad:() => this.props.setAppState({avatarLoaded: true}),
diff --git a/frontend/src/components/MakerPage.js b/frontend/src/components/MakerPage.js
index c6e2aad6..34d0ab70 100644
--- a/frontend/src/components/MakerPage.js
+++ b/frontend/src/components/MakerPage.js
@@ -184,7 +184,7 @@ export default class MakerPage extends Component {
                 </Grid>
                 <Grid containter xs={12} alignItems="stretch" style={{ display: "flex" }}>
                         <div style={{maxWidth:140}}>
-                        <Tooltip enterTouchDelay="0" title="Amount of fiat to exchange for bitcoin">
+                        <Tooltip placement="top" enterTouchDelay="0" title="Amount of fiat to exchange for bitcoin">
                             <TextField
                                 error={this.state.amount <= 0} 
                                 helperText={this.state.amount <= 0 ? 'Invalid' : null}
@@ -217,7 +217,7 @@ export default class MakerPage extends Component {
                 </Grid>
                 <br/>
                 <Grid item xs={12} align="center">
-                    <Tooltip enterTouchDelay="0" title="Input your prefered payment methods">
+                    <Tooltip placement="top" enterTouchDelay="0" title="Enter your prefered payment methods">
                         <TextField 
                             sx={{width:240}}
                             label="Payment Method(s)"
@@ -242,7 +242,7 @@ export default class MakerPage extends Component {
                             </div>
                         </FormHelperText>
                         <RadioGroup row defaultValue="relative">
-                        <Tooltip enterTouchDelay="0" title="Let the price move with the market">
+                        <Tooltip placement="top" enterTouchDelay="0" title="Let the price move with the market">
                             <FormControlLabel 
                             value="relative" 
                             control={<Radio color="primary"/>}
@@ -251,7 +251,7 @@ export default class MakerPage extends Component {
                             onClick={this.handleClickRelative}
                             />
                         </Tooltip>
-                        <Tooltip enterTouchDelay="0" title="Set a fix amount of satoshis">
+                        <Tooltip placement="top" enterTouchDelay="0" title="Set a fix amount of satoshis">
                             <FormControlLabel 
                             value="explicit" 
                             control={<Radio color="secondary"/>}
@@ -304,18 +304,19 @@ export default class MakerPage extends Component {
                 </Paper>
                 </Grid>
             <Grid item xs={12} align="center">
-                <Tooltip enterTouchDelay="0" title="You must fill the form correctly">
-                <div><Button disabled={this.state.amount == null || 
-                                this.state.amount <= 0 || 
-                                (this.state.is_explicit & (this.state.badSatoshis != null || this.state.satoshis == null)) || 
-                                (!this.state.is_explicit & this.state.badPremium != null) 
-                                } 
-                    color="primary" 
-                    variant="contained" 
-                    onClick={this.handleCreateOfferButtonPressed} >
-                    Create Order
-                </Button></div>
-                </Tooltip>
+                {/* conditions to disable the make button */}
+                {(this.state.amount == null || 
+                    this.state.amount <= 0 || 
+                    (this.state.is_explicit & (this.state.badSatoshis != null || this.state.satoshis == null)) || 
+                    (!this.state.is_explicit & this.state.badPremium != null))
+                    ?
+                    <Tooltip enterTouchDelay="0" title="You must fill the form correctly">
+                        <div><Button disabled color="primary" variant="contained" onClick={this.handleCreateOfferButtonPressed} >Create Order</Button></div>
+                    </Tooltip>
+                    :
+                    <Button color="primary" variant="contained" onClick={this.handleCreateOfferButtonPressed} >Create Order</Button>
+                    } 
+                
             </Grid>
             <Grid item xs={12} align="center">
                 {this.state.badRequest ?
diff --git a/frontend/src/components/OrderPage.js b/frontend/src/components/OrderPage.js
index a104b372..daa68cf2 100644
--- a/frontend/src/components/OrderPage.js
+++ b/frontend/src/components/OrderPage.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Badge, Tab, Tabs, Alert, Paper, CircularProgress, Button , Grid, Typography, List, ListItem, ListItemIcon, ListItemText, ListItemAvatar, Avatar, Divider, Box, LinearProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle} from "@mui/material"
+import { Chip, Tooltip, Badge, Tab, Tabs, Alert, Paper, CircularProgress, Button , Grid, Typography, List, ListItem, ListItemIcon, ListItemText, ListItemAvatar, Avatar, Divider, Box, LinearProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle} from "@mui/material"
 import Countdown, { zeroPad, calcTimeDelta } from 'react-countdown';
 import MediaQuery from 'react-responsive'
 
@@ -161,7 +161,10 @@ export default class OrderPage extends Component {
       // Render a completed state
       return (<Button variant='contained' color='primary' onClick={this.handleClickTakeOrderButton}>Take Order</Button>);
     } else{
-      return(<Button disabled={true} variant='contained' color='primary' onClick={this.handleClickTakeOrderButton}>Take Order</Button>)
+      return(
+      <Tooltip enterTouchDelay="0" title="Wait until you can take an order"><div>
+      <Button disabled={true} variant='contained' color='primary' onClick={this.handleClickTakeOrderButton}>Take Order</Button>
+      </div></Tooltip>)
     }
   };
 
@@ -352,15 +355,16 @@ export default class OrderPage extends Component {
 
   // Colors for the status badges
   statusBadgeColor(status){
-    if(status=='active'){
-      return("success")
-    }
-    if(status=='seen_recently'){
-      return("warning")
-    }
-    if(status=='inactive'){
-      return('error')
-    }
+    if(status=='active'){return("success")}
+    if(status=='seen_recently'){return("warning")}
+    if(status=='inactive'){return('error')}
+  }
+
+  // Colors for the status badges
+  statusTooltip(status){
+    if(status=='active'){return("Active")}
+    if(status=='seen_recently'){return("Seen recently")}
+    if(status=='inactive'){return('Inactive')}
   }
 
   orderBox=()=>{
@@ -369,52 +373,56 @@ export default class OrderPage extends Component {
         <Grid item xs={12} align="center">
           <MediaQuery minWidth={920}>
             <Typography component="h5" variant="h5">
-              Order Details
+              Order Box
             </Typography>
           </MediaQuery>
           <Paper elevation={12} style={{ padding: 8,}}>
           <List dense="true">
             <ListItem >
               <ListItemAvatar sx={{ width: 56, height: 56 }}>
+              <Tooltip placement="top" enterTouchDelay="0" title={this.statusTooltip(this.state.maker_status)} >
                 <Badge variant="dot" badgeContent="" color={this.statusBadgeColor(this.state.maker_status)}>
                   <Avatar className="flippedSmallAvatar"
                     alt={this.state.maker_nick} 
                     src={window.location.origin +'/static/assets/avatars/' + this.state.maker_nick + '.png'} 
                     />
                 </Badge>
+              </Tooltip>
               </ListItemAvatar>
               <ListItemText primary={this.state.maker_nick + (this.state.type ? " (Seller)" : " (Buyer)")} secondary="Order maker" align="right"/>
             </ListItem>
-            <Divider />
 
             {this.state.is_participant ?
               <>
                 {this.state.taker_nick!='None' ?
                   <>
+                    <Divider />
                     <ListItem align="left">
                       <ListItemText primary={this.state.taker_nick + (this.state.type ? " (Buyer)" : " (Seller)")} secondary="Order taker"/>
                       <ListItemAvatar > 
+                      <Tooltip enterTouchDelay="0" title={this.statusTooltip(this.state.taker_status)} >
                         <Badge variant="dot" badgeContent="" color={this.statusBadgeColor(this.state.taker_status)}>
                           <Avatar className="smallAvatar"
                             alt={this.state.taker_nick} 
                             src={window.location.origin +'/static/assets/avatars/' + this.state.taker_nick + '.png'}
                             />
                         </Badge>
+                        </Tooltip>
                       </ListItemAvatar>
-                    </ListItem>
-                    <Divider />               
+                    </ListItem>           
                   </>: 
                   ""
                   }
+                  <Divider><Chip label='Order Details'/></Divider>
                   <ListItem>
                     <ListItemIcon>
                       <ArticleIcon/>
                     </ListItemIcon>
                     <ListItemText primary={this.state.status_message} secondary="Order status"/>
                   </ListItem>
-                  <Divider />
+                  <Divider/>
               </>
-            :""
+            :<Divider><Chip label='Order Details'/></Divider>
             }
             
             <ListItem>
@@ -559,8 +567,8 @@ export default class OrderPage extends Component {
       <Box sx={{ width: '100%' }}>
         <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
           <Tabs value={value} onChange={handleChange} variant="fullWidth" >
-            <Tab label="Order Details" {...this.a11yProps(0)} />
-            <Tab label="Contract Box" {...this.a11yProps(1)} />
+            <Tab label="Order" {...this.a11yProps(0)} />
+            <Tab label="Contract" {...this.a11yProps(1)} />
           </Tabs>
         </Box>
         <Grid container spacing={2}>
diff --git a/frontend/src/components/UserGenPage.js b/frontend/src/components/UserGenPage.js
index 540dc314..463aa633 100644
--- a/frontend/src/components/UserGenPage.js
+++ b/frontend/src/components/UserGenPage.js
@@ -92,6 +92,7 @@ export default class UserGenPage extends Component {
     this.setState({
       token: this.genBase62Token(34),
       tokenHasChanged: true,
+      copied: true,
     });
   }
 
@@ -192,7 +193,7 @@ export default class UserGenPage extends Component {
                   startAdornment:
                   <Tooltip disableHoverListener open={this.state.copied} enterTouchDelay="0" title="Copied!">
                     <IconButton  onClick= {()=> (navigator.clipboard.writeText(this.state.token) & this.setState({copied:true}))}>
-                      <ContentCopy color={this.props.avatarLoaded & !this.state.copied & !this.state.bad_request ? 'success' : 'inherit' } sx={{width:18, height:18}}/>
+                      <ContentCopy color={this.props.avatarLoaded & !this.state.copied & !this.state.bad_request ? 'primary' : 'inherit' } sx={{width:18, height:18}}/>
                     </IconButton>
                   </Tooltip>,
                   endAdornment:
@@ -204,10 +205,19 @@ export default class UserGenPage extends Component {
             </Grid>
           </Grid>
           <Grid item xs={12} align="center">
-              <Button disabled={!this.state.tokenHasChanged} type="submit" size='small'  onClick= {this.handleClickSubmitToken}>
+            {this.state.tokenHasChanged ?
+            <Button type="submit" size='small'  onClick= {this.handleClickSubmitToken}>
+              <SmartToyIcon sx={{width:18, height:18}} />
+              <span>  Generate Robot</span>
+            </Button>
+            :
+            <Tooltip enterTouchDelay="0" title="You must enter a new token first">
+              <Button disabled={true} type="submit" size='small' >
                 <SmartToyIcon sx={{width:18, height:18}} />
                 <span>  Generate Robot</span>
               </Button>
+              </Tooltip>
+            }
           </Grid>
           <Grid item xs={12} align="center">
             <ButtonGroup variant="contained" aria-label="outlined primary button group">
diff --git a/frontend/static/css/index.css b/frontend/static/css/index.css
index 98693333..01a9d265 100644
--- a/frontend/static/css/index.css
+++ b/frontend/static/css/index.css
@@ -73,6 +73,13 @@ body {
   filter: drop-shadow(0.7px 0.7px 0.7px #000000);
 }
 
+.phoneFlippedSmallAvatar:after {
+  content: '';
+  position: absolute;
+  top: 0; left: 0; bottom: 0; right: 0;
+  box-shadow: inset 0px 0px 35px rgb(255, 255, 255);
+}
+
 .bookAvatar {
   border-radius: 50%; 
   transform: scaleX(-1);