diff --git a/src/components/common/SystemControl.vue b/src/components/common/SystemControl.vue
index 6d63a8c414..f6584cccef 100644
--- a/src/components/common/SystemControl.vue
+++ b/src/components/common/SystemControl.vue
@@ -2,7 +2,7 @@
   <div>
     <div v-if="klippyConnected">
       <v-tooltip
-        right
+        bottom
       >
         <template v-slot:activator="{ on, attrs }">
           <app-btn
@@ -22,7 +22,7 @@
 
     <div v-else>
       <v-tooltip
-        right
+        bottom
       >
         <template v-slot:activator="{ on, attrs }">
           <app-btn
@@ -42,7 +42,7 @@
 
     <div v-if="klippyConnected">
       <v-tooltip
-        right
+        bottom
       >
         <template v-slot:activator="{ on, attrs }">
           <app-btn
diff --git a/src/components/ui/AppChart.vue b/src/components/ui/AppChart.vue
new file mode 100644
index 0000000000..b2b7b60d3a
--- /dev/null
+++ b/src/components/ui/AppChart.vue
@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <div v-if="title" v-html="title"></div>
+    <div class="chart" :style="{ 'height': height }">
+      <ECharts
+        style="overflow: initial;"
+        ref="chart"
+        :option="opts"
+        :setOptionOps="{ notMerge: true }"
+        :initOpts="{ renderer: 'svg' }"
+        :events="events">
+      </ECharts>
+    </div>
+  </div>
+</template>
+
+<script lang='ts'>
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
+import { ECharts } from 'echarts'
+import { merge } from 'lodash-es'
+
+@Component({})
+export default class AppChart extends Vue {
+  @Prop({ type: String, required: false })
+  title!: string
+
+  @Prop({ type: Array, required: true })
+  data!: any
+
+  @Prop({ type: Object, default: {} })
+  options!: any
+
+  @Prop({ type: String, default: '100%' })
+  height!: string;
+
+  events = []
+
+  get chart () {
+    const ref = this.$refs.chart as any
+    if (ref) return ref.inst as ECharts
+  }
+
+  get isMobile () {
+    return this.$vuetify.breakpoint.mobile
+  }
+
+  get isDark () {
+    return this.$store.state.config.uiSettings.theme.isDark
+  }
+
+  @Watch('data')
+  onData (data: any) {
+    if (this.chart) {
+      this.chart.setOption({
+        dataset: {
+          source: data
+        }
+      })
+    }
+  }
+
+  beforeDestroy () {
+    if (typeof window === 'undefined') return
+    if (this.chart) {
+      this.chart.dispose()
+    }
+  }
+
+  get opts () {
+    const baseOptions = {
+      grid: {
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0
+      }
+    }
+
+    const options = merge(baseOptions, this.options)
+    return options
+  }
+}
+
+</script>
+
+<style lang='scss' scoped>
+  .chart {
+    width: 100%;
+  }
+</style>
diff --git a/src/components/ui/AppSlider.vue b/src/components/ui/AppSlider.vue
index f346f11571..29017d5fcb 100644
--- a/src/components/ui/AppSlider.vue
+++ b/src/components/ui/AppSlider.vue
@@ -15,7 +15,7 @@
 
       <!-- Current value -->
       <v-col
-        class="ml-auto py-0"
+        class="py-0"
       >
 
         <v-text-field
