diff --git a/components/Graphs/MetricCard.stories.tsx b/components/Graphs/MetricCard.stories.tsx
deleted file mode 100644
index 007ba853ce..0000000000
--- a/components/Graphs/MetricCard.stories.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import MetricCard from "./MetricCard";
-
-type MetricCardAndRepositoryArgs = React.ComponentProps<typeof MetricCard> & { repository: string };
-type Story = StoryObj<MetricCardAndRepositoryArgs>;
-
-const meta: Meta<typeof MetricCard> = {
-  title: "Components/Graphs/MetricCard",
-  component: MetricCard,
-  args: {
-    range: 30,
-    isLoading: false,
-  },
-};
-
-export default meta;
-
-export const StarMetricCard: Story = {
-  args: {
-    variant: "stars",
-    stats: [
-      { bucket: "2024-03-31T00:00:00.000Z", star_count: 1 },
-      { bucket: "2024-03-30T00:00:00.000Z", star_count: 2 },
-      { bucket: "2024-03-29T00:00:00.000Z", star_count: 1 },
-      { bucket: "2024-03-23T00:00:00.000Z", star_count: 1 },
-      { bucket: "2024-03-19T00:00:00.000Z", star_count: 1 },
-      { bucket: "2024-03-17T00:00:00.000Z", star_count: 2 },
-      { bucket: "2024-03-14T00:00:00.000Z", star_count: 1 },
-      { bucket: "2024-03-13T00:00:00.000Z", star_count: 3 },
-      { bucket: "2024-03-12T00:00:00.000Z", star_count: 3 },
-      { bucket: "2024-03-11T00:00:00.000Z", star_count: 1 },
-      { bucket: "2024-03-06T00:00:00.000Z", star_count: 1 },
-    ],
-  },
-};
-
-export const ForkMetricCard = {
-  args: {
-    variant: "forks",
-    stats: [
-      { bucket: "2024-03-28T00:00:00.000Z", forks_count: 1 },
-      { bucket: "2024-03-23T00:00:00.000Z", forks_count: 2 },
-      { bucket: "2024-03-22T00:00:00.000Z", forks_count: 1 },
-      { bucket: "2024-03-14T00:00:00.000Z", forks_count: 1 },
-      { bucket: "2024-03-13T00:00:00.000Z", forks_count: 1 },
-      { bucket: "2024-03-11T00:00:00.000Z", forks_count: 1 },
-      { bucket: "2024-03-07T00:00:00.000Z", forks_count: 1 },
-    ],
-  },
-};
-
-export const LoadingMetricCard = {
-  args: {
-    isLoading: true,
-  },
-};
diff --git a/components/Graphs/MetricCard.tsx b/components/Graphs/MetricCard.tsx
deleted file mode 100644
index df8405d1d0..0000000000
--- a/components/Graphs/MetricCard.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import EChartsReact from "echarts-for-react";
-import { useMemo } from "react";
-import { StatsType } from "lib/hooks/api/useFetchMetricStats";
-import Card from "components/atoms/Card/card";
-import humanizeNumber from "lib/utils/humanizeNumber";
-import SkeletonWrapper from "components/atoms/SkeletonLoader/skeleton-wrapper";
-
-type MetricCardProps = {
-  stats: StatsType[] | undefined;
-  variant: "stars" | "forks";
-  range: 7 | 30 | 90;
-  isLoading: boolean;
-};
-
-export default function MetricCard({ stats, variant, range, isLoading }: MetricCardProps) {
-  const countProperty = variant === "stars" ? "star_count" : "forks_count";
-  const seriesData = useMemo(() => stats?.map((stat) => stat[countProperty] ?? 0) ?? [], [countProperty, stats]);
-  const bucketData = useMemo(() => stats?.map((stat) => new Date(stat.bucket).toDateString()) ?? [], [stats]);
-
-  const option = useMemo(() => {
-    return {
-      xAxis: {
-        type: "category",
-        data: bucketData,
-        show: false,
-      },
-      yAxis: {
-        type: "value",
-        show: false,
-      },
-      tooltip: {
-        trigger: "axis",
-        axisPointer: {
-          type: "shadow",
-        },
-      },
-      series: [
-        {
-          data: seriesData,
-          symbol: "none",
-          type: variant === "stars" ? "line" : "bar",
-        },
-      ],
-      color: "hsla(19, 100%, 50%, 1)",
-    };
-  }, [bucketData, seriesData, variant]);
-
-  const total = useMemo(
-    () => seriesData?.reduce((stat, currentValue) => (stat || 0) + (currentValue || 0), 0),
-    [seriesData]
-  );
-
-  return (
-    <Card className="w-full xl:max-w-lg h-fit p-5 pl-6 flex flex-col gap-4">
-      <h2 className="flex gap-2 items-center text-xl font-semibold capitalize">
-        {variant}{" "}
-        {isLoading ? (
-          <span>
-            <SkeletonWrapper width={100} height={24} />
-          </span>
-        ) : (
-          <span className="font-medium text-base text-slate-500">{range} days</span>
-        )}
-      </h2>
-
-      {isLoading ? (
-        <SkeletonWrapper width={300} height={95} />
-      ) : (
-        <div className="flex justify-between items-center px-2 gap-4 md:gap-8">
-          <p className="text-5xl font-bold">{humanizeNumber(total!, "abbreviation")}</p>
-          <div className="h-fit">
-            <EChartsReact option={option} style={{ height: "100%", width: "100%" }} />
-          </div>
-        </div>
-      )}
-    </Card>
-  );
-}
diff --git a/components/Workspaces/RepositoryStatCard.tsx b/components/Workspaces/RepositoryStatCard.tsx
index 121a428308..f1728ff69d 100644
--- a/components/Workspaces/RepositoryStatCard.tsx
+++ b/components/Workspaces/RepositoryStatCard.tsx
@@ -1,5 +1,8 @@
+import { FaStar } from "react-icons/fa6";
+import { BiGitRepoForked } from "react-icons/bi";
 import { ArrowTrendingDownIcon, ArrowTrendingUpIcon, MinusSmallIcon } from "@heroicons/react/24/solid";
 import { GitPullRequestIcon, HeartIcon, IssueOpenedIcon } from "@primer/octicons-react";
