diff --git a/frontend/src/components/MakerPage.js b/frontend/src/components/MakerPage.js
index 18aa58d9..5804a23d 100644
--- a/frontend/src/components/MakerPage.js
+++ b/frontend/src/components/MakerPage.js
@@ -10,10 +10,12 @@ import getFlags from './getFlags';
 import AutocompletePayments from './AutocompletePayments';
 import currencyDict from '../../static/assets/currencies.json';
 
+//icons
 import MoveToInboxIcon from '@mui/icons-material/MoveToInbox';
 import OutboxIcon from '@mui/icons-material/Outbox';
 import LockIcon from '@mui/icons-material/Lock';
 import HourglassTopIcon from '@mui/icons-material/HourglassTop';
+import DoubleArrowIcon from '@mui/icons-material/DoubleArrow';
 
 import { getCookie } from "../utils/cookies";
 import { pn } from "../utils/prettyNumbers";
diff --git a/frontend/src/components/OrderPage.js b/frontend/src/components/OrderPage.js
index b9ca9240..220a5ec9 100644
--- a/frontend/src/components/OrderPage.js
+++ b/frontend/src/components/OrderPage.js
@@ -8,6 +8,7 @@ import currencyDict from '../../static/assets/currencies.json';
 import PaymentText from './PaymentText'
 import TradeBox from "./TradeBox";
 import getFlags from './getFlags'
+import { t } from "i18next";
 
 // icons
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
@@ -15,7 +16,7 @@ import NumbersIcon from '@mui/icons-material/Numbers';
 import PriceChangeIcon from '@mui/icons-material/PriceChange';
 import PaymentsIcon from '@mui/icons-material/Payments';
 import ArticleIcon from '@mui/icons-material/Article';
-import { t } from "i18next";
+import DoubleArrowIcon from '@mui/icons-material/DoubleArrow';
 
 import { getCookie } from "../utils/cookies";
 import { pn } from "../utils/prettyNumbers";
@@ -476,11 +477,13 @@ class OrderPage extends Component {
               <ListItemAvatar sx={{ width: 56, height: 56 }}>
               <Tooltip placement="top" enterTouchDelay="0" title={t(this.state.maker_status)} >
                 <Badge variant="dot" overlap="circular" badgeContent="" color={this.statusBadgeColor(this.state.maker_status)}>
+                <Badge overlap="circular" anchorOrigin={{horizontal: 'right', vertical: 'bottom'}} badgeContent={<div style={{position:"relative", left:"10px"}}> {!this.state.type ? <DoubleArrowIcon sx={{transform: "scaleX(-1)"}} color="secondary"/> : <DoubleArrowIcon color="primary"/>}</div>}>
                   <Avatar className="flippedSmallAvatar"
                     alt={this.state.maker_nick}
                     src={window.location.origin +'/static/assets/avatars/' + this.state.maker_nick + '.png'}
                     />
                 </Badge>
+                </Badge>
               </Tooltip>
               </ListItemAvatar>
               <ListItemText primary={this.state.maker_nick + (this.state.type ? " "+t("(Seller)") : " "+t("(Buyer)") )} secondary={t("Order maker")} align="right"/>
@@ -494,13 +497,15 @@ class OrderPage extends Component {
                     <ListItem align="left">
                       <ListItemText primary={this.state.taker_nick + (this.state.type ? " "+t("(Buyer)") : " "+t("(Seller)"))} secondary={t("Order taker")}/>
                       <ListItemAvatar >
-                      <Tooltip enterTouchDelay="0" title={t(this.state.taker_status)} >
-                        <Badge variant="dot" overlap="circular" 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 enterTouchDelay="0" title={t(this.state.taker_status)} >
+                          <Badge variant="dot" overlap="circular" badgeContent="" color={this.statusBadgeColor(this.state.taker_status)}>
+                          <Badge overlap="circular" anchorOrigin={{horizontal: 'left', vertical: 'bottom'}} badgeContent={<div style={{position:"relative", right:"10px"}}> {this.state.type ? <DoubleArrowIcon color="secondary"/> : <DoubleArrowIcon sx={{transform: "scaleX(-1)"}} color="primary"/> }</div>}>
+                            <Avatar className="smallAvatar"
+                              alt={this.state.taker_nick}
+                              src={window.location.origin +'/static/assets/avatars/' + this.state.taker_nick + '.png'}
+                              />
+                          </Badge>
+                          </Badge>
                         </Tooltip>
                       </ListItemAvatar>
                     </ListItem>