diff --git a/src/Element/Modal.tsx b/src/Element/Modal.tsx
index 0fefb8776..9ae755730 100644
--- a/src/Element/Modal.tsx
+++ b/src/Element/Modal.tsx
@@ -3,12 +3,14 @@ import { useEffect } from "react"
 import * as React from "react";
 
 export interface ModalProps {
+    className?: string
     onClose?: () => void,
     children: React.ReactNode
 }
 
 export default function Modal(props: ModalProps) {
     const onClose = props.onClose || (() => { });
+    const className = props.className || ''
 
     useEffect(() => {
         document.body.classList.add("scroll-lock");
@@ -16,7 +18,7 @@ export default function Modal(props: ModalProps) {
     }, []);
 
     return (
-        <div className="modal" onClick={(e) => { e.stopPropagation(); onClose(); }}>
+        <div className={`modal ${className}`} onClick={(e) => { e.stopPropagation(); onClose(); }}>
           <div className="modal-body">
             {props.children}
           </div>
diff --git a/src/Element/NoteCreator.css b/src/Element/NoteCreator.css
index b3f675f0d..e23ef17d7 100644
--- a/src/Element/NoteCreator.css
+++ b/src/Element/NoteCreator.css
@@ -76,3 +76,12 @@
     right: 25vw;
   }
 }
+
+@media (max-width: 720px) {
+  .note-creator-modal {
+    align-items: flex-start;
+  }
+  .note-creator-modal .modal-body {
+    margin-top: 20vh;
+  }
+}
diff --git a/src/Element/NoteCreator.tsx b/src/Element/NoteCreator.tsx
index 48acc69fc..41f51fc32 100644
--- a/src/Element/NoteCreator.tsx
+++ b/src/Element/NoteCreator.tsx
@@ -90,7 +90,7 @@ export function NoteCreator(props: NoteCreatorProps) {
           <Plus />
         </button>
         {show && (
-          <Modal onClose={props.onClose}>
+          <Modal className="note-creator-modal" onClose={props.onClose}>
             <div className={`flex note-creator ${props.replyTo ? 'note-reply' : ''}`}>
                 <div className="flex f-col mr10 f-grow">
                     <Textarea