diff --git a/Flask/static/css/vnc-post.css b/Flask/static/css/vnc-post.css
new file mode 100644
index 0000000..6e22ed8
--- /dev/null
+++ b/Flask/static/css/vnc-post.css
@@ -0,0 +1,17 @@
+#console {
+    height: 100%;
+    width: 20%;
+    float: left;
+    resize: horizontal;
+    overflow: auto;
+}
+
+#vnc-container {
+    height: 100%;
+    width: 80%;
+    float: left;
+}
+
+.container {
+    height: 100%;
+}
\ No newline at end of file
diff --git a/Flask/templates/vnc_post.html b/Flask/templates/vnc_post.html
index 75dbaae..aaea0ac 100644
--- a/Flask/templates/vnc_post.html
+++ b/Flask/templates/vnc_post.html
@@ -6,19 +6,19 @@
     {% if not current_user.is_authenticated %}
         <button class="unselected" onclick="location.href = '/login';">login</button>
     {% else %}
+        <link rel="stylesheet" href="{{ url_for('static', filename='css/vnc-post.css') }}"/>
         <link rel="stylesheet" href="{{ url_for('static', filename='node_modules/xterm/css/xterm.css') }}"/>
         <script src="{{ url_for('static', filename='node_modules/xterm/lib/xterm.js') }}"></script>
         <script src="{{ url_for('static', filename='node_modules/xterm-addon-fit/lib/xterm-addon-fit.js') }}"></script>
         <script>
             document.getElementsByClassName("content")[0].style.padding = "0 0"
         </script>
-        <div style="height: 100%">
-
-            <div id="console" style="height: 100%; width: 20%; float:left;"></div>
-
-            <div style="height: 100%; width: 80%; float:left;">
+        <div class="container">
+            <div id="console"></div>
+            <div id="vnc-container">
                 <iframe src="/novnc/vnc.html?resize=scale&path=novnc/websockify&autoconnect=true&view_only"
-                        width="100%" height="100%" frameborder="0"></iframe>
+                        width="100%" height="100%" frameborder="0">
+                </iframe>
             </div>
         </div>