diff --git a/src/components/widgets/stats/DiskUsageCard.vue b/src/components/widgets/stats/DiskUsageCard.vue
deleted file mode 100644
index 700c8b627f..0000000000
--- a/src/components/widgets/stats/DiskUsageCard.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-  <collapsable-card
-    :title="$t('app.file_system.label.disk_usage')"
-    icon="$chart">
-
-    <v-card-text>
-      <div class="mb-4">
-        <v-layout justify-space-between>
-          <div class="">{{ $t('app.file_system.label.disk_usage') }}</div>
-        </v-layout>
-        <v-progress-linear
-          :size="90"
-          :height="10"
-          :value="fileSystemUsedPercent"
-          color="primary"
-          class="my-1"
-        >
-        </v-progress-linear>
-
-        <v-layout justify-space-between>
-          <div class="">
-            <span class="focus--text">
-              {{ $filters.getReadableFileSizeString(fileSystemUsage.used) }}
-            </span>
-            <span class="secondary--text">{{ $t('app.general.label.used') }}</span>
-          </div>
-          <div class="">
-            <span class="focus--text">
-              {{ $filters.getReadableFileSizeString(fileSystemUsage.free) }}
-            </span>
-            <span class="secondary--text">{{ $t('app.general.label.free') }}</span>
-          </div>
-        </v-layout>
-      </div>
-    </v-card-text>
-  </collapsable-card>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from 'vue-property-decorator'
-import JobHistory from '@/components/widgets/history/JobHistory.vue'
-
-@Component({
-  components: {
-    JobHistory
-  }
-})
-export default class PrinterStatsCard extends Vue {
-  get fileSystemUsedPercent () {
-    // (250 / 500) * 100
-    const total = this.fileSystemUsage.total
-    const used = this.fileSystemUsage.used
-    return Math.floor((used / total) * 100).toFixed()
-  }
-
-  get fileSystemUsage () {
-    return this.$store.getters['files/getUsage']
-  }
-}
-</script>
diff --git a/src/components/widgets/system/DiskUsageCard.vue b/src/components/widgets/system/DiskUsageCard.vue
new file mode 100644
index 0000000000..45d1d8376c
--- /dev/null
+++ b/src/components/widgets/system/DiskUsageCard.vue
@@ -0,0 +1,87 @@
+<template>
+  <collapsable-card
+    :title="$t('app.file_system.label.diskinfo')"
+    icon="$chart">
+
+    <v-card-text>
+      <v-layout justify-space-between>
+        <div class="">{{ $t('app.file_system.label.disk_usage') }}</div>
+      </v-layout>
+      <v-progress-linear
+        :size="90"
+        :height="10"
+        :value="fileSystemUsedPercent"
+        color="primary"
+        class="my-1"
+      >
+      </v-progress-linear>
+
+      <v-layout justify-space-between>
+        <div class="">
+          <span class="focus--text">
+            {{ $filters.getReadableFileSizeString(fileSystemUsage.used) }}
+          </span>
+          <span class="secondary--text">{{ $t('app.general.label.used') }}</span>
+        </div>
+        <div class="">
+          <span class="focus--text">
+            {{ $filters.getReadableFileSizeString(fileSystemUsage.free) }}
+          </span>
+          <span class="secondary--text">{{ $t('app.general.label.free') }}</span>
+        </div>
+      </v-layout>
+    </v-card-text>
+
+    <v-simple-table dense>
+      <tbody>
+        <tr>
+          <th>{{ $t('app.system_info.label.manufacturer') }}</th>
+          <td>{{ sdInfo.manufacturer }}</td>
+        </tr>
+        <tr>
+          <th>{{ $t('app.system_info.label.manufactured') }}</th>
+          <td>{{ sdInfo.manufacturer_date }}</td>
+        <tr>
+          <th>{{ $t('app.system_info.label.product_name') }}</th>
+          <td>{{ sdInfo.product_name }} {{sdInfo.product_revision }}</td>
+        </tr>
+        <tr>
+          <th>{{ $t('app.system_info.label.capacity') }}</th>
+          <td>{{ sdInfo.capacity }}</td>
+        </tr>
+        <tr>
+          <th>{{ $t('app.system_info.label.serial_number') }}</th>
+          <td>{{ sdInfo.serial_number }}</td>
+        </tr>
+      </tbody>
+    </v-simple-table>
+
+  </collapsable-card>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import JobHistory from '@/components/widgets/history/JobHistory.vue'
+
+@Component({
+  components: {
+    JobHistory
+  }
+})
+export default class PrinterStatsCard extends Vue {
+  get sdInfo () {
+    const info = this.$store.getters['server/getSystemInfo']
+    return info?.sd_info || {}
+  }
+
+  get fileSystemUsedPercent () {
+    const total = this.fileSystemUsage.total
+    const used = this.fileSystemUsage.used
+    return Math.floor((used / total) * 100).toFixed()
+  }
+
+  get fileSystemUsage () {
+    return this.$store.getters['files/getUsage']
+  }
+}
+</script>
diff --git a/src/components/widgets/system/KlipperLoadChart.vue b/src/components/widgets/system/KlipperLoadChart.vue
new file mode 100644
index 0000000000..7d56ab6d37
--- /dev/null
+++ b/src/components/widgets/system/KlipperLoadChart.vue
@@ -0,0 +1,48 @@
+<template>
+  <v-col
+    cols="4"
+    class="chart-wrapper"
+    v-if="chartData"
+  >
+    <app-chart
+      :data="chartData"
+      :options="options"
+      height="120px"
+    >
+    </app-chart>
+
+    <div class="chart-label-wrapper">
+      <div v-if="chartData && chartData.length" class="chart-label">
+        <span>{{ $t('app.system_info.label.klipper_load') }}</span>
+        <span>{{ chartData[chartData.length - 1].cputime_change }}%</span>
+      </div>
+    </div>
+
+  </v-col>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+
+@Component({})
+export default class KlipperLoadChart extends Vue {
+  get chartData () {
+    return this.$store.state.charts.klipper
+  }
+
+  get options () {
+    const o = {
+      ...this.$store.getters['charts/getBaseChartOptions'](),
+      series: this.series
+    }
+    return o
+  }
+
+  get series () {
+    return this.$store.getters['charts/getBaseSeries']({
+      name: 'load',
+      encode: { x: 'date', y: 'cputime_change' }
+    })
+  }
+}
+</script>
diff --git a/src/components/widgets/system/McuLoadChart.vue b/src/components/widgets/system/McuLoadChart.vue
new file mode 100644
index 0000000000..486d5d1f1d
--- /dev/null
+++ b/src/components/widgets/system/McuLoadChart.vue
@@ -0,0 +1,81 @@
+<template>
+  <v-col
+    cols="4"
+    class="chart-wrapper"
+    v-if="chartData"
+  >
+    <app-chart
+      :data="this.$store.state.charts[name] || []"
+      :options="options"
+      height="120px"
+    >
+    </app-chart>
+
+    <div class="chart-label-wrapper">
+      <div v-if="chartData && chartData.length" class="chart-label">
+        <span>{{ $t('app.system_info.label.mcu_load', { mcu: mcu.toUpperCase() })}}</span>
+        <span>{{ chartData[chartData.length - 1].load }}%</span>
+      </div>
+
+      <div v-if="chartData && chartData.length" class="chart-label">
+        <span>{{ $t('app.system_info.label.mcu_awake', { mcu: mcu.toUpperCase() })}}</span>
+        <span>{{ chartData[chartData.length - 1].awake }}%</span>
+      </div>
+    </div>
+
+  </v-col>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator'
+
+@Component({})
+export default class McuLoadChart extends Vue {
+  @Prop({ type: String, required: true })
+  mcu!: string
+
+  get chartData () {
+    return this.$store.state.charts[this.name]
+  }
+
+  get name () {
+    return this.mcu.replace(' ', '_')
+  }
+
+  get options () {
+    const o = {
+      ...this.$store.getters['charts/getBaseChartOptions'](),
+      series: this.series
+    }
+    o.yAxis.max = (value: any) => {
+      // Grab the max, and add some buffer.
+      if (value.max <= 10) return 15
+      if (value.max <= 20) return 25
+      if (value.max <= 30) return 35
+      if (value.max <= 40) return 45
+      if (value.max <= 50) return 55
+      if (value.max <= 50) return 55
+      if (value.max <= 60) return 65
+      if (value.max <= 70) return 75
+      if (value.max <= 80) return 85
+      return value.max
+    }
+    // o.yAxis.max = 'dataMax'
+    return o
+  }
+
+  get series () {
+    const load = this.$store.getters['charts/getBaseSeries']({
+      name: 'load',
+      encode: { x: 'date', y: 'load' }
+    })
+
+    const awake = this.$store.getters['charts/getBaseSeries']({
+      name: 'awake time',
+      encode: { x: 'date', y: 'awake' }
+    })
+
+    return [load, awake]
+  }
+}
+</script>
diff --git a/src/components/widgets/system/MoonrakerLoadChart.vue b/src/components/widgets/system/MoonrakerLoadChart.vue
new file mode 100644
index 0000000000..a0b954c549
--- /dev/null
+++ b/src/components/widgets/system/MoonrakerLoadChart.vue
@@ -0,0 +1,48 @@
+<template>
+  <v-col
+    cols="4"
+    class="chart-wrapper"
+    v-if="chartData"
+  >
+    <app-chart
+      :data="chartData"
+      :options="options"
+      height="120px"
+    >
+    </app-chart>
+
+    <div class="chart-label-wrapper">
+      <div v-if="chartData && chartData.length" class="chart-label">
+        <span>{{ $t('app.system_info.label.moonraker_load') }}</span>
+        <span>{{ chartData[chartData.length - 1].load }}%</span>
+      </div>
+    </div>
+
+  </v-col>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+
+@Component({})
+export default class MoonrakerLoadChart extends Vue {
+  get chartData () {
+    return this.$store.state.charts.moonraker
+  }
+
+  get options () {
+    const o = {
+      ...this.$store.getters['charts/getBaseChartOptions'](),
+      series: this.series
+    }
+    return o
+  }
+
+  get series () {
+    return this.$store.getters['charts/getBaseSeries']({
+      name: 'load',
+      encode: { x: 'date', y: 'load' }
+    })
+  }
+}
+</script>
diff --git a/src/components/widgets/system/SystemLoadChart.vue b/src/components/widgets/system/SystemLoadChart.vue
new file mode 100644
index 0000000000..a534362502
--- /dev/null
+++ b/src/components/widgets/system/SystemLoadChart.vue
@@ -0,0 +1,48 @@
+<template>
+  <v-col
+    cols="4"
+    class="chart-wrapper"
+    v-if="chartData"
+  >
+    <app-chart
+      :data="chartData"
+      :options="options"
+      height="120px"
+    >
+    </app-chart>
+
+    <div class="chart-label-wrapper">
+      <div v-if="chartData && chartData.length" class="chart-label">
+        <span>{{ $t('app.system_info.label.system_load') }}</span>
+        <span>{{ chartData[chartData.length - 1].load }}%</span>
+      </div>
+    </div>
+
+  </v-col>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+
+@Component({})
+export default class SystemLoadChart extends Vue {
+  get chartData () {
+    return this.$store.state.charts.klipper
+  }
+
+  get options () {
+    const o = {
+      ...this.$store.getters['charts/getBaseChartOptions'](),
+      series: this.series
+    }
+    return o
+  }
+
+  get series () {
+    return this.$store.getters['charts/getBaseSeries']({
+      name: 'load',
+      encode: { x: 'date', y: 'load' }
+    })
+  }
+}
+</script>
diff --git a/src/components/widgets/system/SystemMemoryChart.vue b/src/components/widgets/system/SystemMemoryChart.vue
new file mode 100644
index 0000000000..f00448ebd7
--- /dev/null
+++ b/src/components/widgets/system/SystemMemoryChart.vue
@@ -0,0 +1,48 @@
+<template>
+  <v-col
+    cols="4"
+    class="chart-wrapper"
+    v-if="chartData"
+  >
+    <app-chart
+      :data="chartData"
+      :options="options"
+      height="120px"
+    >
+    </app-chart>
+
+    <div class="chart-label-wrapper">
+      <div v-if="chartData && chartData.length" class="chart-label">
+        <span>{{ $t('app.system_info.label.system_memory') }}</span>
+        <span>{{ chartData[chartData.length - 1].memused }}%</span>
+      </div>
+    </div>
+
+  </v-col>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+
+@Component({})
+export default class SystemMemoryChart extends Vue {
+  get chartData () {
+    return this.$store.state.charts.memory
+  }
+
+  get options () {
+    const o = {
+      ...this.$store.getters['charts/getBaseChartOptions'](),
+      series: this.series
+    }
+    return o
+  }
+
+  get series () {
+    return this.$store.getters['charts/getBaseSeries']({
+      name: 'memory used',
+      encode: { x: 'date', y: 'memused' }
+    })
+  }
+}
+</script>
diff --git a/src/components/widgets/system/SystemOverviewCard.vue b/src/components/widgets/system/SystemOverviewCard.vue
new file mode 100644
index 0000000000..286f52d289
--- /dev/null
+++ b/src/components/widgets/system/SystemOverviewCard.vue
@@ -0,0 +1,104 @@
+<template>
+  <collapsable-card
+    :title="$t('app.general.title.system_overview')"
+    icon="$chart">
+
+    <v-row no-gutters>
+      <v-col>
+        <v-simple-table dense>
+          <tbody>
+            <tr>
+              <th>{{ $t('app.system_info.label.hostname') }}</th>
+              <td>{{ printerInfo.hostname }}</td>
+            </tr>
+            <tr>
+              <th>{{ $t('app.system_info.label.model') }}</th>
+              <td>{{ cpuInfo.model }}</td>
+            </tr>
+            <tr>
+              <th>{{ $t('app.system_info.label.cpu_desc') }}</th>
+              <td>{{ cpuInfo.cpu_desc }}</td>
+            </tr>
+            <tr>
+              <th>{{ $t('app.system_info.label.total_memory') }}</th>
+              <td>{{ cpuInfo.total_memory }} {{ cpuInfo.memory_units }}</td>
+            </tr>
+            <tr>
+              <th>{{ $t('app.system_info.label.hardware_desc') }}</th>
+              <td>{{ cpuInfo.hardware_desc }}</td>
+            </tr>
+            <tr>
+              <th>{{ $t('app.system_info.label.processor_desc') }}</th>
+              <td>{{ cpuInfo.bits }} {{ cpuInfo.processor }} with {{ cpuInfo.cpu_count }} cores</td>
+            </tr>
+            <tr>
+              <th>{{ $t('app.system_info.label.distribution_name') }}</th>
+              <td>{{ distribution.name }}</td>
+            </tr>
+            <tr>
+              <th>{{ $t('app.system_info.label.distribution_codename') }}</th>
+              <td>{{ distribution.codename }}</td>
+            </tr>
+            <tr>
+              <th>{{ $t('app.system_info.label.distribution_like') }}</th>
+              <td>{{ distribution.like }}</td>
+            </tr>
+          </tbody>
+        </v-simple-table>
+      </v-col>
+      <v-col>
+        <v-card-text>
+          <system-control></system-control>
+        </v-card-text>
+      </v-col>
+    </v-row>
+
+    <!-- <pre>{{ services }}</pre> -->
+    <!-- <pre>{{ sdInfo }}</pre> -->
+    <!-- <pre>{{ distribution }}</pre> -->
+    <!-- <pre>{{ printerInfo }}</pre> -->
+
+  </collapsable-card>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+
+@Component({})
+export default class PrinterStatsCard extends Vue {
+  get cpuInfo () {
+    const info = this.$store.getters['server/getSystemInfo']
+    return info?.cpu_info || {}
+  }
+
+  get sdInfo () {
+    const info = this.$store.getters['server/getSystemInfo']
+    return info?.sd_info || {}
+  }
+
+  get distribution () {
+    const info = this.$store.getters['server/getSystemInfo']
+    return info?.distribution || {}
+  }
+
+  get services () {
+    const info = this.$store.getters['server/getSystemInfo']
+    return info?.available_services || []
+  }
+
+  get printerInfo () {
+    return this.$store.state.printer.printer.info
+  }
+
+  get fileSystemUsedPercent () {
+    // (250 / 500) * 100
+    const total = this.fileSystemUsage.total
+    const used = this.fileSystemUsage.used
+    return Math.floor((used / total) * 100).toFixed()
+  }
+
+  get fileSystemUsage () {
+    return this.$store.getters['files/getUsage']
+  }
+}
+</script>
diff --git a/src/components/widgets/system/SystemUsageCard.vue b/src/components/widgets/system/SystemUsageCard.vue
new file mode 100644
index 0000000000..b3e568600e
--- /dev/null
+++ b/src/components/widgets/system/SystemUsageCard.vue
@@ -0,0 +1,75 @@
+<template>
+  <collapsable-card
+    :title="$t('app.system_info.label.system_utilization')"
+    icon="$chart">
+
+    <v-card-text>
+      <v-row>
+        <system-load-chart></system-load-chart>
+        <klipper-load-chart></klipper-load-chart>
+        <moonraker-load-chart></moonraker-load-chart>
+        <system-memory-chart></system-memory-chart>
+        <template
+          v-for="(mcu, i) in mcus"
+        >
+          <mcu-load-chart
+            :key="i"
+            :mcu="mcu.name"
+          ></mcu-load-chart>
+        </template>
+      </v-row>
+
+      <!-- <pre>{{ procStats[0] }}</pre>
+      <pre>{{ systemStats }}</pre>
+      <pre>{{ mcus }}</pre> -->
+    </v-card-text>
+  </collapsable-card>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import SystemLoadChart from './SystemLoadChart.vue'
+import SystemMemoryChart from './SystemMemoryChart.vue'
+import KlipperLoadChart from './KlipperLoadChart.vue'
+import MoonrakerLoadChart from './MoonrakerLoadChart.vue'
+import McuLoadChart from './McuLoadChart.vue'
+
+@Component({
+  components: {
+    SystemLoadChart,
+    SystemMemoryChart,
+    KlipperLoadChart,
+    MoonrakerLoadChart,
+    McuLoadChart
+  }
+})
+export default class PrinterStatsCard extends Vue {
+  get procStats () {
+    return this.$store.getters['server/getProcessStats']
+  }
+
+  get systemStats () {
+    return this.$store.getters['printer/getSystemStats']
+  }
+
+  get mcus () {
+    return this.$store.getters['printer/getMcus']
+  }
+}
+</script>
+
+<style lang="scss">
+  // .chart-wrapper {
+  //   border: solid 1px #ccc;
+  // }
+
+  .chart-label-wrapper {
+    margin-top: 6px;
+    display: block;
+  }
+
+  .chart-label {
+    display: flex;
+    justify-content: space-between;
+  }
+</style>
diff --git a/src/locales/en.yaml b/src/locales/en.yaml
index 7f6b1f0165..13ae18f2e1 100644
--- a/src/locales/en.yaml
+++ b/src/locales/en.yaml
@@ -74,6 +74,7 @@ app:
     label:
       dir_name: Directory name
       disk_usage: Disk Usage
