diff --git a/packages/web/src/components/common/typingBox/dataBox.tsx b/packages/web/src/components/common/typingBox/dataBox.tsx
new file mode 100644
index 0000000..4aac3e9
--- /dev/null
+++ b/packages/web/src/components/common/typingBox/dataBox.tsx
@@ -0,0 +1,38 @@
+import React, { useState, useEffect, useRef } from "react";
+import { LineChart, XAxis, YAxis, Line, Tooltip, Legend } from "recharts";
+import { DataBoxWrapper } from "./style";
+
+import { DataBoxType } from "./helpers/interfaces";
+
+export const DataBox = (props: React.Component<DataBoxType, {}>) => {
+    return (
+        <DataBoxWrapper>
+            <LineChart
+                width={725}
+                height={300}
+                data={props.data}
+                margin={{ top: 30, bottom: 5 }}
+            >
+                <Line
+                    name="WPM"
+                    type="monotone"
+                    dataKey="wpm"
+                    stroke="#198cf6"
+                    dot={<></>}
+                />
+                <Line
+                    name="Accuracy"
+                    type="monotone"
+                    dataKey="accuracy"
+                    stroke="black"
+                    dot={<></>}
+                />
+
+                <XAxis dataKey="timeUsed" />
+                <YAxis />
+                <Tooltip />
+                <Legend />
+            </LineChart>
+        </DataBoxWrapper>
+    );
+};