diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 99cce64b2c..86d99d7272 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -38,6 +38,7 @@ module.exports = {
       {
         quoteProps: "consistent",
         trailingComma: "all",
+        endOfLine: "auto",
       },
     ],
     // react-hooks
diff --git a/src/components/KeyboardToolbar/Arrow.tsx b/src/components/KeyboardToolbar/Arrow.tsx
index 9657d23e30..b364f79c5d 100644
--- a/src/components/KeyboardToolbar/Arrow.tsx
+++ b/src/components/KeyboardToolbar/Arrow.tsx
@@ -45,18 +45,23 @@ const arrowLine: ViewStyle = {
   height: 2,
   borderRadius: 1,
 };
-const arrowUpContainer: ViewStyle = {
-  marginHorizontal: 5,
+
+const arrowContainer: ViewStyle = {
   width: 30,
   height: 30,
   justifyContent: "center",
   alignItems: "center",
 };
+
 const styles = StyleSheet.create({
-  arrowUpContainer: arrowUpContainer,
+  arrowUpContainer: {
+    ...arrowContainer,
+    marginRight: 2.5,
+  },
   arrowDownContainer: {
-    ...arrowUpContainer,
+    ...arrowContainer,
     transform: [{ rotate: "180deg" }],
+    marginLeft: 2.5,
   },
   arrow: {
     width: 20,
diff --git a/src/components/KeyboardToolbar/index.tsx b/src/components/KeyboardToolbar/index.tsx
index de2e21b1d5..179284811d 100644
--- a/src/components/KeyboardToolbar/index.tsx
+++ b/src/components/KeyboardToolbar/index.tsx
@@ -64,6 +64,7 @@ const TEST_ID_KEYBOARD_TOOLBAR_DONE = `${TEST_ID_KEYBOARD_TOOLBAR}.done`;
 
 const KEYBOARD_TOOLBAR_HEIGHT = 42;
 const DEFAULT_OPACITY: HEX = "FF";
+const DEFAULT_BUTTON_PADDING = 8;
 
 /**
  * `KeyboardToolbar` is a component that is shown above the keyboard with `Prev`/`Next` and
@@ -156,7 +157,7 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
       <View {...rest} style={toolbarStyle} testID={TEST_ID_KEYBOARD_TOOLBAR}>
         {blur}
         {showArrows && (
-          <>
+          <View style={styles.arrowsButton}>
             <ButtonContainer
               accessibilityHint="Moves focus to the previous field"
               accessibilityLabel="Previous"
@@ -185,7 +186,7 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
                 type="next"
               />
             </ButtonContainer>
-          </>
+          </View>
         )}
 
         <View style={styles.flex} testID={TEST_ID_KEYBOARD_TOOLBAR_CONTENT}>
@@ -196,7 +197,6 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
             accessibilityHint="Closes the keyboard"
             accessibilityLabel="Done"
             rippleRadius={28}
-            style={styles.doneButtonContainer}
             testID={TEST_ID_KEYBOARD_TOOLBAR_DONE}
             theme={theme}
             onPress={onPressDone}
@@ -222,14 +222,15 @@ const styles = StyleSheet.create({
     width: "100%",
     flexDirection: "row",
     height: KEYBOARD_TOOLBAR_HEIGHT,
-    paddingHorizontal: 8,
+  },
+  arrowsButton: {
+    flexDirection: "row",
+    paddingHorizontal: DEFAULT_BUTTON_PADDING,
   },
   doneButton: {
     fontWeight: "600",
     fontSize: 15,
-  },
-  doneButtonContainer: {
-    marginRight: 8,
+    paddingHorizontal: DEFAULT_BUTTON_PADDING,
   },
 });