diff --git a/octoprint_klipper/static/css/klipper.css b/octoprint_klipper/static/css/klipper.css
index 4a2cc09..39e25f5 100644
--- a/octoprint_klipper/static/css/klipper.css
+++ b/octoprint_klipper/static/css/klipper.css
@@ -80,11 +80,6 @@ ul#klipper-settings {
    margin: 5px;
 }
 
-#plugin-klipper-config {
-   height: 100%;
-   font-family: monospace;
-}
-
 #tab_plugin_klipper_main .row-fluid {
    display: flex;
    flex: row wrap;
@@ -117,75 +112,63 @@ ul#klipper-settings {
    height: 100%;
 }
 
-#settings_plugin_klipper form {
+div#settings_plugin_klipper form {
    margin: 0px;
    height: 100%;
 }
 
-#settings_plugin_klipper form .tab-content {
+div#settings_plugin_klipper form .tab-content {
    height: calc(100% - 40px);
    overflow: auto;
 }
 
-#settings_plugin_klipper form .tab-content .tab-pane {
+div#settings_plugin_klipper div.tab-content div#conf.tab-pane {
    height: 100%;
 }
 
-/*conf editor*/
-div#settings_plugin_klipper.tab-pane.active form.form-horizontal div.tab-content div#conf.tab-pane.active div.control-group {
-   margin-bottom: 0px;
+div#settings_plugin_klipper div.tab-content div#conf.tab-pane div.control-group {
    height: 100%;
+   margin: 0;
+   display: flex;
+   flex-direction: column;
 }
 
-div#settings_plugin_klipper.tab-pane.active form.form-horizontal div.tab-content div#conf.tab-pane.active div.control-group .editor-controls{
+div#settings_plugin_klipper div.tab-content div#conf.tab-pane div.control-group div.editor-controls{
    margin-bottom: 0px;
    height: 26px;
 }
 
-div#settings_plugin_klipper.tab-pane.active form.form-horizontal div.tab-content div#conf.tab-pane.active div.control-group div.conf-editor {
+div#settings_plugin_klipper div.tab-content div#conf.tab-pane div.control-group div.conf-editor {
+   height: 95%;
    height: calc(100% - 28px);
-   width: 100%;
+   width: 99%;
+   width: calc(100% - 4px);
    padding-top: 2px;
+   flex: 1 1;
+   overflow: auto;
 }
 
-/*UIcustomizer fix for responsiveMode*/
-body.UICResponsiveMode #settings_dialog_content {
-   width: 100%;
-   width: calc(100% - 30px);
-   height: 97%;
-   height: calc(100% - 35px);
-   margin-right: -18px;
-   margin-top: 50px;
+div#settings_plugin_klipper div.tab-content div#conf.tab-pane div.control-group div.conf-editor div#plugin-klipper-config {
+   font-family: monospace;
+   overflow: auto;
 }
 
-body.UICResponsiveMode div#settings_plugin_klipper form.form-horizontal div.tab-content div.tab-pane div.control-group.row-fluid.UICRemoveFluidRow {
-   height: auto;
-}
-
-div#settings_plugin_klipper.tab-pane.active form.form-horizontal div.tab-content div#conf.tab-pane.active div.control-group div.conf-editor div#plugin-klipper-config {
-   position: relative;
-   top: 0;
-   right: 0;
-   bottom: 0;
-   left: 0;
-}
-
-div#settings_plugin_klipper.tab-pane.active form.form-horizontal div.tab-content div#conf.tab-pane.active div.control-group button.btn.btn-small {
+div#settings_plugin_klipper.tab-pane.active form.form-horizontal div.tab-content div#conf.tab-pane.active button.btn.btn-small {
    width: 30%;
    display: inline-block;
    margin: 0px 2px 2px 2px;
 }
 
 /*checkboxes*/
