diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7e0ed0d..b2d9bac 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,18 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.1.6] - 2023-09-20
+
+### Added
+- Added Vital view for individual person
+- Add measurement modal for Vital view autopopulates vital
+- Person can pan vital graph
+
+### Changed
+
+### Fixed
+
+
 ## [0.1.5] - 2023-09-19
 
 ### Added
diff --git a/package-lock.json b/package-lock.json
index 58ae0c2..5021679 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,18 +1,20 @@
 {
   "name": "healthrecord",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "healthrecord",
-      "version": "0.1.3",
+      "version": "0.1.5",
       "dependencies": {
         "@headlessui/vue": "^1.7.16",
         "@heroicons/vue": "^2.0.18",
         "@tailwindcss/forms": "^0.5.6",
         "chart.js": "^4.4.0",
+        "chartjs-adapter-dayjs-4": "^1.0.4",
         "chartjs-plugin-annotation": "^3.0.1",
+        "chartjs-plugin-zoom": "^2.0.1",
         "dayjs": "^1.11.9",
         "file-saver": "^2.0.5",
         "pluralize": "^8.0.0",
@@ -3877,6 +3879,18 @@
         "pnpm": ">=7"
       }
     },
+    "node_modules/chartjs-adapter-dayjs-4": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/chartjs-adapter-dayjs-4/-/chartjs-adapter-dayjs-4-1.0.4.tgz",
+      "integrity": "sha512-yy9BAYW4aNzPVrCWZetbILegTRb7HokhgospPoC3b5iZ5qdlqNmXts2KdSp6AqnjkPAp/YWyHDxLvIvwt5x81w==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "chart.js": ">=4.0.1",
+        "dayjs": "^1.9.7"
+      }
+    },
     "node_modules/chartjs-plugin-annotation": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/chartjs-plugin-annotation/-/chartjs-plugin-annotation-3.0.1.tgz",
@@ -3885,6 +3899,17 @@
         "chart.js": ">=4.0.0"
       }
     },
+    "node_modules/chartjs-plugin-zoom": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/chartjs-plugin-zoom/-/chartjs-plugin-zoom-2.0.1.tgz",
+      "integrity": "sha512-ogOmLu6e+Q7E1XWOCOz9YwybMslz9qNfGV2a+qjfmqJYpsw5ZMoRHZBUyW+NGhkpQ5PwwPA/+rikHpBZb7PZuA==",
+      "dependencies": {
+        "hammerjs": "^2.0.8"
+      },
+      "peerDependencies": {
+        "chart.js": ">=3.2.0"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -5976,6 +6001,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/hammerjs": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
+      "integrity": "sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/handle-thing": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
@@ -14757,12 +14790,26 @@
         "@kurkle/color": "^0.3.0"
       }
     },
+    "chartjs-adapter-dayjs-4": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/chartjs-adapter-dayjs-4/-/chartjs-adapter-dayjs-4-1.0.4.tgz",
+      "integrity": "sha512-yy9BAYW4aNzPVrCWZetbILegTRb7HokhgospPoC3b5iZ5qdlqNmXts2KdSp6AqnjkPAp/YWyHDxLvIvwt5x81w==",
+      "requires": {}
+    },
     "chartjs-plugin-annotation": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/chartjs-plugin-annotation/-/chartjs-plugin-annotation-3.0.1.tgz",
       "integrity": "sha512-hlIrXXKqSDgb+ZjVYHefmlZUXK8KbkCPiynSVrTb/HjTMkT62cOInaT1NTQCKtxKKOm9oHp958DY3RTAFKtkHg==",
       "requires": {}
     },
+    "chartjs-plugin-zoom": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/chartjs-plugin-zoom/-/chartjs-plugin-zoom-2.0.1.tgz",
+      "integrity": "sha512-ogOmLu6e+Q7E1XWOCOz9YwybMslz9qNfGV2a+qjfmqJYpsw5ZMoRHZBUyW+NGhkpQ5PwwPA/+rikHpBZb7PZuA==",
+      "requires": {
+        "hammerjs": "^2.0.8"
+      }
+    },
     "chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -16363,6 +16410,11 @@
         "duplexer": "^0.1.2"
       }
     },
+    "hammerjs": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
+      "integrity": "sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ=="
+    },
     "handle-thing": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
diff --git a/package.json b/package.json
index 10cd63c..e43499c 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "healthrecord",
   "private": true,
-  "version": "0.1.5",
+  "version": "0.1.6",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -13,7 +13,9 @@
     "@heroicons/vue": "^2.0.18",
     "@tailwindcss/forms": "^0.5.6",
     "chart.js": "^4.4.0",
+    "chartjs-adapter-dayjs-4": "^1.0.4",
     "chartjs-plugin-annotation": "^3.0.1",
