diff --git a/apps/hubble-stats/components/AreaChart/AreaChart.tsx b/apps/hubble-stats/components/AreaChart/AreaChart.tsx
new file mode 100644
index 0000000000..76ecc2ebbd
--- /dev/null
+++ b/apps/hubble-stats/components/AreaChart/AreaChart.tsx
@@ -0,0 +1,65 @@
+import { FC } from 'react';
+import {
+  ResponsiveContainer,
+  AreaChart as AreaChartCmp,
+  Area,
+  Tooltip,
+  XAxis,
+} from 'recharts';
+import { AreaChartProps } from './types';
+
+const AreaChart: FC<AreaChartProps> = ({
+  data,
+  setDate,
+  setValue,
+  isDarkMode,
+  width = '100%',
+  height = 180,
+}) => {
+  return (
+    <ResponsiveContainer width={width} height={height}>
+      <AreaChartCmp
+        data={data}
+        onMouseLeave={() => {
+          setDate && setDate(null);
+          setValue && setValue(null);
+        }}
+      >
+        <XAxis
+          dataKey="date"
+          tickFormatter={(date) =>
+            new Date(date).toLocaleDateString('en-US', {
+              day: 'numeric',
+            })
+          }
+          strokeOpacity={0}
+          tick={{
+            fontSize: '16px',
+            fill: '#9CA0B0',
+            fontWeight: 400,
+          }}
+          tickMargin={16}
+        />
+        <Tooltip
+          contentStyle={{ display: 'none' }}
+          content={({ active, payload }) => {
+            if (active && payload && payload.length) {
+              setValue && setValue(payload[0].payload['value']);
+              setDate && setDate(payload[0].payload['date']);
+            }
+
+            return null;
+          }}
+        />
+        <Area
+          dataKey="value"
+          stroke={isDarkMode ? '#C6BBFA' : '#624FBE'}
+          fillOpacity={0}
+          strokeWidth={2}
+        />
+      </AreaChartCmp>
+    </ResponsiveContainer>
+  );
+};
+
+export default AreaChart;
diff --git a/apps/hubble-stats/components/AreaChart/index.ts b/apps/hubble-stats/components/AreaChart/index.ts
new file mode 100644
index 0000000000..4857683302
--- /dev/null
+++ b/apps/hubble-stats/components/AreaChart/index.ts
@@ -0,0 +1 @@
+export { default as AreaChart } from './AreaChart';
diff --git a/apps/hubble-stats/components/AreaChart/types.ts b/apps/hubble-stats/components/AreaChart/types.ts
new file mode 100644
index 0000000000..3b2b2d9c05
--- /dev/null
+++ b/apps/hubble-stats/components/AreaChart/types.ts
@@ -0,0 +1,8 @@
+export type AreaChartProps = {
+  data: any;
+  setValue: (value: number | null) => void;
+  setDate: (date: Date | null) => void;
+  isDarkMode: boolean;
+  width?: number | string;
+  height?: number | string;
+};
diff --git a/apps/hubble-stats/components/BarChart/BarChart.tsx b/apps/hubble-stats/components/BarChart/BarChart.tsx
new file mode 100644
index 0000000000..bb8d3cba74
--- /dev/null
+++ b/apps/hubble-stats/components/BarChart/BarChart.tsx
@@ -0,0 +1,60 @@
+import { FC } from 'react';
+import {
+  ResponsiveContainer,
+  BarChart as BarChartCmp,
+  XAxis,
+  Tooltip,
+  Bar,
+} from 'recharts';
+import { BarChartProps } from './types';
+
+const BarChart: FC<BarChartProps> = ({
+  data,
+  setValue,
+  setDate,
+  isDarkMode,
+  width = '100%',
+  height = 180,
+}) => {
+  return (
+    <ResponsiveContainer width={width} height={height}>
+      <BarChartCmp
+        data={data}
+        onMouseLeave={() => {
+          setValue && setValue(null);
+          setDate && setDate(null);
+        }}
+      >
+        <XAxis
+          dataKey="date"
+          tickFormatter={(date) =>
+            new Date(date).toLocaleDateString('en-US', {
+              day: 'numeric',
+            })
+          }
+          strokeOpacity={0}
+          tick={{
+            fontSize: '16px',
+            fill: '#9CA0B0',
+            fontWeight: 400,
+          }}
+          tickMargin={16}
+        />
+        <Tooltip
+          contentStyle={{ display: 'none' }}
+          content={({ active, payload }) => {
+            if (active && payload && payload.length) {
+              setValue && setValue(payload[0].payload['value']);
+              setDate && setDate(payload[0].payload['date']);
+            }
+
+            return null;
+          }}
+        />
+        <Bar dataKey="value" fill={isDarkMode ? '#81B3F6' : '#3D7BCE'} />
+      </BarChartCmp>
+    </ResponsiveContainer>
+  );
+};
+
+export default BarChart;
diff --git a/apps/hubble-stats/components/BarChart/index.ts b/apps/hubble-stats/components/BarChart/index.ts
new file mode 100644
index 0000000000..a53e00eabe
--- /dev/null
+++ b/apps/hubble-stats/components/BarChart/index.ts
@@ -0,0 +1 @@
+export { default as BarChart } from './BarChart';
diff --git a/apps/hubble-stats/components/BarChart/types.ts b/apps/hubble-stats/components/BarChart/types.ts
new file mode 100644
index 0000000000..719b0486b5
--- /dev/null
+++ b/apps/hubble-stats/components/BarChart/types.ts
@@ -0,0 +1,8 @@
+export type BarChartProps = {
+  data: any;
+  setValue: (value: number | null) => void;
+  setDate: (date: Date | null) => void;
+  isDarkMode: boolean;
+  width?: number | string;
+  height?: number | string;
+};