diff --git a/frontend/pages/app.ejs b/frontend/pages/app.ejs
index 4b56337..840b0df 100644
--- a/frontend/pages/app.ejs
+++ b/frontend/pages/app.ejs
@@ -2,6 +2,7 @@
 <html lang="en" style="overflow: hidden">
   <head>
     <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title><%= config.name %> - Riju</title>
     <link
       rel="stylesheet"
@@ -61,8 +62,8 @@
             </span>
           </button>
         </div>
-        <div style="height: 100%">
-          <div id="editor" style="height: 100%; margin: 12px; margin-left: 0"></div>
+        <div id="editor-wrapper">
+          <div id="editor" style="height: 100%; margin-top: 30px; margin-left: 0"></div>
         </div>
       </div>
       <div class="column" id="terminal" style="background: black; padding: 0">
diff --git a/frontend/pages/index.ejs b/frontend/pages/index.ejs
index fd38f97..03e0597 100644
--- a/frontend/pages/index.ejs
+++ b/frontend/pages/index.ejs
@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Riju</title>
     <link rel="stylesheet" href="/css/index.css" />
     <% if (analyticsTag) { %>
diff --git a/frontend/styles/app.css b/frontend/styles/app.css
index 511ba7b..a87cdd9 100644
--- a/frontend/styles/app.css
+++ b/frontend/styles/app.css
@@ -5,3 +5,13 @@
 #header .button {
   border-radius: 0;
 }
+
+@media (max-width: 767px) {
+  #editor-wrapper {
+    max-height: 50vh !important;
+  }
+}
+
+#editor-wrapper {
+  height: 100%;
+}
\ No newline at end of file
