diff --git a/.changeset/poor-gifts-wait.md b/.changeset/poor-gifts-wait.md
new file mode 100644
index 00000000000..196fd9d954d
--- /dev/null
+++ b/.changeset/poor-gifts-wait.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed disjointed Navigation arrow on small screens
diff --git a/polaris-react/src/components/Navigation/Navigation.scss b/polaris-react/src/components/Navigation/Navigation.scss
index c800dcb44fd..00828130aaa 100644
--- a/polaris-react/src/components/Navigation/Navigation.scss
+++ b/polaris-react/src/components/Navigation/Navigation.scss
@@ -335,13 +335,17 @@ $nav-max-width: 360px;
     content: url('data:image/svg+xml,%3Csvg%20width%3D%2221%22%20height%3D%2228%22%20viewBox%3D%220%200%2021%2028%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M9%2024.75C9%2024.3358%209.33579%2024%209.75%2024V24C10.1642%2024%2010.5%2024.3358%2010.5%2024.75V28H9V24.75Z%22%20fill%3D%22%23B5B5B5%22%2F%3E%0A%3C%2Fsvg%3E');
 
     position: absolute;
-    top: 0;
+    top: var(--p-space-200);
     left: var(--p-space-200);
     width: 21px;
     height: 28px;
     border-radius: 0;
     opacity: 1;
     transition: opacity var(--p-motion-duration-150) var(--p-motion-ease-out);
+
+    @media #{$p-breakpoints-md-up} {
+      top: 0;
+    }
   }
 }