diff --git a/apps/recnet/src/app/admin/stats/user-rec/RecsCycleBarChart.tsx b/apps/recnet/src/app/admin/stats/user-rec/RecsCycleBarChart.tsx
index 766a5013..ed3a3ab9 100644
--- a/apps/recnet/src/app/admin/stats/user-rec/RecsCycleBarChart.tsx
+++ b/apps/recnet/src/app/admin/stats/user-rec/RecsCycleBarChart.tsx
@@ -14,13 +14,12 @@ interface RecsCycleBarChartProps {
   data: Record<Timestamp, number>;
 }
 
-const verticalMargin = 70;
-
 function BarChart(props: RecsCycleBarChartProps) {
   const { parentWidth, parentHeight, data } = props;
   // bounds
+  const margin = { top: 40, right: 0, bottom: 0, left: 0 };
   const xMax = parentWidth;
-  const yMax = parentHeight - verticalMargin;
+  const yMax = parentHeight - margin.top;
 
   // data
   const timestamps = Object.keys(data).map((ts) => parseInt(ts, 10));
@@ -44,7 +43,7 @@ function BarChart(props: RecsCycleBarChartProps) {
 
   return (
     <svg width={parentWidth} height={parentHeight}>
-      <Group top={verticalMargin / 2}>
+      <Group top={margin.top}>
         {Object.keys(data)
           .map((key) => {
             const ts = parseInt(key, 10);
diff --git a/package.json b/package.json
index db004be7..f628327f 100644
--- a/package.json
+++ b/package.json
@@ -12,10 +12,12 @@
     "@radix-ui/themes": "^2.0.3",
     "@react-email/components": "0.0.14",
     "@react-email/render": "^0.0.12",
+    "@visx/axis": "^3.8.0",
     "@visx/group": "^3.3.0",
     "@visx/responsive": "^3.3.0",
     "@visx/scale": "^3.5.0",
     "@visx/shape": "^3.5.0",
+    "@visx/vendor": "^3.5.0",
     "chance": "^1.1.11",
     "clsx": "^2.1.0",
     "firebase": "^10.7.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fc61f0d4..03b1923f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,6 +26,9 @@ dependencies:
   '@react-email/render':
     specifier: ^0.0.12
     version: 0.0.12
+  '@visx/axis':
+    specifier: ^3.8.0
+    version: 3.8.0(react@18.2.0)
   '@visx/group':
     specifier: ^3.3.0
     version: 3.3.0(react@18.2.0)
@@ -38,6 +41,9 @@ dependencies:
   '@visx/shape':
     specifier: ^3.5.0
     version: 3.5.0(react@18.2.0)
+  '@visx/vendor':
+    specifier: ^3.5.0
+    version: 3.5.0
   chance:
     specifier: ^1.1.11
     version: 1.1.11
@@ -6603,6 +6609,22 @@ packages:
       eslint-visitor-keys: 3.4.3
     dev: true
 
+  /@visx/axis@3.8.0(react@18.2.0):
+    resolution: {integrity: sha512-CFIxPnRlIWIz8N+5n4DTSOQQ2Yb0D35YPylEkmk/c7J4haLCEhyI44JaOg6OYOk6ofCOsu9Fqe6dFAOP+MP1IQ==}
+    peerDependencies:
+      react: ^16.3.0-0 || ^17.0.0-0 || ^18.0.0-0
+    dependencies:
+      '@types/react': 18.2.33
+      '@visx/group': 3.3.0(react@18.2.0)
+      '@visx/point': 3.3.0
+      '@visx/scale': 3.5.0
+      '@visx/shape': 3.5.0(react@18.2.0)
+      '@visx/text': 3.3.0(react@18.2.0)
+      classnames: 2.5.1
+      prop-types: 15.8.1
+      react: 18.2.0
+    dev: false
+
   /@visx/curve@3.3.0:
     resolution: {integrity: sha512-G1l1rzGWwIs8ka3mBhO/gj8uYK6XdU/3bwRSoiZ+MockMahQFPog0bUkuVgPwwzPSJfsA/E5u53Y/DNesnHQxg==}
     dependencies:
@@ -6621,6 +6643,10 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@visx/point@3.3.0:
+    resolution: {integrity: sha512-03eBBIJarkmX79WbeEGTUZwmS5/MUuabbiM9KfkGS9pETBTWkp1DZtEHZdp5z34x5TDQVLSi0rk1Plg3/8RtDg==}
+    dev: false
+
   /@visx/responsive@3.3.0(react@18.2.0):
     resolution: {integrity: sha512-Y3Bgrh6cJ760lG6yXsxJRNCmYZAHKQqSmTG2qxJ8yImledieGEqI0ZizXJgFkxoBaZK5gSMvFsmFWKtf7a86kQ==}
     peerDependencies:
@@ -6659,6 +6685,20 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@visx/text@3.3.0(react@18.2.0):
+    resolution: {integrity: sha512-fOimcsf0GtQE9whM5MdA/xIkHMaV29z7qNqNXysUDE8znSMKsN+ott7kSg2ljAEE89CQo3WKHkPNettoVsa84w==}
+    peerDependencies:
+      react: ^16.3.0-0 || ^17.0.0-0 || ^18.0.0-0
+    dependencies:
+      '@types/lodash': 4.14.202
+      '@types/react': 18.2.33
+      classnames: 2.5.1
+      lodash: 4.17.21
+      prop-types: 15.8.1
+      react: 18.2.0
+      reduce-css-calc: 1.3.0
+    dev: false
+
   /@visx/vendor@3.5.0:
     resolution: {integrity: sha512-yt3SEZRVmt36+APsCISSO9eSOtzQkBjt+QRxNRzcTWuzwMAaF3PHCCSe31++kkpgY9yFoF+Gfes1TBe5NlETiQ==}
     dependencies:
@@ -7391,6 +7431,10 @@ packages:
       babel-preset-current-node-syntax: 1.0.1(@babel/core@7.23.9)
     dev: true
 
+  /balanced-match@0.4.2:
+    resolution: {integrity: sha512-STw03mQKnGUYtoNjmowo4F2cRmIIxYEGiMsjjwla/u5P1lxadj/05WkNaFjNiKTgJkj8KiXbgAiRTmcQRwQNtg==}
+    dev: false
+
   /balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
@@ -11841,6 +11885,10 @@ packages:
     engines: {node: '>=8'}
     dev: false
 
+  /math-expression-evaluator@1.4.0:
+    resolution: {integrity: sha512-4vRUvPyxdO8cWULGTh9dZWL2tZK6LDBvj+OGHBER7poH9Qdt7kXEoj20wiz4lQUbUXQZFjPbe5mVDo9nutizCw==}
+    dev: false
+
   /mdn-data@2.0.28:
     resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==}
     dev: true
@@ -13622,6 +13670,20 @@ packages:
       strip-indent: 3.0.0
     dev: false
 
+  /reduce-css-calc@1.3.0:
+    resolution: {integrity: sha512-0dVfwYVOlf/LBA2ec4OwQ6p3X9mYxn/wOl2xTcLwjnPYrkgEfPx3VI4eGCH3rQLlPISG5v9I9bkZosKsNRTRKA==}
+    dependencies:
+      balanced-match: 0.4.2
+      math-expression-evaluator: 1.4.0
+      reduce-function-call: 1.0.3
+    dev: false
+
+  /reduce-function-call@1.0.3:
+    resolution: {integrity: sha512-Hl/tuV2VDgWgCSEeWMLwxLZqX7OK59eU1guxXsRKTAyeYimivsKdtcV4fu3r710tpG5GmDKDhQ0HSZLExnNmyQ==}
+    dependencies:
+      balanced-match: 1.0.2
+    dev: false
+
   /reflect.getprototypeof@1.0.5:
     resolution: {integrity: sha512-62wgfC8dJWrmxv44CA36pLDnP6KKl3Vhxb7PL+8+qrrFMMoJij4vgiMP8zV4O8+CBMXY1mHxI5fITGHXFHVmQQ==}
     engines: {node: '>= 0.4'}