diff --git a/package-lock.json b/package-lock.json
index 1868b0d..83aa915 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@remixicon/react": "^4.2.0",
         "@tremor/react": "^3.17.2",
         "axios": "^1.7.2",
+        "cubic-spline": "^3.0.3",
         "next": "14.2.3",
         "react": "^18",
         "react-dom": "^18"
@@ -1486,6 +1487,11 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
+    "node_modules/cubic-spline": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/cubic-spline/-/cubic-spline-3.0.3.tgz",
+      "integrity": "sha512-yAvcHgrpf/k83pZiO4+R2reWOJlufgjpQhmDD3OXa8YMbjmRgjtUK8pcFOCZvJwqXaMD1isZdL7Z4ghqDPN/yw=="
+    },
     "node_modules/d3-array": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
diff --git a/package.json b/package.json
index 889d11d..a5d655d 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@remixicon/react": "^4.2.0",
     "@tremor/react": "^3.17.2",
     "axios": "^1.7.2",
+    "cubic-spline": "^3.0.3",
     "next": "14.2.3",
     "react": "^18",
     "react-dom": "^18"
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 2da9d4a..dfa9b37 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -7,11 +7,68 @@ import Graph from "../components/graph";
 import { useState } from "react";
 
 export default function Home() {
+  const initialData = [
+    { date: "Apr 15", Stars: 0 },
+    { date: "Apr 16", Stars: 160 },
+    { date: "Apr 17", Stars: 320 },
+    { date: "Apr 18", Stars: 480 },
+    { date: "Apr 19", Stars: 720 },
+    { date: "Apr 20", Stars: 990 },
+    { date: "Apr 21", Stars: 1125 },
+    { date: "Apr 22", Stars: 1260 },
+    { date: "Apr 23", Stars: 1530 },
+    { date: "Apr 24", Stars: 1620 },
+    { date: "Apr 25", Stars: 1710 },
+    { date: "Apr 26", Stars: 1755 },
+    { date: "Apr 27", Stars: 1800 },
+    { date: "Apr 28", Stars: 2040 },
+    { date: "Apr 29", Stars: 2175 },
+    { date: "Apr 30", Stars: 2242 },
+    { date: "May 01", Stars: 2310 },
+    { date: "May 02", Stars: 2378 },
+    { date: "May 03", Stars: 2445 },
+    { date: "May 04", Stars: 2512 },
+    { date: "May 05", Stars: 2546 },
+    { date: "May 06", Stars: 2580 },
+    { date: "May 07", Stars: 2648 },
+    { date: "May 08", Stars: 2715 },
+    { date: "May 09", Stars: 2782 },
+    { date: "May 10", Stars: 2850 },
+    { date: "May 11", Stars: 2917 },
+    { date: "May 12", Stars: 2985 },
+    { date: "May 13", Stars: 3052 },
+    { date: "May 14", Stars: 3120 },
+    { date: "May 15", Stars: 3187 },
+    { date: "May 16", Stars: 3255 },
+    { date: "May 17", Stars: 3322 },
+    { date: "May 18", Stars: 3390 },
+    { date: "May 19", Stars: 3510 },
+    { date: "May 20", Stars: 3630 },
+    { date: "May 21", Stars: 3900 },
+    { date: "May 22", Stars: 4082 },
+    { date: "May 23", Stars: 4263 },
+    { date: "May 24", Stars: 4445 },
+    { date: "May 25", Stars: 4594 },
+  ];
   const [padding, setPadding] = useState(64);
+  const [chartData, setChartData] = useState(initialData);
+  const [xName, setXName] = useState("Date");
+  const [yName, setYName] = useState("Stars");
   return (
     <main className="relative flex h-screen flex-col items-center justify-center bg-gray-900">
-      <Menu padding={padding} setPadding={setPadding} />
-      <Graph padding={padding} />
+      <Menu
+        padding={padding}
+        setPadding={setPadding}
+        setChartData={setChartData}
+        setXName={setXName}
+        setYName={setYName}
+      />
+      <Graph
+        padding={padding}
+        chartData={chartData}
+        xName={xName}
+        yName={yName}
+      />
     </main>
   );
 }
diff --git a/src/components/graph.tsx b/src/components/graph.tsx
index c96ca18..801f196 100644
--- a/src/components/graph.tsx
+++ b/src/components/graph.tsx
@@ -2,78 +2,40 @@
 
 import { AreaChart, Color } from "@tremor/react";
 import { useState } from "react";
+import { useEffect } from "react";
 
