diff --git a/frontend/src/components/BottomBar.js b/frontend/src/components/BottomBar.js
index 463d13c2..e704d502 100644
--- a/frontend/src/components/BottomBar.js
+++ b/frontend/src/components/BottomBar.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import {Badge, TextField, ListItemAvatar, Avatar,Paper, Grid, IconButton, Typography, Select, MenuItem, List, ListItemText, ListItem, ListItemIcon, ListItemButton, Divider, Dialog, DialogContent} from "@mui/material";
+import {Badge, Tooltip, TextField, ListItemAvatar, Avatar,Paper, Grid, IconButton, Typography, Select, MenuItem, List, ListItemText, ListItem, ListItemIcon, ListItemButton, Divider, Dialog, DialogContent} from "@mui/material";
 import MediaQuery from 'react-responsive'
 import { Link } from 'react-router-dom'
 
@@ -264,17 +264,25 @@ bottomBarDesktop =()=>{
                 <Grid container xs={12}>
 
                     <Grid item xs={2}>
+                        <div style={{display: this.props.avatarLoaded ? '':'none'}}>                     
                         <ListItemButton onClick={this.handleClickOpenProfile} >
+                            <Tooltip open={(this.state.active_order_id > 0 & !this.state.profileShown & this.props.avatarLoaded) ? true: false}
+                                        title="You have an active order">
                                 <ListItemAvatar sx={{ width: 30, height: 30 }} >
                                     <Badge badgeContent={(this.state.active_order_id > 0 & !this.state.profileShown) ? "": null} color="primary">
                                     <Avatar className='flippedSmallAvatar' sx={{margin: 0, top: -13}}
                                     alt={this.props.nickname} 
-                                    src={this.props.nickname ? window.location.origin +'/static/assets/avatars/' + this.props.nickname + '.png' : null} 
+                                    imgProps={{
+                                        onLoad:() => this.props.setAppState({avatarLoaded: true}),
+                                    }} 
+                                    src={this.props.nickname ? window.location.origin +'/static/assets/avatars/' + this.props.nickname + '.png' : null}
                                     />
                                     </Badge>
                                 </ListItemAvatar>
-                                <ListItemText primary={this.props.nickname}/>
-                            </ListItemButton>
+                            </Tooltip>
+                            <ListItemText primary={this.props.nickname}/>
+                        </ListItemButton>
+                        </div>
                     </Grid>
 
                     <Grid item xs={2}>
@@ -354,19 +362,23 @@ bottomBarDesktop =()=>{
                             </Select>
                         </Grid>
                         <Grid item xs={3}>
+                        <Tooltip enterTouchDelay="250" title="Show community and support links">
                             <IconButton 
                             color="primary" 
                             aria-label="Community" 
                             onClick={this.handleClickOpenCommunity} >
                                 <PeopleIcon />
                             </IconButton>
+                        </Tooltip>
                         </Grid>
                         <Grid item xs={3}> 
-                            <IconButton color="primary" 
-                                aria-label="Stats for Nerds" 
-                                onClick={this.handleClickOpenStatsForNerds} >
-                                <SettingsIcon />
-                            </IconButton>
+                            <Tooltip enterTouchDelay="250" title="Show stats for nerds">
+                                <IconButton color="primary" 
+                                    aria-label="Stats for Nerds" 
+                                    onClick={this.handleClickOpenStatsForNerds} >
+                                    <SettingsIcon />
+                                </IconButton>
+                            </Tooltip>
                         </Grid>
 
                     </Grid>
@@ -470,51 +482,62 @@ bottomBarPhone =()=>{
 
                     <Grid item xs={1.6}>
                     <div style={{display: this.props.avatarLoaded ? '':'none'}}>
-                    <IconButton onClick={this.handleClickOpenProfile} sx={{margin: 0, bottom: 22, right: 8}} >
-                        <Badge badgeContent={(this.state.active_order_id >0 & !this.state.profileShown) ? "": null} color="primary">
-                            <Avatar className='phoneFlippedSmallAvatar'
-                            sx={{ width: 65, height:65 }} 
-                            alt={this.props.nickname} 
-                            imgProps={{
-                                onLoad:() => this.props.setAppState({avatarLoaded: true}),
-                            }} 
-                            src={this.props.nickname ? window.location.origin +'/static/assets/avatars/' + this.props.nickname + '.png' : null} 
-                            />
-                        </Badge>
-                    </IconButton>
+                    <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}} >
+                            <Badge badgeContent={(this.state.active_order_id >0 & !this.state.profileShown) ? "": null} color="primary">
+                                <Avatar className='phoneFlippedSmallAvatar'
+                                sx={{ width: 65, height:65 }} 
+                                alt={this.props.nickname} 
+                                imgProps={{
+                                    onLoad:() => this.props.setAppState({avatarLoaded: true}),
+                                }} 
+                                src={this.props.nickname ? window.location.origin +'/static/assets/avatars/' + this.props.nickname + '.png' : null} 
+                                />
+                            </Badge>
+                        </IconButton>
+                    </Tooltip>
                     </div>
                     </Grid>
 
                     <Grid item xs={1.6} align="center">
-                        <IconButton onClick={this.handleClickOpenExchangeSummary} >
-                        <Badge badgeContent={this.state.num_public_buy_orders}  color="action">
-                            <InventoryIcon />
-                        </Badge>
-                        </IconButton>
+                        <Tooltip enterTouchDelay="300" title="Number of public BUY orders"> 
+                            <IconButton onClick={this.handleClickOpenExchangeSummary} >
+                            <Badge badgeContent={this.state.num_public_buy_orders}  color="action">
+                                <InventoryIcon />
+                            </Badge>
+                            </IconButton>
+                        </Tooltip> 
                     </Grid>
 
                     <Grid item xs={1.6} align="center">
-                        <IconButton onClick={this.handleClickOpenExchangeSummary} >
-                        <Badge badgeContent={this.state.num_public_sell_orders}  color="action">
-                            <SellIcon />
-                        </Badge>
-                        </IconButton>
+                        <Tooltip enterTouchDelay="300" title="Number of public SELL orders">
+                            <IconButton onClick={this.handleClickOpenExchangeSummary} >
+                            <Badge badgeContent={this.state.num_public_sell_orders}  color="action">
+                                <SellIcon />
+                            </Badge>
+                            </IconButton>
+                        </Tooltip>
                     </Grid>
 
                     <Grid item xs={1.6} align="center">
-                        <IconButton onClick={this.handleClickOpenExchangeSummary} >
-                        <Badge badgeContent={this.state.active_robots_today}  color="action">
-                            <SmartToyIcon />
-                        </Badge>
-                        </IconButton>
+                        <Tooltip enterTouchDelay="300" title="Today active robots">
+                            <IconButton onClick={this.handleClickOpenExchangeSummary} >
+                            <Badge badgeContent={this.state.active_robots_today}  color="action">
+                                <SmartToyIcon />
+                            </Badge>
+                            </IconButton>
+                        </Tooltip>
                     </Grid>
 
                     <Grid item xs={1.8} align="center">
-                        <IconButton onClick={this.handleClickOpenExchangeSummary} >
-                        <Badge badgeContent={this.state.today_avg_nonkyc_btc_premium+"%"}  color="action">
-                            <PriceChangeIcon />
-                        </Badge>
-                        </IconButton>
+                        <Tooltip enterTouchDelay="300" title="Today non-KYC bitcoin premium"> 
+                            <IconButton onClick={this.handleClickOpenExchangeSummary} >
+                            <Badge badgeContent={this.state.today_avg_nonkyc_btc_premium+"%"}  color="action">
+                                <PriceChangeIcon />
+                            </Badge>
+                            </IconButton>
+                        </Tooltip>
                     </Grid>
 
                     <Grid container item xs={3.8}>
@@ -529,19 +552,23 @@ bottomBarPhone =()=>{
                             </Select>
                         </Grid>
                         <Grid item xs={3}>
-                        <IconButton color="primary" 
-                            aria-label="Stats for Nerds" 
-                            onClick={this.handleClickOpenStatsForNerds} >
-                            <SettingsIcon />
-                        </IconButton>
-                        </Grid>
-                        <Grid item xs={3}>
+                        <Tooltip enterTouchDelay="250" title="Show community and support links">
                             <IconButton 
                             color="primary" 
                             aria-label="Community" 
                             onClick={this.handleClickOpenCommunity} >
                                 <PeopleIcon />
                             </IconButton>
+                        </Tooltip>
+                        </Grid>
+                        <Grid item xs={3}>
+                        <Tooltip enterTouchDelay="250" title="Show stats for nerds">
+                            <IconButton color="primary" 
+                                aria-label="Stats for Nerds" 
+                                onClick={this.handleClickOpenStatsForNerds} >
+                                <SettingsIcon />
+                            </IconButton>
+                        </Tooltip>
                         </Grid>
 
                     </Grid>
diff --git a/frontend/src/components/HomePage.js b/frontend/src/components/HomePage.js
index 23b35202..1c47c140 100644
--- a/frontend/src/components/HomePage.js
+++ b/frontend/src/components/HomePage.js
@@ -30,7 +30,7 @@ export default class HomePage extends Component {
               <Router >
                   <div className='appCenter'>
                     <Switch>
-                        <Route exact path='/' render={(props) => <UserGenPage setAppState={this.setAppState}/>}/>
+                        <Route exact path='/' render={(props) => <UserGenPage {...this.state} setAppState={this.setAppState}/>}/>
                         <Route path='/make' component={MakerPage}/>
                         <Route path='/book' component={BookPage}/>
                         <Route path="/order/:orderId" component={OrderPage}/>
diff --git a/frontend/src/components/MakerPage.js b/frontend/src/components/MakerPage.js
index b98490b9..c6e2aad6 100644
--- a/frontend/src/components/MakerPage.js
+++ b/frontend/src/components/MakerPage.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Paper, Button , Grid, Typography, TextField, Select, FormHelperText, MenuItem, FormControl, Radio, FormControlLabel, RadioGroup, dividerClasses} from "@mui/material"
+import { Tooltip, Paper, Button , Grid, Typography, TextField, Select, FormHelperText, MenuItem, FormControl, Radio, FormControlLabel, RadioGroup, dividerClasses} from "@mui/material"
 import { Link } from 'react-router-dom'
 import getFlags from './getFlags'
 
@@ -184,6 +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">
                             <TextField
                                 error={this.state.amount <= 0} 
                                 helperText={this.state.amount <= 0 ? 'Invalid' : null}
@@ -195,7 +196,9 @@ export default class MakerPage extends Component {
                                     style: {textAlign:"center"}
                                 }}
                                 onChange={this.handleAmountChange}
-                            /></div>
+                            />
+                        </Tooltip>
+                            </div>
                             <div >
                                 <Select
                                     required="true" 
@@ -214,7 +217,7 @@ export default class MakerPage extends Component {
                 </Grid>
                 <br/>
                 <Grid item xs={12} align="center">
-                    <FormControl >
+                    <Tooltip enterTouchDelay="0" title="Input your prefered payment methods">
                         <TextField 
                             sx={{width:240}}
                             label="Payment Method(s)"
@@ -228,7 +231,7 @@ export default class MakerPage extends Component {
                             }}
                             onChange={this.handlePaymentMethodChange}
                         />
-                    </FormControl>
+                    </Tooltip>
                 </Grid>
 
                 <Grid item xs={12} align="center">
@@ -239,6 +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">
                             <FormControlLabel 
                             value="relative" 
                             control={<Radio color="primary"/>}
@@ -246,6 +250,8 @@ export default class MakerPage extends Component {
                             labelPlacement="Top"
                             onClick={this.handleClickRelative}
                             />
+                        </Tooltip>
+                        <Tooltip enterTouchDelay="0" title="Set a fix amount of satoshis">
                             <FormControlLabel 
                             value="explicit" 
                             control={<Radio color="secondary"/>}
@@ -253,6 +259,7 @@ export default class MakerPage extends Component {
                             labelPlacement="Top"
                             onClick={this.handleClickExplicit}
                             />
+                        </Tooltip>
                         </RadioGroup>
                     </FormControl>
                 </Grid>
@@ -297,7 +304,8 @@ export default class MakerPage extends Component {
                 </Paper>
                 </Grid>
             <Grid item xs={12} align="center">
-                <Button disabled={this.state.amount == null || 
+                <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) 
@@ -306,7 +314,8 @@ export default class MakerPage extends Component {
                     variant="contained" 
                     onClick={this.handleCreateOfferButtonPressed} >
                     Create Order
-                </Button>
+                </Button></div>
+                </Tooltip>
             </Grid>
             <Grid item xs={12} align="center">
                 {this.state.badRequest ?
diff --git a/frontend/src/components/UserGenPage.js b/frontend/src/components/UserGenPage.js
index 28676e5b..540dc314 100644
--- a/frontend/src/components/UserGenPage.js
+++ b/frontend/src/components/UserGenPage.js
@@ -1,11 +1,13 @@
 import React, { Component } from "react";
-import { Button , Dialog, Grid, Typography, TextField, ButtonGroup, CircularProgress, IconButton} from "@mui/material"
+import { Button , Tooltip, Dialog, Grid, Typography, TextField, ButtonGroup, CircularProgress, IconButton} from "@mui/material"
 import { Link } from 'react-router-dom'
 import Image from 'material-ui-image'
 import InfoDialog from './InfoDialog'
 import SmartToyIcon from '@mui/icons-material/SmartToy';
 import CasinoIcon from '@mui/icons-material/Casino';
 import ContentCopy from "@mui/icons-material/ContentCopy";
+import InfoIcon from '@mui/icons-material/Info';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 
 function getCookie(name) {
   let cookieValue = null;
@@ -103,7 +105,7 @@ export default class UserGenPage extends Component {
   handleClickSubmitToken=()=>{
     this.delGeneratedUser();
     this.getGeneratedUser(this.state.token);
-    this.setState({loadingRobot: true, tokenHasChanged: false});
+    this.setState({loadingRobot: true, tokenHasChanged: false, copied: false});
     this.props.setAppState({avatarLoaded: false, nickname: null, token: null});
   }
 
@@ -141,6 +143,7 @@ export default class UserGenPage extends Component {
                 </Typography>
               </Grid>
               <Grid item xs={12} align="center">
+              <Tooltip enterTouchDelay="0" title="This is your trading avatar">
                 <div style={{ maxWidth: 200, maxHeight: 200 }}>
                   <Image className='newAvatar'
                     disableError='true'
@@ -148,7 +151,8 @@ export default class UserGenPage extends Component {
                     color='null'
                     src={this.state.avatar_url}
                   />
-                </div><br/>
+                </div>
+                </Tooltip><br/>
               </Grid>
             </div>
             : <CircularProgress sx={{position: 'relative', top: 100, }}/>}
@@ -171,7 +175,7 @@ export default class UserGenPage extends Component {
                 //   style: { color: 'green' },
                 // }}
                 error={this.state.bad_request}
-                label='Store your token safely'
+                label={"Store your token safely"}
                 required='true'
                 value={this.state.token}
                 variant='standard'
@@ -186,11 +190,15 @@ export default class UserGenPage extends Component {
                 }}
                 InputProps={{
                   startAdornment:
-                  <IconButton onClick= {()=>navigator.clipboard.writeText(this.state.token)}>
-                    <ContentCopy color={this.state.tokenHasChanged ? 'inherit' : 'primary' } sx={{width:18, height:18}} />
-                  </IconButton>,
+                  <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}}/>
+                    </IconButton>
+                  </Tooltip>,
                   endAdornment:
-                  <IconButton onClick={this.handleClickNewRandomToken}><CasinoIcon/></IconButton>,
+                  <Tooltip enterTouchDelay="250" title="Generate a new token">
+                    <IconButton onClick={this.handleClickNewRandomToken}><CasinoIcon/></IconButton>
+                  </Tooltip>,
                   }}
               />
             </Grid>
diff --git a/frontend/static/css/index.css b/frontend/static/css/index.css
index 82a9164c..98693333 100644
--- a/frontend/static/css/index.css
+++ b/frontend/static/css/index.css
@@ -68,12 +68,9 @@ body {
 }
 
 .phoneFlippedSmallAvatar {
-  transform: translate(-20, -20);
-  bottom: 50;
-  right: 50;
   transform: scaleX(-1);
-  border: 0.8px solid #555; 
-  filter: drop-shadow(0.5px 0.5px 0.5px #000000);
+  border: 1.3px solid #555; 
+  filter: drop-shadow(0.7px 0.7px 0.7px #000000);
 }
 
 .bookAvatar {