diff --git a/resources/assets/scripts/components/server/subpages/ConsolePage.vue b/resources/assets/scripts/components/server/subpages/ConsolePage.vue
index e9787f38a..84f9a68e3 100644
--- a/resources/assets/scripts/components/server/subpages/ConsolePage.vue
+++ b/resources/assets/scripts/components/server/subpages/ConsolePage.vue
@@ -1,10 +1,19 @@
 <template>
     <div>
         <div class="text-xs font-mono">
-            <div class="rounded-t p-2 bg-black text-grey-lightest overflow-scroll" style="min-height: 16rem;max-height:32rem;">
-                <span class="block" v-for="line in console">{{line}}</span>
+            <div class="rounded-t p-2 bg-black overflow-scroll w-full" style="min-height: 16rem;max-height:32rem;">
+                <div class="mb-2">
+                    <span class="block text-grey-light" v-for="line in console" v-text="line"></span>
+                </div>
+            </div>
+            <div class="rounded-b bg-grey-darkest text-white flex">
+                <div class="flex-no-shrink p-2">
+                    <span class="font-bold">$</span>
+                </div>
+                <div class="w-full">
+                    <input type="text" aria-label="Send console command" class="bg-transparent text-white p-2 pl-0 w-full" placeholder="enter command and press enter to send">
+                </div>
             </div>
-            <div class="rounded-b p-2 bg-grey-darkest text-white">$</div>
         </div>
     </div>
 </template>
@@ -18,11 +27,5 @@
         computed: {
             ...mapState('server', ['console']),
         },
-
-        data: function () {
-            return {
-                lines: [],
-            };
-        }
     };
 </script>