-div#settings_plugin_klipper.tab-pane.active form.form-horizontal div.tab-content div.tab-pane.active div.control-group input.inline-checkbox {
+div#settings_plugin_klipper.tab-pane.active form.form-horizontal div.tab-content div.tab-pane.active input.inline-checkbox {
    vertical-align: -0.2em;
 }
 
-div#settings_plugin_klipper.tab-pane.active form.form-horizontal div.tab-content div.tab-pane.active div.control-group label.inline {
+div#settings_plugin_klipper.tab-pane.active form.form-horizontal div.tab-content div.tab-pane.active label.inline {
    display: inline;
 }
 
-div#settings_plugin_klipper.tab-pane.active form.form-horizontal div.tab-content div.tab-pane.active div.control-group div.controls input.controls-checkbox {
+div#settings_plugin_klipper.tab-pane.active form.form-horizontal div.tab-content div.tab-pane.active div.controls input.controls-checkbox {
    margin-top: 8px;
 }
 
diff --git a/octoprint_klipper/static/js/klipper_settings.js b/octoprint_klipper/static/js/klipper_settings.js
index a4ac6fa..8df7784 100644
--- a/octoprint_klipper/static/js/klipper_settings.js
+++ b/octoprint_klipper/static/js/klipper_settings.js
@@ -190,7 +190,7 @@ $(function() {
         editor.setTheme("ace/theme/monokai");
         editor.session.setMode("ace/mode/klipper_config");
         editor.setOptions({
-            hScrollBarAlwaysVisible: true,
+            hScrollBarAlwaysVisible: false,
             vScrollBarAlwaysVisible: true,
             autoScrollEditorIntoView: true,
             //maxLines: "Infinity"
diff --git a/octoprint_klipper/static/less/klipper.less b/octoprint_klipper/static/less/klipper.less
new file mode 100644
index 0000000..e591c9b
--- /dev/null
+++ b/octoprint_klipper/static/less/klipper.less
@@ -0,0 +1,254 @@
+.plugin-klipper-sidebar {
+   padding: 1px;
+   height: auto;
+   border: 1px solid #aaa;
+   width: 98%;
+   text-align: center;
+   word-break: break-all;
+   margin: auto;
+}
+
+li#navbar_plugin_klipper {
+   cursor: pointer;
+   max-width:360px;
+   max-height:80px;
+   word-break: break-all;
+}
+
+.plugin-klipper-sidebar a {
+   padding: 2px 2px;
+   text-align: center;
+   text-decoration: none;
+   display: inline-block;
+   cursor: pointer;
+}
+
+.plugin-klipper-sidebar a:hover, .plugin-klipper-sidebar a:active {
+   cursor: pointer;
+ }
+
+.plugin-klipper-log {
+   padding: 0px;
+   overflow-y: scroll;
+   height: 400px;
+   border: 1px solid #eee;
+   width: 100%;
+   word-break: break-all;
+}
+
+.plugin-klipper-log .log-item {
+   margin: 3px auto 0 auto;
+   border: 1px solid #ddd;
+   border-radius: 3px;
+   background-color: #efefef;
+   color: #333;
+}
+
+.plugin-klipper-log .error {
+   background-color: #eebabb;
+}
+
+.plugin-klipper-log .log-item .ts {
+   display: inline-block;
+   width:  13%;
+   height: 100%;
+   vertical-align: top;
+   font-size: 0.8em;
+   padding: 0 0 0 5px;
+}
+
+.plugin-klipper-log .log-item .msg {
+   display: inline-block;
+   width: 84%;
+   height: 100%;
+}
+
+.clear-btn {
+   margin-top: 6px;
+   margin-bottom: 6px;
+}
+
+#level .controls {
+   padding: 1px;
+}
+
+ul#klipper-settings {
+   margin: 0;
+}
+
+#klipper-settings a{
+   margin: 5px;
+}
+
+#plugin-klipper-config {
+   height: 100%;
+   font-family: monospace;
+}
+
+#tab_plugin_klipper_main .row-fluid {
+   display: flex;
+   flex: row wrap;
+   align-items: stretch;
+}
+
+@media all and (max-width: 940px) {
+   #tab_plugin_klipper_main .row-fluid {
+     /* On small screens, we are no longer using row direction but column */
+     flex-direction: column;
+   }
+ }
+
+#tab_plugin_klipper_main #left-side {
+   flex: 3 1;
+   padding-right: 10px;
+}
+
+#tab_plugin_klipper_main .span8 label {
+   float: left;
+}
+
+#tab_plugin_klipper_main #right-side {
+   flex: 1 1;
+   max-width: 200px;
+   min-width: 100px;
+}
+
+#settings_plugin_klipper {
+   height: 100%;
+}
+
+#settings_plugin_klipper form {
+   margin: 0px;
+   height: 100%;
+}
+
+#settings_plugin_klipper form .tab-content {
+   height: calc(100% - 40px);
+   overflow: auto;
+}
+
+#settings_plugin_klipper form .tab-content .tab-pane {
+   height: 100%;
+}
+
+/*conf editor*/
+div#settings_plugin_klipper.tab-pane.active form.form-horizontal div.tab-content div#conf.tab-pane.active div.control-group {
+   margin-bottom: 0px;
+   height: 100%;
+}
+
+div#settings_plugin_klipper.tab-pane.active form.form-horizontal div.tab-content div#conf.tab-pane.active div.control-group .editor-controls{
+   margin-bottom: 0px;
+   height: 26px;
+}
+
+div#settings_plugin_klipper.tab-pane.active form.form-horizontal div.tab-content div#conf.tab-pane.active div.control-group div.conf-editor {
+   height: 95%;
+   height: calc(100% - 28px);
+   width: 100%;
+   padding-top: 2px;
+}
+
+/*UIcustomizer fix for responsiveMode*/
+body.UICResponsiveMode #settings_dialog_content {
+   width: 100%;
+   width: calc(100% - 30px);
+   height: 97%;
+   height: calc(100% - 35px);
+   margin-right: -18px;
+   margin-top: 50px;
+}
+
+body.UICResponsiveMode div#settings_plugin_klipper form.form-horizontal div.tab-content div.tab-pane div.control-group.row-fluid.UICRemoveFluidRow {
+   height: auto;
+}
+
+div#settings_plugin_klipper.tab-pane.active form.form-horizontal div.tab-content div#conf.tab-pane.active div.control-group div.conf-editor div#plugin-klipper-config {
+   position: relative;
+   top: 0;
+   right: 0;
+   bottom: 0;
+   left: 0;
+}
+
+div#settings_plugin_klipper.tab-pane.active form.form-horizontal div.tab-content div#conf.tab-pane.active div.control-group button.btn.btn-small {
+   width: 30%;
+   display: inline-block;
+   margin: 0px 2px 2px 2px;
+}
+
+/*checkboxes*/
+div#settings_plugin_klipper.tab-pane.active form.form-horizontal div.tab-content div.tab-pane.active div.control-group input.inline-checkbox {
+   vertical-align: -0.2em;
+}
+
+div#settings_plugin_klipper.tab-pane.active form.form-horizontal div.tab-content div.tab-pane.active div.control-group label.inline {
+   display: inline;
+}
+
+div#settings_plugin_klipper.tab-pane.active form.form-horizontal div.tab-content div.tab-pane.active div.control-group div.controls input.controls-checkbox {
+   margin-top: 8px;
+}
+
+/*macros*/
+div#settings_plugin_klipper.tab-pane.active form.form-horizontal div.tab-content div#macros.tab-pane.active div div#item.control-group label.control-label {
+   width: 80px;
+}
+
+#macros #item.control-group {
+   margin-bottom: 2px;
+   border: 2px solid #ccc;
+   border-radius: 3px;
+   background-color: #eeeeee;
+   color: #333;
+   padding-bottom: 2px;
+   padding-top: 2px;
+}
+
+#klipper_graph_dialog {
+   width: 1050px;
+}
+
+#klipper_graph_dialog .full-sized-box{
+   width: 1000px;
+   margin: 0 auto;
+}
+
+#klipper_graph_dialog form {
+   margin: 0;
+}
+
+#klipper_graph_dialog select {
+   width: auto;
+}
+
+#klipper_graph_dialog .graph-footer {
+   bottom:0;
+}
+
+#klipper_graph_dialog input {
+   display: inline-block;
+}
+
+#klipper_graph_dialog .status-label {
+   display: block;
+   position: absolute;
+   margin: 5px 0 0 10px;
+}
+
+#klipper_graph_dialog .fill-checkbox {
+   display: block;
+   position: absolute;
+   top: 0%;
+   left: 50%;
+}
+
+#klipper_graph_dialog .help-inline {
+   display: block;
+   position: absolute;
+   top: 0px;
+}
+
+#klipper_graph_canvas {
+   margin-top: 15px;
+}
diff --git a/octoprint_klipper/templates/klipper_settings.jinja2 b/octoprint_klipper/templates/klipper_settings.jinja2
index 9ecb044..9371e70 100644
--- a/octoprint_klipper/templates/klipper_settings.jinja2
+++ b/octoprint_klipper/templates/klipper_settings.jinja2
@@ -106,7 +106,7 @@
     </div>
     <div class="control-group">
       <div class="controls">
