diff --git a/components/Graphs/ForksChart.tsx b/components/Graphs/ForksChart.tsx
index c9010c3e3..0360b94a0 100644
--- a/components/Graphs/ForksChart.tsx
+++ b/components/Graphs/ForksChart.tsx
@@ -25,7 +25,7 @@ import humanizeNumber from "lib/utils/humanizeNumber";
 type ForksChartProps = {
   stats: StatsType[] | undefined;
   total: number;
-  syncId: number;
+  syncId: string;
   range: DayRange;
   isLoading: boolean;
   onCategoryClick?: (category: string) => void;
@@ -88,35 +88,35 @@ export default function ForksChart({
 
   return (
     <Card className={`${className ?? ""} flex flex-col gap-8 w-full h-full items-center !px-6 !py-8`}>
-      <section className="flex flex-col xl:flex-row w-full items-start xl:items-center gap-4 xl:justify-between px-2">
+      <section className="flex flex-col items-start w-full gap-4 px-2 xl:flex-row xl:items-center xl:justify-between">
         {isLoading ? (
           <SkeletonWrapper width={100} height={24} />
         ) : (
           <>
             <div className="flex flex-col gap-4 grow">
-              <div className="flex gap-2 items-center w-fit">
+              <div className="flex items-center gap-2 w-fit">
                 <BiGitRepoForked className="text-xl" />
-                <div className="flex gap-1 items-center">
+                <div className="flex items-center gap-1">
                   <h3 className="text-sm font-semibold xl:text-lg text-slate-800">Forks</h3>
-                  <p className="text-sm xl:text-base w-fit pl-2 text-slate-500 font-medium">{range} days</p>
+                  <p className="pl-2 text-sm font-medium xl:text-base w-fit text-slate-500">{range} days</p>
                 </div>
               </div>
               <aside className="flex gap-8">
                 <div>
                   <h3 className="text-xs xl:text-sm text-slate-500">Total</h3>
-                  <p className="font-semibold text-lg lg:text-xl">{humanizeNumber(total)}</p>
+                  <p className="text-lg font-semibold lg:text-xl">{humanizeNumber(total)}</p>
                 </div>
                 <div>
                   <h3 className="text-xs xl:text-sm text-slate-500">Over {range} days</h3>
-                  <p className="font-semibold text-lg lg:text-xl">{forksRangedTotal}</p>
+                  <p className="text-lg font-semibold lg:text-xl">{forksRangedTotal}</p>
                 </div>
                 <div>
                   <h3 className="text-xs xl:text-sm text-slate-500">Avg. per day</h3>
-                  <p className="font-semibold text-lg lg:text-xl">{humanizeNumber(averageOverRange)}</p>
+                  <p className="text-lg font-semibold lg:text-xl">{humanizeNumber(averageOverRange)}</p>
                 </div>
               </aside>
             </div>
-            <div className="flex gap-2 items-center w-fit lg:self-start">
+            <div className="flex items-center gap-2 w-fit lg:self-start">
               <Button
                 variant={category === "daily" ? "outline" : "default"}
                 onClick={() => {
@@ -149,13 +149,13 @@ export default function ForksChart({
 function CustomTooltip({ active, payload }: TooltipProps<ValueType, NameType>) {
   if (active && payload) {
     return (
-      <figcaption className="flex flex-col gap-1 bg-white px-4 py-2 rounded-lg border">
-        <section className="flex gap-2 items-center">
+      <figcaption className="flex flex-col gap-1 px-4 py-2 bg-white border rounded-lg">
+        <section className="flex items-center gap-2">
           <BiGitRepoForked className="fill-sauced-orange" />
           <p>Forks: {payload[0]?.value}</p>
         </section>
 
-        <p className="text-light-slate-9 text-sm">{payload[0]?.payload.bucket}</p>
+        <p className="text-sm text-light-slate-9">{payload[0]?.payload.bucket}</p>
       </figcaption>
     );
   }
diff --git a/components/Graphs/IssuesChart.tsx b/components/Graphs/IssuesChart.tsx
index abe2a66ec..034b31c88 100644
--- a/components/Graphs/IssuesChart.tsx
+++ b/components/Graphs/IssuesChart.tsx
@@ -22,7 +22,7 @@ import { humanizeNumber } from "netlify/og-image-utils";
 type IssuesChartProps = {
   stats: StatsType[] | undefined;
   velocity: number;
-  syncId: number;
+  syncId: string;
   range: DayRange;
   isLoading: boolean;
   className?: string;
@@ -47,15 +47,15 @@ export default function IssuesChart({ stats, velocity, syncId, range = 30, isLoa
 
   return (
     <Card className={`${className ?? ""} flex flex-col gap-8 w-full h-full items-center !px-6 !py-8`}>
-      <section className="flex flex-col lg:flex-row w-full items-start gap-4 lg:justify-between px-2">
+      <section className="flex flex-col items-start w-full gap-4 px-2 lg:flex-row lg:justify-between">
         {isLoading ? (
           <SkeletonWrapper width={100} height={24} />
         ) : (
-          <div className="flex flex-col gap-4 w-full items-start justify-between px-2">
-            <div className="flex gap-1 items-center w-fit">
+          <div className="flex flex-col items-start justify-between w-full gap-4 px-2">
+            <div className="flex items-center gap-1 w-fit">
               <VscIssues className="text-xl" />
               <h3 className="text-sm font-semibold xl:text-lg text-slate-800">Issues</h3>
-              <p className="text-sm xl:text-lg w-fit pl-2 text-slate-500 font-medium">{range} days</p>
+              <p className="pl-2 text-sm font-medium xl:text-lg w-fit text-slate-500">{range} days</p>
             </div>
             <aside className="flex gap-6">
               <div>
@@ -63,18 +63,18 @@ export default function IssuesChart({ stats, velocity, syncId, range = 30, isLoa
                   Opened
                   <span className={`w-2 h-2 rounded-full bg-[#16a34a] mx-1 inline-block`}></span>
                 </h3>
-                <p className="font-semibold text-xl xl:text-2xl">{humanizeNumber(openedRangedTotal)}</p>
+                <p className="text-xl font-semibold xl:text-2xl">{humanizeNumber(openedRangedTotal)}</p>
               </div>
               <div>
                 <h3 className="text-xs xl:text-sm !font-medium text-slate-500">
                   Closed
                   <span className={`w-2 h-2 rounded-full bg-[#9333ea] mx-1 inline-block`}></span>
                 </h3>
-                <p className="font-semibold text-xl xl:text-2xl">{humanizeNumber(closedRangedTotal)}</p>
+                <p className="text-xl font-semibold xl:text-2xl">{humanizeNumber(closedRangedTotal)}</p>
               </div>
               <div>
                 <h3 className="text-xs xl:text-sm !font-medium text-slate-500">Velocity</h3>
-                <p className="font-semibold text-xl xl:text-2xl">
+                <p className="text-xl font-semibold xl:text-2xl">
                   {humanizeNumber(velocity)}
                   <span className="text-lg xl:text-xl text-slate-500 pl-0.5">d</span>
                 </p>
@@ -110,21 +110,21 @@ export default function IssuesChart({ stats, velocity, syncId, range = 30, isLoa
 function CustomTooltip({ active, payload }: TooltipProps<ValueType, NameType>) {
   if (active && payload) {
     return (
-      <figcaption className="flex flex-col gap-1 text-sm bg-white px-4 py-3 rounded-lg border w-fit">
-        <section className="flex gap-2 font-medium text-slate-500 items-center text-xs w-fit">
+      <figcaption className="flex flex-col gap-1 px-4 py-3 text-sm bg-white border rounded-lg w-fit">
+        <section className="flex items-center gap-2 text-xs font-medium text-slate-500 w-fit">
           <VscIssues className="fill-slate-500" />
           <p>Issues</p>
           <p>{payload[0]?.payload.bucket}</p>
         </section>
         <section className="flex justify-between">
-          <p className="flex gap-2 items-center text-slate-500">
+          <p className="flex items-center gap-2 text-slate-500">
             <span className={`w-2 h-2 rounded-full bg-[#16a34a] inline-block`}></span>
             Opened:
           </p>
           <p className="font-medium">{payload[0]?.value}</p>
         </section>
         <section className="flex justify-between">
-          <p className="flex gap-2 items-center text-slate-500">
+          <p className="flex items-center gap-2 text-slate-500">
             <span className={`w-2 h-2 rounded-full bg-[#9333ea] inline-block`}></span>
             Closed:
           </p>
diff --git a/components/Graphs/PRChart.tsx b/components/Graphs/PRChart.tsx
index 260f653e3..cf18b809f 100644
--- a/components/Graphs/PRChart.tsx
+++ b/components/Graphs/PRChart.tsx
@@ -22,7 +22,7 @@ import { humanizeNumber } from "netlify/og-image-utils";
 type PRChartProps = {
   stats: StatsType[] | undefined;
   velocity: number;
-  syncId: number;
+  syncId: string;
   range: DayRange;
   isLoading: boolean;
   className?: string;
@@ -47,15 +47,15 @@ export default function PRChart({ stats, velocity, syncId, range = 30, isLoading
 
   return (
     <Card className={`${className ?? ""} flex flex-col gap-8 w-full h-full items-center !px-6 !py-8`}>
-      <section className="flex flex-col lg:flex-row w-full items-start gap-4 lg:justify-between px-2">
+      <section className="flex flex-col items-start w-full gap-4 px-2 lg:flex-row lg:justify-between">
         {isLoading ? (
           <SkeletonWrapper width={100} height={24} />
         ) : (
-          <div className="flex flex-col gap-4 w-full items-start justify-between px-2">
-            <div className="flex gap-1 items-center w-fit">
+          <div className="flex flex-col items-start justify-between w-full gap-4 px-2">
+            <div className="flex items-center gap-1 w-fit">
               <BiGitPullRequest className="text-xl" />
-              <h3 className="text-sm xl:text-lg font-semibold text-slate-800">Pull Requests</h3>
-              <p className="text-sm xl:text-lg w-fit pl-2 text-slate-500 font-medium">{range} days</p>
+              <h3 className="text-sm font-semibold xl:text-lg text-slate-800">Pull Requests</h3>
+              <p className="pl-2 text-sm font-medium xl:text-lg w-fit text-slate-500">{range} days</p>
             </div>
             <aside className="flex gap-4">
               <div>
@@ -63,18 +63,18 @@ export default function PRChart({ stats, velocity, syncId, range = 30, isLoading
                   Opened
                   <span className={`w-2 h-2 rounded-full bg-[#16a34a] mx-1 inline-block`}></span>
                 </h3>
-                <p className="font-semibold text-xl xl:text-2xl">{humanizeNumber(openedRangedTotal)}</p>
+                <p className="text-xl font-semibold xl:text-2xl">{humanizeNumber(openedRangedTotal)}</p>
               </div>
               <div>
                 <h3 className="text-xs xl:text-sm !font-medium text-slate-500">
                   Merged
                   <span className={`w-2 h-2 rounded-full bg-[#9333ea] mx-1 inline-block`}></span>
                 </h3>
-                <p className="font-semibold text-xl xl:text-2xl">{humanizeNumber(closedRangedTotal)}</p>
+                <p className="text-xl font-semibold xl:text-2xl">{humanizeNumber(closedRangedTotal)}</p>
               </div>
               <div>
                 <h3 className="text-xs xl:text-sm !font-medium text-slate-500">Velocity</h3>
-                <p className="font-semibold text-xl xl:text-2xl">
+                <p className="text-xl font-semibold xl:text-2xl">
                   {humanizeNumber(velocity)}
                   <span className="text-lg xl:text-xl text-slate-500 pl-0.5">d</span>
                 </p>
@@ -110,25 +110,25 @@ export default function PRChart({ stats, velocity, syncId, range = 30, isLoading
 function CustomTooltip({ active, payload }: TooltipProps<ValueType, NameType>) {
   if (active && payload) {
     return (
-      <figcaption className="flex flex-col gap-1 text-sm bg-white px-4 py-3 rounded-lg border w-fit">
-        <section className="flex gap-2 font-medium text-slate-500 items-center text-xs w-fit">
+      <figcaption className="flex flex-col gap-1 px-4 py-3 text-sm bg-white border rounded-lg w-fit">
+        <section className="flex items-center gap-2 text-xs font-medium text-slate-500 w-fit">
           <BiGitPullRequest className="fill-slate-500" />
           <p>Pull Requests</p>
           <p>{payload[0]?.payload.bucket}</p>
         </section>
         <section className="flex justify-between">
-          <p className="flex gap-2 items-center px-1 text-slate-500">
+          <p className="flex items-center gap-2 px-1 text-slate-500">
             <span className={`w-2 h-2 rounded-full bg-[#16a34a] inline-block`}></span>
             Opened:
           </p>
-          <p className="font-medium pl-2">{payload[0]?.value}</p>
+          <p className="pl-2 font-medium">{payload[0]?.value}</p>
         </section>
         <section className="flex justify-between">
-          <p className="flex gap-2 items-center px-1 text-slate-500">
+          <p className="flex items-center gap-2 px-1 text-slate-500">
             <span className={`w-2 h-2 rounded-full bg-[#9333ea] inline-block`}></span>
             Merged:
           </p>
-          <p className="font-medium pl-2">{payload[1]?.value}</p>
+          <p className="pl-2 font-medium">{payload[1]?.value}</p>
         </section>
       </figcaption>
     );
diff --git a/components/Graphs/StarsChart.tsx b/components/Graphs/StarsChart.tsx
index ff88a9ebe..06bc62af6 100644
--- a/components/Graphs/StarsChart.tsx
+++ b/components/Graphs/StarsChart.tsx
@@ -25,7 +25,7 @@ import humanizeNumber from "lib/utils/humanizeNumber";
 type StarsChartProps = {
   stats: StatsType[] | undefined;
   total: number;
-  syncId: number;
+  syncId: string;
   range: DayRange;
   isLoading: boolean;
   onCategoryClick?: (category: string) => void;
@@ -88,35 +88,35 @@ export default function StarsChart({
 
   return (
     <Card className={`${className ?? ""} flex flex-col gap-8 w-full h-full items-center !px-6 !py-8`}>
-      <section className="flex flex-col xl:flex-row w-full items-start xl:items-center gap-4 xl:justify-between px-2">
+      <section className="flex flex-col items-start w-full gap-4 px-2 xl:flex-row xl:items-center xl:justify-between">
         {isLoading ? (
           <SkeletonWrapper width={100} height={24} />
         ) : (
           <>
             <div className="flex flex-col gap-4">
-              <div className="flex gap-2 items-center w-fit">
+              <div className="flex items-center gap-2 w-fit">
                 <FaStar className="text-xl" />
-                <div className="flex gap-1 items-center">
+                <div className="flex items-center gap-1">
                   <h3 className="text-sm font-semibold xl:text-lg text-slate-800">Stars</h3>
-                  <p className="text-sm xl:text-base w-fit pl-2 text-slate-500 font-medium">{range} days</p>
+                  <p className="pl-2 text-sm font-medium xl:text-base w-fit text-slate-500">{range} days</p>
                 </div>
               </div>
               <aside className="flex gap-8">
                 <div>
                   <h3 className="text-xs xl:text-sm text-slate-500">Total</h3>
-                  <p className="font-semibold text-lg lg:text-xl">{humanizeNumber(total)}</p>
+                  <p className="text-lg font-semibold lg:text-xl">{humanizeNumber(total)}</p>
                 </div>
                 <div>
                   <h3 className="text-xs xl:text-sm text-slate-500">Over {range} days</h3>
-                  <p className="font-semibold text-lg lg:text-xl">{starsRangedTotal}</p>
+                  <p className="text-lg font-semibold lg:text-xl">{starsRangedTotal}</p>
                 </div>
                 <div>
                   <h3 className="text-xs xl:mtext-sm text-slate-500">Avg. per day</h3>
-                  <p className="font-semibold text-lg lg:text-xl">{humanizeNumber(averageOverRange)}</p>
+                  <p className="text-lg font-semibold lg:text-xl">{humanizeNumber(averageOverRange)}</p>
                 </div>
               </aside>
             </div>
-            <div className="flex gap-2 items-center lg:self-start">
+            <div className="flex items-center gap-2 lg:self-start">
               <Button
                 variant={category === "daily" ? "outline" : "default"}
                 onClick={() => {
@@ -149,13 +149,13 @@ export default function StarsChart({
 function CustomTooltip({ active, payload }: TooltipProps<ValueType, NameType>) {
   if (active && payload) {
     return (
-      <figcaption className="flex flex-col gap-1 bg-white px-4 py-2 rounded-lg border">
-        <section className="flex gap-2 items-center">
+      <figcaption className="flex flex-col gap-1 px-4 py-2 bg-white border rounded-lg">
+        <section className="flex items-center gap-2">
           <FaStar className="fill-sauced-orange" />
           <p>Stars: {payload[0]?.value}</p>
         </section>
 
-        <p className="text-light-slate-9 text-sm">{payload[0]?.payload.bucket}</p>
+        <p className="text-sm text-light-slate-9">{payload[0]?.payload.bucket}</p>
       </figcaption>
     );
   }
diff --git a/pages/s/[org]/[repo]/index.tsx b/pages/s/[org]/[repo]/index.tsx
index a8ec3e5b3..5cfacc41b 100644
--- a/pages/s/[org]/[repo]/index.tsx
+++ b/pages/s/[org]/[repo]/index.tsx
@@ -11,6 +11,7 @@ import { usePostHog } from "posthog-js/react";
 import { GetServerSidePropsContext } from "next";
 
 import Link from "next/link";
+import { v4 as uuidv4 } from "uuid";
 import useSession from "lib/hooks/useSession";
 import { useToast } from "lib/hooks/useToast";
 import { shortenUrl } from "lib/utils/shorten-url";
@@ -32,7 +33,6 @@ import TabList from "components/TabList/tab-list";
 import ClientOnly from "components/atoms/ClientOnly/client-only";
 import { DayRangePicker } from "components/shared/DayRangePicker";
 import { WorkspaceLayout } from "components/Workspaces/WorkspaceLayout";
-
 import PRChart from "components/Graphs/PRChart";
 import StarsChart from "components/Graphs/StarsChart";
 import ForksChart from "components/Graphs/ForksChart";
@@ -93,6 +93,12 @@ interface RepoPageProps {
 
 export default function RepoPage({ repoData, ogImageUrl }: RepoPageProps) {
   const syncId = repoData.id;
+
+  const issuesChartSyncId = uuidv4();
+  const prChartSyncId = uuidv4();
+  const startsChartSyncId = uuidv4();
+  const forksChartSyncId = uuidv4();
+
   const router = useRouter();
   const { toast } = useToast();
   const posthog = usePostHog();
@@ -225,23 +231,23 @@ export default function RepoPage({ repoData, ogImageUrl }: RepoPageProps) {
       <WorkspaceLayout workspaceId={session ? session.personal_workspace_id : "new"}>
         <div className="px-4 py-8 lg:px-16 lg:py-12">
           <ClientOnly>
-            <section className="px-2 pt-2 md:py-4 md:px-4 flex flex-col gap-2 md:gap-4 lg:gap-8 w-fit xl:w-full xl:max-w-8xl">
-              <div className="flex flex-col lg:flex-row w-full justify-between items-center gap-4">
+            <section className="flex flex-col gap-2 px-2 pt-2 md:py-4 md:px-4 md:gap-4 lg:gap-8 w-fit xl:w-full xl:max-w-8xl">
+              <div className="flex flex-col items-center justify-between w-full gap-4 lg:flex-row">
                 <header className="flex items-center gap-4">
                   <Avatar size={96} avatarURL={avatarUrl} className="min-w-[96px]" />
                   <div className="flex flex-col gap-2">
                     <a
                       href={`https://github.com/${repoData.full_name}`}
                       target="_blank"
-                      className="group hover:underline underline-offset-2 text-xl md:text-3xl font-bold flex gap-2 items-center"
+                      className="flex items-center gap-2 text-xl font-bold group hover:underline underline-offset-2 md:text-3xl"
                     >
                       <h1>{repoData.full_name}</h1>
-                      <HiOutlineExternalLink className="group-hover:text-sauced-orange text-lg lg:text-xl" />
+                      <HiOutlineExternalLink className="text-lg group-hover:text-sauced-orange lg:text-xl" />
                     </a>
                     <p>{repoData.description}</p>
                   </div>
                 </header>
-                <div className="self-end flex flex-col gap-2 items-end">
+                <div className="flex flex-col items-end self-end gap-2">
                   {isMobile ? (
                     <>
                       <AddToWorkspaceDrawer repository={repoData.full_name} />
@@ -288,12 +294,12 @@ export default function RepoPage({ repoData, ogImageUrl }: RepoPageProps) {
                       ]}
                     />
                   )}
-                  <div className="flex gap-2 items-center">
+                  <div className="flex items-center gap-2">
                     <Button
                       aria-label="share"
                       variant="outline"
                       onClick={copyUrlToClipboard}
-                      className="my-auto gap-2 items-center shrink-0 place-self-end"
+                      className="items-center gap-2 my-auto shrink-0 place-self-end"
                     >
                       <FiCopy />
                       Share
@@ -336,15 +342,15 @@ export default function RepoPage({ repoData, ogImageUrl }: RepoPageProps) {
             </section>
           </ClientOnly>
 
-          <div className="border-b mb-4">
+          <div className="mb-4 border-b">
             <TabList tabList={tabList} selectedTab={"overview"} pageId={`/s/${repoData.full_name}`} />
           </div>
 
           <ClientOnly>
             <div className="flex flex-col gap-8">
               <section className="flex flex-col gap-4 lg:grid lg:grid-cols-12 lg:max-h-[50rem]">
-                <div className="lg:col-span-8 flex flex-col gap-4">
-                  <div className="flex gap-4 h-full flex-col lg:flex-row">
+                <div className="flex flex-col gap-4 lg:col-span-8">
+                  <div className="flex flex-col h-full gap-4 lg:flex-row">
                     <CopyContainer
                       onCopyClick={() => {
                         posthog.capture("Repo Pages: copied Contributor Confidence chart", {
@@ -453,7 +459,7 @@ export default function RepoPage({ repoData, ogImageUrl }: RepoPageProps) {
                   </CopyContainer>
                 </div>
 
-                <div className="lg:col-span-4 flex flex-col gap-4">
+                <div className="flex flex-col gap-4 lg:col-span-4">
                   {lotteryState === "lottery" && (
                     <CopyContainer
                       onCopyClick={() => {
@@ -572,7 +578,7 @@ export default function RepoPage({ repoData, ogImageUrl }: RepoPageProps) {
                         stats={issueStats}
                         range={range}
                         velocity={repoStats?.issues_velocity_count ?? 0}
-                        syncId={syncId}
+                        syncId={issuesChartSyncId}
                         isLoading={isIssueDataLoading}
                       />
                     </CopyContainer>
@@ -599,7 +605,7 @@ export default function RepoPage({ repoData, ogImageUrl }: RepoPageProps) {
                         stats={prStats}
                         range={range}
                         velocity={repoStats?.pr_velocity_count ?? 0}
-                        syncId={syncId}
+                        syncId={prChartSyncId}
                         isLoading={isPrDataLoading}
                       />
                     </CopyContainer>
@@ -631,7 +637,7 @@ export default function RepoPage({ repoData, ogImageUrl }: RepoPageProps) {
                         stats={starsData}
                         total={repoData.stars}
                         range={range}
-                        syncId={syncId}
+                        syncId={startsChartSyncId}
                         isLoading={isStarsDataLoading}
                         onCategoryClick={(category) =>
                           posthog.capture("Repo Pages: clicked Stars Chart category", {
@@ -665,7 +671,7 @@ export default function RepoPage({ repoData, ogImageUrl }: RepoPageProps) {
                         stats={forkStats}
                         total={repoData.forks}
                         range={range}
-                        syncId={syncId}
+                        syncId={forksChartSyncId}
                         isLoading={isForksDataLoading}
                         onCategoryClick={(category) =>
                           posthog.capture("Repo Pages: clicked Forks Chart category", {