-export default function Graph({ padding }: { padding: number }) {
-  const mockchartdata = [
-    {
-      date: "Apr 15",
-      Stars: 0,
-    },
-    {
-      date: "Apr 18",
-      Stars: 480,
-    },
-    {
-      date: "Apr 19",
-      Stars: 720,
-    },
-    {
-      date: "Apr 20",
-      Stars: 990,
-    },
-    {
-      date: "Apr 22",
-      Stars: 1260,
-    },
-    {
-      date: "Apr 23",
-      Stars: 1530,
-    },
-    {
-      date: "Apr 27",
-      Stars: 1800,
-    },
-    {
-      date: "Apr 28",
-      Stars: 2040,
-    },
-    {
-      date: "May 01",
-      Stars: 2310,
-    },
-    {
-      date: "May 06",
-      Stars: 2580,
-    },
-    {
-      date: "May 16",
-      Stars: 2850,
-    },
-    {
-      date: "May 18",
-      Stars: 3120,
-    },
-    {
-      date: "May 19",
-      Stars: 3360,
-    },
-    {
-      date: "May 20",
-      Stars: 3630,
-    },
-    {
-      date: "May 21",
-      Stars: 3900,
-    },
-    {
-      date: "May 25",
-      Stars: 4594,
-    },
-  ];
+export default function Graph({
+  padding,
+  chartData,
+  xName,
+  yName,
+}: {
+  padding: number;
+  chartData: any;
+  xName: string;
+  yName: string;
+}) {
+  const [maxValue, setMaxValue] = useState(0);
+  const [finalChartData, setFinalChartData] = useState(chartData);
+  useEffect(() => {
+    if (
+      chartData.length > 0 &&
+      "Stars" in chartData[0] &&
+      "date" in chartData[0]
+    ) {
+      const maxStars = Math.max(...chartData.map((data: any) => data.Stars));
+      setMaxValue(maxStars);
 
-  const [chartData, setChartData] = useState(mockchartdata);
-  const maxStars = Math.max(...mockchartdata.map((data) => data.Stars));
-  const [maxValue, setMaxValue] = useState(maxStars);
+      setFinalChartData(chartData);
+    } else {
+      setMaxValue(1000);
+      setFinalChartData(chartData);
+    }
+    console.log(finalChartData);
+    console.log(maxValue);
+    console.log(yName);
+    console.log(xName);
+  }, [chartData]);
   return (
     <div
       className="flex items-center justify-center h-fit w-fit "
@@ -90,15 +52,18 @@ export default function Graph({ padding }: { padding: number }) {
           </div>
           <div className="pt-6 text-xs">
             <AreaChart
-              className="h-72 w-96"
-              data={chartData}
+              style={{
+                height: "500px",
+                width: "700px",
+              }}
+              data={finalChartData}
               index="date"
-              categories={["Stars"]}
+              categories={[yName]}
               colors={["orange-400"]}
               yAxisWidth={35}
               showLegend={false}
-              yAxisLabel="Stars"
-              xAxisLabel="Date"
+              yAxisLabel={yName}
+              xAxisLabel={xName}
               valueFormatter={(value) => {
                 if (value > 99) {
                   return (value / 1000).toFixed(1) + "k";
@@ -107,7 +72,6 @@ export default function Graph({ padding }: { padding: number }) {
               }}
               maxValue={maxValue}
               connectNulls={true}
-              curveType="natural"
             />
           </div>
         </div>
diff --git a/src/components/menu.tsx b/src/components/menu.tsx
index 1289d00..8375aac 100644
--- a/src/components/menu.tsx
+++ b/src/components/menu.tsx
@@ -3,9 +3,15 @@ import React from "react";
 export default function Menu({
   padding,
   setPadding,
+  setChartData,
+  setXName,
+  setYName,
 }: {
   padding: number;
   setPadding: (padding: number) => void;
+  setChartData: (data: any) => void;
+  setXName: (xName: string) => void;
+  setYName: (yName: string) => void;
 }) {
   return (
     <div className="absolute bottom-10 left-1/2 transform -translate-x-1/2 flex items-center space-x-4 bg-transparent p-4 rounded-lg bg-slate-700">
@@ -22,8 +28,107 @@ export default function Menu({
           <option value={128}>128</option>
         </select>
       </div>
-      <button className="bg-blue-600 text-white px-4 py-2 rounded">
-        Add data
+      <button
+        className="bg-blue-600 text-white px-4 py-2 rounded"
+        onClick={async () => {
+          const token =
+            "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";
+          const repoUrl = "https://github.com/mendableai/data-connectors";
+          if (token && repoUrl) {
+            try {
+              const response = await fetch(
+                `/api/githubStars?repo=${encodeURIComponent(
+                  repoUrl
+                )}&token=${encodeURIComponent(token)}`
+              );
+              if (!response.ok) {
+                throw new Error(`Error: ${response.statusText}`);
+              }
+              const data = await response.json();
+              console.log("GitHub Stars Data:", data);
+              setXName("Date");
+              setYName("Stars");
+              setChartData(data);
+            } catch (error) {
+              console.error("Failed to fetch GitHub stars data:", error);
+              alert(
+                "Failed to fetch GitHub stars data. Please check the console for more details."
+              );
+            }
+          } else {
+            alert("Both fields are required.");
+          }
+        }}
+      >
+        Add GitHub data
+      </button>
+      <button
+        className="bg-blue-600 text-white px-4 py-2 rounded"
+        onClick={async () => {
+          const pastedCsvData = `Speed,Value
+1,100
+2,200
+3,300
+4,400
+5,500
+6,600
+7,700
+8,800
+9,900
+10,1000
+11,1100
+12,1200
+13,1300
+14,1400
+15,1500
+16,1600
+17,1700
+18,1800
+19,1900
+20,2000
+21,2100
+22,2200
+23,2300
+24,2400
+25,2500
+26,2600
+27,2700
+28,2800
+29,2900
+30,3000
+31,3100
+32,3200
+33,3300
+34,3400
+35,3500
+36,3600
+37,3700
+38,3800
+39,3900
+40,4000
+41,4100
+42,4200
+43,4300
+44,4400
+45,4500
+46,4600
+47,4700
+48,4800
+49,4900
+50,5000`;
+          const [header, ...rows] = pastedCsvData.split("\n");
+          const [dateKey, valueKey] = header.split(",");
+          const parsedData = rows.map((row) => {
+            const [date, value] = row.split(",");
+            return { [dateKey]: date, [valueKey]: Number(value) };
+          });
+
+          setChartData(parsedData);
+          setXName(dateKey);
+          setYName(valueKey);
+        }}
+      >
+        Add CSV data
       </button>
       <button className="bg-red-600 text-white px-4 py-2 rounded">
         Export
diff --git a/src/pages/api/githubStars.ts b/src/pages/api/githubStars.ts
index 1bd66f5..731c501 100644
--- a/src/pages/api/githubStars.ts
+++ b/src/pages/api/githubStars.ts
@@ -44,6 +44,9 @@ async function getRepoStargazersCount(repo: string, token?: string) {
   return data.stargazers_count;
 }
 
+
+const Spline = require('cubic-spline');
+
 async function getRepoStarRecords(repo: string, token: string, maxRequestAmount: number): Promise<StarRecordResponse[]> {
   const patchRes = await getRepoStargazers(repo, token);
 
@@ -113,20 +116,40 @@ async function getRepoStarRecords(repo: string, token: string, maxRequestAmount:
   const starAmount = await getRepoStargazersCount(repo, token);
   starRecordsMap.set(utils.getDateString(Date.now()), starAmount);
 
-  const starRecords: StarRecordResponse[] = [];
+  // Interpolation logic
+  const sortedDates = Array.from(starRecordsMap.keys()).sort((a, b) => new Date(a).getTime() - new Date(b).getTime());
+  const dates = sortedDates.map(date => new Date(date).getTime());
+  const stars = sortedDates.map(date => starRecordsMap.get(date)!);
+
+  const spline = new Spline(dates, stars);
+
+  const interpolatedRecords: StarRecordResponse[] = [];
+  const startDate = new Date(sortedDates[0]);
+  const endDate = new Date(sortedDates[sortedDates.length - 1]);
+  const daysBetween = (endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24);
 
-  starRecordsMap.forEach((v, k) => {
-    starRecords.push({
-      date: utils.getFormattedDate(k),
-      Stars: v,
+  const maxStars = Math.max(...stars);
+
+  for (let i = 0; i <= daysBetween; i++) {
+    const currentDate = new Date(startDate);
+    currentDate.setDate(startDate.getDate() + i);
+    let interpolatedStars = spline.at(currentDate.getTime());
+    interpolatedStars = Math.max(0, Math.min(interpolatedStars, maxStars)); // Ensure value is between 0 and maxStars
+    interpolatedRecords.push({
+      date: utils.getFormattedDate(currentDate.toISOString()),
+      Stars: Math.round(interpolatedStars),
     });
-  });
+  }
 
-  return starRecords;
+  return interpolatedRecords;
 }
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-  const { repo, token } = req.query as { repo: string, token: string };
+  const { repo: rawRepo, token } = req.query as { repo: string, token: string };
+  
+  const repo = rawRepo.startsWith('https://github.com/') ? rawRepo.replace('https://github.com/', '') : rawRepo;
+  
+  console.log(repo, token);
   const maxRequestAmount = 15;
 
   try {