diff --git a/package.json b/package.json
index 5907cf26d1..e03309ee7f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "matters-web",
-  "version": "3.17.0",
+  "version": "3.17.1",
   "description": "codebase of Matters' website",
   "sideEffects": false,
   "author": "Matters <hi@matters.news>",
diff --git a/src/components/Editor/BottomBar/styles.css b/src/components/Editor/BottomBar/styles.css
index 4df7bbc60f..f49ea0b0d4 100644
--- a/src/components/Editor/BottomBar/styles.css
+++ b/src/components/Editor/BottomBar/styles.css
@@ -11,6 +11,14 @@
   border-radius: var(--spacing-x-tight) var(--spacing-x-tight) 0 0;
   box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
 
+  @media (--sm-up) {
+    @mixin border-top-grey;
+
+    position: sticky;
+    border-radius: 0;
+    box-shadow: none;
+  }
+
   & button {
     flex: 1 1 0;
     height: 100%;
diff --git a/src/views/ArticleDetail/EditMode/index.tsx b/src/views/ArticleDetail/EditMode/index.tsx
index 074b4520e3..015c65d7a6 100644
--- a/src/views/ArticleDetail/EditMode/index.tsx
+++ b/src/views/ArticleDetail/EditMode/index.tsx
@@ -25,7 +25,7 @@ interface EditModeProps {
 }
 
 const EditMode: React.FC<EditModeProps> = ({ article, onSaved }) => {
-  const isSmallUp = useResponsive('sm-up')
+  const isLargeUp = useResponsive('lg-up')
 
   // staging editing data
   const [cover, editCover] = useState<Asset>()
@@ -131,7 +131,7 @@ const EditMode: React.FC<EditModeProps> = ({ article, onSaved }) => {
         <Content article={article} />
       </section>
 
-      {!isSmallUp && (
+      {!isLargeUp && (
         <EditModeBottomBar
           article={article}
           cover={cover}
diff --git a/src/views/Me/DraftDetail/index.tsx b/src/views/Me/DraftDetail/index.tsx
index 570267eb39..32635147da 100644
--- a/src/views/Me/DraftDetail/index.tsx
+++ b/src/views/Me/DraftDetail/index.tsx
@@ -34,7 +34,7 @@ const EmptyLayout: React.FC = ({ children }) => (
 )
 
 const DraftDetail = () => {
-  const isSmallUp = useResponsive('sm-up')
+  const isLargeUp = useResponsive('lg-up')
   const router = useRouter()
   const id = getQuery({ router, key: 'draftId' })
 
@@ -144,7 +144,7 @@ const DraftDetail = () => {
         <Editor draft={draft} update={update} upload={upload} />
       </Layout.Spacing>
 
-      {!isSmallUp && <BottomBar draft={draft} />}
+      {!isLargeUp && <BottomBar draft={draft} />}
     </Layout.Main>
   )
 }