+
 import Card from "components/atoms/Card/card";
 import Pill from "components/atoms/Pill/pill";
 import SkeletonWrapper from "components/atoms/SkeletonLoader/skeleton-wrapper";
@@ -21,12 +24,22 @@ type RepositoryStatCardProps = {
       type: "engagement";
       stats: { stars: number; forks: number; activity_ratio: number } | undefined;
     }
+  | {
+      type: "stars";
+      stats: { total: number; range: number; over_range: number; average_over_range: number } | undefined;
+    }
+  | {
+      type: "forks";
+      stats: { total: number; range: number; over_range: number; average_over_range: number } | undefined;
+    }
 );
 
 const titles = {
   pulls: "Pull Requests",
   issues: "Issues",
   engagement: "Engagement",
+  stars: "Stars",
+  forks: "Forks",
 } as const;
 
 type CardType = RepositoryStatCardProps["type"];
@@ -39,6 +52,10 @@ function getIcon(type: CardType) {
       return <IssueOpenedIcon size={18} className="text-slate-600 border-1 rounded-md p-2 h-8 w-8 shadow-xs" />;
     case "engagement":
       return <HeartIcon size={18} className="text-slate-600 border-1 rounded-md p-2 h-8 w-8 shadow-xs" />;
+    case "stars":
+      return <FaStar size={18} className="text-slate-600 border-1 rounded-md p-2 h-8 w-8 shadow-xs" />;
+    case "forks":
+      return <BiGitRepoForked size={18} className="text-slate-600 border-1 rounded-md p-2 h-8 w-8 shadow-xs" />;
   }
 }
 
@@ -50,6 +67,9 @@ function getStatPropertiesByType(type: CardType) {
       return ["opened", "closed", "velocity"];
     case "engagement":
       return ["stars", "forks", "activity_ratio"];
+    case "forks":
+    case "stars":
+      return ["total", "over_range", "average_over_range"];
     default:
       throw new Error("Invalid repository stat card type");
   }
