diff --git a/src/components/App/App.reducer.js b/src/components/App/App.reducer.js
index 8b3ba3bb9..84bdff8fe 100644
--- a/src/components/App/App.reducer.js
+++ b/src/components/App/App.reducer.js
@@ -15,6 +15,7 @@ import {
 } from '../Settings/Display/Display.constants';
 
 import { DEFAULT_FONT_FAMILY } from './../../providers/ThemeProvider/ThemeProvider.constants';
+import { NAVIGATION_BUTTONS_STYLE_SIDES } from '../Settings/Navigation/Navigation.constants';
 
 const initialState = {
   isConnected: true,
@@ -43,6 +44,7 @@ const initialState = {
     active: false,
     shareShowActive: false,
     bigScrollButtonsActive: false,
+    navigationButtonsStyle: NAVIGATION_BUTTONS_STYLE_SIDES,
     caBackButtonActive: false,
     quickUnlockActive: false,
     removeOutputActive: false,
diff --git a/src/components/App/__tests__/App.reducer.test.js b/src/components/App/__tests__/App.reducer.test.js
index cfbda3297..ac5dcbf98 100644
--- a/src/components/App/__tests__/App.reducer.test.js
+++ b/src/components/App/__tests__/App.reducer.test.js
@@ -9,6 +9,7 @@ import {
 import { LOGIN_SUCCESS, LOGOUT } from '../../Account/Login/Login.constants';
 import { DISPLAY_SIZE_STANDARD } from '../../Settings/Display/Display.constants';
 import { DEFAULT_FONT_FAMILY } from '../../../providers/ThemeProvider/ThemeProvider.constants';
+import { NAVIGATION_BUTTONS_STYLE_SIDES } from '../../Settings/Navigation/Navigation.constants';
 
 let mockApp, uData, initialState;
 
@@ -41,6 +42,7 @@ describe('reducer', () => {
         active: false,
         bigScrollButtonsActive: false,
         caBackButtonActive: false,
+        navigationButtonsStyle: NAVIGATION_BUTTONS_STYLE_SIDES,
         liveMode: false,
         shareShowActive: false,
         quickUnlockActive: false,
@@ -66,6 +68,7 @@ describe('reducer', () => {
         active: false,
         bigScrollButtonsActive: false,
         caBackButtonActive: false,
+        navigationButtonsStyle: NAVIGATION_BUTTONS_STYLE_SIDES,
         liveMode: false,
         shareShowActive: false,
         quickUnlockActive: false,
diff --git a/src/components/Board/Board.component.js b/src/components/Board/Board.component.js
index 04bdac2ae..c253bab56 100644
--- a/src/components/Board/Board.component.js
+++ b/src/components/Board/Board.component.js
@@ -33,6 +33,7 @@ import messages from './Board.messages';
 import './Board.css';
 import BoardTour from './BoardTour/BoardTour';
 import ScrollButtons from '../ScrollButtons';
+import { NAVIGATION_BUTTONS_STYLE_SIDES } from '../Settings/Navigation/Navigation.constants';
 
 export class Board extends Component {
   static propTypes = {
@@ -317,6 +318,9 @@ export class Board extends Component {
     const tiles = this.renderTiles(board.tiles);
     const cols = DISPLAY_SIZE_GRID_COLS[this.props.displaySettings.uiSize];
     const isLoggedIn = !!userData.email;
+    const isNavigationButtonsOnTheSide =
+      navigationSettings.navigationButtonsStyle ===
+      NAVIGATION_BUTTONS_STYLE_SIDES;
 
     return (
       <Scanner
@@ -417,7 +421,20 @@ export class Board extends Component {
           <Scannable>
             <div
               id="BoardTilesContainer"
-              className="Board__tiles"
+              className={classNames(
+                'Board__tiles',
+                {
+                  CABackButtonOnTheSides:
+                    navigationSettings.caBackButtonActive &&
+                    isNavigationButtonsOnTheSide &&
+                    !isSelecting
+                },
+                {
+                  ScrollButtonsOnTheSides:
+                    navigationSettings.bigScrollButtonsActive &&
+                    isNavigationButtonsOnTheSide
+                }
+              )}
               onKeyUp={this.handleBoardKeyUp}
               ref={this.boardContainerRef}
             >
@@ -451,6 +468,7 @@ export class Board extends Component {
                   fixedRef={this.fixedBoardContainerRef}
                   setIsScroll={setIsScroll}
                   isBigScrollBtns={navigationSettings.bigScrollButtonsActive}
+                  isNavigationButtonsOnTheSide={isNavigationButtonsOnTheSide}
                 />
               )}
 
@@ -462,6 +480,10 @@ export class Board extends Component {
                 rows={board.grid ? board.grid.rows : DEFAULT_ROWS_NUMBER}
                 onAddRemoveRow={onAddRemoveRow}
                 onAddRemoveColumn={onAddRemoveColumn}
+                moveColsButtonToLeft={
+                  navigationSettings.bigScrollButtonsActive &&
+                  isNavigationButtonsOnTheSide
+                }
               />
             </div>
           </Scannable>
@@ -470,11 +492,11 @@ export class Board extends Component {
             <ScrollButtons
               active={
                 navigationSettings.bigScrollButtonsActive &&
-                !isSelecting &&
                 !isSaving &&
                 !this.props.scannerSettings.active &&
-                isScroll
+                (isScroll || isNavigationButtonsOnTheSide)
               }
+              isScroll={isScroll}
               isLocked={isLocked}
               boardContainer={
                 board.isFixed
@@ -483,6 +505,7 @@ export class Board extends Component {
               }
               totalRows={totalRows}
               boardId={board.id}
+              isNavigationButtonsOnTheSide={isNavigationButtonsOnTheSide}
             />
           )}
 
@@ -496,6 +519,8 @@ export class Board extends Component {
             navHistory={this.props.navHistory}
             previousBoard={onRequestPreviousBoard}
             toRootBoard={onRequestToRootBoard}
+            isLocked={this.props.isLocked}
+            isNavigationButtonsOnTheSide={isNavigationButtonsOnTheSide}
           />
 
           <Dialog
diff --git a/src/components/Board/Board.css b/src/components/Board/Board.css
index 4d55c4d96..96e75e69b 100644
--- a/src/components/Board/Board.css
+++ b/src/components/Board/Board.css
@@ -62,6 +62,20 @@
   -webkit-overflow-scrolling: touch;
 }
 
+.CABackButtonOnTheSides {
+  margin-left: 5rem;
+}
+
+.ScrollButtonsOnTheSides {
+  margin-right: 5rem;
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+/* Hide scrollbar for Chrome, Safari and Opera */
+.ScrollButtonsOnTheSides::-webkit-scrollbar {
+  display: none;
+}
+
 .is-dark .Board__tiles {
   background: #444;
 }
diff --git a/src/components/EditGridButtons/EditGridButtons.component.js b/src/components/EditGridButtons/EditGridButtons.component.js
index 2c590eebc..71030d473 100644
--- a/src/components/EditGridButtons/EditGridButtons.component.js
+++ b/src/components/EditGridButtons/EditGridButtons.component.js
@@ -15,7 +15,8 @@ class EditGridButtons extends React.Component {
     rows: PropTypes.number.isRequired,
     columns: PropTypes.number.isRequired,
     onAddRemoveColumn: PropTypes.func.isRequired,
-    onAddRemoveRow: PropTypes.func.isRequired
+    onAddRemoveRow: PropTypes.func.isRequired,
+    moveColsButtonToLeft: PropTypes.bool
   };
 
   constructor(props) {
@@ -73,14 +74,18 @@ class EditGridButtons extends React.Component {
   };
 
   render() {
-    const { active } = this.props;
+    const { active, moveColsButtonToLeft } = this.props;
     if (!active) {
       return null;
     }
 
     return (
       <React.Fragment>
-        <div className="EditGridButtons right">
+        <div
+          className={`EditGridButtons ${
+            moveColsButtonToLeft ? 'left' : 'right'
+          }`}
+        >
           {this.renderButtons(true, false)}
         </div>
         <div className="EditGridButtons bottom">
diff --git a/src/components/EditGridButtons/EditGridButtons.css b/src/components/EditGridButtons/EditGridButtons.css
index 679f58cc1..b0d3a38a1 100644
--- a/src/components/EditGridButtons/EditGridButtons.css
+++ b/src/components/EditGridButtons/EditGridButtons.css
@@ -16,7 +16,8 @@
 
 .EditGridButtons.left {
   top: 55%;
-  left: 0;
+  left: 6px;
+  max-width: 4rem;
 }
 
 .EditGridButtons.right {
@@ -25,7 +26,8 @@
   max-width: 4rem;
 }
 
-.EditGridButtons.right button {
+.EditGridButtons.right button,
+.EditGridButtons.left button {
   min-height: 50px;
   padding-right: 10px;
   padding-left: 10px;
diff --git a/src/components/FixedGrid/Grid.js b/src/components/FixedGrid/Grid.js
index fffb0c183..2910f7f62 100644
--- a/src/components/FixedGrid/Grid.js
+++ b/src/components/FixedGrid/Grid.js
@@ -28,6 +28,7 @@ function Grid(props) {
     setIsScroll,
     fixedRef,
     isBigScrollBtns,
+    isNavigationButtonsOnTheSide,
     ...other
   } = props;
 
@@ -215,7 +216,10 @@ function Grid(props) {
 
   return (
     <div
-      className={styles.root}
+      className={classNames(styles.root, {
+        FixedGridScrollButtonsOnTheSides:
+          isNavigationButtonsOnTheSide && isBigScrollBtns
+      })}
       style={style}
       onKeyDown={handleOnKeyDown}
       ref={props.fixedRef}
@@ -283,9 +287,13 @@ Grid.propTypes = {
    */
   fixedRef: PropTypes.object,
   /**
-   * Ref to fixed grid container
+   * Big scroll buttons active
+   */
+  isBigScrollBtns: PropTypes.bool,
+  /**
+   * Is navigation buttons on the side
    */
-  isBigScrollBtns: PropTypes.bool
+  isNavigationButtonsOnTheSide: PropTypes.bool
 };
 
 export default Grid;
diff --git a/src/components/Grid/Grid.css b/src/components/Grid/Grid.css
index 303f7e23e..4eab7f83a 100644
--- a/src/components/Grid/Grid.css
+++ b/src/components/Grid/Grid.css
@@ -10,3 +10,12 @@
 .dragging .react-grid-item.cssTransforms {
   transition-property: transform;
 }
+
+.FixedGridScrollButtonsOnTheSides::-webkit-scrollbar {
+  display: none;
+}
+
+.FixedGridScrollButtonsOnTheSides {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
diff --git a/src/components/NavigationButtons/NavigationButtons.component.js b/src/components/NavigationButtons/NavigationButtons.component.js
index 8955a60a1..9c336773a 100644
--- a/src/components/NavigationButtons/NavigationButtons.component.js
+++ b/src/components/NavigationButtons/NavigationButtons.component.js
@@ -9,28 +9,49 @@ const NavigationButtons = ({
   active,
   navHistory,
   previousBoard,
-  toRootBoard
+  toRootBoard,
+  isLocked,
+  isNavigationButtonsOnTheSide
 }) => {
   if (!active) {
     return null;
   }
+  const classPreviousBoardButton = isNavigationButtonsOnTheSide
+    ? `SideNavigationButton SideButtonPreviousBoard ${
+        navHistory.length > 2 ? '' : 'disable'
+      }`
+    : `NavigationButton left`;
+
+  const classToRootBoardButton = isNavigationButtonsOnTheSide
+    ? `SideNavigationButton SideButtonToRootBoard ${
+        navHistory.length > 1 ? '' : 'disable'
+      }`
+    : 'NavigationButton right';
 
   return (
     <React.Fragment>
-      {navHistory.length > 2 && (
-        <div className="NavigationButton left">
-          <button onClick={toRootBoard}>
-            <FirstPageIcon />
-          </button>
-        </div>
-      )}
-      {navHistory.length > 1 && (
-        <div className="NavigationButton right">
-          <button onClick={previousBoard}>
-            <ChevronLeftIcon />
-          </button>
-        </div>
-      )}
+      <div
+        className={
+          isNavigationButtonsOnTheSide
+            ? `SideNavigationButtonsContainer ${!isLocked ? 'moveDown' : ''}`
+            : ''
+        }
+      >
+        {(navHistory.length > 2 || isNavigationButtonsOnTheSide) && (
+          <div className={classPreviousBoardButton}>
+            <button onClick={toRootBoard}>
+              <FirstPageIcon />
+            </button>
+          </div>
+        )}
+        {(navHistory.length > 1 || isNavigationButtonsOnTheSide) && (
+          <div className={classToRootBoardButton}>
+            <button onClick={previousBoard}>
+              <ChevronLeftIcon />
+            </button>
+          </div>
+        )}
+      </div>
     </React.Fragment>
   );
 };
@@ -38,7 +59,9 @@ const NavigationButtons = ({
 NavigationButtons.props = {
   navHistory: PropTypes.arrayOf(PropTypes.string),
   previousBoard: PropTypes.func,
-  toRootBoard: PropTypes.func
+  toRootBoard: PropTypes.func,
+  isLocked: PropTypes.bool,
+  isNavigationButtonsOnTheSide: PropTypes.bool
 };
 
 export default NavigationButtons;
diff --git a/src/components/NavigationButtons/NavigationButtons.css b/src/components/NavigationButtons/NavigationButtons.css
index 08ca4ae52..097160979 100644
--- a/src/components/NavigationButtons/NavigationButtons.css
+++ b/src/components/NavigationButtons/NavigationButtons.css
@@ -9,7 +9,8 @@
   overflow: hidden;
 }
 
-.NavigationButton:hover {
+.NavigationButton:hover,
+.SideNavigationButton:hover {
   background: rgba(255, 0, 0, 0.8);
 }
 
@@ -38,7 +39,8 @@
   margin-left: -4rem;
 }
 
-.NavigationButton.top.moveDown {
+.NavigationButton.top.moveDown,
+.SideNavigationButtonsContainer.moveDown {
   top: 240px;
 }
 
@@ -53,7 +55,8 @@
   margin-left: -4rem;
 }
 
-.NavigationButton button {
+.NavigationButton button,
+.SideNavigationButton button {
   background: transparent;
   border: 0;
   width: 100%;
@@ -63,11 +66,50 @@
   cursor: pointer;
 }
 
-.NavigationButton button svg {
+.NavigationButton button svg,
+.SideNavigationButton button svg {
   width: 5rem;
   height: 5rem;
 }
 
+.SideNavigationButton.disable {
+  pointer-events: none;
+  background-color: rgb(196, 195, 195);
+}
+
+.SideNavigationButton {
+  background-color: rgba(255, 0, 0, 0.5);
+  flex-grow: 1;
+}
+
+.SideButtonScrollUp,
+.SideButtonPreviousBoard {
+  margin-bottom: 2px;
+}
+
+.SideButtonScrollDown,
+.SideButtonToRootBoard {
+  margin-top: 2px;
+}
+
+.SideNavigationButtonsContainer {
+  position: fixed;
+  top: 160px;
+  bottom: 0px;
+  z-index: 1000;
+  width: 5rem;
+  text-align: center;
+  font-size: 2rem;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.SideNavigationButtonsContainer.ScrollButtons {
+  right: 0;
+}
+
 @media (max-width: 480px) {
   .NavigationButton {
     height: 6rem;
@@ -90,4 +132,10 @@
     width: 100%;
     height: 100%;
   }
+  /* .NavigationButton.SideButtonScrollUp{
+    height: 26rem;
+  }
+  .NavigationButton.SideButtonScrollDown{
+    height: 26rem;
+  } */
 }
diff --git a/src/components/ScrollButtons/ScrollButtons.js b/src/components/ScrollButtons/ScrollButtons.js
index abd41ca08..ea906929f 100644
--- a/src/components/ScrollButtons/ScrollButtons.js
+++ b/src/components/ScrollButtons/ScrollButtons.js
@@ -71,26 +71,44 @@ const ScrollButtons = props => {
     return null;
   }
 
+  const classScrollUp = props.isNavigationButtonsOnTheSide
+    ? `SideNavigationButton SideButtonScrollUp ${
+        !props.isScroll || isScrollTop ? 'disable' : ''
+      }`
+    : `NavigationButton top ${!props.isLocked ? 'moveDown' : ''}`;
+
+  const classScrollDown = props.isNavigationButtonsOnTheSide
+    ? `SideNavigationButton SideButtonScrollDown ${
+        !props.isScroll || isScrollDown ? 'disable' : ''
+      }`
+    : 'NavigationButton bottom';
+
   return (
     <React.Fragment>
-      {!isScrollTop && (
-        <div
-          className={`NavigationButton top ${
-            !props.isLocked ? 'moveDown' : ''
-          }`}
-        >
-          <button onClick={scrollUp}>
-            <KeyboardArrowUpIcon />
-          </button>
-        </div>
-      )}
-      {!isScrollDown && (
-        <div className="NavigationButton bottom">
-          <button onClick={scrollDown}>
-            <KeyboardArrowDownIcon />
-          </button>
-        </div>
-      )}
+      <div
+        className={
+          props.isNavigationButtonsOnTheSide
+            ? `SideNavigationButtonsContainer ScrollButtons ${
+                !props.isLocked ? 'moveDown' : ''
+              }`
+            : ''
+        }
+      >
+        {(!isScrollTop || props.isNavigationButtonsOnTheSide) && (
+          <div className={classScrollUp}>
+            <button onClick={scrollUp}>
+              <KeyboardArrowUpIcon />
+            </button>
+          </div>
+        )}
+        {(!isScrollDown || props.isNavigationButtonsOnTheSide) && (
+          <div className={classScrollDown}>
+            <button onClick={scrollDown}>
+              <KeyboardArrowDownIcon />
+            </button>
+          </div>
+        )}
+      </div>
     </React.Fragment>
   );
 };
@@ -100,7 +118,9 @@ ScrollButtons.props = {
   isLocked: PropTypes.bool,
   boardContainer: PropTypes.object,
   totalRows: PropTypes.number,
-  boardId: PropTypes.number
+  boardId: PropTypes.number,
+  isScroll: PropTypes.bool,
+  isNavigationButtonsOnTheSide: PropTypes.bool
 };
 
 export default ScrollButtons;
diff --git a/src/components/Settings/Navigation/Navigation.component.js b/src/components/Settings/Navigation/Navigation.component.js
index 2748a8ba5..73e36f34c 100644
--- a/src/components/Settings/Navigation/Navigation.component.js
+++ b/src/components/Settings/Navigation/Navigation.component.js
@@ -10,6 +10,10 @@ import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
 import Divider from '@material-ui/core/Divider';
 import FullScreenDialog from '../../UI/FullScreenDialog';
 import messages from './Navigation.messages';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+import { NAVIGATION_BUTTONS_STYLES } from './Navigation.constants';
 
 import './Navigation.css';
 import ResetToursItem from '../../UI/ResetToursItem';
@@ -84,6 +88,45 @@ class Navigation extends React.Component {
     this.props.updateNavigationSettings(this.state);
   };
 
+  onNavigationSettingsChange(navigationSetting, event) {
+    const {
+      target: { value }
+    } = event;
+    this.setState({ [navigationSetting]: value });
+  }
+
+  renderNavigationButtonsLocationSelect() {
+    const name = 'navigationButtonsStyle';
+    const actualButtonsStyle = NAVIGATION_BUTTONS_STYLES.filter(
+      style => style.value === this.state[name]
+    )[0];
+
+    return (
+      <FormControl>
+        <Select
+          aria-label={name}
+          id={name}
+          name={name}
+          value={
+            actualButtonsStyle?.value || NAVIGATION_BUTTONS_STYLES[0].value
+          }
+          onChange={e => this.onNavigationSettingsChange(name, e)}
+          disabled={
+            !(
+              this.state.bigScrollButtonsActive || this.state.caBackButtonActive
+            )
+          }
+        >
+          {NAVIGATION_BUTTONS_STYLES.map(style => (
+            <MenuItem key={style?.value} value={style?.value}>
+              {style?.name}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    );
+  }
+
   render() {
     const { onClose } = this.props;
     return (
@@ -130,6 +173,30 @@ class Navigation extends React.Component {
                 </ListItemSecondaryAction>
               </ListItem>
               <Divider />
+              <ListItem
+                disabled={
+                  !(
+                    this.state.bigScrollButtonsActive ||
+                    this.state.caBackButtonActive
+                  )
+                }
+              >
+                <ListItemText
+                  className="Display__ListItemText"
+                  primary={
+                    <FormattedMessage {...messages.navigationButtonsStyle} />
+                  }
+                  secondary={
+                    <FormattedMessage
+                      {...messages.navigationButtonsStyleSecondary}
+                    />
+                  }
+                />
+                <ListItemSecondaryAction className="Display__Options">
+                  {this.renderNavigationButtonsLocationSelect()}
+                </ListItemSecondaryAction>
+              </ListItem>
+              <Divider />
               <ListItem>
                 <ListItemText
                   className="Display__ListItemText"
diff --git a/src/components/Settings/Navigation/Navigation.constants.js b/src/components/Settings/Navigation/Navigation.constants.js
new file mode 100644
index 000000000..1ebcb0f55
--- /dev/null
+++ b/src/components/Settings/Navigation/Navigation.constants.js
@@ -0,0 +1,7 @@
+export const NAVIGATION_BUTTONS_STYLE_SIDES = 'sides';
+export const NAVIGATION_BUTTONS_STYLE_TOP = 'top';
+
+export const NAVIGATION_BUTTONS_STYLES = [
+  { name: 'On the sides', value: 'sides' },
+  { name: 'On top', value: 'top' }
+];
diff --git a/src/components/Settings/Navigation/Navigation.messages.js b/src/components/Settings/Navigation/Navigation.messages.js
index 9c814cc30..c29a6d1c3 100644
--- a/src/components/Settings/Navigation/Navigation.messages.js
+++ b/src/components/Settings/Navigation/Navigation.messages.js
@@ -11,7 +11,8 @@ export default defineMessages({
   },
   enableSecondary: {
     id: 'cboard.components.Settings.Navigation.enableSecondary',
-    defaultMessage: 'Shows big back buttons on top of the boards'
+    defaultMessage:
+      'Shows big back buttons. Select the desired style in navigation buttons style section.'
   },
   quickUnlock: {
     id: 'cboard.components.Settings.Navigation.quickUnlock',
@@ -61,6 +62,16 @@ export default defineMessages({
   },
   bigScrollSecondary: {
     id: 'cboard.components.Settings.Navigation.bigScrollSecondary',
-    defaultMessage: 'Shows big scroll buttons on top and bottom of the boards'
+    defaultMessage:
+      'Shows big scroll buttons. Select the desired style in navigation buttons style section'
+  },
+  navigationButtonsStyle: {
+    id: 'cboard.components.Settings.Navigation.navigationButtonsStyle',
+    defaultMessage: 'Navigation buttons style'
+  },
+  navigationButtonsStyleSecondary: {
+    id: 'cboard.components.Settings.Navigation.navigationButtonsStyleSecondary',
+    defaultMessage:
+      'Select the style of the context-aware back and big scroll buttons. On the sides is recommended for eye trackers'
   }
 });
diff --git a/src/components/Settings/Navigation/Navigation.test.js b/src/components/Settings/Navigation/Navigation.test.js
index f84eff56b..e00140ed4 100644
--- a/src/components/Settings/Navigation/Navigation.test.js
+++ b/src/components/Settings/Navigation/Navigation.test.js
@@ -3,6 +3,7 @@ import { shallowMatchSnapshot } from '../../../common/test_utils';
 import { shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
 import Navigation from './Navigation.component';
+import { NAVIGATION_BUTTONS_STYLE_SIDES } from './Navigation.constants';
 
 jest.mock('./Navigation.messages', () => {
   return {
@@ -26,6 +27,7 @@ const INITIAL_NAVIGATION_SETTINGS = {
   shareShowActive: false,
   caBackButtonActive: false,
   bigScrollButtonsActive: false,
+  navigationButtonsStyle: NAVIGATION_BUTTONS_STYLE_SIDES,
   quickUnlockActive: false,
   removeOutputActive: false,
   vocalizeFolders: false
diff --git a/src/components/Settings/Navigation/__snapshots__/Navigation.test.js.snap b/src/components/Settings/Navigation/__snapshots__/Navigation.test.js.snap
index ec506ad5b..f41cc1964 100644
--- a/src/components/Settings/Navigation/__snapshots__/Navigation.test.js.snap
+++ b/src/components/Settings/Navigation/__snapshots__/Navigation.test.js.snap
@@ -70,6 +70,49 @@ exports[`Navigation tests default renderer 1`] = `
           </ForwardRef(WithStyles(ForwardRef(ListItemSecondaryAction)))>
         </ForwardRef(WithStyles(ForwardRef(ListItem)))>
         <ForwardRef(WithStyles(ForwardRef(Divider))) />
+        <ForwardRef(WithStyles(ForwardRef(ListItem)))
+          disabled={true}
+        >
+          <ForwardRef(WithStyles(ForwardRef(ListItemText)))
+            className="Display__ListItemText"
+            primary={
+              <FormattedMessage
+                values={Object {}}
+              />
+            }
+            secondary={
+              <FormattedMessage
+                values={Object {}}
+              />
+            }
+          />
+          <ForwardRef(WithStyles(ForwardRef(ListItemSecondaryAction)))
+            className="Display__Options"
+          >
+            <ForwardRef(WithStyles(ForwardRef(FormControl)))>
+              <ForwardRef(WithStyles(ForwardRef(Select)))
+                aria-label="navigationButtonsStyle"
+                disabled={true}
+                id="navigationButtonsStyle"
+                name="navigationButtonsStyle"
+                onChange={[Function]}
+                value="sides"
+              >
+                <ForwardRef(WithStyles(ForwardRef(MenuItem)))
+                  value="sides"
+                >
+                  On the sides
+                </ForwardRef(WithStyles(ForwardRef(MenuItem)))>
+                <ForwardRef(WithStyles(ForwardRef(MenuItem)))
+                  value="top"
+                >
+                  On top
+                </ForwardRef(WithStyles(ForwardRef(MenuItem)))>
+              </ForwardRef(WithStyles(ForwardRef(Select)))>
+            </ForwardRef(WithStyles(ForwardRef(FormControl)))>
+          </ForwardRef(WithStyles(ForwardRef(ListItemSecondaryAction)))>
+        </ForwardRef(WithStyles(ForwardRef(ListItem)))>
+        <ForwardRef(WithStyles(ForwardRef(Divider))) />
         <ForwardRef(WithStyles(ForwardRef(ListItem)))>
           <ForwardRef(WithStyles(ForwardRef(ListItemText)))
             className="Display__ListItemText"
@@ -270,6 +313,51 @@ exports[`Navigation tests switchs behavior 1`] = `
           </WithStyles(ForwardRef(ListItemSecondaryAction))>
         </WithStyles(ForwardRef(ListItem))>
         <WithStyles(ForwardRef(Divider)) />
+        <WithStyles(ForwardRef(ListItem))
+          disabled={true}
+        >
+          <WithStyles(ForwardRef(ListItemText))
+            className="Display__ListItemText"
+            primary={
+              <FormattedMessage
+                values={Object {}}
+              />
+            }
+            secondary={
+              <FormattedMessage
+                values={Object {}}
+              />
+            }
+          />
+          <WithStyles(ForwardRef(ListItemSecondaryAction))
+            className="Display__Options"
+          >
+            <WithStyles(ForwardRef(FormControl))>
+              <WithStyles(ForwardRef(Select))
+                aria-label="navigationButtonsStyle"
+                disabled={true}
+                id="navigationButtonsStyle"
+                name="navigationButtonsStyle"
+                onChange={[Function]}
+                value="sides"
+              >
+                <WithStyles(ForwardRef(MenuItem))
+                  key="sides"
+                  value="sides"
+                >
+                  On the sides
+                </WithStyles(ForwardRef(MenuItem))>
+                <WithStyles(ForwardRef(MenuItem))
+                  key="top"
+                  value="top"
+                >
+                  On top
+                </WithStyles(ForwardRef(MenuItem))>
+              </WithStyles(ForwardRef(Select))>
+            </WithStyles(ForwardRef(FormControl))>
+          </WithStyles(ForwardRef(ListItemSecondaryAction))>
+        </WithStyles(ForwardRef(ListItem))>
+        <WithStyles(ForwardRef(Divider)) />
         <WithStyles(ForwardRef(ListItem))>
           <WithStyles(ForwardRef(ListItemText))
             className="Display__ListItemText"
@@ -470,6 +558,51 @@ exports[`Navigation tests switchs behavior 2`] = `
           </WithStyles(ForwardRef(ListItemSecondaryAction))>
         </WithStyles(ForwardRef(ListItem))>
         <WithStyles(ForwardRef(Divider)) />
+        <WithStyles(ForwardRef(ListItem))
+          disabled={false}
+        >
+          <WithStyles(ForwardRef(ListItemText))
+            className="Display__ListItemText"
+            primary={
+              <FormattedMessage
+                values={Object {}}
+              />
+            }
+            secondary={
+              <FormattedMessage
+                values={Object {}}
+              />
+            }
+          />
+          <WithStyles(ForwardRef(ListItemSecondaryAction))
+            className="Display__Options"
+          >
+            <WithStyles(ForwardRef(FormControl))>
+              <WithStyles(ForwardRef(Select))
+                aria-label="navigationButtonsStyle"
+                disabled={false}
+                id="navigationButtonsStyle"
+                name="navigationButtonsStyle"
+                onChange={[Function]}
+                value="sides"
+              >
+                <WithStyles(ForwardRef(MenuItem))
+                  key="sides"
+                  value="sides"
+                >
+                  On the sides
+                </WithStyles(ForwardRef(MenuItem))>
+                <WithStyles(ForwardRef(MenuItem))
+                  key="top"
+                  value="top"
+                >
+                  On top
+                </WithStyles(ForwardRef(MenuItem))>
+              </WithStyles(ForwardRef(Select))>
+            </WithStyles(ForwardRef(FormControl))>
+          </WithStyles(ForwardRef(ListItemSecondaryAction))>
+        </WithStyles(ForwardRef(ListItem))>
+        <WithStyles(ForwardRef(Divider)) />
         <WithStyles(ForwardRef(ListItem))>
           <WithStyles(ForwardRef(ListItemText))
             className="Display__ListItemText"
diff --git a/src/translations/src/cboard.json b/src/translations/src/cboard.json
index 2a6916ff1..ab29b2ce9 100644
--- a/src/translations/src/cboard.json
+++ b/src/translations/src/cboard.json
@@ -392,7 +392,7 @@
   "cboard.components.Settings.Scanning.scannerAutomaticStrategy": "Scanner will iterate over elements, press any key to select them",
   "cboard.components.Settings.Navigation.navigation": "Navigation and Buttons",
   "cboard.components.Settings.Navigation.enable": "Enable context aware back button",
-  "cboard.components.Settings.Navigation.enableSecondary": "Shows big back buttons on top of the boards",
+  "cboard.components.Settings.Navigation.enableSecondary": "Shows big back buttons. Select the desired style in navigation buttons style section.",
   "cboard.components.Settings.Navigation.shareShow": "Show the share phrase button",
   "cboard.components.Settings.Navigation.shareShowSecondary": "Show a share button (next to backspace button) that allow to share the selected symbols.",
   "cboard.components.Settings.Navigation.quickUnlock": "Enable quick settings unlock",
@@ -404,7 +404,9 @@
   "cboard.components.Settings.Navigation.showLiveMode": "Use the Live Mode",
   "cboard.components.Settings.Navigation.showLiveModeSecondary": "Live mode allows you to write text directly into the output bar and quickly play the sound. It is intended for users that can write.",
   "cboard.components.Settings.Navigation.bigScroll": "Enable big scroll buttons",
-  "cboard.components.Settings.Navigation.bigScrollSecondary": "Shows big scroll buttons on top and bottom of the boards",
+  "cboard.components.Settings.Navigation.bigScrollSecondary": "Shows big scroll buttons. Select the desired style in navigation buttons style section",
+  "cboard.components.Settings.Navigation.navigationButtonsStyle": "Navigation buttons style",
+  "cboard.components.Settings.Navigation.navigationButtonsStyleSecondary": "Select the style of the context-aware back and big scroll buttons. On the sides is recommended for eye trackers",
   "cboard.components.Settings.Export.export": "Export",
   "cboard.components.Settings.Export.exportSingle": "Export a single board",
   "cboard.components.Settings.Export.exportSingleSecondary": "This option will export a single board you have from a list of boards. You can choose {cboardLink}, {link} or PDF formats.",