diff --git a/components/Calendar/calendar.tsx b/components/Calendar/calendar.tsx
index 327cd92..2c33ee8 100644
--- a/components/Calendar/calendar.tsx
+++ b/components/Calendar/calendar.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import dayjs from "dayjs";
 import styled from "styled-components";
 import { randomInt } from "crypto";
@@ -6,6 +6,9 @@ import { useRouter } from "next/router";
 import { useSelector, useDispatch } from "react-redux";
 import { SelectedDateInterface, updateDate } from "@redux/actions";
 import { Divider, Tooltip } from "@mui/material";
+import { GitSt } from "@services/gitstory";
+import CircularProgress from "@mui/material/CircularProgress";
+import Link from "next/link";
 
 interface RootState {
   selectedDate: SelectedDateInterface;
@@ -13,6 +16,12 @@ interface RootState {
 
 export default function Calendar(props) {
   const router = useRouter();
+  const [calendarState, setCalendarState] = useState([]);
+  const [monthActivityState, setMonthActivityState] = useState<any>({});
+  const [isLoading, setIsLoading] = useState(true);
+  const [isScanOn, setIsScanOn] = useState(false);
+  const GitStory = new GitSt();
+  GitStory.init({ client: "github", owner: router.query.slug[1], repo: router.query.slug[2] });
 
   // Redux
   const dispatch = useDispatch();
@@ -31,15 +40,10 @@ export default function Calendar(props) {
   const month = date.month() + 1;
   const year = date.year();
 
-  // Init array calendar
-  let calendar = [];
-
-  // Execute Calendar function
-  fillCalendar();
-
   // Fill Calendar in Array
   function fillCalendar() {
     let counter = true;
+    let calendar = [];
     weekdaysArray.forEach((day) => {
       if (counter === true) {
         if (String(day) === String(firstDayOfMonth)) {
@@ -52,12 +56,31 @@ export default function Calendar(props) {
         }
       }
     });
+    setCalendarState(calendar);
+    isScanOn ? null : setIsLoading(false);
   }
 
+  //
+  async function scanMonth(month, year) {
+    setIsScanOn(true);
+    setIsLoading(true);
+    let activity = await GitStory.getMonthCommitsActivity(year, month);
+    setMonthActivityState(activity);
+    console.log(activity);
+
+    setIsScanOn(false);
+    setIsLoading(false);
+  }
+
+  useEffect(() => {
+    fillCalendar();
+  }, [isLoading]);
+
   // 📣 Interaction
   //--------------------------------
   function handleClickDayOfMonth(day, e) {
     router.push("/[...slug]/date/[...date]", `/commits/${router.query.slug[0]}/${router.query.slug[1]}/${router.query.slug[2]}/date/${year}/${month}/${day}`);
+    e.preventDefault();
     dispatch(
       updateDate({
         day: day,
@@ -70,33 +93,80 @@ export default function Calendar(props) {
   // 📣 Rendering
   //--------------------------------
   function renderCalendar() {
-    return (
-      <CalendarBox>
-        <Tooltip title={"Check "+ monthsArray[month - 1] + " commits "}><MonthBox>
-          {monthsArray[month - 1]}
-        </MonthBox></Tooltip>
-        <HeadDaysOfTheWeek>
-          {weekdaysArray.map((day) => {
-            return (
-              <DayOfWeek>
-                <i key={day + randomInt}>{day} </i>
-              </DayOfWeek>
-            );
-          })}
-        </HeadDaysOfTheWeek>
-        <DaysOfTheMonth>
-          {calendar.map((day) => {
-            return (
-              <DayOfMonth onClick={(e) => handleClickDayOfMonth(day, e)}>
-                <DayBox key={day + randomInt} selected={parseInt(day) == state.day && month == state.month && year == state.year ? "selected" : null}>
-                  {day}
-                </DayBox>
-              </DayOfMonth>
-            );
-          })}
-        </DaysOfTheMonth>
-      </CalendarBox>
-    );
+    if (isLoading) {
+      return (
+        <CalendarBox>
+          <Tooltip title={"Check " + monthsArray[month - 1] + " commits activity "}>
+            <MonthBox
+              onClick={() => {
+                scanMonth(month, year);
+              }}
+            >
+              {monthsArray[month - 1]}
+            </MonthBox>
+          </Tooltip>
+          <HeadDaysOfTheWeek>
+            {weekdaysArray.map((day) => {
+              return (
+                <DayOfWeek>
+                  <i key={day + randomInt}>{day} </i>
+                </DayOfWeek>
+              );
+            })}
+          </HeadDaysOfTheWeek>
+          <LoadingPanel>
+            <CircularProgress style={{ color: "white" }} size={90} thickness={6} />
+            <h5>Searching for commits... this may take minutes</h5>
+          </LoadingPanel>
+        </CalendarBox>
+      );
+    } else {
+      return (
+        <CalendarBox>
+          <Tooltip
+            id={monthsArray[month - 1]}
+            arrow
+            enterDelay={800}
+            placement="top"
+            title={"🔬 Experimental: Check " + monthsArray[month - 1] + " commits activity  "}
+          >
+            <MonthBox
+              onClick={() => {
+                scanMonth(month, year);
+              }}
+            >
+              {monthsArray[month - 1]}
+            </MonthBox>
+          </Tooltip>
+          <HeadDaysOfTheWeek>
+            {weekdaysArray.map((day) => {
+              return (
+                <DayOfWeek>
+                  <i key={day + randomInt}>{day} </i>
+                </DayOfWeek>
+              );
+            })}
+          </HeadDaysOfTheWeek>
+          <DaysOfTheMonth>
+            {calendarState.map((day) => {
+              return (
+                <DayOfMonth>
+                  <DayBox
+                    key={day + randomInt}
+                    activity={monthActivityState[day - 1] ? (monthActivityState[day - 1].commits > 0 ? monthActivityState[day - 1].commits : 0) : false}
+                    selected={parseInt(day) == state.day && month == state.month && year == state.year ? "selected" : null}
+                  >
+                    <Link href={`/commits/${router.query.slug[0]}/${router.query.slug[1]}/${router.query.slug[2]}/date/${year}/${month}/${day}`}>
+                      <a>{day}</a>
+                    </Link>
+                  </DayBox>
+                </DayOfMonth>
+              );
+            })}
+          </DaysOfTheMonth>
+        </CalendarBox>
+      );
+    }
   }
 
   // 📣 Final Rendering
@@ -114,7 +184,7 @@ const MonthBox = styled.div`
   background-color: #ffffff14;
   padding: 10px;
   border-radius: 5px;
-  transition:  0.7s;
+  transition: 0.7s;
 
   &:hover {
     background-color: #363167;
@@ -208,6 +278,22 @@ const CalendarBox = styled.div`
   }
 `;
 
+const LoadingPanel = styled.div`
+  //center everything in the box
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 230px;
+  width: 100%;
+  h5 {
+    width: 80%;
+    padding-top: 20px;
+    text-align: center;
+  }
+  //
+`;
+
 // CSS
 const DayBox: any = styled.div`
   background-color: ${(props: any) => (props.selected ? "white" : null)};
@@ -217,6 +303,10 @@ const DayBox: any = styled.div`
   cursor: pointer;
   transition: 0.2s;
 
+  // Active status
+  border-bottom: ${(props: any) => (props.activity ? "solid" : null)};
+  border-color: ${(props: any) => (props.activity ? "hsl(141deg 89% 72% / " + (props.activity + 20) + "%);" : null)};
+
   &:hover {
     background-color: ${(props: any) => (props.selected ? "white" : "#101417")};
     color: ${(props: any) => (props.selected ? "black" : "white")};
diff --git a/pages/commits/[[...slug]].tsx b/pages/commits/[[...slug]].tsx
index ae4e29f..842a672 100644
--- a/pages/commits/[[...slug]].tsx
+++ b/pages/commits/[[...slug]].tsx
@@ -1,5 +1,6 @@
 import Header from "@components/Header/Header";
 import { useRouter } from "next/router";
+import Link from 'next/link';
 import { useEffect, useState } from "react";
 import styled from "styled-components";
 import { GitSt } from "@services/gitstory";
@@ -11,7 +12,7 @@ import AccessTimeFilledIcon from "@mui/icons-material/AccessTimeFilled";
 import Tooltip from "@mui/material/Tooltip";
 import InfoIcon from "@mui/icons-material/Info";
 import FancyRender from "@components/Loading/FancyRender";
-import NumbersIcon from '@mui/icons-material/Numbers';
+import NumbersIcon from "@mui/icons-material/Numbers";
 import Footer from "@components/Footer/Footer";
 
 export default function Repo() {
@@ -73,16 +74,20 @@ export default function Repo() {
           </RepoBar>
           <SubRepoInfo>
             <BackToCalendarBtn>
-              <a href={`/calendar/${slug[0]}/${slug[1]}/${slug[2]}`}>
-                <Tooltip title="Back to Calendar">
-                  <KeyboardBackspaceIcon sx={{ fontSize: "20px" }} />
-                </Tooltip>
-              </a>
+              <Link href={`/calendar/${slug[0]}/${slug[1]}/${slug[2]}`}>
+                <a>
+                  <Tooltip title="Back to Calendar">
+                    <KeyboardBackspaceIcon sx={{ fontSize: "20px" }} />
+                  </Tooltip>
+                </a>
+              </Link>
             </BackToCalendarBtn>
             <span>
-             <InfoIcon sx={{fontSize:"13px"}}></InfoIcon>  Commits on {dayjs(slug[4] + "-" + slug[5] + "-" + slug[6]).format("DD MMMM YYYY")}
+              <InfoIcon sx={{ fontSize: "13px" }}></InfoIcon> Commits on {dayjs(slug[4] + "-" + slug[5] + "-" + slug[6]).format("DD MMMM YYYY")}
             </span>
-            <div><NumbersIcon sx={{fontSize:"13px"}}></NumbersIcon> {dateCommits.length} Commits</div>
+            <div>
+              <NumbersIcon sx={{ fontSize: "13px" }}></NumbersIcon> {dateCommits.length} Commits
+            </div>
           </SubRepoInfo>
         </GradientHeader>
         <ListOfCommitsBox>
@@ -191,7 +196,7 @@ const SubRepoInfo = styled.div`
     padding: 18px;
   }
 
-  div{
+  div {
     padding: 18px;
   }
 `;
diff --git a/services/gitstory.ts b/services/gitstory.ts
index 82507e7..dbdf07d 100644
--- a/services/gitstory.ts
+++ b/services/gitstory.ts
@@ -1,5 +1,6 @@
 import GitStory from "gitstorykit";
 import Cookies from "js-cookie";
+import dayjs from "dayjs";
 
 interface ParamsInterface {
   client: any;
@@ -8,8 +9,6 @@ interface ParamsInterface {
   auth?: string;
 }
 
-
-
 export class GitSt {
   private config;
   private client: string;
@@ -39,4 +38,21 @@ export class GitSt {
     let commits = await this.gitstory.getCommitsBetweenDates(startDate, endDate, per_page, page);
     return commits;
   }
+
+  public async getMonthCommitsActivity(year: string, month: string) {
+    let daysinmonth = dayjs("2019-01-25").daysInMonth();
+    let CommitsActivityArray = [];
+    for (let index = 0; index < daysinmonth; index++) {
+      let date = dayjs(`${year}-${month}-${index + 1}`).format("YYYY-MM-DD");
+      let firsthour = dayjs(date).startOf("day").format("YYYY-MM-DDTHH:mm:ssZ");
+      let lasthour = dayjs(date).endOf("day").format("YYYY-MM-DDTHH:mm:ssZ");
+      let commits = await this.getCommitsBetween(firsthour, lasthour, 100, 0);
+      // push commits activity to array with day as key
+      CommitsActivityArray.push({
+        day: dayjs(date),
+        commits: commits.data.length,
+      });
+    }
+    return CommitsActivityArray;
+  }
 }