diff --git a/pkg/grid/src/components/icons/LeftArrow.tsx b/pkg/grid/src/components/icons/LeftArrow.tsx
new file mode 100644
index 0000000000..b6a98f8b5e
--- /dev/null
+++ b/pkg/grid/src/components/icons/LeftArrow.tsx
@@ -0,0 +1,15 @@
+import React, { HTMLAttributes } from 'react';
+
+type LeftArrowProps = HTMLAttributes<SVGSVGElement>;
+
+export const LeftArrow = (props: LeftArrowProps) => (
+  <svg viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M16 8.5H1M1 8.5L7.5 2M1 8.5L7.5 15"
+      className="stroke-current"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
diff --git a/pkg/grid/src/nav/SystemPreferences.tsx b/pkg/grid/src/nav/SystemPreferences.tsx
index 7cd3f724f6..015e9edb47 100644
--- a/pkg/grid/src/nav/SystemPreferences.tsx
+++ b/pkg/grid/src/nav/SystemPreferences.tsx
@@ -11,6 +11,8 @@ import { useCharges } from '../state/docket';
 import { AppPrefs } from './preferences/AppPrefs';
 import { DocketImage } from '../components/DocketImage';
 import { ErrorAlert } from '../components/ErrorAlert';
+import { useMedia } from '../logic/useMedia';
+import { LeftArrow } from '../components/icons/LeftArrow';
 
 interface SystemPreferencesSectionProps {
   url: string;
@@ -43,9 +45,15 @@ export const SystemPreferences = (props: RouteComponentProps<{ submenu: string }
     `${match.url}/:submenu/:desk?`
   );
   const charges = useCharges();
+  const isMobile = useMedia('(max-width: 639px)');
+  const settingsPath = isMobile ? `${match.url}/:submenu` : '/';
 
   const matchSub = useCallback(
     (target: string, desk?: string) => {
+      if (isMobile) {
+        return false;
+      }
+
       if (!subMatch && target === 'notifications') {
         return true;
       }
@@ -66,54 +74,68 @@ export const SystemPreferences = (props: RouteComponentProps<{ submenu: string }
       FallbackComponent={ErrorAlert}
       onReset={() => history.push('/leap/system-preferences')}
     >
-      <div className="flex h-full overflow-y-auto">
-        <aside className="flex-none self-start min-w-60 py-8 font-semibold border-r-2 border-gray-50">
-          <nav className="px-6">
-            <ul className="space-y-1">
-              <SystemPreferencesSection
-                url={subUrl('notifications')}
-                active={matchSub('notifications')}
-              >
-                <img className="w-8 h-8 mr-3" src={notificationsSVG} alt="" />
-                Notifications
-              </SystemPreferencesSection>
-              <SystemPreferencesSection
-                url={subUrl('system-updates')}
-                active={matchSub('system-updates')}
-              >
-                <img className="w-8 h-8 mr-3" src={systemUpdatesSVG} alt="" />
-                System Updates
-              </SystemPreferencesSection>
-              <SystemPreferencesSection url={subUrl('interface')} active={matchSub('interface')}>
-                <img className="w-8 h-8 mr-3" src={systemUpdatesSVG} alt="" />
-                Interface Settings
-              </SystemPreferencesSection>
-            </ul>
-          </nav>
-          <hr className="my-4 border-t-2 border-gray-50" />
-          <nav className="px-6">
-            <ul className="space-y-1">
-              {Object.values(charges).map((charge) => (
+      <div className="sm:flex h-full overflow-y-auto">
+        <Route exact={isMobile} path={match.url}>
+          <aside className="flex-none self-start w-full sm:w-auto min-w-60 py-4 sm:py-8 font-semibold border-r-2 border-gray-50">
+            <nav className="px-2 sm:px-6">
+              <h2 className="sm:hidden h3 mb-4 px-2">System Preferences</h2>
+              <ul className="space-y-1">
                 <SystemPreferencesSection
-                  key={charge.desk}
-                  url={subUrl(`apps/${charge.desk}`)}
-                  active={matchSub('apps', charge.desk)}
+                  url={subUrl('notifications')}
+                  active={matchSub('notifications')}
                 >
-                  <DocketImage size="small" className="mr-3" {...charge} />
-                  {charge.title}
+                  <img className="w-8 h-8 mr-3" src={notificationsSVG} alt="" />
+                  Notifications
                 </SystemPreferencesSection>
-              ))}
-            </ul>
-          </nav>
-        </aside>
-        <section className="flex-1 min-h-[600px] p-8 text-black">
-          <Switch>
-            <Route path={`${match.url}/apps/:desk`} component={AppPrefs} />
-            <Route path={`${match.url}/system-updates`} component={SystemUpdatePrefs} />
-            <Route path={`${match.url}/interface`} component={InterfacePrefs} />
-            <Route path={[`${match.url}/notifications`, match.url]} component={NotificationPrefs} />
-          </Switch>
-        </section>
+                <SystemPreferencesSection
+                  url={subUrl('system-updates')}
+                  active={matchSub('system-updates')}
+                >
+                  <img className="w-8 h-8 mr-3" src={systemUpdatesSVG} alt="" />
+                  System Updates
+                </SystemPreferencesSection>
+                <SystemPreferencesSection url={subUrl('interface')} active={matchSub('interface')}>
+                  <img className="w-8 h-8 mr-3" src={systemUpdatesSVG} alt="" />
+                  Interface Settings
+                </SystemPreferencesSection>
+              </ul>
+            </nav>
+            <hr className="my-4 border-t-2 border-gray-50" />
+            <nav className="px-2 sm:px-6">
+              <ul className="space-y-1">
+                {Object.values(charges).map((charge) => (
+                  <SystemPreferencesSection
+                    key={charge.desk}
+                    url={subUrl(`apps/${charge.desk}`)}
+                    active={matchSub('apps', charge.desk)}
+                  >
+                    <DocketImage size="small" className="mr-3" {...charge} />
+                    {charge.title}
+                  </SystemPreferencesSection>
+                ))}
+              </ul>
+            </nav>
+          </aside>
+        </Route>
+        <Route path={settingsPath}>
+          <section className="flex-1 flex flex-col min-h-[60vh] p-4 sm:p-8 text-black">
+            <Switch>
+              <Route path={`${match.url}/apps/:desk`} component={AppPrefs} />
+              <Route path={`${match.url}/system-updates`} component={SystemUpdatePrefs} />
+              <Route path={`${match.url}/interface`} component={InterfacePrefs} />
+              <Route
+                path={[`${match.url}/notifications`, match.url]}
+                component={NotificationPrefs}
+              />
+            </Switch>
+            <Link
+              to={match.url}
+              className="inline-flex sm:hidden items-center sm:none mt-auto pt-4 h4 text-gray-400"
+            >
+              <LeftArrow className="w-3 h-3 mr-2" /> Back
+            </Link>
+          </section>
+        </Route>
       </div>
     </ErrorBoundary>
   );