+      diskinfo: Disk Information
       downloaded: Downloaded
       file_name: Filename
       transfer_rate: Transfer rate
@@ -293,6 +294,7 @@ app:
       stats: Printer Stats
       status: Status
       system_control: System Control
+      system_overview: System Information
       temperature: Thermals
       tool: Tool
       tune: Tune
@@ -398,6 +400,29 @@ app:
     msg:
       connecting: Connecting to moonraker...
       no_connection: No moonraker connection. Please check moonraker status and / or refresh.
+  system_info:
+    label:
+      capacity: Capacity
+      cpu_desc: CPU Description
+      distribution_codename: Codename
+      distribution_like: Distribution Like
+      distribution_name: Distribution
+      hardware_desc: Hardware Description
+      hostname: Hostname
+      klipper_load: Klipper Load
+      manufactured: Manufactured
+      manufacturer: Manufacturer
+      mcu_awake: '{mcu} Awake'
+      mcu_load: '{mcu} Load'
+      model: CPU Model
+      moonraker_load: Moonraker Load
+      processor_desc: Processor
+      product_name: Product Name
+      serial_number: Serial Number
+      system_load: System Load
+      system_memory: System Memory
+      system_utilization: System Utilization
+      total_memory: Total Memory
   tool:
     btn:
       home_x: X
