diff --git a/src/App.vue b/src/App.vue
index 53b3d0b00..81eee65f7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -55,6 +55,7 @@ import TheUpdateDialog from '@/components/TheUpdateDialog.vue'
 import TheConnectingDialog from '@/components/TheConnectingDialog.vue'
 import TheSelectPrinterDialog from '@/components/TheSelectPrinterDialog.vue'
 import TheEditor from '@/components/TheEditor.vue'
+import {panelToolbarHeight, topbarHeight, navigationItemHeight} from '@/store/variables'
 
 @Component({
     components: {
@@ -67,6 +68,9 @@ import TheEditor from '@/components/TheEditor.vue'
     }
 })
 export default class App extends Mixins(BaseMixin) {
+    panelToolbarHeight = panelToolbarHeight
+    topbarHeight = topbarHeight
+    navigationItemHeight = navigationItemHeight
 
     get title(): string {
         return this.$store.getters['getTitle']
@@ -136,7 +140,11 @@ export default class App extends Mixins(BaseMixin) {
         return {
             '--v-btn-text-primary': this.primaryTextColor,
             '--color-primary': this.primaryColor,
-            '--color-warning': this.warningColor
+            '--color-warning': this.warningColor,
+            '--panel-toolbar-icon-btn-width': panelToolbarHeight + 'px',
+            '--panel-toolbar-text-btn-height': panelToolbarHeight + 'px',
+            '--topbar-icon-btn-width': topbarHeight + 'px',
+            '--sidebar-menu-item-height': navigationItemHeight + 'px'
         }
     }
 
diff --git a/src/components/CommandHelpModal.vue b/src/components/CommandHelpModal.vue
index ac4adc969..2508c380e 100644
--- a/src/components/CommandHelpModal.vue
+++ b/src/components/CommandHelpModal.vue
@@ -8,7 +8,7 @@
     >
         <template #activator="{ on, attrs }">
             <template v-if="inToolbar">
-                <v-btn icon v-bind="attrs" v-on="on"><v-icon small>mdi-help</v-icon></v-btn>
+                <v-btn icon tile v-bind="attrs" v-on="on"><v-icon small>mdi-help</v-icon></v-btn>
             </template>
             <template v-else>
                 <v-btn
@@ -24,7 +24,7 @@
         <template #default>
             <panel :title="$t('Console.CommandList')" icon="mdi-help" card-class="command-help-dialog" :margin-bottom="false">
                 <template v-slot:buttons>
-                    <v-btn icon @click="isOpen = false"><v-icon>mdi-close-thick</v-icon></v-btn>
+                    <v-btn icon tile @click="isOpen = false"><v-icon>mdi-close-thick</v-icon></v-btn>
                 </template>
                 <v-card-title>
                     <v-row>
@@ -72,9 +72,11 @@ import {CommandHelp} from '@/store/printer/types'
 import {Mixins, Prop, Watch} from 'vue-property-decorator'
 import Component from 'vue-class-component'
 import Panel from '@/components/ui/Panel.vue'
+
 @Component({
     components: {Panel}
 })
+
 export default class CommandHelpModal extends Mixins(BaseMixin) {
     @Prop({ required: false, default: false }) isMini!: boolean;
     @Prop({ required: false, default: false }) inToolbar!: boolean;
diff --git a/src/components/TheConnectingDialog.vue b/src/components/TheConnectingDialog.vue
index e78c42b21..fdeec50fb 100644
--- a/src/components/TheConnectingDialog.vue
+++ b/src/components/TheConnectingDialog.vue
@@ -5,7 +5,7 @@
 <template>
     <v-dialog v-model="showDialog" persistent :width="400">
         <v-card dark>
-            <v-toolbar flat dense color="primary">
+            <v-toolbar flat dense>
                 <v-toolbar-title>
                     <span class="subheading">
                         <v-icon class="mdi mdi-connection" left></v-icon>
@@ -31,7 +31,7 @@
                     <v-divider class="mt-4 mb-5"></v-divider>
                 </template>
                 <div class="text-center">
-                    <v-btn @click="reconnect" color="primary">{{ $t("ConnectionDialog.TryAgain") }}</v-btn>
+                    <v-btn @click="reconnect" class="primary--text">{{ $t("ConnectionDialog.TryAgain") }}</v-btn>
                 </div>
             </v-card-text>
         </v-card>
diff --git a/src/components/TheEditor.vue b/src/components/TheEditor.vue
index b666397ce..e8eda9ca9 100644
--- a/src/components/TheEditor.vue
+++ b/src/components/TheEditor.vue
@@ -13,10 +13,10 @@
         >
             <panel card-class="editor-dialog" icon="mdi-file-document-edit-outline" :title="(filepath ? filepath.slice(1)+'/': '')+filename+' '+changed">
                 <template v-slot:buttons>
-                    <v-btn dark text href="https://www.klipper3d.org/Config_Reference.html" v-if="restartServiceName === 'klipper'" target="_blank" class="d-none d-md-flex"><v-icon small class="mr-1">mdi-help</v-icon>{{ $t('Editor.ConfigReference') }}</v-btn>
-                    <v-btn  v-if="isWriteable" text :color="restartServiceName === null ? 'primary' : ''" @click="save(null)" ><v-icon small class="mr-1">mdi-content-save</v-icon><span class="d-none d-sm-inline">{{ $t('Editor.SaveClose') }}</span></v-btn>
-                    <v-btn v-if="restartServiceName !== null" color="primary" text @click="save(restartServiceName)" class="d-none d-sm-flex"><v-icon small class="mr-1">mdi-restart</v-icon>{{ $t('Editor.SaveRestart') }}</v-btn>
-                    <v-btn icon @click="close"><v-icon>mdi-close-thick</v-icon></v-btn>
+                    <v-btn text tile href="https://www.klipper3d.org/Config_Reference.html" v-if="restartServiceName === 'klipper'" target="_blank" class="d-none d-md-flex"><v-icon small class="mr-1">mdi-help</v-icon>{{ $t('Editor.ConfigReference') }}</v-btn>
+                    <v-btn v-if="isWriteable" text tile :color="restartServiceName === null ? 'primary' : ''" @click="save(null)" ><v-icon small class="mr-1">mdi-content-save</v-icon><span class="d-none d-sm-inline">{{ $t('Editor.SaveClose') }}</span></v-btn>
+                    <v-btn v-if="restartServiceName !== null" color="primary" text tile  @click="save(restartServiceName)" class="d-none d-sm-flex"><v-icon small class="mr-1">mdi-restart</v-icon>{{ $t('Editor.SaveRestart') }}</v-btn>
+                    <v-btn icon tile @click="close"><v-icon>mdi-close-thick</v-icon></v-btn>
                 </template>
                 <v-card-text class="pa-0">
                     <overlay-scrollbars style="height: calc(var(--app-height) - 48px)" :options="{  }">
@@ -40,6 +40,7 @@
                     v-bind="attrs"
                     @click="cancelDownload"
                     style="min-width: auto;"
+                    tile
                 >
                     <v-icon class="0">mdi-close</v-icon>
                 </v-btn>
@@ -48,7 +49,7 @@
         <v-dialog v-model="dialogConfirmChange" persistent :width="600">
             <panel card-class="editor-confirm-change-dialog" icon="mdi-help-circle" :title="$t('Editor.UnsavedChanges')" :margin-bottom="false">
                 <template v-slot:buttons>
-                    <v-btn icon @click="dialogConfirmChange = false"><v-icon>mdi-close-thick</v-icon></v-btn>
+                    <v-btn icon tile @click="dialogConfirmChange = false"><v-icon>mdi-close-thick</v-icon></v-btn>
                 </template>
                 <v-card-text class="pt-3">
                     <v-row>
@@ -87,6 +88,7 @@ import Panel from '@/components/ui/Panel.vue'
 @Component({
     components: {Panel, Codemirror}
 })
+
 export default class TheEditor extends Mixins(BaseMixin) {
     private dialogConfirmChange = false
 
diff --git a/src/components/TheSelectPrinterDialog.vue b/src/components/TheSelectPrinterDialog.vue
index c90510b2c..5bdc3c49b 100644
--- a/src/components/TheSelectPrinterDialog.vue
+++ b/src/components/TheSelectPrinterDialog.vue
@@ -7,9 +7,9 @@
         <panel card-class="select-printer-dialog" icon="mdi-connection" :title="panelTitle" :margin-bottom="false" toolbar-color="primary">
             <template v-slot:buttons>
                 <template v-if="!isConnecting && !connectingFailed">
-                    <template v-if="dialogEditPrinter.bool"><v-btn text class="minwidth-0" @click="dialogEditPrinter.bool = false"><v-icon>mdi-close-thick</v-icon></v-btn></template>
-                    <template v-else-if="dialogAddPrinter.bool"><v-btn text class="minwidth-0" v-if="dialogAddPrinter.bool" @click="dialogAddPrinter.bool = false"><v-icon>mdi-close-thick</v-icon></v-btn></template>
-                    <template v-else-if="printers.length > 0"><v-btn text class="minwidth-0" @click="checkPrinters"><v-icon>mdi-sync</v-icon></v-btn></template>
+                    <template v-if="dialogEditPrinter.bool"><v-btn icon tile class="minwidth-0" @click="dialogEditPrinter.bool = false"><v-icon>mdi-close-thick</v-icon></v-btn></template>
+                    <template v-else-if="dialogAddPrinter.bool"><v-btn icon tile class="minwidth-0" v-if="dialogAddPrinter.bool" @click="dialogAddPrinter.bool = false"><v-icon>mdi-close-thick</v-icon></v-btn></template>
+                    <template v-else-if="printers.length > 0"><v-btn icon tile class="minwidth-0" @click="checkPrinters"><v-icon>mdi-sync</v-icon></v-btn></template>
                 </template>
             </template>
             <template v-if="isConnecting">
@@ -21,8 +21,8 @@
                 <v-card-text>
                     <p>{{ $t("SelectPrinterDialog.CannotConnectTo", {'host': parseInt(port) !== 80 ? hostname+":"+port : hostname}) }}</p>
                     <div class="text-center">
-                        <v-btn @click="switchToChangePrinter" color="white" outlined class="mr-3">{{ $t("SelectPrinterDialog.ChangePrinter") }}</v-btn>
-                        <v-btn @click="reconnect" color="primary">{{ $t("SelectPrinterDialog.TryAgain") }}</v-btn>
+                        <v-btn text @click="switchToChangePrinter" color="white" class="mr-3">{{ $t("SelectPrinterDialog.ChangePrinter") }}</v-btn>
+                        <v-btn text @click="reconnect" color="primary">{{ $t("SelectPrinterDialog.TryAgain") }}</v-btn>
                     </div>
                 </v-card-text>
             </template>
@@ -169,11 +169,13 @@ import BaseMixin from './mixins/base'
 import {FarmPrinterState} from '@/store/farm/printer/types'
 import Panel from '@/components/ui/Panel.vue'
 import { GuiRemoteprintersStatePrinter } from '@/store/gui/remoteprinters/types'
+
 @Component({
     components: {Panel}
 })
-export default class TheSelectPrinterDialog extends Mixins(BaseMixin) {
 
+export default class TheSelectPrinterDialog extends Mixins(BaseMixin) {
+    
     private dialogAddPrinter = {
         bool: false,
         hostname: '',
diff --git a/src/components/TheSettingsMenu.vue b/src/components/TheSettingsMenu.vue
index 84d98f170..f04ad89b7 100644
--- a/src/components/TheSettingsMenu.vue
+++ b/src/components/TheSettingsMenu.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <v-btn icon tile large @click="showSettings = true">
+        <v-btn icon tile @click="showSettings = true">
             <v-icon>mdi-cogs</v-icon>
         </v-btn>
         <v-dialog v-model="showSettings" width="900" persistent :fullscreen="isMobile" @keydown.esc="showSettings = false">
diff --git a/src/components/TheSidebar.vue b/src/components/TheSidebar.vue
index e2d2707fa..0b138e229 100644
--- a/src/components/TheSidebar.vue
+++ b/src/components/TheSidebar.vue
@@ -3,7 +3,7 @@
         height: 32px;
     }
     .small-list-item {
-        height: 48px;
+        height: var(--sidebar-menu-item-height);
     }
     .no-text-decoration {
         text-decoration: none;
@@ -30,7 +30,7 @@
 </style>
 
 <template>
-    <v-navigation-drawer v-model="naviDrawer" :src="sidebarBackground" :mini-variant="(navigationStyle === 'iconsOnly')" :key="navigationStyle" width="220px" clipped app> 
+    <v-navigation-drawer v-model="naviDrawer" :src="sidebarBackground" :mini-variant="(navigationStyle === 'iconsOnly')" :key="navigationStyle" :width="navigationWidth" clipped app> 
         <v-list class="pr-0 pt-0 ml-0">
             <v-list-item-group active-class="active-nav-item">
                 <template v-if="countPrinters">
@@ -82,6 +82,7 @@ import BaseMixin from '@/components/mixins/base'
 import {PrinterStateKlipperConfig} from '@/store/printer/types'
 import TheSelectPrinterDialog from '@/components/TheSelectPrinterDialog.vue'
 import AboutModal from '@/components/modals/AboutModal.vue'
+import {navigationWidth} from '@/store/variables'
 
 @Component({
     components: {
@@ -91,6 +92,8 @@ import AboutModal from '@/components/modals/AboutModal.vue'
 })
 
 export default class TheSidebarAlt extends Mixins(BaseMixin) {
+    navigationWidth = navigationWidth
+
     get naviDrawer(): boolean {
         return this.$store.state.naviDrawer
     }
diff --git a/src/components/TheThrottledStates.vue b/src/components/TheThrottledStates.vue
index 7c2bdd28d..6561018f6 100644
--- a/src/components/TheThrottledStates.vue
+++ b/src/components/TheThrottledStates.vue
@@ -3,14 +3,14 @@
 </style>
 
 <template>
-    <v-menu bottom left :offset-y="true" :close-on-content-click="false" v-model="showMenu" v-if="throttledStateFlags.length">
+    <v-menu bottom :offset-y="true" :close-on-content-click="false" v-model="showMenu" v-if="throttledStateFlags.length">
         <template v-slot:activator="{ on, attrs }">
-            <v-btn :color="currentFlags.length ? 'error' : 'warning'" icon class="mr-3" v-bind="attrs" v-on="on">
+            <v-btn :color="currentFlags.length ? 'error' : 'warning'" icon tile class="mr-3" v-bind="attrs" v-on="on">
                 <v-icon>mdi-raspberry-pi</v-icon>
             </v-btn>
         </template>
 
-        <v-list width="300">
+        <v-list min-width="300" max-width="600">
             <template v-if="currentFlags.length">
                 <v-subheader class="" style="height: auto;">{{ $t("App.ThrottledStates.HeadlineCurrentFlags") }}</v-subheader>
                 <v-list-item v-for="(flag) in currentFlags" :key="flag" two-line>
diff --git a/src/components/TheTopCornerMenu.vue b/src/components/TheTopCornerMenu.vue
index d6c4831f9..f7be284eb 100644
--- a/src/components/TheTopCornerMenu.vue
+++ b/src/components/TheTopCornerMenu.vue
@@ -8,7 +8,7 @@
     <div>
         <v-menu bottom left :offset-y="true" :close-on-content-click="false" v-model="showMenu">
             <template v-slot:activator="{ on, attrs }">
-                <v-btn icon tile large v-bind="attrs" v-on="on">
+                <v-btn icon tile v-bind="attrs" v-on="on">
                     <v-icon>mdi-power-standby</v-icon>
                 </v-btn>
             </template>
@@ -102,6 +102,7 @@ interface dialogPowerDeviceChange {
 
 @Component
 export default class TheTopCornerMenu extends Mixins(BaseMixin) {
+
     showMenu = false
     dialogPowerDeviceChange : dialogPowerDeviceChange = {
         show: false,
diff --git a/src/components/TheTopbar.vue b/src/components/TheTopbar.vue
index 9b810ef72..96d25b92c 100644
--- a/src/components/TheTopbar.vue
+++ b/src/components/TheTopbar.vue
@@ -1,13 +1,26 @@
+<style>
+    .topbar .v-toolbar__content {
+        padding-top: 0 !important;
+        padding-bottom: 0 !important;
+    }
+</style>
 <style scoped>
     .button-min-width-auto {
         min-width: auto !important;
     }
+    .topbar .v-btn {
+        height: 100% !important;
+        max-height: none;
+    }
+    .topbar .v-btn.v-btn--icon {
+        width: var(--topbar-icon-btn-width) !important;
+    }
 </style>
 
 <template>
     <div>
-        <v-app-bar app elevate-on-scroll height="48px" clipped-left>
-            <v-app-bar-nav-icon @click.stop="naviDrawer = !naviDrawer"></v-app-bar-nav-icon>
+        <v-app-bar app elevate-on-scroll :height="topbarHeight" class="topbar pa-0" clipped-left>
+            <v-app-bar-nav-icon tile @click.stop="naviDrawer = !naviDrawer"></v-app-bar-nav-icon>
             <router-link to="/">
                 <template v-if="sidebarLogo">
                     <img :src="sidebarLogo" style="height: 32px;" class="nav-logo ml-4 mr-1 d-none d-sm-flex" alt="Logo" />
@@ -21,7 +34,7 @@
             <v-spacer></v-spacer>
             <the-throttled-states></the-throttled-states>
             <input type="file" ref="fileUploadAndStart" :accept="validGcodeExtensions.join(', ')" style="display: none" @change="uploadAndStart" />
-            <v-btn tile large
+            <v-btn tile
                 :icon="$vuetify.breakpoint.smAndDown"
                 :text="$vuetify.breakpoint.mdAndUp"
                 color="primary"
@@ -32,7 +45,7 @@
                 @click="saveConfig">
                 <v-icon class="d-md-none">mdi-content-save</v-icon><span class="d-none d-md-inline">{{ $t("App.TopBar.SAVE_CONFIG") }}</span>
             </v-btn>
-            <v-btn tile large
+            <v-btn tile
                 :icon="$vuetify.breakpoint.smAndDown"
                 :text="$vuetify.breakpoint.mdAndUp"
                 color="primary"
@@ -42,7 +55,7 @@
                 @click="btnUploadAndStart">
                 <v-icon class="mr-md-2">mdi-file-upload</v-icon><span class="d-none d-md-inline">{{ $t("App.TopBar.UploadPrint") }}</span>
             </v-btn>
-            <v-btn tile large
+            <v-btn tile
                 :icon="$vuetify.breakpoint.smAndDown"
                 :text="$vuetify.breakpoint.mdAndUp"
                 color="error"
@@ -82,7 +95,7 @@
         <v-dialog v-model="showEmergencyStopDialog" width="400" :fullscreen="isMobile">
             <panel :title="$t('EmergencyStopDialog.EmergencyStop')" toolbar-color="error" card-class="emergency-stop-dialog" icon="mdi-alert-circle-outline" :margin-bottom="false">
                 <template v-slot:buttons>
-                    <v-btn icon @click="showEmergencyStopDialog = false"><v-icon>mdi-close-thick</v-icon></v-btn>
+                    <v-btn icon tile @click="showEmergencyStopDialog = false"><v-icon>mdi-close-thick</v-icon></v-btn>
                 </template>
                 <v-card-text>{{ $t('EmergencyStopDialog.AreYouSure') }}</v-card-text>
                 <v-card-actions>
@@ -108,6 +121,7 @@ import TheThrottledStates from '@/components/TheThrottledStates.vue'
 import Panel from '@/components/ui/Panel.vue'
 import PrinterSelector from '@/components/ui/PrinterSelector.vue'
 import MainsailLogo from '@/components/ui/MainsailLogo.vue'
+import {topbarHeight} from '@/store/variables'
 
 type uploadSnackbar = {
     status: boolean
@@ -133,6 +147,8 @@ type uploadSnackbar = {
     }
 })
 export default class TheTopbar extends Mixins(BaseMixin) {
+    topbarHeight = topbarHeight
+
     showEmergencyStopDialog = false
 
     uploadSnackbar: uploadSnackbar = {
diff --git a/src/components/TheUpdateDialog.vue b/src/components/TheUpdateDialog.vue
index 677097e83..24be90e20 100644
--- a/src/components/TheUpdateDialog.vue
+++ b/src/components/TheUpdateDialog.vue
@@ -81,7 +81,7 @@
                 </v-row>
                 <v-row>
                     <v-col class="text-center pt-5">
-                        <v-btn @click="close" :disabled="!complete" color="primary">{{ $t("App.UpdateDialog.Close")}}</v-btn>
+                        <v-btn text @click="close" :disabled="!complete" color="primary">{{ $t("App.UpdateDialog.Close")}}</v-btn>
                     </v-col>
                 </v-row>
             </v-card-text>
diff --git a/src/components/gcodeviewer/Viewer.vue b/src/components/gcodeviewer/Viewer.vue
index d9c63bd63..1c7ad2263 100644
--- a/src/components/gcodeviewer/Viewer.vue
+++ b/src/components/gcodeviewer/Viewer.vue
@@ -41,8 +41,19 @@
     <div>
         <panel :title="$t('GCodeViewer.Title')" icon="mdi-video-3d" card-class="gcode-viewer-panel">
             <template v-slot:buttons>
-                <v-btn text @click="reloadViewer" color="info" class="ml-3" v-show="reloadRequired">{{$t("GCodeViewer.ReloadRequired")}}</v-btn>
-                <v-btn icon @click="resetCamera"><v-icon>mdi-camera-retake</v-icon></v-btn>
+                <v-btn 
+                    :icon="$vuetify.breakpoint.xs"
+                    :text="$vuetify.breakpoint.smAndUp"
+                    tile
+                    @click="reloadViewer"
+                    color="info"
+                    class="ml-3"
+                    v-show="reloadRequired"
+                >
+                    <span v-show="$vuetify.breakpoint.smAndUp">{{$t("GCodeViewer.ReloadRequired")}}</span>
+                    <v-icon v-show="$vuetify.breakpoint.xs">mdi-reload-alert</v-icon>
+                </v-btn>
+                <v-btn icon tile @click="resetCamera"><v-icon>mdi-camera-retake</v-icon></v-btn>
             </template>
             <v-card-text>
                 <v-row>
@@ -175,6 +186,7 @@ let viewer: any = null
 })
 export default class Viewer extends Mixins(BaseMixin) {
     formatFilesize = formatFilesize
+
     private isBusy = false
     private loading = false
     private loadingPercent = 0
diff --git a/src/components/panels/FarmPrinterPanel.vue b/src/components/panels/FarmPrinterPanel.vue
index 41e26e5a3..42efc6a28 100644
--- a/src/components/panels/FarmPrinterPanel.vue
+++ b/src/components/panels/FarmPrinterPanel.vue
@@ -33,7 +33,7 @@
         :loading="printer.socket.isConnecting"
         :toolbar-color="isCurrentPrinter ? 'primary' : ''"
     >
-        <template v-slot:buttons v-show="printer.socket.isConnected && printer_webcams.length">
+        <template v-slot:buttons v-if="printer.socket.isConnected && printer_webcams.length">
             <v-menu :offset-y="true" title="Webcam">
                 <template v-slot:activator="{ on, attrs }">
                     <v-btn text v-bind="attrs" v-on="on">
diff --git a/src/components/panels/HistoryListPanel.vue b/src/components/panels/HistoryListPanel.vue
index 7216ef865..78e0202dd 100644
--- a/src/components/panels/HistoryListPanel.vue
+++ b/src/components/panels/HistoryListPanel.vue
@@ -21,10 +21,10 @@
                         ></v-text-field>
                     </v-col>
                     <v-col class="offset-4 col-4 d-flex align-center justify-end">
-                        <v-btn :title="$t('History.TitleRefreshHistory')" color="grey darken-3" class="px-2 minwidth-0 ml-3" @click="refreshHistory"><v-icon>mdi-refresh</v-icon></v-btn>
+                        <v-btn :title="$t('History.TitleRefreshHistory')" class="px-2 minwidth-0 ml-3" @click="refreshHistory"><v-icon>mdi-refresh</v-icon></v-btn>
                         <v-menu :offset-y="true" :close-on-content-click="false" title="Setup current list">
                             <template v-slot:activator="{ on, attrs }">
-                                <v-btn class="px-2 minwidth-0 ml-3" color="grey darken-3" :title="$t('History.TitleSettings')" v-bind="attrs" v-on="on"><v-icon>mdi-cog</v-icon></v-btn>
+                                <v-btn class="px-2 minwidth-0 ml-3" :title="$t('History.TitleSettings')" v-bind="attrs" v-on="on"><v-icon>mdi-cog</v-icon></v-btn>
                             </template>
                             <v-list>
                                 <template v-if="allPrintStatusArray.length">
@@ -139,10 +139,10 @@
                 </v-list-item>
             </v-list>
         </v-menu>
-        <v-dialog v-model="detailsDialog.boolShow" :max-width="600" persistent>
+        <v-dialog v-model="detailsDialog.boolShow" :max-width="600" persistent @keydown.esc="detailsDialog.boolShow = false">
             <panel :title="$t('History.JobDetails')" icon="mdi-update" card-class="history-detail-dialog" :margin-bottom="false">
                 <template v-slot:buttons>
-                    <v-btn icon @click="detailsDialog.boolShow = false"><v-icon>mdi-close-thick</v-icon></v-btn>
+                    <v-btn icon tile @click="detailsDialog.boolShow = false"><v-icon>mdi-close-thick</v-icon></v-btn>
                 </template>
                 <v-card-text class="px-0">
                     <overlay-scrollbars style="height: 350px;" class="px-6">
diff --git a/src/components/panels/KlipperWarningsPanel.vue b/src/components/panels/KlipperWarningsPanel.vue
index 1f0e341d8..6e991adcb 100644
--- a/src/components/panels/KlipperWarningsPanel.vue
+++ b/src/components/panels/KlipperWarningsPanel.vue
@@ -20,9 +20,9 @@
                 </v-col>
             </v-row>
         </v-card-text>
-        <v-divider class="mb-2 mt-3"></v-divider>
-        <v-card-actions class="px-4 pt-2 pb-4 text-center text-lg-left">
-            <v-btn small :href="apiUrl+'/server/files/klipper.log'" target="_blank" color="primary" class=""><v-icon class="mr-2" small>mdi-download</v-icon>{{ $t("Panels.KlipperWarningsPanel.DownloadLog") }}</v-btn>
+        <v-divider class="mt-3"></v-divider>
+        <v-card-actions class="justify-start">
+            <v-btn small :href="apiUrl+'/server/files/klipper.log'" target="_blank" class="ml-2 primary--text"><v-icon class="mr-2" small>mdi-download</v-icon>{{ $t("Panels.KlipperWarningsPanel.DownloadLog") }}</v-btn>
         </v-card-actions>
     </panel>
 </template>
diff --git a/src/components/panels/KlippyStatePanel.vue b/src/components/panels/KlippyStatePanel.vue
index b03db40cd..6fe7e42c3 100644
--- a/src/components/panels/KlippyStatePanel.vue
+++ b/src/components/panels/KlippyStatePanel.vue
@@ -6,13 +6,13 @@
         card-class="klippy-state-panel"
     >
         <template v-if="klippyIsConnected">
-            <v-card-text class="py-1">
+            <v-card-text class="py-1 mt-2">
                 <pre style="white-space: pre-wrap;">{{ klippy_message }}</pre>
             </v-card-text>
             <v-divider class="mt-2"></v-divider>
-            <v-card-actions class="py-4 px-5">
-                <v-btn small @click="restart" color="error" class=""><v-icon class="mr-sm-2">mdi-restart</v-icon>{{ $t('Panels.KlippyStatePanel.Restart') }}</v-btn>
-                <v-btn small @click="firmwareRestart" class="ml-4" color="error"><v-icon class="mr-sm-2">mdi-restart</v-icon>{{ $t('Panels.KlippyStatePanel.FirmwareRestart') }}</v-btn>
+            <v-card-actions class="justify-start">
+                <v-btn small @click="restart" class="ml-2 error--text"><v-icon class="mr-sm-2">mdi-restart</v-icon>{{ $t('Panels.KlippyStatePanel.Restart') }}</v-btn>
+                <v-btn small @click="firmwareRestart" class="ml-4 error--text"><v-icon class="mr-sm-2">mdi-restart</v-icon>{{ $t('Panels.KlippyStatePanel.FirmwareRestart') }}</v-btn>
             </v-card-actions>
         </template>
         <template v-else>
diff --git a/src/components/panels/Machine/ConfigFilesPanel.vue b/src/components/panels/Machine/ConfigFilesPanel.vue
index 631a21b85..fc0451871 100644
--- a/src/components/panels/Machine/ConfigFilesPanel.vue
+++ b/src/components/panels/Machine/ConfigFilesPanel.vue
@@ -24,7 +24,6 @@
                             v-for="button in filteredToolbarButtons"
                             v-bind:key="button.loadingName"
                             class="px-2 minwidth-0 ml-3"
-                            :color="button.color"
                             @click="button.click"
                             :loading="button.loadingName !== null && loadings.includes(button.loadingName)"
                         >
@@ -37,7 +36,7 @@
                         </v-btn>
                         <v-menu :offset-y="true" :title="$t('Machine.ConfigFilesPanel.SetupCurrentList')">
                             <template v-slot:activator="{ on, attrs }">
-                                <v-btn class="px-2 minwidth-0 ml-3" color="grey darken-3" v-bind="attrs" v-on="on"><v-icon>mdi-cog</v-icon></v-btn>
+                                <v-btn class="px-2 minwidth-0 ml-3" v-bind="attrs" v-on="on"><v-icon>mdi-cog</v-icon></v-btn>
                             </template>
                             <v-list>
                                 <v-list-item class="minHeight36">
@@ -156,10 +155,10 @@
             </v-list>
         </v-menu>
         <v-dialog v-model="dialogImage.show" hide-overlay fullscreen @keydown.esc="dialogImage.show = false; dialogImage.item.url = null; dialogImage.item.svg = null;" class="fill-height">
-            <panel :title="dialogImage.item.name" card-class="maschine-configfiles-imageviewer-dialog" toolbar-color="primary" style="position: relative;">
-                <template v-slot:buttons-left>
-                    <v-btn icon dark @click="dialogImage.show = false; dialogImage.item.url = null; dialogImage.item.svg = null;">
-                        <v-icon>mdi-close</v-icon>
+            <panel :title="dialogImage.item.name" card-class="maschine-configfiles-imageviewer-dialog" style="position: relative;">
+                <template v-slot:buttons>
+                    <v-btn icon tile @click="dialogImage.show = false; dialogImage.item.url = null; dialogImage.item.svg = null;">
+                        <v-icon>mdi-close-thick</v-icon>
                     </v-btn>
                 </template>
                 <div class="d-flex justify-center" style="max-height: calc(var(--app-height) - 64px); overflow: auto;">
@@ -171,7 +170,7 @@
         <v-dialog v-model="dialogCreateFile.show" max-width="400">
             <panel :title="$t('Machine.ConfigFilesPanel.CreateFile')" card-class="maschine-configfiles-create-file-dialog" :margin-bottom="false">
                 <template v-slot:buttons>
-                    <v-btn icon @click="dialogCreateFile.show = false"><v-icon>mdi-close-thick</v-icon></v-btn>
+                    <v-btn icon tile @click="dialogCreateFile.show = false"><v-icon>mdi-close-thick</v-icon></v-btn>
                 </template>
                 <v-card-text>
                     <v-text-field
@@ -192,7 +191,7 @@
         <v-dialog v-model="dialogRenameFile.show" max-width="400">
             <panel :title="$t('Machine.ConfigFilesPanel.RenameFile')" card-class="maschine-configfiles-rename-file-dialog" :margin-bottom="false">
                 <template v-slot:buttons>
-                    <v-btn icon @click="dialogRenameFile.show = false"><v-icon>mdi-close-thick</v-icon></v-btn>
+                    <v-btn icon tile @click="dialogRenameFile.show = false"><v-icon>mdi-close-thick</v-icon></v-btn>
                 </template>
                 <v-card-text>
                     <v-text-field
@@ -213,7 +212,7 @@
         <v-dialog v-model="dialogCreateDirectory.show" max-width="400">
             <panel :title="$t('Machine.ConfigFilesPanel.CreateDirectory')" card-class="maschine-configfiles-create-directory-dialog" :margin-bottom="false">
                 <template v-slot:buttons>
-                    <v-btn icon @click="dialogCreateDirectory.show = false"><v-icon>mdi-close-thick</v-icon></v-btn>
+                    <v-btn icon tile @click="dialogCreateDirectory.show = false"><v-icon>mdi-close-thick</v-icon></v-btn>
                 </template>
                 <v-card-text>
                     <v-text-field
@@ -234,7 +233,7 @@
         <v-dialog v-model="dialogRenameDirectory.show" max-width="400">
             <panel :title="$t('Machine.ConfigFilesPanel.RenameDirectory')" card-class="maschine-configfiles-rename-directory-dialog" :margin-bottom="false">
                 <template v-slot:buttons>
-                    <v-btn icon @click="dialogRenameDirectory.show = false"><v-icon>mdi-close-thick</v-icon></v-btn>
+                    <v-btn icon tile @click="dialogRenameDirectory.show = false"><v-icon>mdi-close-thick</v-icon></v-btn>
                 </template>
                 <v-card-text>
                     <v-text-field
@@ -255,7 +254,7 @@
         <v-dialog v-model="dialogDeleteDirectory.show" max-width="400">
             <panel :title="$t('Machine.ConfigFilesPanel.DeleteDirectory')" card-class="maschine-configfiles-delete-directory-dialog" :margin-bottom="false">
                 <template v-slot:buttons>
-                    <v-btn icon @click="dialogDeleteDirectory.show = false"><v-icon>mdi-close-thick</v-icon></v-btn>
+                    <v-btn icon tile @click="dialogDeleteDirectory.show = false"><v-icon>mdi-close-thick</v-icon></v-btn>
                 </template>
                 <v-card-text>
                     <p class="mb-0">{{ $t('Machine.ConfigFilesPanel.DeleteDirectoryQuestion', { name: dialogDeleteDirectory.item.filename } )}}</p>
diff --git a/src/components/panels/Machine/EndstopPanel.vue b/src/components/panels/Machine/EndstopPanel.vue
index d53c3cb67..5ed66e0f6 100644
--- a/src/components/panels/Machine/EndstopPanel.vue
+++ b/src/components/panels/Machine/EndstopPanel.vue
@@ -6,7 +6,7 @@
                     <v-row v-for="key of Object.keys(endstops)" v-bind:key="key">
                         <v-col class="py-1">
                             <label class="mt-1 d-inline-block">{{ $t('Machine.EndstopPanel.Endstop')}} <b>{{ key.toUpperCase() }}</b></label>
-                            <v-chip class="float-right" small :color="endstops[key] === 'open' ? 'green' : 'red' " text-color="white">
+                            <v-chip small label class="float-right" :color="endstops[key] === 'open' ? 'green' : 'red' " text-color="white">
                                 <template v-if="endstops[key] === 'open'">
                                     {{ $t('Machine.EndstopPanel.open')}}
                                 </template>
diff --git a/src/components/panels/Machine/LogfilesPanel.vue b/src/components/panels/Machine/LogfilesPanel.vue
index 22963e365..6e8551b56 100644
--- a/src/components/panels/Machine/LogfilesPanel.vue
+++ b/src/components/panels/Machine/LogfilesPanel.vue
@@ -4,10 +4,10 @@
             <v-container pb-0 px-0>
                 <v-row>
                     <v-col :class="'col-12' +(klipperState !== 'ready' ? 'col-md-6' : 'col-md-12')+ ''">
-                        <v-btn :href="this.apiUrl+'/server/files/klippy.log'" @click="downloadLog" block color="primary"><v-icon class="mr-2">mdi-download</v-icon>Klipper</v-btn>
+                        <v-btn :href="this.apiUrl+'/server/files/klippy.log'" @click="downloadLog" block class="primary--text"><v-icon class="mr-2">mdi-download</v-icon>Klipper</v-btn>
                     </v-col>
                     <v-col :class="'col-12 pt-0 ' +(klipperState !== 'ready' ? 'col-md-6 mt-md-3 ' : 'col-md-12')+ ''">
-                        <v-btn :href="this.apiUrl+'/server/files/moonraker.log'" @click="downloadLog" block color="primary"><v-icon class="mr-2">mdi-download</v-icon>Moonraker</v-btn>
+                        <v-btn :href="this.apiUrl+'/server/files/moonraker.log'" @click="downloadLog" block class="primary--text"><v-icon class="mr-2">mdi-download</v-icon>Moonraker</v-btn>
                     </v-col>
                 </v-row>
             </v-container>
diff --git a/src/components/panels/Machine/SystemPanel.vue b/src/components/panels/Machine/SystemPanel.vue
index f0901c4f8..abe5ec09c 100644
--- a/src/components/panels/Machine/SystemPanel.vue
+++ b/src/components/panels/Machine/SystemPanel.vue
@@ -100,7 +100,7 @@
         <v-dialog v-model="mcuDetailsDialog.bool" :max-width="400" :max-height="500" scrollable>
             <panel :title="mcuDetailsDialog.headline" icon="mdi-text-box-search-outline" card-class="machine-systemload-mcu-details-dialog" :margin-bottom="false">
                 <template v-slot:buttons>
-                    <v-btn icon @click="mcuDetailsDialog.bool = false"><v-icon>mdi-close-thick</v-icon></v-btn>
+                    <v-btn icon tile @click="mcuDetailsDialog.bool = false"><v-icon>mdi-close-thick</v-icon></v-btn>
                 </template>
                 <v-card-text class="pt-5 px-0">
                     <overlay-scrollbars style="height: 350px;" class="px-6">
@@ -135,7 +135,7 @@
         <v-dialog v-model="hostDetailsDialog.bool" :max-width="600" :max-height="500" scrollable>
             <panel :title="$t('Machine.SystemPanel.HostDetails')" icon="mdi-text-box-search-outline" card-class="machine-systemload-host-details-dialog" :margin-bottom="false">
                 <template v-slot:buttons>
-                    <v-btn icon @click="hostDetailsDialog.bool = false"><v-icon>mdi-close-thick</v-icon></v-btn>
+                    <v-btn icon tile @click="hostDetailsDialog.bool = false"><v-icon>mdi-close-thick</v-icon></v-btn>
                 </template>
                 <v-card-text class="pt-5 px-0">
                     <overlay-scrollbars style="height: 350px;" class="px-6">
diff --git a/src/components/panels/Machine/UpdatePanel.vue b/src/components/panels/Machine/UpdatePanel.vue
index aef9c4bd6..456470248 100644
--- a/src/components/panels/Machine/UpdatePanel.vue
+++ b/src/components/panels/Machine/UpdatePanel.vue
@@ -64,7 +64,7 @@
             <template v-slot:buttons>
                 <v-tooltip top>
                     <template v-slot:activator="{ on, attrs }">
-                        <v-btn icon color="primary" :ripple="true" :loading="loadings.includes('loadingBtnSyncUpdateManager')" :disabled="['printing', 'paused'].includes(printer_state)" @click="btnSync" v-bind="attrs" v-on="on"><v-icon>mdi-refresh</v-icon></v-btn>
+                        <v-btn icon tile color="primary" :ripple="true" :loading="loadings.includes('loadingBtnSyncUpdateManager')" :disabled="['printing', 'paused'].includes(printer_state)" @click="btnSync" v-bind="attrs" v-on="on"><v-icon>mdi-refresh</v-icon></v-btn>
                     </template>
                     <span>{{ $t('Machine.UpdatePanel.CheckForUpdates') }}</span>
                 </v-tooltip>
@@ -76,7 +76,7 @@
                         <v-row class="py-2">
                             <v-col class="pl-6">
                                 <strong>{{ 'name' in value ? value.name : key }}</strong><br />
-                                <span @click="openCommitsOverlay(key, value)" :class="getVersionClickable(value) ? 'primary--text cursor--pointer' : ''"><v-icon v-if="getVersionClickable(value)" small color="primary" class="mr-1">mdi mdi-information</v-icon>{{ getVersionOutput(value) }}</span>
+                                <span @click="openCommitsOverlay(key, value)" :class="getVersionClickable(value) ? 'primary--text cursor--pointer' : ''"><v-icon v-if="getVersionClickable(value)" small color="primary" class="mr-1">mdi-information</v-icon>{{ getVersionOutput(value) }}</span>
                             </v-col>
                             <v-col class="col-auto pr-6 text-right" align-self="center">
                                 <template v-if="getRecoveryOptions(value)">
@@ -160,7 +160,7 @@
                         <v-divider class="mb-0 mt-2 border-top-2" ></v-divider>
                         <v-row class="pt-3">
                             <v-col class="text-center">
-                                <v-btn color="primary" outlined small @click="updateAll" :disabled="['printing', 'paused'].includes(this.printer_state)">
+                                <v-btn text color="primary" small @click="updateAll" :disabled="['printing', 'paused'].includes(this.printer_state)">
                                     <v-icon left>mdi-progress-upload</v-icon>
                                     {{ $t('Machine.UpdatePanel.UpdateAll') }}
                                 </v-btn>
diff --git a/src/components/panels/MinSettingsPanel.vue b/src/components/panels/MinSettingsPanel.vue
index a5e6752c0..90d11d598 100644
--- a/src/components/panels/MinSettingsPanel.vue
+++ b/src/components/panels/MinSettingsPanel.vue
@@ -30,7 +30,7 @@
             <v-divider class="mb-2"></v-divider>
         </template>
         <v-card-actions class="justify-center pb-3">
-            <v-btn href="https://docs.mainsail.xyz/necessary-configuration" target="_blank" color="white" outlined small><v-icon small class="mr-1">mdi-information</v-icon>{{ $t("Panels.MinSettingsPanel.MoreInformation") }}</v-btn>
+            <v-btn small href="https://docs.mainsail.xyz/necessary-configuration" target="_blank"><v-icon small class="mr-1">mdi-information</v-icon>{{ $t("Panels.MinSettingsPanel.MoreInformation") }}</v-btn>
         </v-card-actions>
     </panel>
 </template>
diff --git a/src/components/panels/MiniconsolePanel.vue b/src/components/panels/MiniconsolePanel.vue
index b34428d92..8d5a56c1c 100644
--- a/src/components/panels/MiniconsolePanel.vue
+++ b/src/components/panels/MiniconsolePanel.vue
@@ -23,7 +23,7 @@
 
             <v-menu :offset-y="true" :close-on-content-click="false" :title="$t('Panels.MiniconsolePanel.SetupConsole')">
                 <template v-slot:activator="{ on, attrs }">
-                    <v-btn icon v-bind="attrs" v-on="on"><v-icon small>mdi-filter</v-icon></v-btn>
+                    <v-btn icon tile v-bind="attrs" v-on="on"><v-icon small>mdi-filter</v-icon></v-btn>
                 </template>
                 <v-list>
                     <v-list-item class="minHeight36">
@@ -38,36 +38,29 @@
         </template>
         <div class="d-flex flex-column">
             <v-card-text :class="consoleDirection === 'table' ? 'order-1' : 'order-2'">
-                <v-row>
-                    <v-col>
-                        <v-textarea
-                            v-model="gcode"
-                            :items="items"
-                            :label="$t('Panels.MiniconsolePanel.SendCode')"
-                            solo
-                            class="gcode-command-field"
-                            ref="gcodeCommandField"
-                            autocomplete="off"
-                            no-resize
-                            auto-grow
-                            :rows="rows"
-                            @keydown.enter.prevent.stop="doSend"
-                            @keyup.up="onKeyUp"
-                            @keyup.down="onKeyDown"
-                            @keydown.tab="getAutocomplete"
-                            hide-details
-                            outlined
-                            dense
-                            :prepend-icon="isTouchDevice ? 'mdi-chevron-double-right' : ''"
-                            @click:prepend="getAutocomplete"
-                            append-icon="mdi-send"
-                            @click:append="doSend"
-                        ></v-textarea>
-                    </v-col>
-                    <v-col class="col-auto">
-
-                    </v-col>
-                </v-row>
+                <v-textarea
+                    v-model="gcode"
+                    :items="items"
+                    :label="$t('Panels.MiniconsolePanel.SendCode')"
+                    solo
+                    class="gcode-command-field"
+                    ref="gcodeCommandField"
+                    autocomplete="off"
+                    no-resize
+                    auto-grow
+                    :rows="rows"
+                    @keydown.enter.prevent.stop="doSend"
+                    @keyup.up="onKeyUp"
+                    @keyup.down="onKeyDown"
+                    @keydown.tab="getAutocomplete"
+                    hide-details
+                    outlined
+                    dense
+                    :prepend-icon="isTouchDevice ? 'mdi-chevron-double-right' : ''"
+                    @click:prepend="getAutocomplete"
+                    append-icon="mdi-send"
+                    @click:append="doSend"
+                ></v-textarea>
             </v-card-text>
             <v-card-text :class="(consoleDirection === 'table' ? 'order-2' : 'order-1') + ' pa-0'">
                 <v-row>
diff --git a/src/components/panels/MoonrakerStatePanel.vue b/src/components/panels/MoonrakerStatePanel.vue
index ad386dceb..780f9f7b6 100644
--- a/src/components/panels/MoonrakerStatePanel.vue
+++ b/src/components/panels/MoonrakerStatePanel.vue
@@ -23,9 +23,9 @@
             <v-divider class="my-2" v-if="index"></v-divider>
             <p class="orange--text mb-0">{{ warning }}</p>
         </v-card-text>
-        <v-divider class="mb-2 mt-3"></v-divider>
-        <v-card-actions class="px-4 pt-2 pb-4 text-center text-lg-left">
-            <v-btn small :href="apiUrl+'/server/files/moonraker.log'" target="_blank" color="primary" class=""><v-icon class="mr-2" small>mdi-download</v-icon>{{ $t("Panels.MoonrakerStatePanel.DownloadLog") }}</v-btn>
+        <v-divider class="mt-3"></v-divider>
+        <v-card-actions class="justify-start">
+            <v-btn small :href="apiUrl+'/server/files/moonraker.log'" target="_blank" class="ml-2 primary--text"><v-icon class="mr-2" small>mdi-download</v-icon>{{ $t("Panels.MoonrakerStatePanel.DownloadLog") }}</v-btn>
         </v-card-actions>
     </panel>
 </template>
diff --git a/src/components/panels/StatusPanel.vue b/src/components/panels/StatusPanel.vue
index ec5daa16c..0d0fc71f1 100644
--- a/src/components/panels/StatusPanel.vue
+++ b/src/components/panels/StatusPanel.vue
@@ -38,6 +38,7 @@
                     @click="button.click"
                     :loading="loadings.includes(button.loadingName)"
                     icon
+                    tile
                 >
                     <v-tooltip top>
                         <template v-slot:activator="{ on, attrs }">
diff --git a/src/components/panels/StatusPanelExcludeObjectDialog.vue b/src/components/panels/StatusPanelExcludeObjectDialog.vue
index e8e1f2521..7e55361f2 100644
--- a/src/components/panels/StatusPanelExcludeObjectDialog.vue
+++ b/src/components/panels/StatusPanelExcludeObjectDialog.vue
@@ -7,7 +7,7 @@
         <v-dialog v-model="showDialog" width="900" persistent :fullscreen="isMobile">
             <panel :title="$t('Panels.StatusPanel.ExcludeObject.ExcludeObject')" icon="mdi-selection-remove" card-class="exclude-object-dialog" :margin-bottom="false">
                 <template v-slot:buttons>
-                    <v-btn icon @click="hideDialog"><v-icon>mdi-close-thick</v-icon></v-btn>
+                    <v-btn icon tile @click="hideDialog"><v-icon>mdi-close-thick</v-icon></v-btn>
                 </template>
                 <v-container>
                     <v-row>
diff --git a/src/components/panels/ToolsPanel.vue b/src/components/panels/ToolsPanel.vue
index b3880ad7a..4577a680d 100644
--- a/src/components/panels/ToolsPanel.vue
+++ b/src/components/panels/ToolsPanel.vue
@@ -33,7 +33,19 @@
         <template v-slot:buttons>
             <v-menu :offset-y="true" title="Preheat" v-if="presets.length">
                 <template v-slot:activator="{ on, attrs }">
-                    <v-btn text color="primary" v-bind="attrs" v-on="on" :disabled="['printing', 'paused'].includes(printer_state)">{{ $t("Panels.ToolsPanel.Presets") }} <v-icon>mdi-menu-down</v-icon></v-btn>
+                    <v-btn 
+                        text
+                        tile
+                        color="primary"
+                        v-bind="attrs"
+                        v-on="on"
+                        :disabled="['printing', 'paused'].includes(printer_state)"
+                        class="pa-1"
+                    >
+                        <span class="d-none ml-1 d-md-inline">{{ $t("Panels.ToolsPanel.Presets") }}</span>
+                        <v-icon v-show="$vuetify.breakpoint.smAndDown">mdi-fire</v-icon>
+                        <v-icon>mdi-menu-down</v-icon>
+                    </v-btn>
                 </template>
                 <v-list dense class="py-0">
                     <v-list-item v-for="preset of presets" v-bind:key="preset.index" link @click="preheat(preset)">
@@ -49,18 +61,27 @@
                 <v-list dense class="py-0">
                     <v-list-item link @click="cooldown()">
                         <v-list-item-icon class="mr-0">
-                            <v-icon small>mdi-snowflake</v-icon>
+                            <v-icon small color="primary">mdi-snowflake</v-icon>
                         </v-list-item-icon>
                         <v-list-item-content>
-                            <v-list-item-title>{{ $t("Panels.ToolsPanel.Cooldown") }}</v-list-item-title>
+                            <v-list-item-title class="primary--text">{{ $t("Panels.ToolsPanel.Cooldown") }}</v-list-item-title>
                         </v-list-item-content>
                     </v-list-item>
                 </v-list>
             </v-menu>
-            <v-btn text @click="cooldown()" v-if="presets.length === 0" color="primary"><v-icon small class="mr-1">mdi-snowflake</v-icon>{{ $t("Panels.ToolsPanel.Cooldown") }}</v-btn>
+            <v-btn
+                :icon="$vuetify.breakpoint.smAndDown"
+                :text="$vuetify.breakpoint.mdAndUp"
+                tile
+                @click="cooldown()"
+                v-if="presets.length === 0"
+                color="primary"
+            >
+                <v-icon small>mdi-snowflake</v-icon><span class="d-none ml-1 d-md-inline">{{ $t("Panels.ToolsPanel.Cooldown") }}</span>
+            </v-btn>
             <v-menu :offset-y="true" :close-on-content-click="false" :title="$t('Panels.ToolsPanel.SetupTemperatures')">
                 <template v-slot:activator="{ on, attrs }">
-                    <v-btn icon v-bind="attrs" v-on="on"><v-icon small>mdi-cog</v-icon></v-btn>
+                    <v-btn icon tile v-bind="attrs" v-on="on"><v-icon small>mdi-cog</v-icon></v-btn>
                 </template>
                 <v-list>
                     <v-list-item class="minHeight36">
@@ -199,7 +220,7 @@
         <v-dialog v-model="editHeater.bool" persistent :width="400">
             <panel :title="convertName(editHeater.name)" :icon="'mdi-'+editHeater.icon" card-class="tools-edit-heater-dialog" :margin-bottom="false">
                 <template v-slot:buttons>
-                    <v-btn icon @click="editHeater.bool = false"><v-icon>mdi-close-thick</v-icon></v-btn>
+                    <v-btn icon tile @click="editHeater.bool = false"><v-icon>mdi-close-thick</v-icon></v-btn>
                 </template>
                 <v-card-text class="pt-6">
                     <v-row v-for="dataset in editHeater.chartSeries" v-bind:key="dataset">
diff --git a/src/components/panels/WebcamPanel.vue b/src/components/panels/WebcamPanel.vue
index d0ae3f936..af0bc31d8 100644
--- a/src/components/panels/WebcamPanel.vue
+++ b/src/components/panels/WebcamPanel.vue
@@ -13,9 +13,9 @@
         <template v-slot:buttons v-if="webcams.length > 1">
             <v-menu :offset-y="true" title="Webcam">
                 <template v-slot:activator="{ on, attrs }">
-                    <v-btn text v-bind="attrs" v-on="on">
+                    <v-btn text tile v-bind="attrs" v-on="on">
                         <v-icon small v-if="'icon' in currentCam" class="mr-2">{{ currentCam.icon }}</v-icon>
-                        {{ 'name' in currentCam ? currentCam.name : "unknown" }}
+                        <span v-show="$vuetify.breakpoint.mdAndUp">{{ 'name' in currentCam ? currentCam.name : "unknown" }}</span>
                         <v-icon small>mdi-menu-down</v-icon>
                     </v-btn>
                 </template>
diff --git a/src/components/panels/ZoffsetPanel.vue b/src/components/panels/ZoffsetPanel.vue
index 36619ded2..96947b468 100644
--- a/src/components/panels/ZoffsetPanel.vue
+++ b/src/components/panels/ZoffsetPanel.vue
@@ -13,10 +13,10 @@
         >
             <template v-slot:buttons>
                 <template v-if="z_gcode_offset !== 0">
-                    <v-btn icon @click="clearZOffset()" :loading="loadings.includes('babySteppingClear')"><v-icon>mdi-broom</v-icon></v-btn>
+                    <v-btn icon tile @click="clearZOffset()" :loading="loadings.includes('babySteppingClear')"><v-icon>mdi-broom</v-icon></v-btn>
                     <v-menu offset-y left v-if="existZOffsetApplyProbe && existZOffsetApplyEndstop">
                         <template v-slot:activator="{ on, attrs }">
-                            <v-btn text color="primary" v-bind="attrs" v-on="on">{{ $t("Panels.ZoffsetPanel.Save") }} <v-icon small>mdi-menu-down</v-icon></v-btn>
+                            <v-btn text tile color="primary" v-bind="attrs" v-on="on" class="pa-1"><span class="ml-1">{{ $t("Panels.ZoffsetPanel.Save") }}</span><v-icon>mdi-menu-down</v-icon></v-btn>
                         </template>
                         <v-list dense class="py-0">
                             <v-list-item link @click="saveZOffsetToEndstop">
@@ -37,8 +37,8 @@
                             </v-list-item>
                         </v-list>
                     </v-menu>
-                    <v-btn text small class="px-2 minwidth-0" color="primary ml-3" v-else-if="existZOffsetApplyProbe && !existZOffsetApplyEndstop" @click="saveZOffsetToProbe"><v-icon small class="mr-1">mdi-content-save</v-icon>{{ $t("Panels.ZoffsetPanel.Save") }}</v-btn>
-                    <v-btn text small class="px-2 minwidth-0" color="primary ml-3" v-else-if="!existZOffsetApplyProbe && existZOffsetApplyEndstop" @click="saveZOffsetToEndstop"><v-icon small class="mr-1">mdi-content-save</v-icon>{{ $t("Panels.ZoffsetPanel.Save") }}</v-btn>
+                    <v-btn text tile class="px-2 minwidth-0" color="primary ml-3" v-else-if="existZOffsetApplyProbe && !existZOffsetApplyEndstop" @click="saveZOffsetToProbe"><v-icon small class="mr-1">mdi-content-save</v-icon>{{ $t("Panels.ZoffsetPanel.Save") }}</v-btn>
+                    <v-btn text tile class="px-2 minwidth-0" color="primary ml-3" v-else-if="!existZOffsetApplyProbe && existZOffsetApplyEndstop" @click="saveZOffsetToEndstop"><v-icon small class="mr-1">mdi-content-save</v-icon>{{ $t("Panels.ZoffsetPanel.Save") }}</v-btn>
                 </template>
             </template>
             <v-card-text class="px-0 py-0">
diff --git a/src/components/ui/Panel.vue b/src/components/ui/Panel.vue
index 31c68956a..c1177a6f0 100644
--- a/src/components/ui/Panel.vue
+++ b/src/components/ui/Panel.vue
@@ -21,11 +21,21 @@
     .v-card.panel .v-toolbar__content .subheading {
         user-select: none;
     }
+    .panel-toolbar {
+        overflow-y: hidden;
+    }
+    .panel-toolbar .v-btn {
+        height: 100% !important;
+        max-height: none;
+    }
+    .panel-toolbar .v-btn.v-btn--icon {
+        width: var(--panel-toolbar-icon-btn-width) !important;
+    }
 </style>
 
 <template>
     <v-card :class="'panel '+cardClass+' '+(marginBottom ? 'mb-3 mb-md-6' : '')+' '+(!expand ? 'expanded' : '')" :loading="loading">
-        <v-toolbar flat dense :color="toolbarColor" :class="getToolbarClass" >
+        <v-toolbar flat dense :color="toolbarColor" :class="getToolbarClass" :height="panelToolbarHeight" class="panel-toolbar">
             <slot name="buttons-left"></slot>
             <v-toolbar-title class="d-flex align-center">
                 <slot name="icon" v-if="hasIconSlot"></slot>
@@ -44,7 +54,9 @@
                     icon
                     class="btn-collapsible"
                     :ripple="true"
-                ><v-icon :class="(!expand ? 'icon-rotate-180' : '')">mdi-chevron-down</v-icon></v-btn>
+                >
+                    <v-icon :class="(!expand ? 'icon-rotate-180' : '')">mdi-chevron-down</v-icon>
+                </v-btn>
             </v-toolbar-items>
         </v-toolbar>
         <v-expand-transition>
@@ -60,9 +72,13 @@
 import Component from 'vue-class-component'
 import {Mixins, Prop} from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
+import {panelToolbarHeight} from '@/store/variables'
 
 @Component
+
 export default class Panel extends Mixins(BaseMixin) {
+    panelToolbarHeight = panelToolbarHeight
+    
     @Prop({ default: null }) readonly icon!: string | null
     @Prop({ required: true, default: '' }) readonly title!: string
     @Prop({ default: false }) readonly collapsible!: boolean
diff --git a/src/pages/Files.vue b/src/pages/Files.vue
index ff4f83d49..0b01c2a0d 100644
--- a/src/pages/Files.vue
+++ b/src/pages/Files.vue
@@ -70,12 +70,12 @@
                         ></v-text-field>
                         <v-spacer></v-spacer>
                         <input type="file" ref="fileUpload" style="display: none" multiple @change="uploadFile" />
-                        <v-btn @click="clickUploadButton" :title="$t('Files.UploadNewGcode')" color="primary" class="px-2 minwidth-0 ml-3" :loading="loadings.includes('gcodeUpload')"><v-icon>mdi-upload</v-icon></v-btn>
-                        <v-btn @click="createDirectory" :title="$t('Files.CreateNewDirectory')" color="grey darken-3" class="px-2 minwidth-0 ml-3"><v-icon>mdi-folder-plus</v-icon></v-btn>
-                        <v-btn @click="refreshFileList" :title="$t('Files.RefreshCurrentDirectory')" color="grey darken-3" class="px-2 minwidth-0 ml-3"><v-icon>mdi-refresh</v-icon></v-btn>
+                        <v-btn @click="clickUploadButton" :title="$t('Files.UploadNewGcode')" class="primary--text px-2 minwidth-0 ml-3" :loading="loadings.includes('gcodeUpload')"><v-icon>mdi-upload</v-icon></v-btn>
+                        <v-btn @click="createDirectory" :title="$t('Files.CreateNewDirectory')" class="px-2 minwidth-0 ml-3"><v-icon>mdi-folder-plus</v-icon></v-btn>
+                        <v-btn @click="refreshFileList" :title="$t('Files.RefreshCurrentDirectory')" class="px-2 minwidth-0 ml-3"><v-icon>mdi-refresh</v-icon></v-btn>
                         <v-menu :offset-y="true" :close-on-content-click="false" :title="$t('Files.SetupCurrentList')">
                             <template v-slot:activator="{ on, attrs }">
-                                <v-btn class="px-2 minwidth-0 ml-3" color="grey darken-3" v-bind="attrs" v-on="on"><v-icon>mdi-cog</v-icon></v-btn>
+                                <v-btn class="px-2 minwidth-0 ml-3" v-bind="attrs" v-on="on"><v-icon>mdi-cog</v-icon></v-btn>
                             </template>
                             <v-list>
                                 <v-list-item class="minHeight36">
@@ -307,7 +307,7 @@
         <v-dialog v-model="dialogCreateDirectory.show" :max-width="400">
             <panel :title="$t('Files.NewDirectory')" card-class="gcode-files-new-directory-dialog" :margin-bottom="false">
                 <template v-slot:buttons>
-                    <v-btn icon @click="dialogCreateDirectory.show = false"><v-icon>mdi-close-thick</v-icon></v-btn>
+                    <v-btn icon tile @click="dialogCreateDirectory.show = false"><v-icon>mdi-close-thick</v-icon></v-btn>
                 </template>
                 <v-card-text>
                     {{ $t('Files.PleaseEnterANewDirectoryName') }}
@@ -330,7 +330,7 @@
         <v-dialog v-model="dialogRenameFile.show" :max-width="400">
             <panel :title="$t('Files.RenameFile')" card-class="gcode-files-rename-file-dialog" :margin-bottom="false">
                 <template v-slot:buttons>
-                    <v-btn icon @click="dialogRenameFile.show = false"><v-icon>mdi-close-thick</v-icon></v-btn>
+                    <v-btn icon tile @click="dialogRenameFile.show = false"><v-icon>mdi-close-thick</v-icon></v-btn>
                 </template>
                 <v-card-text>
                     <v-text-field
@@ -351,7 +351,7 @@
         <v-dialog v-model="dialogRenameDirectory.show" max-width="400">
             <panel :title="$t('Files.RenameDirectory')" card-class="gcode-files-rename-directory-dialog" :margin-bottom="false">
                 <template v-slot:buttons>
-                    <v-btn icon @click="dialogRenameDirectory.show = false"><v-icon>mdi-close-thick</v-icon></v-btn>
+                    <v-btn icon tile @click="dialogRenameDirectory.show = false"><v-icon>mdi-close-thick</v-icon></v-btn>
                 </template>
                 <v-card-text>
                     <v-text-field
@@ -372,7 +372,7 @@
         <v-dialog v-model="dialogDeleteDirectory.show" max-width="400">
             <panel :title="$t('Files.DeleteDirectory')" card-class="gcode-files-delete-directory-dialog" :margin-bottom="false">
                 <template v-slot:buttons>
-                    <v-btn icon @click="dialogDeleteDirectory.show = false"><v-icon>mdi-close-thick</v-icon></v-btn>
+                    <v-btn icon tile @click="dialogDeleteDirectory.show = false"><v-icon>mdi-close-thick</v-icon></v-btn>
                 </template>
                 <v-card-text>
                     <p class="mb-0">{{ $t('Files.DeleteDirectoryQuestion', { name: dialogDeleteDirectory.item.filename } )}}</p>
diff --git a/src/pages/Heightmap.vue b/src/pages/Heightmap.vue
index 5cbcf533c..a59462838 100644
--- a/src/pages/Heightmap.vue
+++ b/src/pages/Heightmap.vue
@@ -8,19 +8,19 @@
             <v-col class="col-12 col-md-8">
                 <panel card-class="heightmap-map-panel" :title="$t('Heightmap.Heightmap')" icon="mdi-grid">
                     <template v-slot:buttons-title>
-                        <v-btn text color="primary" class="ml-1 d-none d-sm-inline-flex" v-if="bed_mesh" @click="openRenameProfile()">{{ bed_mesh ? bed_mesh.profile_name : "" }}</v-btn>
+                        <v-btn text tile color="primary" class="ml-1 d-none d-sm-inline-flex" v-if="bed_mesh" @click="openRenameProfile()">{{ bed_mesh ? bed_mesh.profile_name : "" }}</v-btn>
                     </template>
                     <template v-slot:buttons>
-                        <v-btn text color="primary" class=" d-sm-none" @click="openRenameProfile()">{{ bed_mesh ? bed_mesh.profile_name : "" }}</v-btn>
-                        <v-btn icon class="d-none d-sm-flex" @click="homePrinter" :loading="loadings.includes('homeAll')" :title="$t('Heightmap.TitleHomeAll')" :ripple="true"><v-icon>mdi-home</v-icon></v-btn>
-                        <v-btn text class="d-none d-sm-flex" @click="clearBedMesh" :loading="loadings.includes('bedMeshClear')" v-if="bed_mesh" :title="$t('Heightmap.TitleClear')">{{ $t('Heightmap.Clear') }}</v-btn>
-                        <v-btn text class="d-none d-sm-flex" @click="calibrateDialog = true" :loading="loadings.includes('bedMeshCalibrate')" :disabled="printerIsPrinting" :title="$t('Heightmap.TitleCalibrate')">{{ $t('Heightmap.Calibrate') }}</v-btn>
+                        <v-btn text tile color="primary" class=" d-sm-none" @click="openRenameProfile()">{{ bed_mesh ? bed_mesh.profile_name : "" }}</v-btn>
+                        <v-btn icon tile class="d-none d-sm-flex" @click="homePrinter" :loading="loadings.includes('homeAll')" :title="$t('Heightmap.TitleHomeAll')" :ripple="true"><v-icon>mdi-home</v-icon></v-btn>
+                        <v-btn text tile class="d-none d-sm-flex" @click="clearBedMesh" :loading="loadings.includes('bedMeshClear')" v-if="bed_mesh" :title="$t('Heightmap.TitleClear')">{{ $t('Heightmap.Clear') }}</v-btn>
+                        <v-btn text tile class="d-none d-sm-flex" @click="calibrateDialog = true" :loading="loadings.includes('bedMeshCalibrate')" :disabled="printerIsPrinting" :title="$t('Heightmap.TitleCalibrate')">{{ $t('Heightmap.Calibrate') }}</v-btn>
                     </template>
                     <v-card-text class="d-sm-none text-center pb-0">
-                        <v-item-group class="v-btn-toggle" name="controllers">
-                            <v-btn small class="px-2 minwidth-0" color="primary" @click="homePrinter" :loading="loadings.includes('homeAll')" :title="$t('Heightmap.TitleHomeAll')"><v-icon small>mdi-home</v-icon></v-btn>
-                            <v-btn small class="px-2 minwidth-0" color="primary" @click="clearBedMesh" :loading="loadings.includes('bedMeshClear')" v-if="bed_mesh" :title="$t('Heightmap.TitleClear')">{{ $t('Heightmap.Clear') }}</v-btn>
-                            <v-btn small class="px-2 minwidth-0" color="primary" @click="calibrateDialog = true" :loading="loadings.includes('bedMeshCalibrate')" :disabled="printerIsPrinting" :title="$t('Heightmap.TitleCalibrate')">{{ $t('Heightmap.Calibrate') }}</v-btn>
+                        <v-item-group tile class="v-btn-toggle" name="controllers">
+                            <v-btn text small class="px-2 minwidth-0" color="primary" @click="homePrinter" :loading="loadings.includes('homeAll')" :title="$t('Heightmap.TitleHomeAll')"><v-icon small>mdi-home</v-icon></v-btn>
+                            <v-btn text small class="px-2 minwidth-0" color="primary" @click="clearBedMesh" :loading="loadings.includes('bedMeshClear')" v-if="bed_mesh" :title="$t('Heightmap.TitleClear')">{{ $t('Heightmap.Clear') }}</v-btn>
+                            <v-btn text small class="px-2 minwidth-0" color="primary" @click="calibrateDialog = true" :loading="loadings.includes('bedMeshCalibrate')" :disabled="printerIsPrinting" :title="$t('Heightmap.TitleCalibrate')">{{ $t('Heightmap.Calibrate') }}</v-btn>
                         </v-item-group>
                     </v-card-text>
                     <template v-if="!(bed_mesh)">
@@ -137,14 +137,16 @@
                 icon="mdi-lock-outline"
             >{{ $t('Heightmap.ErrorKlipperNotReady') }}</v-alert>
         </v-row>
-        <v-dialog v-model="renameDialog" persistent :max-width="400">
+        <v-dialog v-model="renameDialog" persistent :max-width="400" @keydown.esc="renameDialog = false">
             <panel :title="$t('Heightmap.RenameBedMeshProfile')" icon="mdi-grid" card-class="heightmap-rename-dialog" :margin-bottom="false">
                 <v-card-text>
-                    <v-row>
-                        <v-col cols="12">
-                            <v-text-field :label="$t('Heightmap.Name')" required v-model="newName"></v-text-field>
-                        </v-col>
-                    </v-row>
+                    <v-text-field
+                        :label="$t('Heightmap.Name')" 
+                        v-model="newName"
+                        ref="inputDialogRenameHeightmapName"
+                        @keyup.enter="renameProfile"
+                        required
+                    ></v-text-field>
                 </v-card-text>
                 <v-card-actions>
                     <v-spacer></v-spacer>
@@ -153,7 +155,7 @@
                 </v-card-actions>
             </panel>
         </v-dialog>
-        <v-dialog v-model="calibrateDialog" persistent :max-width="400">
+        <v-dialog v-model="calibrateDialog" persistent :max-width="400" @keydown.esc="calibrateDialog = false">
             <panel :title="$t('Heightmap.BedMeshCalibrate')" icon="mdi-grid" card-class="heightmap-calibrate-dialog" :margin-bottom="false">
                 <v-card-text>
                     <p>{{ $t('Heightmap.DoYouReallyWantToCalibrate') }}</p>
@@ -165,7 +167,7 @@
                 </v-card-actions>
             </panel>
         </v-dialog>
-        <v-dialog v-model="removeDialog" persistent :max-width="400">
+        <v-dialog v-model="removeDialog" persistent :max-width="400" @keydown.esc="removeDialog = false">
             <panel :title="$t('Heightmap.BedMeshRemove')" icon="mdi-grid" card-class="heightmap-calibrate-dialog" :margin-bottom="false">
                 <v-card-text>
                     <p>{{ $t('Heightmap.DoYouReallyWantToDelete', { name: removeDialogProfile })  }}</p>
@@ -213,7 +215,8 @@ export default class PageHeightmap extends Mixins(BaseMixin) {
 
     $refs!: {
         // eslint-disable-next-line
-        heightmap: any
+        heightmap: any,
+        inputDialogRenameHeightmapName: HTMLInputElement,
     }
 
     private renameDialog = false
@@ -716,6 +719,10 @@ export default class PageHeightmap extends Mixins(BaseMixin) {
     openRenameProfile(): void {
         this.newName = this.bed_mesh?.profile_name ?? ''
         this.renameDialog = true
+
+        setTimeout(() => {
+            this.$refs.inputDialogRenameHeightmapName?.focus()
+        }, 200)
     }
 
     renameProfile(): void {
diff --git a/src/store/gui/index.ts b/src/store/gui/index.ts
index 3c8ba9111..92f6a056f 100644
--- a/src/store/gui/index.ts
+++ b/src/store/gui/index.ts
@@ -34,7 +34,7 @@ export const getDefaultState = (): GuiState => {
             boolTempchart: true,
             boolBigThumbnail: true,
             boolWideNavDrawer: false,
-            navigationStyle: 'iconsOnly',
+            navigationStyle: 'iconsAndText',
             macroManagement: 'simple',
             hiddenMacros: [],
             hiddenTempChart: [],
diff --git a/src/store/variables.ts b/src/store/variables.ts
index c031be139..7109baf95 100644
--- a/src/store/variables.ts
+++ b/src/store/variables.ts
@@ -91,4 +91,9 @@ export const allDashboardPanels = [
 
 export const thumbnailSmallMin = 32
 export const thumbnailSmallMax = 64
-export const thumbnailBigMin = 256
\ No newline at end of file
+export const thumbnailBigMin = 256
+
+export const navigationWidth = 220
+export const navigationItemHeight = 48
+export const panelToolbarHeight = 48
+export const topbarHeight = 48
\ No newline at end of file