diff --git a/package.json b/package.json
index 6616a558..fa84d9e8 100644
--- a/package.json
+++ b/package.json
@@ -31,21 +31,21 @@
 		"stylelint:fix": "stylelint src --fix"
 	},
 	"dependencies": {
-		"@bundle-analyzer/webpack-plugin": "^0.5.1",
+		"@bundle-analyzer/webpack-plugin": "^0.2.1",
 		"@nextcloud/axios": "^1.5.0",
 		"@nextcloud/moment": "^1.1.1",
 		"@nextcloud/router": "^1.2.0",
 		"@nextcloud/vue": "^2.9.0",
 		"chart.js": "^2.9.4",
-		"dayjs": "^1.10.3",
+		"dayjs": "^1.10.4",
 		"moment": "^2.29.1",
 		"nextcloud-l10n": "^0.1.1",
 		"vue": "^2.6.12",
 		"vue-chartjs": "^3.5.1",
 		"vue-json-csv": "^1.2.12",
 		"vue-table-dynamic": "^0.2.8",
-		"vue2-datepicker": "^3.8.2",
-		"vuex": "^3.6.0"
+		"vue2-datepicker": "^3.9.0",
+		"vuex": "^3.6.2"
 	},
 	"browserslist": [
 		"extends @nextcloud/browserslist-config"
@@ -54,11 +54,11 @@
 		"node": ">=10.0.0"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.12.10",
+		"@babel/core": "^7.12.13",
 		"@babel/plugin-syntax-dynamic-import": "^7.8.3",
-		"@babel/preset-env": "^7.12.11",
+		"@babel/preset-env": "^7.12.13",
 		"@nextcloud/browserslist-config": "^1.0.0",
-		"@vue/test-utils": "^1.1.2",
+		"@vue/test-utils": "^1.1.3",
 		"babel-eslint": "^10.1.0",
 		"babel-loader": "^8.2.2",
 		"css-loader": "^3.6.0",
@@ -70,14 +70,14 @@
 		"eslint-plugin-import": "^2.22.1",
 		"eslint-plugin-nextcloud": "^0.3.0",
 		"eslint-plugin-node": "^11.1.0",
-		"eslint-plugin-promise": "^4.2.1",
+		"eslint-plugin-promise": "^4.3.1",
 		"eslint-plugin-standard": "^4.1.0",
 		"eslint-plugin-vue": "^6.2.2",
 		"node-sass": "^4.14.1",
 		"sass-loader": "^8.0.2",
 		"stylelint": "^13.9.0",
 		"stylelint-config-recommended-scss": "^3.3.0",
-		"stylelint-scss": "^3.18.0",
+		"stylelint-scss": "^3.19.0",
 		"stylelint-webpack-plugin": "^1.2.3",
 		"vue-loader": "^15.9.6",
 		"vue-template-compiler": "^2.6.12",
diff --git a/src/App.vue b/src/App.vue
index fb8c0dbe..d28a069d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -177,46 +177,13 @@ export default {
 		width: 100%;
 	}
 
-	.col-1 {
-		width: 8.33%;
-		min-width: 100px;
-	}
-
-	.col-2 {
-		width: 16.66%;
-		min-width: 200px;
-	}
-
-	.col-3 {
-		width: 25%;
-		min-width: 300px;
-	}
-
-	.col-4 {
-		width: 33.33%;
-	}
-
-	.col-5 {
-		width: 41.66%;
-	}
-
-	.col-6 {
-		width: 50%;
-	}
-
-	.col-7 {
-		width: 58.33%;
-	}
-
-	.col-8 {width: 66.66%;}
+	.col-1 { width: 25%; }
 
-	.col-9 {width: 75%;}
+	.col-2 { width: 50%; }
 
-	.col-10 {width: 83.33%;}
+	.col-3 { width: 75%; }
 
-	.col-11 {width: 91.66%;}
-
-	.col-12 {width: 100%;}
+	.col-4 { width: 100%; }
 
 	[class*='col-'] {
 		float: left;
@@ -229,22 +196,36 @@ export default {
 		// padding-left: 0;
 	}
 
+	.floatReverse [class*='col-'] {
+		float: right;
+	}
+
 	.row::after {
 		content: '';
 		clear: both;
 		display: table;
 	}
 
-	@media only screen and (max-width: 641px) {
-		.hide-s {
+	@media only screen and (max-width: 1025px) {
+		.hide-m {
 			display: none;
 		}
+
+		.col-1 { width: 50%; }
+
+		.col-3 { width: 100%; }
+
 	}
 
-	@media only screen and (max-width: 1025px) {
-		.hide-m {
+	@media only screen and (max-width: 641px) {
+		.hide-s {
 			display: none;
 		}
+
+		.col-1 { width: 50%; }
+
+		.col-2 { width: 100%; }
+
 	}
 
 	.content-wrapper {
@@ -304,6 +285,7 @@ export default {
 
 	.app-content {
 		padding-left: 15px;
+		padding-right: 15px;
 	}
 
 	.app-sidebar-tabs h3 {
diff --git a/src/general/DataTable.vue b/src/general/DataTable.vue
index b24342f6..7054eb87 100644
--- a/src/general/DataTable.vue
+++ b/src/general/DataTable.vue
@@ -74,10 +74,10 @@
 						:class="{ hide: !h.show }"
 						:style="(h.style) ? h.style(d[h.columnId]): ''">
 						<div>
-							<div v-if="h.type === 'date' && d[h.columnId]" class="wrapper">
+							<div v-if="h.type === 'date' && d[h.columnId]" class="wrapper align-right">
 								{{ d[h.columnId] | formatMyDate }}
 							</div>
-							<div v-else-if="h.type === 'datetime' && d[h.columnId]" class="wrapper">
+							<div v-else-if="h.type === 'datetime' && d[h.columnId]" class="wrapper align-right">
 								{{ d[h.columnId] | formatMyDatetime }}
 							</div>
 							<div v-else-if="h.type === 'select' && d[h.columnId]" class="wrapper">
@@ -168,11 +168,14 @@ export default {
 	name: 'DataTable',
 	filters: {
 		formatMyDate: function(v) {
-			return new Date(v).toLocaleDateString() === new Date().toLocaleDateString() ? t('health', 'today') : new Date(v).toLocaleDateString()
+			// return new Date(v).toLocaleDateString() === new Date().toLocaleDateString() ? t('health', 'today') : new Date(v).toLocaleDateString()
+			// console.debug('is valid date', { date: moment(v), valid: moment(v).isValid() })
+			return moment(v) === moment() ? t('health', 'today') : moment(v).format('lll')
 		},
 		formatMyDatetime: function(v) {
-			const date = new Date(v).toLocaleDateString() === new Date().toLocaleDateString() ? t('health', 'today') : new Date(v).toLocaleDateString()
-			return date + ' ' + new Date(v).toLocaleTimeString().slice(0, 5)
+			return moment(v).format('L') === moment().format('L') ? t('health', 'today') + ' ' + moment(v).format('LT') : moment(v).format('lll')
+			// const date = new Date(v).toLocaleDateString() === new Date().toLocaleDateString() ? t('health', 'today') : new Date(v).toLocaleDateString()
+			// return date + ' ' + new Date(v).toLocaleTimeString().slice(0, 5)
 		},
 	},
 	components: {
@@ -437,4 +440,14 @@ export default {
 		margin-left: 6px;
 	}
 
+	.chartDataRangeSelector {
+		margin-bottom: 10px;
+		margin-top: 15px;
+	}
+
+	.align-right {
+		text-align: right;
+		padding-right: 15px;
+	}
+
 </style>
diff --git a/src/general/charts/LineChart.js b/src/general/charts/LineChart.js
index c649261f..03bfe10f 100644
--- a/src/general/charts/LineChart.js
+++ b/src/general/charts/LineChart.js
@@ -13,4 +13,12 @@ export default {
 	mounted() {
 		this.renderChart(this.chartData, this.options)
 	},
+	// eslint-disable-next-line no-tabs
+/*	watch: {
+		options: function() {
+			console.debug('change chart options', this.options)
+			this.$data._chart.destroy()
+			this.renderChart(this.chartData, this.options)
+		},
+	}, */
 }
diff --git a/src/modules/measurement/MeasurementChart.vue b/src/modules/measurement/MeasurementChart.vue
index e2fb0a90..e35f1275 100644
--- a/src/modules/measurement/MeasurementChart.vue
+++ b/src/modules/measurement/MeasurementChart.vue
@@ -63,6 +63,7 @@ export default {
 					borderWidth: 2,
 					fill: true,
 					show: this.person.measurementColumnTemperature,
+					axesId: 'temperature',
 				},
 				{
 					title: t('health', 'Heart rate', {}),
@@ -76,6 +77,7 @@ export default {
 					borderWidth: 2,
 					fill: false,
 					show: this.person.measurementColumnHeartRate,
+					axesId: 'heartRate',
 				},
 				{
 					title: t('health', 'Blood pressure systolic', {}),
@@ -87,8 +89,9 @@ export default {
 					},
 					borderColor: 'rgb(110,20,128)',
 					borderWidth: 2,
-					fill: false,
+					fill: true,
 					show: this.person.measurementColumnBloodPres,
+					axesId: 'bloodPressure',
 				},
 				{
 					title: t('health', 'Blood pressure diastolic', {}),
@@ -100,8 +103,9 @@ export default {
 					},
 					borderColor: 'rgb(188,4,219)',
 					borderWidth: 2,
-					fill: false,
+					fill: true,
 					show: this.person.measurementColumnBloodPres,
+					axesId: 'bloodPressure',
 				},
 				{
 					title: t('health', 'Oxygen saturation', {}),
@@ -115,6 +119,7 @@ export default {
 					borderWidth: 2,
 					fill: true,
 					show: this.person.measurementColumnOxygenSat,
+					axesId: 'oxygenSat',
 				},
 				{
 					title: t('health', 'Blood sugar', {}),
@@ -128,6 +133,7 @@ export default {
 					borderWidth: 2,
 					fill: true,
 					show: this.person.measurementColumnBloodSugar,
+					axesId: 'bloodSugar',
 				},
 				{
 					title: t('health', 'Defecation', {}),
@@ -135,14 +141,17 @@ export default {
 					timeId: 'datetime',
 					valueId: 'defecation',
 					getValueY: function(v) {
-						const maxIndex = 3
-						return Math.round((v + 1) / (maxIndex + 1) * 100)
+						// console.debug('v for chart data', v)
+						return (v + 1)
+						// const maxIndex = 3
+						// return Math.round((v + 1) / (maxIndex + 1) * 100)
 					},
 					borderColor: 'darkgray',
 					borderWidth: 2,
 					fill: true,
 					type: 'bar',
 					show: this.person.measurementColumnDefecation,
+					axesId: 'defecation',
 				},
 			]
 		},
@@ -174,8 +183,84 @@ export default {
 								display: true,
 								labelString: t('health', 'Values'),
 							},
-							min: 0,
-							max: 100,
+						},
+						{
+							id: 'heartRate',
+							scaleLabel: {
+								display: true,
+								labelString: t('health', 'Heart rate'),
+							},
+							gridLines: {
+								display: false,
+							},
+							ticks: {
+								suggestedMin: 0,
+								suggestedMax: 100,
+								stepSize: 10,
+							},
+						},
+						{
+							id: 'temperature',
+							scaleLabel: {
+								display: true,
+								labelString: t('health', 'Temperature'),
+							},
+							gridLines: {
+								display: true,
+							},
+							ticks: {
+								stepSize: 0.2,
+							},
+						},
+						{
+							id: 'bloodPressure',
+							scaleLabel: {
+								display: true,
+								labelString: t('health', 'Blood pressure'),
+							},
+							gridLines: {
+								display: false,
+							},
+							ticks: {
+								suggestedMin: 0,
+								suggestedMax: 100,
+								stepSize: 10,
+							},
+						},
+						{
+							id: 'defecation',
+							scaleLabel: {
+								display: true,
+								labelString: t('health', 'Defecation'),
+							},
+							gridLines: {
+								display: false,
+							},
+							ticks: {
+								suggestedMin: 0,
+								suggestedMax: 4,
+								stepSize: 1,
+							},
+						},
+						{
+							id: 'bloodSugar',
+							scaleLabel: {
+								display: true,
+								labelString: t('health', 'Blood sugar'),
+							},
+							gridLines: {
+								display: false,
+							},
+						},
+						{
+							id: 'oxygenSat',
+							scaleLabel: {
+								display: true,
+								labelString: t('health', 'Oxygen saturation'),
+							},
+							gridLines: {
+								display: false,
+							},
 						},
 					],
 				},
diff --git a/src/modules/measurement/MeasurementContent.vue b/src/modules/measurement/MeasurementContent.vue
index d3e49d29..c2842a4d 100644
--- a/src/modules/measurement/MeasurementContent.vue
+++ b/src/modules/measurement/MeasurementContent.vue
@@ -64,6 +64,7 @@ import { mapState, mapGetters } from 'vuex'
 import MeasurementTable from './MeasurementTable'
 import MeasurementChart from './MeasurementChart'
 import MeasurementDetailChart from './MeasurementDetailChart'
+import moment from '@nextcloud/moment'
 
 export default {
 	name: 'MeasurementContent',
@@ -80,7 +81,7 @@ export default {
 				? null
 				// eslint-disable-next-line vue/no-side-effects-in-computed-properties
 				: this.measurementDatasets.sort(function(a, b) {
-					return new Date(b.datetime) - new Date(a.datetime)
+					return moment(b.datetime) - moment(a.datetime)
 				})
 		},
 	},
diff --git a/src/modules/measurement/MeasurementSidebar.vue b/src/modules/measurement/MeasurementSidebar.vue
index e03ab0c7..9ac3efaf 100644
--- a/src/modules/measurement/MeasurementSidebar.vue
+++ b/src/modules/measurement/MeasurementSidebar.vue
@@ -48,11 +48,6 @@
 			@change="$store.dispatch('setValue', { key: 'measurementColumnBloodSugar', value: $event.target.checked })">
 			{{ t('health', 'Blood sugar', {}) }}
 		</ActionCheckbox>
-		<ActionCheckbox
-			:checked="person.measurementColumnDefecation"
-			@change="$store.dispatch('setValue', { key: 'measurementColumnDefecation', value: $event.target.checked })">
-			{{ t('health', 'Blood sugar', {}) }}
-		</ActionCheckbox>
 		<ActionCheckbox
 			:checked="person.measurementColumnAppetite"
 			@change="$store.dispatch('setValue', { key: 'measurementColumnAppetite', value: $event.target.checked })">
diff --git a/src/modules/measurement/MeasurementTable.vue b/src/modules/measurement/MeasurementTable.vue
index 0e50bdc4..04a15e21 100644
--- a/src/modules/measurement/MeasurementTable.vue
+++ b/src/modules/measurement/MeasurementTable.vue
@@ -136,7 +136,7 @@ export default {
 						{ id: 3, label: t('health', 'extreme', {}) },
 					],
 					style: function(value) {
-						if (value === 4) {
+						if (value === 3) {
 							return 'color: darkred; font-weight: bolder;'
 						} else {
 							return ''
diff --git a/src/modules/persons/PersonsContent.vue b/src/modules/persons/PersonsContent.vue
index 1907af53..4ad43799 100644
--- a/src/modules/persons/PersonsContent.vue
+++ b/src/modules/persons/PersonsContent.vue
@@ -23,13 +23,18 @@
 <template>
 	<div>
 		<h2>{{ t('health', 'Welcome to your health center') }}</h2>
-		<p>{{ t('health', 'You can start here with giving you yourself a personal mission. Maybe you have a special target, a medical specification or a bet with your friends or partner. It could help you to describe it here. Giving yourself a bounty if you reach the targets or think about an emergency plan, if the things getting worth is also a good idea...') }}</p>
-		<textarea ref="mission" class="textarea-mission" :value="person.personalMission" />
-		<br>
-		<button
-			@click="updateMission">
-			{{ t('health', 'Save ') }}
-		</button>
+		<div class="row">
+			<div class="col-2">
+				<textarea ref="mission" class="textarea-mission" :value="person.personalMission" />
+				<button
+					@click="updateMission">
+					{{ t('health', 'Save ') }}
+				</button>
+			</div>
+			<div class="col-2">
+				<p>{{ t('health', 'You can start here with giving you yourself a personal mission. Maybe you have a special target, a medical specification or a bet with your friends or partner. It could help you to describe it here. Giving yourself a bounty if you reach the targets or think about an emergency plan, if the things getting worth is also a good idea...') }}</p>
+			</div>
+		</div>
 	</div>
 </template>
 
@@ -57,7 +62,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 	.textarea-mission {
-		width: 67%;
+		// width: 67%;
 		min-height: 200px;
 	}
 
diff --git a/src/modules/weight/WeightContent.vue b/src/modules/weight/WeightContent.vue
index b7778fb5..b902994a 100644
--- a/src/modules/weight/WeightContent.vue
+++ b/src/modules/weight/WeightContent.vue
@@ -35,7 +35,7 @@
 				{{ t('health', 'To calculate your BMI, please set your weight in the table below and you age and size in the person settings.') }}
 			</div>
 			<div class="row">
-				<div class="col-2 hide-s">
+				<div class="col-1 hide-s">
 					{{ t('health', 'minimum', {}) }}
 					<WeightBmi
 						v-if="minWeightDataset && person.size && person.age"
@@ -44,7 +44,7 @@
 						:weight="minWeightDataset ? minWeightDataset.weight : null"
 						:person="person" />
 				</div>
-				<div class="col-2" style="font-weight: bold;">
+				<div class="col-1" style="font-weight: bold;">
 					{{ t('health', 'actual', {}) }}
 					<WeightBmi
 						v-if="minWeightDataset && person.size && person.age"
@@ -54,7 +54,7 @@
 						:weight="lastWeightDataset ? lastWeightDataset.weight : null"
 						:person="person" />
 				</div>
-				<div class="col-2 hide-s">
+				<div class="col-1 hide-s">
 					{{ t('health', 'maximum', {}) }}
 					<WeightBmi
 						v-if="minWeightDataset && person.size && person.age"