diff --git a/src/monaco/theme/editor.dark.theme.json b/src/monaco/theme/editor.dark.theme.json
index 3d9ec8e0d1..36c33a9c7f 100644
--- a/src/monaco/theme/editor.dark.theme.json
+++ b/src/monaco/theme/editor.dark.theme.json
@@ -1 +1 @@
-{"inherit":true,"base":"vs-dark","colors":{"activityBar.background":"#1f2430","activityBar.border":"#1f2430","activityBar.foreground":"#707a8ccc","activityBar.inactiveForeground":"#707a8c99","activityBarBadge.background":"#ffcc66","activityBarBadge.foreground":"#1f2430","badge.background":"#ffcc6633","badge.foreground":"#ffcc66","button.background":"#ffcc66","button.foreground":"#1f2430","button.hoverBackground":"#fac761","debugExceptionWidget.background":"#232834","debugExceptionWidget.border":"#191e2a","debugToolBar.background":"#232834","descriptionForeground":"#707a8c","diffEditor.insertedTextBackground":"#bae67e26","diffEditor.removedTextBackground":"#f29e7426","dropdown.background":"#232834","dropdown.border":"#434957","dropdown.foreground":"#707a8c","editor.background":"#28282b","editor.findMatchBackground":"#ffcc660d","editor.findMatchBorder":"#ffcc66","editor.findMatchHighlightBackground":"#ffcc660d","editor.findMatchHighlightBorder":"#ffcc6659","editor.findRangeHighlightBackground":"#323a4c","editor.findRangeHighlightBorder":"#1f243000","editor.foreground":"#cbccc6","editor.inactiveSelectionBackground":"#323a4c","editor.lineHighlightBackground":"#3a3a3e","editor.rangeHighlightBackground":"#191e2a","editor.selectionBackground":"#33415e","editor.selectionHighlightBackground":"#323a4c","editor.selectionHighlightBorder":"#323a4c","editor.wordHighlightBackground":"#77a8d912","editor.wordHighlightBorder":"#77a8d980","editor.wordHighlightStrongBackground":"#a6cc7012","editor.wordHighlightStrongBorder":"#a6cc7080","editorBracketMatch.background":"#707a8c4d","editorBracketMatch.border":"#707a8c99","editorCodeLens.foreground":"#5c6773","editorCursor.foreground":"#ffcc66","editorError.foreground":"#ff3333","editorGroup.background":"#232834","editorGroup.border":"#191e2a","editorGroupHeader.noTabsBackground":"#1f2430","editorGroupHeader.tabsBackground":"#1f2430","editorGroupHeader.tabsBorder":"#1f2430","editorGutter.addedBackground":"#a6cc7099","editorGutter.deletedBackground":"#f2798399","editorGutter.modifiedBackground":"#77a8d999","editorHoverWidget.background":"#232834","editorHoverWidget.border":"#101521","editorIndentGuide.activeBackground":"#707a8cb3","editorIndentGuide.background":"#707a8c4d","editorLineNumber.activeForeground":"#707a8ccc","editorLineNumber.foreground":"#707a8c66","editorLink.activeForeground":"#ffcc66","editorMarkerNavigation.background":"#232834","editorOverviewRuler.addedForeground":"#a6cc7099","editorOverviewRuler.border":"#191e2a","editorOverviewRuler.deletedForeground":"#f2798399","editorOverviewRuler.errorForeground":"#ff3333","editorOverviewRuler.modifiedForeground":"#77a8d999","editorOverviewRuler.warningForeground":"#ffcc66","editorRuler.foreground":"#707a8c4d","editorSuggestWidget.background":"#232834","editorSuggestWidget.border":"#101521","editorSuggestWidget.highlightForeground":"#ffcc66","editorSuggestWidget.selectedBackground":"#191e2a","editorWarning.foreground":"#ffcc66","editorWhitespace.foreground":"#707a8c66","editorWidget.background":"#232834","errorForeground":"#ff3333","extensionButton.prominentBackground":"#ffcc66","extensionButton.prominentForeground":"#1f2430","extensionButton.prominentHoverBackground":"#fac761","focusBorder":"#596171","foreground":"#707a8c","gitDecoration.conflictingResourceForeground":"#ff0000","gitDecoration.deletedResourceForeground":"#f27983b3","gitDecoration.ignoredResourceForeground":"#525a69","gitDecoration.modifiedResourceForeground":"#77a8d9b3","gitDecoration.submoduleResourceForeground":"#d4bfffb3","gitDecoration.untrackedResourceForeground":"#a6cc70b3","icon.foreground":"#707a8c","input.background":"#1d222e","input.border":"#434957","input.foreground":"#cbccc6","input.placeholderForeground":"#5f6878","inputOption.activeBorder":"#ffcc66","inputValidation.errorBackground":"#1f2430","inputValidation.errorBorder":"#ff3333","inputValidation.infoBackground":"#1f2430","inputValidation.infoBorder":"#5ccfe6","inputValidation.warningBackground":"#1f2430","inputValidation.warningBorder":"#ffd580","list.activeSelectionBackground":"#191e2a","list.activeSelectionForeground":"#707a8c","list.errorForeground":"#f27983","list.filterMatchBackground":"#ffcc660d","list.filterMatchBorder":"#ffcc66","list.focusBackground":"#191e2a","list.focusForeground":"#707a8c","list.highlightForeground":"#ffcc66","list.hoverBackground":"#191e2a","list.hoverForeground":"#707a8c","list.inactiveSelectionBackground":"#191e2a","list.inactiveSelectionForeground":"#707a8c","list.invalidItemForeground":"#5f6878","listFilterWidget.background":"#232834","listFilterWidget.noMatchesOutline":"#ff3333","listFilterWidget.outline":"#ffcc66","panel.background":"#1f2430","panel.border":"#191e2a","panelTitle.activeBorder":"#ffcc66","panelTitle.activeForeground":"#cbccc6","panelTitle.inactiveForeground":"#707a8c","peekView.border":"#191e2a","peekViewEditor.background":"#232834","peekViewEditor.matchHighlightBackground":"#ffcc6633","peekViewResult.background":"#232834","peekViewResult.fileForeground":"#707a8c","peekViewResult.matchHighlightBackground":"#ffcc6633","peekViewTitle.background":"#232834","peekViewTitleDescription.foreground":"#707a8c","peekViewTitleLabel.foreground":"#707a8c","pickerGroup.border":"#191e2a","pickerGroup.foreground":"#525a69","progressBar.background":"#ffcc66","scrollbar.shadow":"#191e2a","scrollbarSlider.activeBackground":"#707a8cb3","scrollbarSlider.background":"#707a8c66","scrollbarSlider.hoverBackground":"#707a8c99","selection.background":"#33415efd","settings.headerForeground":"#cbccc6","settings.modifiedItemIndicator":"#77a8d9","sideBar.background":"#1f2430","sideBar.border":"#1f2430","sideBarSectionHeader.background":"#1f2430","sideBarSectionHeader.border":"#1f2430","sideBarSectionHeader.foreground":"#707a8c","sideBarTitle.foreground":"#707a8c","statusBar.background":"#1f2430","statusBar.border":"#1f2430","statusBar.debuggingBackground":"#f29e74","statusBar.debuggingForeground":"#1f2430","statusBar.foreground":"#707a8c","statusBar.noFolderBackground":"#232834","statusBarItem.activeBackground":"#191e2a","statusBarItem.hoverBackground":"#191e2a","statusBarItem.prominentBackground":"#191e2a","statusBarItem.prominentHoverBackground":"#00000030","tab.activeBackground":"#1f2430","tab.activeBorder":"#ffcc66","tab.activeForeground":"#cbccc6","tab.border":"#1f2430","tab.inactiveBackground":"#1f2430","tab.inactiveForeground":"#707a8c","tab.unfocusedActiveBorder":"#707a8c","tab.unfocusedActiveForeground":"#707a8c","tab.unfocusedInactiveForeground":"#707a8c","terminal.ansiBlack":"#191e2a","terminal.ansiBlue":"#6dcbfa","terminal.ansiBrightBlack":"#686868","terminal.ansiBrightBlue":"#73d0ff","terminal.ansiBrightCyan":"#95e6cb","terminal.ansiBrightGreen":"#bae67e","terminal.ansiBrightMagenta":"#d4bfff","terminal.ansiBrightRed":"#f28779","terminal.ansiBrightWhite":"#ffffff","terminal.ansiBrightYellow":"#ffd580","terminal.ansiCyan":"#90e1c6","terminal.ansiGreen":"#a6cc70","terminal.ansiMagenta":"#cfbafa","terminal.ansiRed":"#ed8274","terminal.ansiWhite":"#c7c7c7","terminal.ansiYellow":"#fad07b","terminal.background":"#1f2430","terminal.foreground":"#cbccc6","textBlockQuote.background":"#232834","textLink.activeForeground":"#ffcc66","textLink.foreground":"#ffcc66","textPreformat.foreground":"#cbccc6","titleBar.activeBackground":"#1f2430","titleBar.activeForeground":"#cbccc6","titleBar.border":"#1f2430","titleBar.inactiveBackground":"#1f2430","titleBar.inactiveForeground":"#707a8c","tree.indentGuidesStroke":"#707a8cb3","walkThrough.embeddedEditorBackground":"#232834","widget.shadow":"#141925","minimap.background":"#28282b"},"rules":[{"foreground":"#5C6773","fontStyle":"italic","token":"comment"},{"foreground":"#BAE67E","token":"string"},{"foreground":"#BAE67E","token":"constant.other.symbol"},{"foreground":"#95E6CB","token":"string.regexp"},{"foreground":"#95E6CB","token":"constant.character"},{"foreground":"#95E6CB","token":"constant.other"},{"foreground":"#FFCC66","token":"constant.numeric"},{"foreground":"#FFCC66","token":"constant.language"},{"foreground":"#CBCCC6","token":"variable"},{"foreground":"#F28779","token":"variable.member"},{"foreground":"#5CCFE6","fontStyle":"italic","token":"variable.language"},{"foreground":"#FFA759","token":"storage"},{"foreground":"#FFA759","token":"keyword"},{"foreground":"#F29E74","token":"keyword.operator"},{"foreground":"#CBCCC6B3","token":"punctuation.separator"},{"foreground":"#CBCCC6B3","token":"punctuation.terminator"},{"foreground":"#CBCCC6","token":"punctuation.section"},{"foreground":"#F29E74","token":"punctuation.accessor"},{"foreground":"#73D0FF","token":"source.java storage.type"},{"foreground":"#73D0FF","token":"source.haskell storage.type"},{"foreground":"#73D0FF","token":"source.c storage.type"},{"foreground":"#5CCFE6","token":"entity.other.inherited-class"},{"foreground":"#FFA759","token":"storage.type.function"},{"foreground":"#5CCFE6","token":"source.java storage.type.primitive"},{"foreground":"#FFD580","token":"entity.name.function"},{"foreground":"#D4BFFF","token":"variable.parameter"},{"foreground":"#D4BFFF","token":"meta.parameter"},{"foreground":"#FFD580","token":"variable.function"},{"foreground":"#FFD580","token":"variable.annotation"},{"foreground":"#FFD580","token":"meta.function-call.generic"},{"foreground":"#FFD580","token":"support.function.go"},{"foreground":"#F28779","token":"support.function"},{"foreground":"#F28779","token":"support.macro"},{"foreground":"#BAE67E","token":"entity.name.import"},{"foreground":"#BAE67E","token":"entity.name.package"},{"foreground":"#73D0FF","token":"entity.name"},{"foreground":"#5CCFE6","token":"entity.name.tag"},{"foreground":"#5CCFE6","token":"meta.tag.sgml"},{"foreground":"#5CCFE680","token":"punctuation.definition.tag.end"},{"foreground":"#5CCFE680","token":"punctuation.definition.tag.begin"},{"foreground":"#5CCFE680","token":"punctuation.definition.tag"},{"foreground":"#FFD580","token":"entity.other.attribute-name"},{"foreground":"#F29E74","fontStyle":"italic","token":"support.constant"},{"foreground":"#5CCFE6","token":"support.type"},{"foreground":"#5CCFE6","token":"support.class"},{"foreground":"#5CCFE6","token":"source.go storage.type"},{"foreground":"#FFE6B3","token":"meta.decorator variable.other"},{"foreground":"#FFE6B3","token":"meta.decorator punctuation.decorator"},{"foreground":"#FFE6B3","token":"storage.type.annotation"},{"foreground":"#FF3333","token":"invalid"},{"foreground":"#C594C5","token":"meta.diff"},{"foreground":"#C594C5","token":"meta.diff.header"},{"foreground":"#FFD580","token":"source.ruby variable.other.readwrite"},{"foreground":"#73D0FF","token":"source.css entity.name.tag"},{"foreground":"#73D0FF","token":"source.sass entity.name.tag"},{"foreground":"#73D0FF","token":"source.scss entity.name.tag"},{"foreground":"#73D0FF","token":"source.less entity.name.tag"},{"foreground":"#73D0FF","token":"source.stylus entity.name.tag"},{"foreground":"#5C6773","token":"source.css support.type"},{"foreground":"#5C6773","token":"source.sass support.type"},{"foreground":"#5C6773","token":"source.scss support.type"},{"foreground":"#5C6773","token":"source.less support.type"},{"foreground":"#5C6773","token":"source.stylus support.type"},{"foreground":"#5CCFE6","fontStyle":"normal","token":"support.type.property-name"},{"foreground":"#5C6773","token":"constant.numeric.line-number.find-in-files - match"},{"foreground":"#FFA759","token":"constant.numeric.line-number.match"},{"foreground":"#BAE67E","token":"entity.name.filename.find-in-files"},{"foreground":"#FF3333","token":"message.error"},{"foreground":"#BAE67E","fontStyle":"bold","token":"markup.heading"},{"foreground":"#BAE67E","fontStyle":"bold","token":"markup.heading entity.name"},{"foreground":"#5CCFE6","token":"markup.underline.link"},{"foreground":"#5CCFE6","token":"string.other.link"},{"foreground":"#F28779","fontStyle":"italic","token":"markup.italic"},{"foreground":"#F28779","fontStyle":"bold","token":"markup.bold"},{"fontStyle":"bold italic","token":"markup.italic markup.bold"},{"fontStyle":"bold italic","token":"markup.bold markup.italic"},{"background":"#CBCCC605","token":"markup.raw"},{"background":"#CBCCC60F","token":"markup.raw.inline"},{"foreground":"#5C6773","background":"#CBCCC60F","fontStyle":"bold","token":"meta.separator"},{"foreground":"#95E6CB","fontStyle":"italic","token":"markup.quote"},{"foreground":"#FFD580","token":"markup.list punctuation.definition.list.begin"},{"foreground":"#A6CC70","token":"markup.inserted"},{"foreground":"#77A8D9","token":"markup.changed"},{"foreground":"#F27983","token":"markup.deleted"},{"foreground":"#FFE6B3","token":"markup.strike"},{"foreground":"#5CCFE6","background":"#CBCCC60F","token":"markup.table"},{"foreground":"#F29E74","token":"text.html.markdown markup.inline.raw"},{"foreground":"#5C6773","background":"#5C6773","token":"text.html.markdown meta.dummy.line-break"},{"foreground":"#5C6773","background":"#CBCCC6","token":"punctuation.definition.markdown"},{"foreground":"#6796E6","token":"token.info-token"},{"foreground":"#CD9731","token":"token.warn-token"},{"foreground":"#F44747","token":"token.error-token"},{"foreground":"#B267E6","token":"token.debug-token"}],"encodedTokensColors":[]}
\ No newline at end of file
+{"inherit":true,"base":"vs-dark","colors":{"activityBar.background":"#1f2430","activityBar.border":"#1f2430","activityBar.foreground":"#707a8ccc","activityBar.inactiveForeground":"#707a8c99","activityBarBadge.background":"#ffcc66","activityBarBadge.foreground":"#1f2430","badge.background":"#ffcc6633","badge.foreground":"#ffcc66","button.background":"#ffcc66","button.foreground":"#1f2430","button.hoverBackground":"#fac761","debugExceptionWidget.background":"#232834","debugExceptionWidget.border":"#191e2a","debugToolBar.background":"#232834","descriptionForeground":"#707a8c","diffEditor.insertedTextBackground":"#bae67e26","diffEditor.removedTextBackground":"#f29e7426","dropdown.background":"#232834","dropdown.border":"#434957","dropdown.foreground":"#707a8c","editor.background":"#28282b","editor.findMatchBackground":"#ffcc660d","editor.findMatchBorder":"#ffcc66","editor.findMatchHighlightBackground":"#ffcc660d","editor.findMatchHighlightBorder":"#ffcc6659","editor.findRangeHighlightBackground":"#323a4c","editor.findRangeHighlightBorder":"#1f243000","editor.foreground":"#cbccc6","editor.inactiveSelectionBackground":"#323a4c","editor.lineHighlightBackground":"#3a3a3e","editor.rangeHighlightBackground":"#191e2a","editor.selectionBackground":"#33415e","editor.selectionHighlightBackground":"#323a4c","editor.selectionHighlightBorder":"#323a4c","editor.wordHighlightBackground":"#77a8d912","editor.wordHighlightBorder":"#77a8d980","editor.wordHighlightStrongBackground":"#a6cc7012","editor.wordHighlightStrongBorder":"#a6cc7080","editorBracketMatch.background":"#707a8c4d","editorBracketMatch.border":"#707a8c99","editorCodeLens.foreground":"#5c6773","editorCursor.foreground":"#ffcc66","editorError.foreground":"#ff3333","editorGroup.background":"#232834","editorGroup.border":"#191e2a","editorGroupHeader.noTabsBackground":"#1f2430","editorGroupHeader.tabsBackground":"#1f2430","editorGroupHeader.tabsBorder":"#1f2430","editorGutter.addedBackground":"#a6cc7099","editorGutter.deletedBackground":"#f2798399","editorGutter.modifiedBackground":"#77a8d999","editorHoverWidget.background":"#232834","editorHoverWidget.border":"#101521","editorIndentGuide.activeBackground":"#707a8cb3","editorIndentGuide.background":"#707a8c4d","editorLineNumber.activeForeground":"#707a8ccc","editorLineNumber.foreground":"#707a8c66","editorLink.activeForeground":"#ffcc66","editorMarkerNavigation.background":"#232834","editorOverviewRuler.addedForeground":"#a6cc7099","editorOverviewRuler.border":"#191e2a","editorOverviewRuler.deletedForeground":"#f2798399","editorOverviewRuler.errorForeground":"#ff3333","editorOverviewRuler.modifiedForeground":"#77a8d999","editorOverviewRuler.warningForeground":"#ffcc66","editorRuler.foreground":"#707a8c4d","editorSuggestWidget.background":"#232834","editorSuggestWidget.border":"#101521","editorSuggestWidget.highlightForeground":"#ffcc66","editorSuggestWidget.selectedBackground":"#191e2a","editorWarning.foreground":"#ffcc66","editorWhitespace.foreground":"#707a8c66","editorWidget.background":"#232834","errorForeground":"#ff3333","extensionButton.prominentBackground":"#ffcc66","extensionButton.prominentForeground":"#1f2430","extensionButton.prominentHoverBackground":"#fac761","focusBorder":"#596171","foreground":"#707a8c","gitDecoration.conflictingResourceForeground":"#ff0000","gitDecoration.deletedResourceForeground":"#f27983b3","gitDecoration.ignoredResourceForeground":"#525a69","gitDecoration.modifiedResourceForeground":"#77a8d9b3","gitDecoration.submoduleResourceForeground":"#d4bfffb3","gitDecoration.untrackedResourceForeground":"#a6cc70b3","icon.foreground":"#707a8c","input.background":"#1d222e","input.border":"#434957","input.foreground":"#cbccc6","input.placeholderForeground":"#5f6878","inputOption.activeBorder":"#ffcc66","inputValidation.errorBackground":"#1f2430","inputValidation.errorBorder":"#ff3333","inputValidation.infoBackground":"#1f2430","inputValidation.infoBorder":"#5ccfe6","inputValidation.warningBackground":"#1f2430","inputValidation.warningBorder":"#ffd580","list.activeSelectionBackground":"#191e2a","list.activeSelectionForeground":"#707a8c","list.errorForeground":"#f27983","list.filterMatchBackground":"#ffcc660d","list.filterMatchBorder":"#ffcc66","list.focusBackground":"#191e2a","list.focusForeground":"#707a8c","list.highlightForeground":"#ffcc66","list.hoverBackground":"#191e2a","list.hoverForeground":"#707a8c","list.inactiveSelectionBackground":"#191e2a","list.inactiveSelectionForeground":"#707a8c","list.invalidItemForeground":"#5f6878","listFilterWidget.background":"#232834","listFilterWidget.noMatchesOutline":"#ff3333","listFilterWidget.outline":"#ffcc66","panel.background":"#1f2430","panel.border":"#191e2a","panelTitle.activeBorder":"#ffcc66","panelTitle.activeForeground":"#cbccc6","panelTitle.inactiveForeground":"#707a8c","peekView.border":"#191e2a","peekViewEditor.background":"#232834","peekViewEditor.matchHighlightBackground":"#ffcc6633","peekViewResult.background":"#232834","peekViewResult.fileForeground":"#707a8c","peekViewResult.matchHighlightBackground":"#ffcc6633","peekViewTitle.background":"#232834","peekViewTitleDescription.foreground":"#707a8c","peekViewTitleLabel.foreground":"#707a8c","pickerGroup.border":"#191e2a","pickerGroup.foreground":"#525a69","progressBar.background":"#ffcc66","scrollbar.shadow":"#191e2a","scrollbarSlider.activeBackground":"#707a8cb3","scrollbarSlider.background":"#707a8c66","scrollbarSlider.hoverBackground":"#707a8c99","selection.background":"#33415efd","settings.headerForeground":"#cbccc6","settings.modifiedItemIndicator":"#77a8d9","sideBar.background":"#1f2430","sideBar.border":"#1f2430","sideBarSectionHeader.background":"#1f2430","sideBarSectionHeader.border":"#1f2430","sideBarSectionHeader.foreground":"#707a8c","sideBarTitle.foreground":"#707a8c","statusBar.background":"#1f2430","statusBar.border":"#1f2430","statusBar.debuggingBackground":"#f29e74","statusBar.debuggingForeground":"#1f2430","statusBar.foreground":"#707a8c","statusBar.noFolderBackground":"#232834","statusBarItem.activeBackground":"#191e2a","statusBarItem.hoverBackground":"#191e2a","statusBarItem.prominentBackground":"#191e2a","statusBarItem.prominentHoverBackground":"#00000030","tab.activeBackground":"#1f2430","tab.activeBorder":"#ffcc66","tab.activeForeground":"#cbccc6","tab.border":"#1f2430","tab.inactiveBackground":"#1f2430","tab.inactiveForeground":"#707a8c","tab.unfocusedActiveBorder":"#707a8c","tab.unfocusedActiveForeground":"#707a8c","tab.unfocusedInactiveForeground":"#707a8c","terminal.ansiBlack":"#191e2a","terminal.ansiBlue":"#6dcbfa","terminal.ansiBrightBlack":"#686868","terminal.ansiBrightBlue":"#73d0ff","terminal.ansiBrightCyan":"#95e6cb","terminal.ansiBrightGreen":"#bae67e","terminal.ansiBrightMagenta":"#d4bfff","terminal.ansiBrightRed":"#f28779","terminal.ansiBrightWhite":"#ffffff","terminal.ansiBrightYellow":"#ffd580","terminal.ansiCyan":"#90e1c6","terminal.ansiGreen":"#a6cc70","terminal.ansiMagenta":"#cfbafa","terminal.ansiRed":"#ed8274","terminal.ansiWhite":"#c7c7c7","terminal.ansiYellow":"#fad07b","terminal.background":"#1f2430","terminal.foreground":"#cbccc6","textBlockQuote.background":"#232834","textLink.activeForeground":"#ffcc66","textLink.foreground":"#ffcc66","textPreformat.foreground":"#cbccc6","titleBar.activeBackground":"#1f2430","titleBar.activeForeground":"#cbccc6","titleBar.border":"#1f2430","titleBar.inactiveBackground":"#1f2430","titleBar.inactiveForeground":"#707a8c","tree.indentGuidesStroke":"#707a8cb3","walkThrough.embeddedEditorBackground":"#232834","widget.shadow":"#141925","minimap.background":"#28282b"},"rules":[{"foreground":"#6C7886","fontStyle":"italic","token":"comment"},{"foreground":"#BAE67E","token":"string"},{"foreground":"#BAE67E","token":"constant.other.symbol"},{"foreground":"#95E6CB","token":"string.regexp"},{"foreground":"#95E6CB","token":"constant.character"},{"foreground":"#95E6CB","token":"constant.other"},{"foreground":"#FFCC66","token":"constant.numeric"},{"foreground":"#FFCC66","token":"constant.language"},{"foreground":"#CBCCC6","token":"variable"},{"foreground":"#F28779","token":"variable.member"},{"foreground":"#5CCFE6","fontStyle":"italic","token":"variable.language"},{"foreground":"#FFA759","token":"storage"},{"foreground":"#FFA759","token":"keyword"},{"foreground":"#F29E74","token":"keyword.operator"},{"foreground":"#CBCCC6B3","token":"punctuation.separator"},{"foreground":"#CBCCC6B3","token":"punctuation.terminator"},{"foreground":"#CBCCC6","token":"punctuation.section"},{"foreground":"#F29E74","token":"punctuation.accessor"},{"foreground":"#73D0FF","token":"source.java storage.type"},{"foreground":"#73D0FF","token":"source.haskell storage.type"},{"foreground":"#73D0FF","token":"source.c storage.type"},{"foreground":"#5CCFE6","token":"entity.other.inherited-class"},{"foreground":"#FFA759","token":"storage.type.function"},{"foreground":"#5CCFE6","token":"source.java storage.type.primitive"},{"foreground":"#FFD580","token":"entity.name.function"},{"foreground":"#D4BFFF","token":"variable.parameter"},{"foreground":"#D4BFFF","token":"meta.parameter"},{"foreground":"#FFD580","token":"variable.function"},{"foreground":"#FFD580","token":"variable.annotation"},{"foreground":"#FFD580","token":"meta.function-call.generic"},{"foreground":"#FFD580","token":"support.function.go"},{"foreground":"#F28779","token":"support.function"},{"foreground":"#F28779","token":"support.macro"},{"foreground":"#BAE67E","token":"entity.name.import"},{"foreground":"#BAE67E","token":"entity.name.package"},{"foreground":"#73D0FF","token":"entity.name"},{"foreground":"#5CCFE6","token":"entity.name.tag"},{"foreground":"#5CCFE6","token":"meta.tag.sgml"},{"foreground":"#5CCFE680","token":"punctuation.definition.tag.end"},{"foreground":"#5CCFE680","token":"punctuation.definition.tag.begin"},{"foreground":"#5CCFE680","token":"punctuation.definition.tag"},{"foreground":"#FFD580","token":"entity.other.attribute-name"},{"foreground":"#F29E74","fontStyle":"italic","token":"support.constant"},{"foreground":"#5CCFE6","token":"support.type"},{"foreground":"#5CCFE6","token":"support.class"},{"foreground":"#5CCFE6","token":"source.go storage.type"},{"foreground":"#FFE6B3","token":"meta.decorator variable.other"},{"foreground":"#FFE6B3","token":"meta.decorator punctuation.decorator"},{"foreground":"#FFE6B3","token":"storage.type.annotation"},{"foreground":"#FF3333","token":"invalid"},{"foreground":"#C594C5","token":"meta.diff"},{"foreground":"#C594C5","token":"meta.diff.header"},{"foreground":"#FFD580","token":"source.ruby variable.other.readwrite"},{"foreground":"#73D0FF","token":"source.css entity.name.tag"},{"foreground":"#73D0FF","token":"source.sass entity.name.tag"},{"foreground":"#73D0FF","token":"source.scss entity.name.tag"},{"foreground":"#73D0FF","token":"source.less entity.name.tag"},{"foreground":"#73D0FF","token":"source.stylus entity.name.tag"},{"foreground":"#6C7886","token":"source.css support.type"},{"foreground":"#6C7886","token":"source.sass support.type"},{"foreground":"#6C7886","token":"source.scss support.type"},{"foreground":"#6C7886","token":"source.less support.type"},{"foreground":"#6C7886","token":"source.stylus support.type"},{"foreground":"#5CCFE6","fontStyle":"normal","token":"support.type.property-name"},{"foreground":"#6C7886","token":"constant.numeric.line-number.find-in-files - match"},{"foreground":"#FFA759","token":"constant.numeric.line-number.match"},{"foreground":"#BAE67E","token":"entity.name.filename.find-in-files"},{"foreground":"#FF3333","token":"message.error"},{"foreground":"#BAE67E","fontStyle":"bold","token":"markup.heading"},{"foreground":"#BAE67E","fontStyle":"bold","token":"markup.heading entity.name"},{"foreground":"#5CCFE6","token":"markup.underline.link"},{"foreground":"#5CCFE6","token":"string.other.link"},{"foreground":"#F28779","fontStyle":"italic","token":"markup.italic"},{"foreground":"#F28779","fontStyle":"bold","token":"markup.bold"},{"fontStyle":"bold italic","token":"markup.italic markup.bold"},{"fontStyle":"bold italic","token":"markup.bold markup.italic"},{"background":"#CBCCC605","token":"markup.raw"},{"background":"#CBCCC60F","token":"markup.raw.inline"},{"foreground":"#6C7886","background":"#CBCCC60F","fontStyle":"bold","token":"meta.separator"},{"foreground":"#95E6CB","fontStyle":"italic","token":"markup.quote"},{"foreground":"#FFD580","token":"markup.list punctuation.definition.list.begin"},{"foreground":"#A6CC70","token":"markup.inserted"},{"foreground":"#77A8D9","token":"markup.changed"},{"foreground":"#F27983","token":"markup.deleted"},{"foreground":"#FFE6B3","token":"markup.strike"},{"foreground":"#5CCFE6","background":"#CBCCC60F","token":"markup.table"},{"foreground":"#F29E74","token":"text.html.markdown markup.inline.raw"},{"foreground":"#6C7886","background":"#5C6773","token":"text.html.markdown meta.dummy.line-break"},{"foreground":"#6C7886","background":"#CBCCC6","token":"punctuation.definition.markdown"},{"foreground":"#6796E6","token":"token.info-token"},{"foreground":"#CD9731","token":"token.warn-token"},{"foreground":"#F44747","token":"token.error-token"},{"foreground":"#B267E6","token":"token.debug-token"}],"encodedTokensColors":[]}
\ No newline at end of file
diff --git a/src/store/charts/getters.ts b/src/store/charts/getters.ts
index a1522312df..9efdc8d5c7 100644
--- a/src/store/charts/getters.ts
+++ b/src/store/charts/getters.ts
@@ -1,7 +1,9 @@
+import vuetify from '@/plugins/vuetify'
 import { GetterTree } from 'vuex'
 import { ChartState } from './types'
 import { RootState } from '../types'
 import { Globals } from '@/globals'