+    "chartjs-plugin-zoom": "^2.0.1",
     "dayjs": "^1.11.9",
     "file-saver": "^2.0.5",
     "pluralize": "^8.0.0",
diff --git a/src/components/Dashboard/Measurements/Form.vue b/src/components/Dashboard/Measurements/Form.vue
index ed69b3d..df91960 100644
--- a/src/components/Dashboard/Measurements/Form.vue
+++ b/src/components/Dashboard/Measurements/Form.vue
@@ -13,7 +13,7 @@ const emit  = defineEmits(['submit']);
 const value     = ref(props.value || '');
 const date      = ref(dayjs(props.date).format('YYYY-MM-DD') || '');
 const personId  = ref(props.personId || route.params.personId || '');
-const vitalId   = ref(props.vitalId || '');
+const vitalId   = ref(props.vitalId || route.params.vitalId || '');
 
 const isFormComplete = computed(() => {
   return value.value.length > 0 
diff --git a/src/components/Dashboard/Measurements/MeasurementListItem.vue b/src/components/Dashboard/Measurements/MeasurementListItem.vue
index c773bd3..a4bf196 100644
--- a/src/components/Dashboard/Measurements/MeasurementListItem.vue
+++ b/src/components/Dashboard/Measurements/MeasurementListItem.vue
@@ -5,9 +5,12 @@ import { EllipsisHorizontalIcon, PencilIcon, TrashIcon, CalendarIcon, UserIcon,
 import { vitals } from '../../../store/vitals';
 import { people } from '../../../store/people';
 import { computed } from 'vue';
+import { useRoute } from 'vue-router';
 
 const props = defineProps(['measurement']);
 
+const route = useRoute();
+
 const vital = computed(() => {
   return vitals.value.find(vital => vital.id === props.measurement.vitalId);
 });
@@ -16,9 +19,31 @@ const person = computed(() => {
   return people.value.find(person => person.id === props.measurement.personId);
 });
 
-const isHigh = computed(() => {
+const editRoute = () => {
+  if (route.params.personId && route.params.vitalId) {
+    return {
+      name: 'PersonVitalMeasurementEdit',
+      params: {
+        measurementId: props.measurement.id
+      }
+    }
+  } else if (route.params.personId) {
+    return {
+      name: 'PersonMeasurementEdit',
+      params: {
+        measurementId: props.measurement.id
+      }
+    }
+  } else {
+    return {
+      name: 'MeasurementEdit',
+      params: {
+        measurementId: props.measurement.id
+      }
+    }
+  }
+}
 
-});
 </script>
 
 <template>
@@ -46,7 +71,7 @@ const isHigh = computed(() => {
         <MenuItems @click.stop class="menu-items">
           <div class="p-1">
             <MenuItem v-slot="{ close }">
-              <button class="menu-item group/menu-item" @click="close(); $router.push({ name: 'MeasurementEdit', params: { measurementId: measurement.id }});">
+              <button class="menu-item group/menu-item" @click="close(); $router.push(editRoute());">
                 <PencilIcon class="group-hover/menu-item:text-indigo-200" />
                 Edit
               </button>
diff --git a/src/components/Dashboard/People/Person.vue b/src/components/Dashboard/People/Person.vue
index 629855a..0eafa01 100644
--- a/src/components/Dashboard/People/Person.vue
+++ b/src/components/Dashboard/People/Person.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { LightBulbIcon } from '@heroicons/vue/24/outline';
+import { LightBulbIcon, ChevronRightIcon } from '@heroicons/vue/24/outline';
 import { PlusIcon } from '@heroicons/vue/20/solid';
 import VitalChart from './VitalChart.vue';
 import { computed } from 'vue';
@@ -47,11 +47,14 @@ const vitalMeasurements = (vitalId) => {
       </div>
     </div>
     <div>
-      <div v-if="trackedVitals.length > 0" class="grid md:grid-cols-2 gap-3">
-        <div v-for="vital in trackedVitals" :key="vital.id" class="group bg-white p-3 rounded-md cursor-pointer hover:shadow">
-          <h3 class="font-semibold group-hover:text-indigo-600 mb-1">{{ vital.name }}</h3>
+      <div v-if="trackedVitals.length > 0" class="grid grid-cols-2 gap-3">
+        <div v-for="vital in trackedVitals" :key="vital.id" class="group bg-white p-3 rounded-md cursor-pointer hover:shadow" @click="$router.push({ name: 'PersonVital', params: { vitalId: vital.id } })">
+          <header class="grid grid-cols-[auto_min-content]">
+            <h3 class="font-semibold group-hover:text-indigo-600 mb-1">{{ vital.name }}</h3>
+            <ChevronRightIcon class="h-5 w-5 self-start group-hover:stroke-indigo-600" />
+          </header>
           <p class="text-gray-500 text-sm">{{ pluralize('measurement', vitalMeasurements(vital.id).length, true) }}</p>
-          <VitalChart class="mt-3" :vital="vital" :measurements="vitalMeasurements(vital.id)" />
+          <VitalChart class="mt-3" :vital="vital" :measurements="vitalMeasurements(vital.id)" :small="true" />
         </div>
       </div>
       <div v-else class="border border-amber-200 p-4 rounded-lg text-amber-500 bg-amber-100 text-sm">
@@ -63,7 +66,7 @@ const vitalMeasurements = (vitalId) => {
       </div>
     </div>
     <div v-if="measurements.length > 0" class="pb-28 pt-9 md:pb-0 grid gap-3">
-      <h3 class="z-10 text-xl font-bold sticky top-14 pb-3 bg-gradient-to-b from-gray-100 from-70%">Measurements</h3>
+      <h3 class="z-10 text-xl font-bold sticky top-8 pb-1 bg-gradient-to-b from-gray-100 from-70%">Measurements</h3>
       <MeasurementListItem v-for="measurement in measurements" :key="measurement.id" :measurement="measurement" />
     </div>
     <RouterView name="modal" />
diff --git a/src/components/Dashboard/People/Vital.vue b/src/components/Dashboard/People/Vital.vue
new file mode 100644
index 0000000..ee67ca0
--- /dev/null
+++ b/src/components/Dashboard/People/Vital.vue
@@ -0,0 +1,56 @@
+<script setup>
+import { vitals } from '../../../store/vitals';
+import { measurements } from '../../../store/measurements';
+import { people } from '../../../store/people';
+import { useRoute } from 'vue-router';
+import VitalChart from './VitalChart.vue';
+import { computed } from 'vue';
+import pluralize from 'pluralize';
+import MeasurementListItem from '../Measurements/MeasurementListItem.vue';
+import { PlusIcon } from '@heroicons/vue/20/solid';
+import { ChevronLeftIcon } from '@heroicons/vue/24/outline';
+
+const vitalId   = useRoute().params.vitalId;
+const personId  = useRoute().params.personId;
+
+const person = computed(() => {
+  return people.value.find(person => person.id === personId);
+});
+
+const vital = computed(() => {
+  return vitals.value.find(vital => vital.id === vitalId);
+});
+
+const vitalMeasurements = computed(() => {
+  return measurements.value.filter(measurement => {
+    return measurement.personId === personId && measurement.vitalId === vitalId;
+  });
+});
+</script>
+
+<template>
+  <div>
+    <div class="z-10 sticky top-0 pt-0 mt-0 pb-5 grid grid-flow-col items-start bg-gradient-to-b from-gray-100 from-90%">
+      <header>
+        <RouterLink class="text-sm text-gray-500" :to="{ name: 'Person', params: { personId }}">
+          <ChevronLeftIcon class="w-4 h-4 inline -mt-0.5" /> {{ person.firstName + ' ' + person.lastName }}
+        </RouterLink>
+        <h2 class="text-2xl font-bold">{{ vital.name }}</h2>
+        <p class="text-sm text-gray-500">{{ pluralize('measurement', vitalMeasurements.length, true) }}.</p>
+      </header>
+      <div class="grid justify-end">
+        <RouterLink class="group rounded-full hover:bg-gray-200" :to="{ name: 'PersonVitalMeasurementAdd' }">
+          <PlusIcon class="group-hover:text-indigo-600 h-10 w-10" />
+        </RouterLink>
+      </div>
+    </div>
+    <div class="bg-white rounded-xl p-4">
+      <VitalChart :vital="vital" :measurements="vitalMeasurements" />
+    </div>
+    <div class="pb-28 pt-9 md:pb-0 grid gap-3">
+      <h3 class="z-10 text-xl font-bold sticky top-14 pb-3 bg-gradient-to-b from-gray-100 from-70%">Measurements</h3>
+      <MeasurementListItem v-for="measurement in vitalMeasurements" :key="measurement.id" :measurement="measurement" />
+    </div>
+    <RouterView name="modal" />
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/components/Dashboard/People/VitalChart.vue b/src/components/Dashboard/People/VitalChart.vue
index 7a6d9da..efe2225 100644
--- a/src/components/Dashboard/People/VitalChart.vue
+++ b/src/components/Dashboard/People/VitalChart.vue
@@ -1,12 +1,17 @@
 <script setup>
 import { Line } from 'vue-chartjs';
 import AnnotationPlugin from 'chartjs-plugin-annotation';
-import { Chart as ChartJS, Title, Tooltip, Legend, CategoryScale, LinearScale, PointElement, LineElement } from 'chart.js';
+import ZoomPlugin from 'chartjs-plugin-zoom';
+import { Chart as ChartJS, Title, Tooltip, Legend, CategoryScale, LinearScale, PointElement, LineElement, TimeScale } from 'chart.js';
 import { computed } from 'vue';
+import 'chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm';
+import dayjs from 'dayjs';
 
-ChartJS.register(Title, Tooltip, Legend, CategoryScale, LinearScale, PointElement, LineElement, AnnotationPlugin)
+ChartJS.register(Title, Tooltip, Legend, CategoryScale, LinearScale, PointElement, LineElement, AnnotationPlugin, ZoomPlugin, TimeScale)
 
-const props = defineProps([ 'vital', 'measurements' ]);
+ChartJS.defaults.font.family = 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'
+
+const props = defineProps([ 'vital', 'measurements', 'small' ]);
 
 const measurements = computed(() => {
   return props.measurements.reverse()
@@ -39,7 +44,7 @@ const data = computed(() => {
 const options = {
   plugins: {
     legend: {
-      display: false
+      display: false,
     },
     tooltip: {
       displayColors: false,
@@ -48,35 +53,65 @@ const options = {
           return context.formattedValue + ' ' + props.vital.unit;
         },
         title: (context) => {
-          return new Date(Number(context[0].label)).toLocaleDateString();
+          return new Date(Number(context[0].parsed.x)).toLocaleDateString();
         }
       }
     },
     annotation: {
       annotations: {}
-    }
+    },
+    zoom: {}
   },
   responsive: true,
   scales: {
     x: {
+      type: 'time',
+      time: {
+        unit: 'day',
+        tooltipFormat: 'MM/DD/YYYY'
+      },
+      // suggestedMin: dayjs().subtract(1, 'week').valueOf(),
+      bounds: 'ticks',
       grid: {
-        display: false
+        display: false,
+        color: '#efefef'
       },
       ticks: {
-        display: false
-      }
+        display: props.small ? false : true,
+        autoSkipPadding: 30,
+        color: '#aaa'
+      },
     },
     y: {
       grid: {
-        display: false
+        display: false 
       },
       ticks: {
-        display: false
+        color: '#aaa',
+        autoSkipPadding: 30,
+        major: {
+          enabled: true
+        },
+        display: props.small ? false : true,
+        callback: (value) => {
+          return Number(Number(value).toFixed(2)).toLocaleString() + ' ' + props.vital.unit;
+        }
       }
     }
   }
 }
 
+if (!props.small) {
+  options.plugins.zoom = {
+    pan: {
+      enabled: true,
+      mode: 'x'
+    }
+  }
+
+  options.scales.x.grid.display = true
+}
+
 if (props.vital.low.length > 0) {
   options.plugins.annotation.annotations.lowLine = {
     type: 'line',
diff --git a/src/router/index.js b/src/router/index.js
index b4f93c9..329ad05 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -4,6 +4,7 @@ import StartNew from '../components/Start/New.vue'
 import DashboardLayout from '../components/Dashboard/Layout.vue'
 import People from '../components/Dashboard/People/People.vue'
 import Person from '../components/Dashboard/People/Person.vue'
+import PersonVital from '../components/Dashboard/People/Vital.vue'
 import PeopleAdd from '../components/Dashboard/People/Add.vue'
 import PeopleEdit from '../components/Dashboard/People/Edit.vue'
 import Settings from '../components/Dashboard/Settings/Settings.vue'
@@ -78,7 +79,7 @@ const routes = [
         }
       },
       {
-        path: '/people/add',
+        path: 'add',
         name: 'PeopleAdd',
         components: {
           main: People,
@@ -86,7 +87,7 @@ const routes = [
         }
       },
       {
-        path: '/people/:personId',
+        path: ':personId',
         name: 'Person',
         components: {
           main: Person
@@ -98,17 +99,47 @@ const routes = [
             components: {
               modal: MeasurementAdd
             }
-          }
+          },
+          {
+            path: 'measurement/:measurementId/edit',
+            name: 'PersonMeasurementEdit',
+            components: {
+              modal: MeasurementEdit
+            }
+          },
         ]
       },
       {
-        path: '/people/:personId/edit',
+        path: ':personId/edit',
         name: 'PeopleEdit',
         components: {
           main: People,
           modal: PeopleEdit
         }
       },
+      {
+        path: ':personId/vital/:vitalId',
+        name: 'PersonVital',
+        components: {
+          main: PersonVital
+        },
+        children: [
+          {
+            path: 'measurement/add',
+            name: 'PersonVitalMeasurementAdd',
+            components: {
+              modal: MeasurementAdd
+            }
+          },
+          {
+            path: 'measurement/:measurementId/edit',
+            name: 'PersonVitalMeasurementEdit',
+            components: {
+              modal: MeasurementEdit
+            }
+          },
+        ]
+      },
     ]
   },
   {