diff --git a/src/components/analytics/exif/contributiongraph.tsx b/src/components/analytics/exif/contributiongraph.tsx
index 59a6a26..1e9c0a1 100644
--- a/src/components/analytics/exif/contributiongraph.tsx
+++ b/src/components/analytics/exif/contributiongraph.tsx
@@ -1,4 +1,26 @@
-import React from 'react';
+import React, { useEffect, useState } from "react";
+import { getAssetStatistics } from "@/handlers/api/analytics.handler";
+
+// List of month labels
+const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+const weeksPerMonth = [4, 4, 4, 4, 5, 4, 4, 4, 5, 4, 4, 5]; 
+// Function to map weeks to months
+const getMonthLabels = () => {
+// Approximate number of weeks per month
+  const monthLabels = [];
+  let cumulativeWeeks = 0;
+
+  for (let i = 0; i < months.length; i++) {
+    monthLabels.push({
+      month: months[i],
+      startWeek: cumulativeWeeks,
+      span: weeksPerMonth[i],
+    });
+    cumulativeWeeks += weeksPerMonth[i];
+  }
+
+  return monthLabels;
+};
 
 // Function to generate the last 365 days of contribution data
 const generateContributions = () => {
@@ -14,7 +36,7 @@ const generateContributions = () => {
 
 // Function to determine the background color based on the contribution count
 const getColor = (count: number) => {
-  if (count === 0) return '';
+  if (count === 0) return 'bg-zinc-900';
   if (count === 1) return 'bg-green-200';
   if (count === 2) return 'bg-green-400';
   if (count === 3) return 'bg-green-500';
@@ -24,12 +46,46 @@ const getColor = (count: number) => {
 
 const ContributionGraph: React.FC = () => {
   const contributions = generateContributions();
+  const [statistics, setStatistics] = useState({});
+  const [loading, setLoading] = useState(false);
+
+  const fetchData = async () => {
+    setLoading(true); // Set loading to true when starting to fetch data
+    return getAssetStatistics()
+      .then((data) => {
+        setStatistics(data); // Update statistics with the returned data
+      })
+      .finally(() => setLoading(false)); // Stop loading after data is fetched
+  };
+
+  const monthLabels = getMonthLabels();
 
   return (
     <div className="p-4 w-full">
-      <h2 className="text-xl font-bold mb-4">GitHub Contribution Graph - Past Year</h2>
+      <h2 className="text-xl font-bold mb-4">Past Year</h2>
       <div className="overflow-x-auto">
+        {/* Month labels */}
+        {/* <div className="flex mb-1">
+          {monthLabels.map(({ month, startWeek, span }) => (
+            <div
+              key={month}
+              style={{ width: `calc(${span / 52 * 100}%)`, marginLeft: `calc(${startWeek / 52 * 100}%)` }}
+              className="text-center font-bold text-sm"
+            >
+              {month}
+            </div>
+          ))}
+        </div> */}
+
         <table className="table-auto border-separate border-spacing-1 w-full">
+          <thead>
+            <tr>
+              {months.map((month, index) => (
+                <th key={index} colSpan={weeksPerMonth[index]}>{month}</th>
+              ))}
+            </tr>
+          </thead>
+
           <tbody>
             {contributions.map((dayContributions, dayIndex) => (
               <tr key={dayIndex}>
@@ -38,7 +94,7 @@ const ContributionGraph: React.FC = () => {
                     key={weekIndex}
                     className={`h-6 ${getColor(count)} rounded-lg`}
                     style={{ width: `calc(${100 / 52}%)` }}
-                    title={`${count} contributions`}
+                    title={`${count} Images`}
                   ></td>
                 ))}
               </tr>
diff --git a/src/config/routes.ts b/src/config/routes.ts
index 4aa8025..dfd0072 100644
--- a/src/config/routes.ts
+++ b/src/config/routes.ts
@@ -34,4 +34,8 @@ export const ASSET_VIDEO_PATH = (id: string) => BASE_PROXY_ENDPOINT + "/asset/vi
 
 // Location
 
-export const SEARCH_PLACES_PATH = BASE_PROXY_ENDPOINT + "/search/places";
\ No newline at end of file
+export const SEARCH_PLACES_PATH = BASE_PROXY_ENDPOINT + "/search/places";
+
+//Analytics
+
+export const ASSET_STATISTICS = BASE_PROXY_ENDPOINT + "/assets/statistics";
\ No newline at end of file
diff --git a/src/handlers/api/analytics.handler.ts b/src/handlers/api/analytics.handler.ts
index 8215137..933cdd8 100644
--- a/src/handlers/api/analytics.handler.ts
+++ b/src/handlers/api/analytics.handler.ts
@@ -1,4 +1,4 @@
-import { EXIF_DISTRIBUTION_PATH } from "@/config/routes";
+import { ASSET_STATISTICS, EXIF_DISTRIBUTION_PATH } from "@/config/routes";
 import API from "@/lib/api";
 
 export type ISupportedEXIFColumns = 
@@ -7,3 +7,7 @@ export type ISupportedEXIFColumns =
 export const getExifDistribution = async (column: ISupportedEXIFColumns) => {
   return API.get(EXIF_DISTRIBUTION_PATH(column));
 };
+
+export const getAssetStatistics = async () => {
+  return API.get(ASSET_STATISTICS);
+}
\ No newline at end of file
diff --git a/src/pages/analytics/exif.tsx b/src/pages/analytics/exif.tsx
index cd25596..ed32d6a 100644
--- a/src/pages/analytics/exif.tsx
+++ b/src/pages/analytics/exif.tsx
@@ -13,6 +13,8 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import ContributionGraph from "@/components/analytics/exif/contributiongraph";
+import { useEffect, useState } from "react";
+import { getAssetStatistics } from "@/handlers/api/analytics.handler";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -69,48 +71,65 @@ const exifCharts: IEXIFDistributionProps[] = [
   },
 ];
 export default function ExifDataAnalytics() {
+  const [statistics, setStatistics] = useState({ images: 0, videos: 0, total: 0 });
+  const [loading, setLoading] = useState(false);
+
+
+  const fetchStatisticsData = async () => {
+    setLoading(true); // Set loading to true when starting to fetch data
+    return getAssetStatistics()
+      .then((data) => {
+        console.log("asdasdadasd")
+        setStatistics(data); // Update statistics with the returned data
+      })
+      .finally(() => setLoading(false)); // Stop loading after data is fetched
+  };
+
+  useEffect(() => {
+    fetchStatisticsData();
+  }, []);
   return (
     <PageLayout>
       <Header leftComponent="Exif Data" />
       <div className="grid grid-cols-4 gap-4">
         <Card>
           <CardHeader>
-            <CardTitle className="text-center">Total Files</CardTitle>
+            <CardTitle className="text-center text-lg font-mono">Total Files</CardTitle>
           </CardHeader>
-          <CardContent className="text-center">
+          <CardContent className="text-center text-lg font-mono">
             {(() => {
-              const a = 700000;
+              const a = statistics.total;
               return a.toLocaleString();
             })()}
           </CardContent>
         </Card>
         <Card>
           <CardHeader>
-            <CardTitle className="text-center">Images</CardTitle>
+            <CardTitle className="text-center text-lg font-mono">Images</CardTitle>
           </CardHeader>
-          <CardContent className="text-center">
+          <CardContent className="text-center text-lg font-mono">
             {(() => {
-              const a = 600000;
+              const a = statistics.images;
               return a.toLocaleString();
             })()}
           </CardContent>
         </Card>
         <Card>
           <CardHeader>
-            <CardTitle className="text-center">Videos</CardTitle>
+            <CardTitle className="text-center text-lg font-mono">Videos</CardTitle>
           </CardHeader>
-          <CardContent className="text-center">
+          <CardContent className="text-center text-lg font-mono">
             {(() => {
-              const a = 100000;
+              const a = statistics.videos;
               return a.toLocaleString();
             })()}
           </CardContent>
         </Card>
         <Card>
           <CardHeader>
-            <CardTitle className="text-center">Live</CardTitle>
+            <CardTitle className="text-center text-lg font-mono">Live</CardTitle>
           </CardHeader>
-          <CardContent className="text-center">
+          <CardContent className="text-center text-lg font-mono">
             {(() => {
               const a = 50000;
               return a.toLocaleString();
@@ -118,7 +137,8 @@ export default function ExifDataAnalytics() {
           </CardContent>
         </Card>
       </div>
-      <ContributionGraph  />
+
+      <ContributionGraph />
       <div className="grid grid-cols-3 gap-4">
         {exifCharts.map((chart) => (
           <EXIFDistribution
@@ -128,7 +148,7 @@ export default function ExifDataAnalytics() {
             description={chart.description}
           />
         ))}
-        
+
       </div>
     </PageLayout>
   );