diff --git a/frontend/src/components/BookTable/BookControl.tsx b/frontend/src/components/BookTable/BookControl.tsx
index ca119b39..a0b9c42e 100644
--- a/frontend/src/components/BookTable/BookControl.tsx
+++ b/frontend/src/components/BookTable/BookControl.tsx
@@ -81,16 +81,16 @@ const BookControl = ({
     let component = <CheckBoxOutlineBlankIcon />;
     let text = t('ANY');
     if (value === 'sell') {
-      component = <SendReceiveIcon color='primary' />;
+      component = <SendReceiveIcon color='secondary' sx={{ transform: 'scaleX(-1)' }} />;
       text = t('Sell');
     } else if (value === 'buy') {
-      component = <SendReceiveIcon color='secondary' sx={{ transform: 'scaleX(-1)' }} />;
+      component = <SendReceiveIcon color='primary' />;
       text = t('Buy');
     } else if (value === 'swapin') {
-      component = <SwapCalls color='primary' />;
+      component = <SwapCalls color='secondary' />;
       text = t('Swap In');
     } else if (value === 'swapout') {
-      component = <SwapCalls color='secondary' />;
+      component = <SwapCalls color='primary' />;
       text = t('Swap Out');
     }
 
@@ -158,7 +158,7 @@ const BookControl = ({
             </MenuItem>
             <MenuItem value='sell' style={{ width: '8em' }}>
               <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>
-                <SendReceiveIcon color='primary' />
+                <SendReceiveIcon color='secondary' sx={{ transform: 'scaleX(-1)' }} />
                 <Typography sx={{ width: '2em' }} align='right' color='text.secondary'>
                   {' ' + t('Sell')}
                 </Typography>
@@ -166,7 +166,7 @@ const BookControl = ({
             </MenuItem>
             <MenuItem value='buy' style={{ width: '8em' }}>
               <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>
-                <SendReceiveIcon color='secondary' sx={{ transform: 'scaleX(-1)' }} />
+                <SendReceiveIcon color='primary' />
                 <Typography sx={{ width: '2em' }} align='right' color='text.secondary'>
                   {' ' + t('Buy')}
                 </Typography>
@@ -174,7 +174,7 @@ const BookControl = ({
             </MenuItem>
             <MenuItem value='swapin' style={{ width: '8em' }}>
               <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>
-                <SwapCalls color='primary' />
+                <SwapCalls color='secondary' />
                 <Typography sx={{ width: '2em' }} align='right' color='text.secondary'>
                   {' ' + t('Swap In')}
                 </Typography>
@@ -182,7 +182,7 @@ const BookControl = ({
             </MenuItem>
             <MenuItem value='swapout' style={{ width: '8em' }}>
               <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>
-                <SwapCalls color='secondary' />
+                <SwapCalls color='primary' />
                 <Typography sx={{ width: '2em' }} align='right' color='text.secondary'>
                   {' ' + t('Swap Out')}
                 </Typography>