-        <a href='#' data-bind='click: addMacro' class="fa fa-plus-circle"></a> {{ _('Add Macro') }}
+        <a href='#' data-bind='click: addMacro' title="{{ _('Add Macro') }}" class="fa fa-plus-circle"></a> {{ _('Add Macro') }}
       </div>
     </div>
     <div class="control-group">
@@ -197,7 +197,7 @@
     </div>
     <div class="control-group">
       <div class="controls">
-        <a href='#' data-bind="click: addProbePoint" class="fa fa-plus-circle"></a> {{ _('Add Point') }}
+        <a href='#' data-bind="click: addProbePoint" title="{{ _('Add Point') }}" class="fa fa-plus-circle"></a> {{ _('Add Point') }}
       </div>
     </div>
   </div>
@@ -209,16 +209,17 @@
       <script src="plugin/klipper/static/js/lib/ace/mode-klipper_config.js" type="text/javascript"></script>
       <div class="editor-controls">
         <button class="btn btn-small" data-bind="click: loadLastSession"
-          title="Reloads the last changes">
+          title="{{ _('Reload last changes') }}">
           <i class="fas fa-redo"></i> {{ _('Reload last changes') }}
         </button>
-        <button class="btn btn-small" data-bind='click: reloadFromFile'>
+        <button class="btn btn-small" data-bind='click: reloadFromFile'
+          title="{{ _('Reload from file') }}">
           <i class="fas fa-upload"></i> {{ _('Reload from file') }}
         </button>
         <label class="inline"><input class="inline-checkbox" type="checkbox" data-bind="checked: settings.settings.plugins.klipper.configuration.parse_check"> {{ _('Check parsing on save') }}</label>
         &nbsp;&nbsp;
-        <a href='#' data-bind="click: minusFontsize" class="fas fa-search-minus"></a>
-        <a href='#' data-bind="click: plusFontsize" class="fas fa-search-plus"></a>
+        <a href='#' data-bind="click: minusFontsize" title="{{ _('Decrease Fontsize') }}" class="fas fa-search-minus"></a>
+        <a href='#' data-bind="click: plusFontsize" title="{{ _('Increase Fontsize') }}" class="fas fa-search-plus"></a>
       </div>
       <div class="conf-editor">
         <input id="hdnLoadKlipperConfig" type="hidden" data-bind="value: configBound(settings.settings.plugins.klipper.config)" />