diff --git a/ui/pages/settings/index.scss b/ui/pages/settings/index.scss
index 21eb8b6e8..465b72f6d 100644
--- a/ui/pages/settings/index.scss
+++ b/ui/pages/settings/index.scss
@@ -216,17 +216,11 @@
   }
 
   &__back-button {
-    display: none;
+    margin-right: 8px;
 
-    @include screen-sm-max {
-      display: block;
-      margin-right: 8px;
-      cursor: pointer;
-
-      [dir='rtl'] & {
-        margin: 0 0 0 8px;
-        transform: rotate(180deg);
-      }
+    [dir='rtl'] & {
+      margin: 0 0 0 8px;
+      transform: rotate(180deg);
     }
   }
 
diff --git a/ui/pages/settings/settings.component.js b/ui/pages/settings/settings.component.js
index 14bf90b70..d16fe65d4 100644
--- a/ui/pages/settings/settings.component.js
+++ b/ui/pages/settings/settings.component.js
@@ -30,10 +30,9 @@ import AddNetwork from '../../components/app/add-network/add-network';
 import {
   Icon,
   ButtonIcon,
-  ICON_SIZES,
   ICON_NAMES,
 } from '../../components/component-library';
-import { Color } from '../../helpers/constants/design-system';
+import { Color, DISPLAY } from '../../helpers/constants/design-system';
 import SettingsTab from './settings-tab';
 import AlertsTab from './alerts-tab';
 import NetworksTab from './networks-tab';
@@ -137,10 +136,11 @@ class SettingsPage extends PureComponent {
             {currentPath !== SETTINGS_ROUTE && (
               <ButtonIcon
                 ariaLabel={t('back')}
-                name={ICON_NAMES.ARROW_LEFT}
-                size={ICON_SIZES.XL}
+                iconName={ICON_NAMES.ARROW_LEFT}
+                className="settings-page__back-button"
                 color={Color.iconDefault}
                 onClick={() => history.push(backRoute)}
+                display={[DISPLAY.FLEX, DISPLAY.NONE]}
               />
             )}