diff --git a/.eslintrc.json b/.eslintrc.json
index 714f910..d2d7460 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -5,10 +5,7 @@
     "plugin:react/recommended",
     "plugin:prettier/recommended"
   ],
-  "plugins": [
-    "react",
-    "prettier"
-  ],
+  "plugins": ["react", "prettier"],
   "rules": {
     "react/react-in-jsx-scope": "off",
     "react/prop-types": "off"
@@ -16,4 +13,4 @@
   "globals": {
     "React": "writable"
   }
-}
\ No newline at end of file
+}
diff --git a/.prettierrc b/.prettierrc
index 221ac67..c7743ef 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -7,4 +7,4 @@
   "useTabs": false,
   "jsxSingleQuote": true,
   "bracketSpacing": true
-}
\ No newline at end of file
+}
diff --git a/README.md b/README.md
index 2b8cf2b..ae7509f 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,3 @@
-
 # CodeVitals
 
 Follow the performance metrics of your codebase.
diff --git a/package.json b/package.json
index c02a80d..f9f17cd 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,9 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start"
+    "start": "next start",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
   },
   "dependencies": {
     "@headlessui/react": "^2.1.2",
diff --git a/pages/project/[[...slug]]/index.js b/pages/project/[[...slug]]/index.js
index 0c4d916..37c6607 100644
--- a/pages/project/[[...slug]]/index.js
+++ b/pages/project/[[...slug]]/index.js
@@ -9,6 +9,7 @@ import Layout from '../../../components/layout'
 import { Chart as ChartJS, Tooltip, registerables } from 'chart.js'
 import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
+import { format } from 'date-fns'
 
 ChartJS.register(...registerables)
 
@@ -101,29 +102,41 @@ function Metric({ metric, repository }) {
       setChartIsZoomed(false)
     }
   }, [metric, limit])
-  const customTooltip = useCallback((context) => {
-    const { chart, tooltip } = context
-    if (tooltip.opacity === 0) {
-      setTooltipData({ isVisible: false })
-      return
-    }
+  const customTooltip = useCallback(
+    (context) => {
+      const { chart, tooltip } = context
+      if (tooltip.opacity === 0) {
+        setTooltipData({ isVisible: false })
+        return
+      }
 
-    const { offsetLeft, offsetTop } = chart.canvas
+      const { offsetLeft, offsetTop } = chart.canvas
+      const dataIndex = tooltip.dataPoints?.[0]?.dataIndex
+      const hash = perf?.[dataIndex]?.hash
 
-    setTooltipData({
-      isVisible: true,
-      left: offsetLeft + tooltip.caretX,
-      top: offsetTop + tooltip.caretY,
-      titleLines: tooltip.title || [],
-      bodyLines: tooltip.body.map(({ lines }) => lines)
-    })
-  }, [])
+      setTooltipData({
+        isVisible: true,
+        left: offsetLeft + tooltip.caretX,
+        top: offsetTop + tooltip.caretY,
+        titleLines: tooltip.title || [],
+        bodyLines: tooltip.body.map(({ lines }) => lines),
+        hash: hash
+      })
+    },
+    [perf]
+  )
   const options = useMemo(
     () => ({
       responsive: true,
       scales: {
         x: {
-          display: false
+          display: true,
+          ticks: {
+            maxRotation: 45,
+            minRotation: 45,
+            autoSkip: true,
+            maxTicksLimit: 10
+          }
         },
         y: {
           min: 0
@@ -156,7 +169,7 @@ function Metric({ metric, repository }) {
   )
   const data = useMemo(
     () => ({
-      labels: perf?.map((p) => p.hash),
+      labels: perf?.map((p) => format(new Date(p.measured_at), 'MMM d, yyyy HH:mm')),
       datasets: [
         {
           label: metric.name,
@@ -299,10 +312,20 @@ function GraphTooltip({ repository, tooltipData }) {
         }}
       >
         <div style={{ color: '#fff', fontSize: '12px' }}>
-          {tooltipData.titleLines.map((title, i) => (
-            <a key={i} href={`${repository}/commit/${title}`} target='blank' style={{ display: 'inline-block' }}>
-              {title.slice(0, 7)}
+          {tooltipData.hash && (
+            <a
+              key='hash'
+              href={`${repository}/commit/${tooltipData.hash}`}
+              target='blank'
+              style={{ display: 'block', marginBottom: '4px' }}
+            >
+              {tooltipData.hash.slice(0, 7)}
             </a>
+          )}
+          {tooltipData.titleLines.map((title, i) => (
+            <div key={i} style={{ marginBottom: '2px' }}>
+              {title}
+            </div>
           ))}
           {tooltipData.bodyLines.map((line, i) => (
             <div className='flex items-center' key={i}>