Styling. Dynalically genrated the days of the month using date fns.

component/calender/index.tsx

@@ -1,16 +1,24 @@
 import React from "react";
 import { Box, SimpleGrid } from "@chakra-ui/react";
+import { endOfMonth, getDate } from 'date-fns';
 
 const Calender = (): JSX.Element => {
+  const today = new Date;
+
+  const endOfCurrMonth = endOfMonth(today);
+  const lastDay = getDate(endOfCurrMonth);
+
+  console.info(`This month has ${lastDay} days.`);
+
   const daysArr = [];
-  for (let i = daysArr.length; i < 31; i++) {
+  for (let i = daysArr.length; i < lastDay; i++) {
     daysArr.push(daysArr.length + 1);
   }
   return (
     <SimpleGrid
-      px={10}
-      spacing="5px"
-      bg="brand.main"
+      px={6}
+      spacing={2}
+      // bg="brand.main"
       w="100%"
       h="100vh"
       columns={7}
@@ -18,7 +26,8 @@ const Calender = (): JSX.Element => {
       {daysArr.map((day) => {
         return (
           <Box
-            bg="brand.primary"
+            bg="transparent"
+            border="2px solid #0068ff"
             w="100%"
             h="100%"
             key={day}