@@ -123,8 +143,14 @@ export const RepositoryStatCard = ({ stats, type, isLoading, hasError }: Reposit
               .map(([stat, value]) => {
                 return (
                   <tr key={stat} className="flex flex-col">
-                    <th scope="row" className="capitalize font-normal text-lg lg:text-sm text-light-slate-12 text-left">
-                      {stat.replace("_", " ")}
+                    <th scope="row" className="capitalize font-normal text-xs lg:text-sm text-light-slate-12 text-left">
+                      {type === "stars" || type === "forks"
+                        ? stat === "over_range"
+                          ? `Over ${stats.range} Days`
+                          : stat === "average_over_range"
+                          ? `Avg. per day`
+                          : stat.replace("_", " ")
+                        : stat.replace("_", " ")}
                       <span
                         className={`w-2 h-2 rounded-full ml-1  ${
                           stat === "opened"
diff --git a/next-types.d.ts b/next-types.d.ts
index 2950a0efbe..4955c8da6d 100644
--- a/next-types.d.ts
+++ b/next-types.d.ts
@@ -25,6 +25,7 @@ interface DbRepo {
   readonly spam_prs_count?: number;
   readonly pr_velocity_count?: number;
   readonly churnTotalCount?: number;
+  readonly activity_ratio?: number;
   readonly language: string;
   readonly stars: number;
   readonly description: string;
diff --git a/pages/s/[org]/[repo]/index.tsx b/pages/s/[org]/[repo]/index.tsx
index d165f402f3..542c9402ef 100644
--- a/pages/s/[org]/[repo]/index.tsx
+++ b/pages/s/[org]/[repo]/index.tsx
@@ -1,6 +1,5 @@
 import { GetServerSidePropsContext } from "next";
 import { useRouter } from "next/router";
-import { ComponentProps } from "react";
 import { HiOutlineExternalLink } from "react-icons/hi";
 import { usePostHog } from "posthog-js/react";
 import { FiCopy } from "react-icons/fi";
@@ -11,9 +10,9 @@ import ProfileLayout from "layouts/profile";
 import Avatar from "components/atoms/Avatar/avatar";
 import StarsChart from "components/Graphs/StarsChart";
 import ForksChart from "components/Graphs/ForksChart";
-import MetricCard from "components/Graphs/MetricCard";
 import ClientOnly from "components/atoms/ClientOnly/client-only";
 import { DayRangePicker } from "components/shared/DayRangePicker";
+import { RepositoryStatCard } from "components/Workspaces/RepositoryStatCard";
 import { getRepositoryOgImage, RepositoryOgImage } from "components/Repositories/RepositoryOgImage";
 import { useToast } from "lib/hooks/useToast";
 import { shortenUrl } from "lib/utils/shorten-url";
@@ -42,7 +41,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
   return { props: { repoData, image: owner?.avatar_url || "", ogImageUrl } };
 }
 
-type Range = ComponentProps<typeof MetricCard>["range"];
+type Range = 30 | 7 | 90 | 180 | 360;
 
 interface RepoPageProps {
   repoData: DbRepo;
@@ -82,6 +81,9 @@ export default function RepoPage({ repoData, image, ogImageUrl }: RepoPageProps)
     range,
   });
 
+  const starsRangedTotal = starsData?.reduce((prev, curr) => prev + curr.star_count!, 0);
+  const forksRangedTotal = forkStats?.reduce((prev, curr) => prev + curr.forks_count!, 0);
+
   const copyUrlToClipboard = async () => {
     const url = new URL(window.location.href).toString();
     posthog!.capture(`clicked: ${repoData.full_name} repo page share`);
@@ -128,26 +130,46 @@ export default function RepoPage({ repoData, image, ogImageUrl }: RepoPageProps)
               </Button>
             </div>
           </div>
-          <section className="flex flex-col gap-2 md:gap-4 lg:gap-8 lg:flex-row w-full justify-between">
-            <ClientOnly>
-              <MetricCard variant="stars" stats={starsData} range={range} isLoading={isStarsDataLoading} />
-              <MetricCard variant="forks" stats={forkStats} range={range} isLoading={isForksDataLoading} />
-            </ClientOnly>
-          </section>
-          <StarsChart
-            stats={starsData}
-            total={repoData.stars}
-            range={range}
-            syncId={syncId}
-            isLoading={isStarsDataLoading}
-          />
-          <ForksChart
-            stats={forkStats}
-            total={repoData.forks}
-            range={range}
-            syncId={syncId}
-            isLoading={isForksDataLoading}
-          />
+          <ClientOnly>
+            <section className="w-full h-fit grid grid-cols-1 lg:grid-cols-2 grid-flow-row gap-2">
+              <RepositoryStatCard
+                type="stars"
+                isLoading={isStarsDataLoading}
+                hasError={starsError !== undefined}
+                stats={{
+                  total: repoData.stars,
+                  over_range: starsRangedTotal!,
+                  range,
+                  average_over_range: Math.round(starsRangedTotal! / range),
+                }}
+              />
+              <RepositoryStatCard
+                type="forks"
+                isLoading={isForksDataLoading}
+                hasError={forkError !== undefined}
+                stats={{
+                  total: repoData.forks,
+                  over_range: forksRangedTotal!,
+                  range,
+                  average_over_range: Math.round(forksRangedTotal! / range),
+                }}
+              />
+            </section>
+            <StarsChart
+              stats={starsData}
+              total={repoData.stars}
+              range={range}
+              syncId={syncId}
+              isLoading={isStarsDataLoading}
+            />
+            <ForksChart
+              stats={forkStats}
+              total={repoData.forks}
+              range={range}
+              syncId={syncId}
+              isLoading={isForksDataLoading}
+            />
+          </ClientOnly>
         </section>
       </ProfileLayout>
     </>