+import dayjs from 'dayjs'
 
 export const getters: GetterTree<ChartState, RootState> = {
   /**
@@ -29,5 +31,167 @@ export const getters: GetterTree<ChartState, RootState> = {
     )
       ? config.server.temperature_store_size
       : Globals.CHART_HISTORY_RETENTION
+  },
+
+  /**
+   * Return base chart options given a chart type.
+   */
+  getBaseChartOptions: (state, getters, rootState, rootGetters) => () => {
+    // Common properties across all chart types.
+    const isDark = rootState.config?.uiSettings.theme.isDark
+    const isMobile = vuetify.framework.breakpoint.mobile
+
+    const fontColor = (isDark) ? 'rgba(255,255,255,0.65)' : 'rgba(0,0,0,0.45)'
+    const fontSize = (isMobile) ? 13 : 14
+
+    const lineStyle = {
+      color: (isDark) ? '#ffffff' : '#000000',
+      opacity: 0.05
+    }
+
+    const pointerStyle = {
+      color: (isDark) ? '#ffffff' : '#000000',
+      opacity: 0.5
+    }
+
+    const grid = {
+      show: true,
+      borderWidth: 1,
+      borderColor: (isDark) ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.15)'
+    }
+
+    const tooltip = {
+      backgroundColor: (isDark) ? 'rgba(15,15,15,0.65)' : 'rgba(255,255,255,0.65)',
+      borderColor: (isDark) ? 'rgba(0,0,0,0.85)' : 'rgba(255,255,255,0.85)',
+      textStyle: {
+        color: fontColor,
+        fontSize
+      }
+    }
+
+    const theme = rootGetters['config/getTheme']
+    const color = [
+      theme.currentTheme.primary,
+      theme.currentTheme.secondary
+    ]
+
+    return {
+      color,
+      grid,
+      tooltip: {
+        ...tooltip,
+        show: true,
+        trigger: 'axis',
+        // position: ['0%', '0%'],
+        position (pos: any, params: any, el: HTMLElement, elRect: any, size: any) {
+          const obj: { [index: string]: any } = { top: 0 }
+          obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 0
+          return obj
+        },
+        formatter: (params: any) => {
+          let title = false
+          let text = '<div>'
+          params
+            .forEach((param: any) => {
+              // console.log(param)
+              const yDimension = param.dimensionNames[param.encode.y]
+              const xDimension = param.dimensionNames[param.encode.x]
+              if (
+                xDimension &&
+                yDimension &&
+                param.seriesName
+              ) {
+                if (!title) {
+                  const date = dayjs(param.value[xDimension])
+                  text += `
+                  <span style="font-size:${fontSize}px;color:${fontColor};font-weight:400;margin-left:2px">
+                    ${date.format('LTS')}
+                  </span>
+                  `
+                  title = true
+                }
+                text += `
+                  <div style="white-space: nowrap;">
+                    ${param.marker}
+                    <span style="font-size:${fontSize}px;color:${fontColor};font-weight:400;margin-left:2px">
+                      ${param.seriesName}:
+                    </span>
+                    <span style="float:right;margin-left:20px;font-size:${fontSize}px;color:${fontColor};font-weight:900">
+                      ${param.value[yDimension]}%
+                    </span>
+                    <div style="clear: both"></div>
+                  </div>
+                  <div style="clear: both"></div>
+                `
+              }
+            })
+          text += '</div>'
+          return text
+        }
+        // axisPointer: { type: 'cross' }
+        // tooltipPosition: (pos: any, params: any, el: HTMLElement, elRect: any, size: any) => {
+        //   const obj: { [index: string]: any } = { top: 0 }
+        //   obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 10
+        //   return obj
+        // }
+      },
+      // axisPointer: {
+      //   type: 'axis',
+      //   lineStyle,
+      //   label
+      // },
+      xAxis: {
+        type: 'time',
+        boundaryGap: false,
+        min: (value: any) => {
+          return value.max - (600 * 1000)
+        },
+        max: 'dataMax',
+        axisLine: { show: false },
+        axisTick: { show: false },
+        axisLabel: { show: false, formatter: '{value}%' },
+        splitLine: { show: true, lineStyle },
+        axisPointer: { lineStyle: pointerStyle }
+      },
+      yAxis: {
+        type: 'value',
+        min: 0,
+        max: (value: any) => {
+          return (value.max <= 100)
+            ? 100
+            : value.max
+        },
+        axisLabel: { show: false, formatter: '{value}%' },
+        splitLine: { show: true, lineStyle }
+        // axisPointer: { label: { show: true } }
+      }
+    }
+  },
+
+  /**
+   * Returb base chart series configuration based on a type
+   */
+  getBaseSeries: () => (options: any) => {
+    const o = {
+      type: 'line',
+      smooth: true,
+      symbol: 'none',
+      areaStyle: {
+        type: 'solid',
+        opacity: 0.3
+      },
+      lineStyle: {
+        type: 'solid',
+        width: 1.5,
+        opacity: 1
+      },
+      emphasis: {
+        lineStyle: {
+          width: 1.5
+        }
+      },
+      ...options
+    }
+    return o
   }
 }
diff --git a/src/store/charts/mutations.ts b/src/store/charts/mutations.ts
index 121959ab88..db5256e920 100644
--- a/src/store/charts/mutations.ts
+++ b/src/store/charts/mutations.ts
@@ -1,3 +1,4 @@
+import Vue from 'vue'
 import { MutationTree } from 'vuex'
 import { ChartData, ChartState } from './types'
 import { defaultState } from './'
@@ -28,11 +29,16 @@ export const mutations: MutationTree<ChartState> = {
   /**
    * Adds a single chart entry.
    */
-  setChartEntry (state, payload: { retention: number; data: ChartData }) {
+  setChartEntry (state, payload: { type: string; retention: number; data: ChartData }) {
     // Dont keep data older than our set retention
-    state.chart.push(payload.data)
-    while (state.chart.length > payload.retention) {
-      state.chart.splice(0, 1)
+    if (!state[payload.type]) {
+      Vue.set(state, payload.type, [])
+      // console.log('created new array', payload.type)
+    }
+    state[payload.type].push(payload.data)
+    // console.log('set data', payload.type, payload.data)
+    while (state[payload.type].length > payload.retention) {
+      state[payload.type].splice(0, 1)
     }
   },
 
diff --git a/src/store/charts/types.ts b/src/store/charts/types.ts
index 2ae1369ad1..963463a4b0 100644
--- a/src/store/charts/types.ts
+++ b/src/store/charts/types.ts
@@ -1,4 +1,5 @@
 export interface ChartState {
+  [index: string]: any;
   ready: boolean; // chart is ready, and we've process the initial store data.
   chart: ChartData[]; // chart data
   selectedLegends: ChartSelectedLegends;
diff --git a/src/store/helpers.ts b/src/store/helpers.ts
index 15b56f21e1..32a6cd447b 100644
--- a/src/store/helpers.ts
+++ b/src/store/helpers.ts
@@ -144,6 +144,7 @@ export const handleAddChartEntry = (retention: number, keys: string[]) => {
     if (!date2 || date1.getTime() - date2.getTime() > diff) {
       const data = configureChartEntry(date1)
       store.commit('charts/setChartEntry', {
+        type: 'chart',
         data,
         retention
       })
@@ -452,3 +453,93 @@ export const getAllLayouts = (layouts: Layouts) => {
   }
   return knownComponents
 }
+
+export const handleSystemStatsChange = (payload: any) => {
+  if (
+    'system_stats' in payload
+  ) {
+    // Combine existing with the update.
+    const stats = {
+      ...store.state.printer?.printer.system_stats,
+      ...payload.system_stats
+    }
+
+    // Set a datetime.
+    const date = new Date()
+
+    // Add an entry for the memory graph.
+    if (
+      'memavail' in stats &&
+      store.state.server?.system_info?.cpu_info?.total_memory
+    ) {
+      const total_memory = store.state.server?.system_info?.cpu_info?.total_memory || 0
+      const mem_used = total_memory - stats.memavail
+      const percent_mem_used = mem_used / total_memory * 100
+
+      // Commit the formatted result to our chart data.
+      store.commit('charts/setChartEntry', {
+        type: 'memory',
+        retention: 600,
+        data: {
+          date,
+          memused: percent_mem_used.toFixed(2)
+        }
+      })
+    }
+
+    // Add an entry for the cpu time and sysload.
+    if (
+      'cputime' in stats &&
+      'sysload' in stats
+    ) {
+      const cores = store.state.server?.system_info?.cpu_info?.cpu_count || 1
+
+      const cputime = stats.cputime
+      const last_cputime = store.state.printer?.printer.system_stats?.cputime || stats.cputime || 0
+
+      // Commit the formatted result to our chart data.
+      store.commit('charts/setChartEntry', {
+        type: 'klipper',
+        retention: 600,
+        data: {
+          date,
+          load: (stats.sysload / cores * 100).toFixed(2),
+          cputime_change: ((cputime - last_cputime) * 100).toFixed(2)
+        }
+      })
+    }
+  }
+}
+
+export const handleMcuStatsChange = (payload: any) => {
+  const keys = Object.keys(payload).filter(key => key.startsWith('mcu'))
+  if (keys.length > 0) {
+    keys.forEach(key => {
+      // swap underscores for spaces.
+      const name = key.replace(' ', '_')
+
+      // Combine existing with the update.
+      const stats = {
+        ...store.state.printer?.printer[key],
+        ...payload[key]
+      }
+
+      if (stats.last_stats) {
+        const date = new Date()
+        const load = 100 * (stats.last_stats.mcu_task_avg + (3 * stats.last_stats.mcu_task_stddev) / 0.0025)
+        const awake = 100 * (stats.last_stats.mcu_awake / 5)
+
+        // Commit the formatted result to our chart data.
+        store.commit('charts/setChartEntry', {
+          type: name,
+          retention: 600,
+          data: {
+            date,
+            load: load.toFixed(2),
+            awake: awake.toFixed(2)
+          }
+        })
+      }
+    })
+  }
+}
diff --git a/src/store/printer/actions.ts b/src/store/printer/actions.ts
index fd2c0c511a..8d2f72c4ff 100644
--- a/src/store/printer/actions.ts
+++ b/src/store/printer/actions.ts
@@ -1,7 +1,7 @@
 import { ActionTree } from 'vuex'
 import { PrinterState } from './types'
 import { RootState } from '../types'
-import { handleAddChartEntry, handlePrintStateChange, handleCurrentFileChange } from '../helpers'
+import { handleAddChartEntry, handlePrintStateChange, handleCurrentFileChange, handleSystemStatsChange, handleMcuStatsChange } from '../helpers'
 import { SocketActions } from '@/api/socketActions'
 import { Globals } from '@/globals'
 import consola from 'consola'
@@ -129,6 +129,8 @@ export const actions: ActionTree<PrinterState, RootState> = {
       // compare the before and after.
       handleCurrentFileChange(payload)
       handlePrintStateChange(payload)
+      handleSystemStatsChange(payload)
+      handleMcuStatsChange(payload)
 
       for (const key in payload) {
         const val = payload[key]
@@ -141,7 +143,7 @@ export const actions: ActionTree<PrinterState, RootState> = {
         }
       }
 
-      // Add a chart entry
+      // Add a temp chart entry
       const retention = (rootState.server)
         ? rootState.server.config.server.temperature_store_size
         : Globals.CHART_HISTORY_RETENTION
diff --git a/src/store/printer/getters.ts b/src/store/printer/getters.ts
index d45ea94b05..e4f07e7914 100644
--- a/src/store/printer/getters.ts
+++ b/src/store/printer/getters.ts
@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import { GetterTree } from 'vuex'
 import { RootState } from '../types'
-import { PrinterState, Heater, Fan, OutputPin, TimeEstimates, Sensor, RunoutSensor, Extruder } from './types'
+import { PrinterState, Heater, Fan, OutputPin, TimeEstimates, Sensor, RunoutSensor, Extruder, MCU } from './types'
 import { get } from 'lodash-es'
 import { getKlipperType } from '../helpers'
 
@@ -180,6 +180,30 @@ export const getters: GetterTree<PrinterState, RootState> = {
     }
   },
 
+  /**
+   * Return system stats
+   */
+  getSystemStats: (state) => {
+    return state.printer.system_stats
+  },
+
+  /**
+   * Return MCU's and their state
+   */
+  getMcus: (state) => {
+    const mcus: MCU[] = []
+    Object.keys(state.printer)
+      .filter(key => key.startsWith('mcu'))
+      .sort()
+      .forEach(key => {
+        mcus.push({
+          name: key,
+          ...state.printer[key]
+        })
+      })
+    return mcus
+  },
+
   /**
  * Return known extruders, giving them a friendly name.
  */
@@ -189,13 +213,11 @@ export const getters: GetterTree<PrinterState, RootState> = {
       .filter(key => key.startsWith('extruder'))
       .sort()
       .forEach(key => {
-        if (key.startsWith('extruder')) {
-          if (key === 'extruder') {
-            extruders.push({ name: 'Extruder 0', key })
-          } else {
-            const match = key.match(/\d+$/)
-            if (match) extruders.push({ name: 'Extruder ' + match[0], key })
-          }
+        if (key === 'extruder') {
+          extruders.push({ name: 'Extruder 0', key })
+        } else {
+          const match = key.match(/\d+$/)
+          if (match) extruders.push({ name: 'Extruder ' + match[0], key })
         }
       })
     return extruders
diff --git a/src/store/printer/types.ts b/src/store/printer/types.ts
index b33f0bbaeb..9826ed9edb 100644
--- a/src/store/printer/types.ts
+++ b/src/store/printer/types.ts
@@ -11,6 +11,17 @@ export interface Extruder {
   key: string;
 }
 
+export interface MCU {
+  last_stats: MCUData;
+  mcu_build_versions: string;
+  mcu_constants: MCUData;
+  mcu_version: string;
+}
+
+export interface MCUData {
+  [index: string]: string | number;
+}
+
 export interface TimeEstimates {
   type: 'file' | 'slicer' | 'filament' | 'totals';
   progress: string;
diff --git a/src/store/server/actions.ts b/src/store/server/actions.ts
index f10b3af448..f74c8c7c21 100644
--- a/src/store/server/actions.ts
+++ b/src/store/server/actions.ts
@@ -80,6 +80,23 @@ export const actions: ActionTree<ServerState, RootState> = {
       await dispatch('onMachineThrottledState', payload.throttled_state)
     }
     commit('setMoonrakerStats', payload)
+
+    // Add a chart entry
+    if (
+      payload.moonraker_stats &&
+      'cpu_usage' in payload.moonraker_stats &&
+      !Array.isArray(payload.moonraker_stats)
+    ) {
+      const d = payload.moonraker_stats
+      commit('charts/setChartEntry', {
+        type: 'moonraker',
+        retention: 600,
+        data: {
+          date: new Date(d.time * 1000),
+          load: d.cpu_usage.toFixed(2)
+        }
+      }, { root: true })
+    }
   },
 
   async onMachineSystemInfo ({ commit }, payload) {
diff --git a/src/store/server/getters.ts b/src/store/server/getters.ts
index 800006a1af..a8d0ccbcfe 100644
--- a/src/store/server/getters.ts
+++ b/src/store/server/getters.ts
@@ -1,5 +1,5 @@
 import { GetterTree } from 'vuex'
-import { ServerInfo, ServerConfig, ServerState } from './types'
+import { ServerInfo, ServerConfig, ServerState, SystemInfo, ServerSystemStat } from './types'
 import { RootState } from '../types'
 import { Globals } from '@/globals'
 
@@ -11,6 +11,13 @@ export const getters: GetterTree<ServerState, RootState> = {
     return state.info
   },
 
+  /**
+   * Gets the current system info
+   */
+  getSystemInfo: (state): SystemInfo | null => {
+    return state.system_info
+  },
+
   /**
    * Return server config
    */
@@ -18,6 +25,13 @@ export const getters: GetterTree<ServerState, RootState> = {
     return state.config
   },
 
+  /**
+   * Return server process stats
+   */
+  getProcessStats: (state): ServerSystemStat[] => {
+    return state.moonraker_stats
+  },
+
   /**
    * Indicates if a component is enabled
    */
diff --git a/src/store/server/types.ts b/src/store/server/types.ts
index 6b88232885..4cf1c5362e 100644
--- a/src/store/server/types.ts
+++ b/src/store/server/types.ts
@@ -52,6 +52,7 @@ export interface CpuInfo {
   cpu_desc: string;
   hardware_desc: string;
   model: string;
+  total_memory: number;
 }
 
 export interface SDInfo {
diff --git a/src/views/Configure.vue b/src/views/Configure.vue
index ff78af40d9..7d408bc90d 100644
--- a/src/views/Configure.vue
+++ b/src/views/Configure.vue
@@ -2,32 +2,37 @@
   <v-container fluid class="constrained-width px-2 px-sm-4">
 
     <v-row class="mt-0 mt-sm-2">
-      <v-col cols="12" md="6" class="pt-0" v-if="!klippyReady || hasWarnings">
-        <klippy-status-card></klippy-status-card>
-      </v-col>
-      <v-col cols="12" md="3" lg="3" class="pt-0" v-if="klippyReady && !hasWarnings">
-        <disk-usage-card>
-        </disk-usage-card>
-        <collapsable-card
-          :title="$t('app.general.title.system_control')"
-          icon="$cogs">
-          <v-card-text>
-            <system-control></system-control>
-          </v-card-text>
-        </collapsable-card>
-      </v-col>
-      <v-col class="pt-0">
+      <v-col cols="12" md="6" class="pt-0">
         <collapsable-card
           :title="$t('app.general.title.config_files')"
           icon="$files"
           :draggable="false"
+          :height="460"
         >
           <file-system
             :roots="['config', 'config_examples', 'docs', 'logs']"
-            name="configure"
-            :max-height="620">
+            name="configure">
           </file-system>
         </collapsable-card>
+        <disk-usage-card></disk-usage-card>
+      </v-col>
+
+      <v-col cols="12" md="6" class="pt-0">
+
+        <klippy-status-card v-if="!klippyReady || hasWarnings"></klippy-status-card>
+
+        <system-usage-card v-if="hasGraphData"></system-usage-card>
+        <system-overview-card></system-overview-card>
+
+        <!-- <collapsable-card
+           v-if="klippyReady && !hasWarnings"
+          :title="$t('app.general.title.system_control')"
+          icon="$cogs">
+          <v-card-text>
+            <system-control></system-control>
+          </v-card-text>
+        </collapsable-card> -->
+
       </v-col>
     </v-row>
 
@@ -39,16 +44,29 @@ import { Component, Mixins } from 'vue-property-decorator'
 import StateMixin from '@/mixins/state'
 import FileSystem from '@/components/widgets/filesystem/FileSystem.vue'
 import SystemControl from '@/components/common/SystemControl.vue'
-import DiskUsageCard from '@/components/widgets/stats/DiskUsageCard.vue'
+
+import SystemOverviewCard from '@/components/widgets/system/SystemOverviewCard.vue'
+import SystemUsageCard from '@/components/widgets/system/SystemUsageCard.vue'
+import DiskUsageCard from '@/components/widgets/system/DiskUsageCard.vue'
 
 @Component({
   components: {
     FileSystem,
     SystemControl,
+    SystemOverviewCard,
+    SystemUsageCard,
     DiskUsageCard
   }
 })
 export default class Configure extends Mixins(StateMixin) {
+  get hasGraphData () {
+    return (
+      this.$store.state.charts.klipper !== undefined ||
+      this.$store.state.charts.moonraker !== undefined ||
+      this.$store.state.charts.memory !== undefined
+    )
+  }
+
   get breakpoint () {
     if (this.$vuetify.breakpoint.mdAndDown) {
       return 12
diff --git a/tools/convertTheme.js b/tools/convertTheme.js
index f917cb5556..a6a45d8c1c 100644
--- a/tools/convertTheme.js
+++ b/tools/convertTheme.js
@@ -40,6 +40,9 @@ themeDark.inherit = true
 themeDark.colors['editor.background'] = '#28282b'
 themeDark.colors['editor.lineHighlightBackground'] = '#3a3a3e'
 themeDark.colors['minimap.background'] = themeDark.colors['editor.background']
+themeDark.rules.forEach(rule => {
+  if (rule.foreground === '#5C6773') rule.foreground = '#7C8A99'
+})
 
 themeLight.inherit = false
 themeLight.colors['minimap.background'] = themeLight.colors['editor.background']