diff --git a/data/stickerSeeder.ts b/data/stickerSeeder.ts
index 8e514b7..908b2b0 100644
--- a/data/stickerSeeder.ts
+++ b/data/stickerSeeder.ts
@@ -24,6 +24,7 @@ const generateSticker = (): -2 | -1 | 0 | 1 | 2 => {
   }
 };
 
+// TODO: Update so seeder takes in a month or date to then generate the stickers for it.
 /**
  * This seeder is to simulate the date and sticker info from the database.
  * Filling up an array for the current month with sticker from ths first to
diff --git a/lib/versionStringToNumber.ts b/lib/versionStringToNumber.ts
new file mode 100644
index 0000000..492f161
--- /dev/null
+++ b/lib/versionStringToNumber.ts
@@ -0,0 +1,22 @@
+/**
+ * Function to convert the version string to a number tha represents the most recent major release.
+ * @param {string }version The version string.
+ * @returns {number} a number that represents the most recent major release.
+ */
+const versionStringToNumber = (version: string): number => {
+  const versionStrArr: string[] = version.split(".");
+
+  const versionArr: number[] = versionStrArr.map((str) => parseInt(str));
+
+  if (versionArr[0] === 0 && versionArr[1] === 0 && versionArr[2] > 1) {
+    versionArr[1] = 1;
+  }
+
+  const versionStr = `${versionArr[0]}` + "." + `${versionArr[1]}`;
+
+  const versionNum: number = parseFloat(versionStr);
+
+  return versionNum;
+};
+
+export default versionStringToNumber;
diff --git a/package.json b/package.json
index 6671530..f870009 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "private": true,
   "name": "lucid-creations-media-potty-chart",
   "homepage": "https://lucidcreations.media/introducing-code-name-potty-chart/",
-  "version": "v0.0.11-alpha",
+  "version": "0.1.0",
   "author": {
     "name": "Lucid Creations Media",
     "url": "https://lucidcreations.media",
@@ -23,23 +23,23 @@
     "@reduxjs/toolkit": "^1.8.2",
     "date-fns": "^2.28.0",
     "formik": "^2.2.9",
-    "framer-motion": "^6.3.11",
+    "framer-motion": "^6.3.15",
     "next": "12.1.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.2",
-    "sharp": "^0.30.6"
+    "sharp": "^0.30.7"
   },
   "devDependencies": {
     "@types/node": "^18.0.0",
     "@types/react": "^18.0.14",
     "@types/react-redux": "^7.1.24",
-    "@typescript-eslint/eslint-plugin": "<5.28.0",
+    "@typescript-eslint/eslint-plugin": "^5.29.0",
     "eslint": "^8.18.0",
     "eslint-config-next": "^12.1.6",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-react": "^7.30.0",
+    "eslint-plugin-jsx-a11y": "^6.6.0",
+    "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "<4.6.0",
     "prettier": "^2.7.1",
     "typescript": "^4.7.4"
diff --git a/src/app/store.ts b/src/app/store.ts
index db29048..0710a07 100644
--- a/src/app/store.ts
+++ b/src/app/store.ts
@@ -1,11 +1,13 @@
 import { configureStore } from "@reduxjs/toolkit";
-import calenderReducer from "../features/calender/calender";
+import calenderReducer from "../features/calender";
 import stickersReducer from "../features/calender/stickers";
+import tutorialReducer from "../features/tutorial";
 
 export const store = configureStore({
   reducer: {
     calender: calenderReducer,
-    stickers: stickersReducer
+    stickers: stickersReducer,
+    tutorial: tutorialReducer
   }
 });
 
diff --git a/src/components/buttons/Custom.tsx b/src/components/buttons/Custom.tsx
new file mode 100644
index 0000000..b96adae
--- /dev/null
+++ b/src/components/buttons/Custom.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { Box, Link, Button, BoxProps } from "@chakra-ui/react";
+import { motion } from "framer-motion";
+
+interface CustomButtonProps {
+  text: string;
+  link: string;
+  type: "primary" | "secondary" | "footer";
+}
+
+const MotionBox = motion<BoxProps>(Box);
+
+const CustomButton = ({ text, link, type }: CustomButtonProps): JSX.Element => {
+  return (
+    <MotionBox whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
+      <Link href={link} target="_blank" rel="noopener">
+        <Button variant={type}>{text}</Button>
+      </Link>
+    </MotionBox>
+  );
+};
+
+export default CustomButton;
diff --git a/src/components/buttons/Patreon.tsx b/src/components/buttons/Patreon.tsx
new file mode 100644
index 0000000..76bfb5e
--- /dev/null
+++ b/src/components/buttons/Patreon.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { Box, Link, Button, BoxProps } from "@chakra-ui/react";
+import { Icon } from "@iconify/react";
+import { motion } from "framer-motion";
+
+const MotionBox = motion<BoxProps>(Box);
+
+const Patreon = (): JSX.Element => {
+  return (
+    <MotionBox whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
+      <Link
+        href="https://www.patreon.com/bePatron?u=15380906"
+        target="_blank"
+        rel="noopener"
+      >
+        <Button variant="patreon" leftIcon={<Icon icon="ri:patreon-fill" />}>
+          {"Fund The App"}
+        </Button>
+      </Link>
+    </MotionBox>
+  );
+};
+
+export default Patreon;
diff --git a/src/components/buttons/Twitter.tsx b/src/components/buttons/Twitter.tsx
new file mode 100644
index 0000000..32d5800
--- /dev/null
+++ b/src/components/buttons/Twitter.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { Box, Link, Button, BoxProps } from "@chakra-ui/react";
+import { Icon } from "@iconify/react";
+import { motion } from "framer-motion";
+
+const MotionBox = motion<BoxProps>(Box);
+
+const Twitter = (): JSX.Element => {
+  return (
+    <MotionBox whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
+      <Link
+        href="https://www.patreon.com/bePatron?u=15380906"
+        target="_blank"
+        rel="noopener"
+      >
+        <Button
+          variant="twitter"
+          leftIcon={<Icon icon="akar-icons:twitter-fill" />}
+        >
+          {"Dev Updates"}
+        </Button>
+      </Link>
+    </MotionBox>
+  );
+};
+
+export default Twitter;
diff --git a/src/components/buttons/data/links.ts b/src/components/buttons/data/links.ts
new file mode 100644
index 0000000..2b3c48b
--- /dev/null
+++ b/src/components/buttons/data/links.ts
@@ -0,0 +1,28 @@
+export interface LinkObj {
+  href?: string;
+  name?: string;
+  type: "primary" | "secondary" | "twitter" | "patreon";
+}
+
+type Links = LinkObj[];
+
+const links: Links = [
+  {
+    href: "https://docs.google.com/document/d/1hrerGKHTO3iach8A-CabtfIB4lyZWlgO8EGTyOCrI2Y",
+    name: "Roadmap and Progress",
+    type: "secondary"
+  },
+  {
+    href: "https://lucidcreations.media/introducing-code-name-potty-chart/",
+    name: "Original Announcement",
+    type: "secondary"
+  },
+  {
+    type: "patreon"
+  },
+  {
+    type: "twitter"
+  }
+];
+
+export default links;
diff --git a/src/components/buttons/index.tsx b/src/components/buttons/index.tsx
new file mode 100644
index 0000000..d897253
--- /dev/null
+++ b/src/components/buttons/index.tsx
@@ -0,0 +1,77 @@
+import React from "react";
+import { Box, HStack, VStack } from "@chakra-ui/react";
+import CustomButton from "./Custom";
+import links, { LinkObj } from "./data/links";
+import Patreon from "./Patreon";
+import Twitter from "./Twitter";
+
+const Buttons = (): JSX.Element => {
+  return (
+    <Box h="auto" w="100%">
+      <HStack
+        display={{ base: "none", lg: "flex" }}
+        h="auto"
+        w="100%"
+        justifyContent="center"
+        alignContent="center"
+        spacing={4}
+      >
+        {links.map((link: LinkObj) => {
+          const { href, name, type } = link;
+
+          if (type === "primary" || type === "secondary") {
+            return (
+              <CustomButton
+                key={name.replaceAll(" ", "-")}
+                link={href}
+                text={name}
+                type={type}
+              />
+            );
+          }
+
+          if (type === "patreon") {
+            return <Patreon key={type} />;
+          }
+
+          if (type === "twitter") {
+            return <Twitter key={type} />;
+          }
+        })}
+      </HStack>
+      <VStack
+        display={{ base: "flex", lg: "none" }}
+        h="auto"
+        w="100%"
+        justifyContent="center"
+        alignContent="center"
+        spacing={4}
+      >
+        {links.map((link: LinkObj) => {
+          const { href, name, type } = link;
+
+          if (type === "primary" || type === "secondary") {
+            return (
+              <CustomButton
+                key={name.replaceAll(" ", "-")}
+                link={href}
+                text={name}
+                type={type}
+              />
+            );
+          }
+
+          if (type === "patreon") {
+            return <Patreon key={type} />;
+          }
+
+          if (type === "twitter") {
+            return <Twitter key={type} />;
+          }
+        })}
+      </VStack>
+    </Box>
+  );
+};
+
+export default Buttons;
diff --git a/src/components/calender/CalenderNav.tsx b/src/components/calender/CalenderNav.tsx
index fa06d69..cc12213 100644
--- a/src/components/calender/CalenderNav.tsx
+++ b/src/components/calender/CalenderNav.tsx
@@ -1,13 +1,23 @@
 import React from "react";
+import { useAppSelector } from "../../app/hooks";
 import { useRouter } from "next/router";
 import { HStack, IconButton } from "@chakra-ui/react";
 import { Icon } from "@iconify/react";
 import { format, isSameMonth, addMonths, subMonths } from "date-fns";
 import findValidDateRange from "../../../lib/findValidDateRange";
 import DatePicker from "./DatePicker";
-import { useAppSelector } from "../../app/hooks";
 
-const CalenderNav = (): JSX.Element => {
+interface CalenderNavProps {
+  isLoading: boolean;
+  title: string;
+}
+
+/**
+ * @param {boolean} isLoading is the component loading?
+ * @param {string} title the title for the current date.
+ */
+
+const CalenderNav = ({ title, isLoading }: CalenderNavProps): JSX.Element => {
   const selectedDate = useAppSelector(
     (state) => state.calender.selectedDateInfo
   );
@@ -46,7 +56,7 @@ const CalenderNav = (): JSX.Element => {
         icon={<Icon icon="akar-icons:chevron-left" />}
         onClick={() => handleNavButtons("prev")}
       />
-      <DatePicker />
+      <DatePicker isLoading={isLoading} title={title} />
       <IconButton
         isDisabled={isSameMonth(selectedDateObj, validEnd)}
         aria-label="Next Month"
diff --git a/src/components/calender/DatePicker.tsx b/src/components/calender/DatePicker.tsx
index 02ca4de..e0efde5 100644
--- a/src/components/calender/DatePicker.tsx
+++ b/src/components/calender/DatePicker.tsx
@@ -14,6 +14,7 @@ import {
   PopoverContent,
   PopoverHeader,
   PopoverTrigger,
+  Skeleton,
   VStack
 } from "@chakra-ui/react";
 import {
@@ -27,13 +28,18 @@ import {
 import { format } from "date-fns";
 import findValidDateRange from "../../../lib/findValidDateRange";
 import FormValidateEmoji from "./FormValidateEmoji";
-import { useAppSelector } from "../../app/hooks";
 
-const DatePicker = (): JSX.Element => {
-  const selectedDate = useAppSelector(
-    (state) => state.calender.selectedDateInfo
-  );
+interface DatePickerProps {
+  isLoading: boolean;
+  title: string;
+}
 
+/**
+ * @param {boolean} isLoading is the component loading?
+ * @param {string} title the title for the current date.
+ */
+
+const DatePicker = ({ title, isLoading }: DatePickerProps): JSX.Element => {
   const router = useRouter();
 
   const [valid, setValid] = useState<boolean>(false);
@@ -51,7 +57,7 @@ const DatePicker = (): JSX.Element => {
         dateError = "Please select a date.";
         setValid(false);
       } else if (dateArr.length === 3) {
-        const date: UpdateCalendarProps = {
+        const date: UpdateCalenderPropsDateLayout = {
           year: parseInt(dateArr[0]),
           month: parseInt(dateArr[1]),
           day: parseInt(dateArr[2])
@@ -91,7 +97,7 @@ const DatePicker = (): JSX.Element => {
       if (formInput.date) {
         if (!validateDate(formInput.date)) {
           const dateArr = formInput.date.split("-");
-          const date: UpdateCalendarProps = {
+          const date: UpdateCalenderPropsDateLayout = {
             year: parseInt(dateArr[0]),
             month: parseInt(dateArr[1]),
             day: parseInt(dateArr[2])
@@ -130,9 +136,17 @@ const DatePicker = (): JSX.Element => {
     <Popover placement="bottom" initialFocusRef={initRef}>
       <PopoverTrigger>
         <Button border="none" variant="outline">
-          <Heading w="100%" h="auto">
-            {selectedDate.title}
-          </Heading>
+          {isLoading ? (
+            <Skeleton>
+              <Heading w="100%" h="auto">
+                {title}
+              </Heading>
+            </Skeleton>
+          ) : (
+            <Heading w="100%" h="auto">
+              {title}
+            </Heading>
+          )}
         </Button>
       </PopoverTrigger>
       <PopoverContent>
@@ -175,7 +189,7 @@ const DatePicker = (): JSX.Element => {
               >
                 <VStack
                   alignItems="center"
-                  alignContent="flex=start"
+                  alignContent="flex-start"
                   w="100%"
                   h="auto"
                   spacing={6}
diff --git a/src/components/calender/Day.tsx b/src/components/calender/Day.tsx
index ad5336d..fae73c9 100644
--- a/src/components/calender/Day.tsx
+++ b/src/components/calender/Day.tsx
@@ -1,4 +1,7 @@
-import { Box, Text, VStack } from "@chakra-ui/react";
+import React, { useState } from "react";
+import { Provider } from "react-redux";
+import { store } from "../../app/store";
+import { Box, Skeleton, Text, VStack } from "@chakra-ui/react";
 import {
   add,
   getYear,
@@ -6,46 +9,47 @@ import {
   sub,
   getDate,
   isBefore,
-  endOfDay
+  endOfDay,
+  isToday as isTodayFun
 } from "date-fns";
 import router from "next/router";
-import React, { Fragment, useState } from "react";
 import AddUpdateSticker from "./modals/AddUpdateSticker";
 import DemoStickers from "./stickers/DemoStickers";
-import { Provider } from "react-redux";
-import { store } from "../../app/store";
 
 interface DayProps {
+  isLoading: boolean;
   isOverflow?: boolean;
   overflowDirection?: "next" | "prev" | null;
   currSticker: StickerVal;
   date: string;
   selectedDate: string;
   currDate: Date;
-  isToday: boolean;
+  tutorial?: "add" | "edit";
 }
 
 /**
  * The individual days in the calender component.
+ * @param {boolean} isLoading is the component loading?
  * @param {boolean} isOverflow is the current date being given before or after the current month.
  * @param {"next" | "prev" | null} overflowDirection the direction the overflow is. This will navigate the calender forward or backwards 1 month.
  * @param {StickerVal} currSticker the sticker for this date.
  * @param {date} date the date for this day.
  * @param {date} selectedDate the date for the selected month.
  * @param {Date} currDate today's date.
- * @param {boolean} isToday is the current iteration of this component in today's date.
  */
 const Day = ({
+  isLoading,
   isOverflow,
   overflowDirection,
   currSticker,
   date,
   selectedDate,
   currDate,
-  isToday
+  tutorial
 }: DayProps): JSX.Element => {
   const selectedDateObj = new Date(selectedDate);
   const currDateObj = new Date(date);
+  const isToday = isTodayFun(currDateObj);
 
   const handleNav = (direction: "next" | "prev") => {
     if (direction === "next") {
@@ -84,79 +88,141 @@ const Day = ({
 
   // TODO: When the valid date range is created, disallow pointer cursor outside of the date range.
 
-  return (
-    <Fragment>
-      {isOverflow && (
-        <VStack
-          bg="transparent"
-          color="gray.600"
-          border="1px solid #181d8f"
-          w="100%"
-          h="100%"
-          _hover={{
-            cursor: isBefore(currDateObj, endOfDay(currDate))
-              ? "pointer"
-              : "default",
-            background: "gray.700",
-            border: "1px solid #FFF",
-            color: "whiteAlpha.900"
-          }}
-          onClick={() => handleNav(overflowDirection)}
-          spacing="0.5rem"
-          alignContent="center"
-          justifyContent="flex-start"
-          pt={2}
-        >
-          <Text w="auto" h="auto">
-            {`${getDate(currDateObj)}`}
-          </Text>
-          <Box key={currSticker} fontSize="1.5rem">
-            <DemoStickers stickerVal={currSticker} />
+  return isOverflow ? (
+    <VStack
+      w="100%"
+      h="100%"
+      bg="transparent"
+      pt={2}
+      color="gray.600"
+      border="1px solid #181d8f"
+      _hover={{
+        cursor: isBefore(currDateObj, endOfDay(currDate))
+          ? selectedSticker !== null
+            ? "pointer"
+            : "default"
+          : "default",
+        background: "gray.700",
+        border: "1px solid #FFF",
+        color: "whiteAlpha.900"
+      }}
+      onClick={() =>
+        selectedSticker !== null ? handleNav(overflowDirection) : ""
+      }
+      spacing="0.5rem"
+      alignContent="center"
+      justifyContent="flex-start"
+    >
+      <Text w="auto" h="auto">
+        {`${getDate(currDateObj)}`}
+      </Text>
+      {isLoading ? (
+        <Skeleton key={currSticker}>
+          <Box fontSize="1.5rem">
+            <DemoStickers stickerVal={0} />
           </Box>
-        </VStack>
+        </Skeleton>
+      ) : (
+        <Box key={currSticker} fontSize="1.5rem">
+          <DemoStickers stickerVal={currSticker} />
+        </Box>
       )}
-      {!isOverflow && (
-        <VStack
-          bg="transparent"
-          border="1px solid #0068ff"
-          w="100%"
-          h="100%"
-          onClick={() => {
-            setStep(0);
-            setSelectedSticker(null);
-            setIsOpen(true);
-          }}
-          alignContent="center"
-          justifyContent="flex-start"
-          pt={2}
-          _hover={{
-            cursor: isBefore(currDateObj, endOfDay(currDate))
-              ? "pointer"
-              : "default",
-            background: "gray.700",
-            border: "1px solid #FFF"
-          }}
-        >
-          <Text
-            p={
-              isToday
-                ? getDate(currDateObj) > 10
-                  ? "0px 6px 3px 6px"
-                  : "0px 9px 3px 9px"
-                : "auto"
-            }
-            h="auto"
-            w="auto"
-            border={isToday ? "1px solid #0068ff" : "0px"}
-            borderRadius={isToday ? "100px" : "0px"}
-          >
-            {`${getDate(currDateObj)}`}
-          </Text>
-          <Box key={currSticker} fontSize="1.5rem">
-            <DemoStickers stickerVal={currSticker} />
+    </VStack>
+  ) : (
+    <VStack
+      w="100%"
+      h="100%"
+      bg={
+        tutorial
+          ? tutorial === "add" && isToday
+            ? "gray.600"
+            : tutorial === "edit" &&
+              !isToday &&
+              isBefore(currDateObj, endOfDay(currDate))
+            ? "gray.600"
+            : "transparent"
+          : "transparent"
+      }
+      border={
+        tutorial
+          ? tutorial === "add" && isToday
+            ? "1px solid #00ff3c"
+            : tutorial === "edit" &&
+              !isToday &&
+              isBefore(currDateObj, endOfDay(currDate))
+            ? "1px solid #00ff3c"
+            : "1px solid #0068ff"
+          : "1px solid #0068ff"
+      }
+      onClick={() => {
+        setStep(0);
+        setSelectedSticker(null);
+        setIsOpen(true);
+      }}
+      alignContent="center"
+      justifyContent="flex-start"
+      pt={2}
+      _hover={{
+        cursor: isBefore(currDateObj, endOfDay(currDate))
+          ? "pointer"
+          : "default",
+        bg: tutorial
+          ? tutorial === "add" && isToday
+            ? "gray.600"
+            : tutorial === "edit" &&
+              !isToday &&
+              isBefore(currDateObj, endOfDay(currDate))
+            ? "gray.600"
+            : "transparent"
+          : "transparent",
+        border: "1px solid #FFF"
+      }}
+    >
+      <Text
+        h="auto"
+        w="auto"
+        p={
+          isToday
+            ? getDate(currDateObj) > 10
+              ? "0px 6px 3px 6px"
+              : "0px 9px 3px 9px"
+            : "auto"
+        }
+        border={isToday ? "1px solid #0068ff" : "0px"}
+        borderRadius={isToday ? "100px" : "0px"}
+      >
+        {`${getDate(currDateObj)}`}
+      </Text>
+      {isLoading ? (
+        <Skeleton key={currSticker}>
+          <Box fontSize="1.5rem">
+            <DemoStickers stickerVal={0} />
           </Box>
-          <Provider store={store}>
-            {isBefore(currDateObj, endOfDay(currDate)) && (
+        </Skeleton>
+      ) : (
+        <Box key={currSticker} fontSize="1.5rem">
+          <DemoStickers stickerVal={currSticker} />
+        </Box>
+      )}
+      {tutorial ? (
+        <Provider store={store}>
+          {tutorial.toLowerCase() === "add" && isToday && !isLoading && (
+            <AddUpdateSticker
+              stickerDate={date}
+              isOpen={isOpen}
+              updateIsOpen={setIsOpen}
+              currSticker={currSticker}
+              step={step}
+              updateStep={setStep}
+              selectedSticker={selectedSticker}
+              updateSelectedSticker={setSelectedSticker}
+              currDate={currDate}
+            />
+          )}
+          {tutorial.toLowerCase() === "edit" &&
+            !isToday &&
+            isBefore(currDateObj, endOfDay(currDate)) &&
+            !isLoading && (
               <AddUpdateSticker
                 stickerDate={date}
                 isOpen={isOpen}
@@ -169,10 +235,25 @@ const Day = ({
                 currDate={currDate}
               />
             )}
-          </Provider>
-        </VStack>
+        </Provider>
+      ) : (
+        <Provider store={store}>
+          {isBefore(currDateObj, endOfDay(currDate)) && !isLoading && (
+            <AddUpdateSticker
+              stickerDate={date}
+              isOpen={isOpen}
+              updateIsOpen={setIsOpen}
+              currSticker={currSticker}
+              step={step}
+              updateStep={setStep}
+              selectedSticker={selectedSticker}
+              updateSelectedSticker={setSelectedSticker}
+              currDate={currDate}
+            />
+          )}
+        </Provider>
       )}
-    </Fragment>
+    </VStack>
   );
 };
 
diff --git a/src/components/calender/index.tsx b/src/components/calender/index.tsx
index 0d55a43..2455fe7 100644
--- a/src/components/calender/index.tsx
+++ b/src/components/calender/index.tsx
@@ -1,18 +1,23 @@
 import React, { useEffect } from "react";
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import { updateCurrDate, updateMonth } from "../../features/calender";
 import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react";
 import { isSameDay, format } from "date-fns";
-import { useAppDispatch, useAppSelector } from "../../app/hooks";
-import { updateCurrDate, updateMonth } from "../../features/calender/calender";
 import CalenderNav from "./CalenderNav";
 import Day from "./Day";
 
-const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
+const Calender = ({
+  date: newDate,
+  isLoading
+}: UpdateCalendarProps): JSX.Element => {
+  const dispatch = useAppDispatch();
+
   // * Month * //
   const currDate: string = useAppSelector((state) => state.calender.currDate);
   const selectedDate: SelectedDateInfo = useAppSelector(
     (state) => state.calender.selectedDateInfo
   );
-  const { layout } = selectedDate;
+  const { layout, title, date: currentSelectedDateStr } = selectedDate;
 
   const currDateObj = new Date(currDate);
 
@@ -22,30 +27,31 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
     (state) => state.stickers.stickersMonth
   );
 
-  const dispatch = useAppDispatch();
-
   useEffect(() => {
     if (newDate && newDate.year && newDate.month && newDate.day) {
       const { year, month, day } = newDate;
 
       if (year > 0 && month > 0 && day > 0) {
         const generatedDate: Date = new Date(year, month - 1, day);
+        const currSelectedDateObj = new Date(currentSelectedDateStr);
         const dateString: string = generatedDate.toJSON();
 
-        dispatch(updateMonth(dateString));
+        if (!isSameDay(currSelectedDateObj, generatedDate)) {
+          dispatch(updateMonth(dateString));
+        }
       } else {
         console.warn("Invalid date format: ", newDate);
       }
     }
-  }, [dispatch, newDate]);
+  }, [currentSelectedDateStr, dispatch, newDate]);
 
   useEffect(() => {
-    console.info("Check to update date.");
+    // console.info("Check to update date.");
 
     const currDateObj = new Date(currDate);
 
     if (!isSameDay(currDateObj, new Date())) {
-      console.info("Updated date.");
+      // console.info("Updated date.");
       dispatch(updateCurrDate());
     }
   }, [currDate, dispatch]);
@@ -63,28 +69,28 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
   // TODO: Move the weekdays into it's own component for responsiveness.
 
   return (
-    <VStack h="91vh" w="100%">
-      <CalenderNav />
+    <VStack h="92vh" w="100%" mb="5vh">
+      <CalenderNav title={title} isLoading={isLoading} />
       <VStack h="100%" w="100%" spacing={0}>
         <HStack
-          px={6}
-          spacing={0}
           w="100%"
           h="auto"
+          px={{ base: 1, sm: 2, md: 6 }}
+          spacing={0}
           alignContent="center"
           alignItems="center"
         >
           {weekdays.map((weekDay) => {
             return (
               <Box
+                key={weekDay}
                 display="flex"
-                alignContent="center"
-                alignItems="center"
-                bg="transparent"
-                border="1px solid #0068ff"
                 w="100%"
                 h={10}
-                key={weekDay}
+                bg="transparent"
+                border="1px solid #0068ff"
+                alignContent="center"
+                alignItems="center"
               >
                 <Text display={{ base: "none", md: "block" }} w="100%" h="auto">
                   {weekDay}
@@ -103,7 +109,13 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
             );
           })}
         </HStack>
-        <SimpleGrid px={6} w="100%" h="100%" columns={7} alignItems="center">
+        <SimpleGrid
+          w="100%"
+          h="100%"
+          px={{ base: 1, sm: 2, md: 6 }}
+          columns={7}
+          alignItems="center"
+        >
           {Object.keys(month).map((week) => {
             const thisWeek = month[week];
 
@@ -128,13 +140,13 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
 
               return (
                 <Day
+                  isLoading={isLoading}
                   isOverflow={isOverflow}
                   overflowDirection={overflowDirection}
                   currSticker={sticker}
                   date={date}
                   selectedDate={selectedDate.date}
                   currDate={currDateObj}
-                  isToday={isSameDay(currDateObj, toDateObj)}
                   key={
                     id.length
                       ? id
diff --git a/src/components/calender/modals/AddUpdateSticker.tsx b/src/components/calender/modals/AddUpdateSticker.tsx
index c001741..2869576 100644
--- a/src/components/calender/modals/AddUpdateSticker.tsx
+++ b/src/components/calender/modals/AddUpdateSticker.tsx
@@ -1,3 +1,6 @@
+import React, { useState, useRef } from "react";
+import { useAppDispatch } from "../../../app/hooks";
+import { addEditSticker } from "../../../features/calender/stickers";
 import {
   Button,
   Modal,
@@ -13,13 +16,10 @@ import {
   SimpleGrid,
   Box
 } from "@chakra-ui/react";
-import React, { useState, useRef } from "react";
 import { format, isSameDay } from "date-fns";
 import { Icon } from "@iconify/react";
 import StickerSelector from "./StickerSelector";
 import DemoStickers from "../stickers/DemoStickers";
-import { useAppDispatch } from "../../../app/hooks";
-import { addEditSticker } from "../../../features/calender/stickers";
 
 interface AddStickerProps {
   isOpen: boolean;
diff --git a/src/components/loading/LoadingOverlay.tsx b/src/components/loading/LoadingOverlay.tsx
index 2ff147d..563e8c1 100644
--- a/src/components/loading/LoadingOverlay.tsx
+++ b/src/components/loading/LoadingOverlay.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import {
   Box,
   Modal,
@@ -5,7 +6,6 @@ import {
   ModalContent,
   ModalOverlay
 } from "@chakra-ui/react";
-import React from "react";
 import LoadingSpinner from "./LoadingSpinner";
 
 const LoadingOverlay = (): JSX.Element => {
diff --git a/src/components/loading/LoadingSpinner.tsx b/src/components/loading/LoadingSpinner.tsx
index 8f11d4d..ef34925 100644
--- a/src/components/loading/LoadingSpinner.tsx
+++ b/src/components/loading/LoadingSpinner.tsx
@@ -1,5 +1,5 @@
-import { Spinner } from "@chakra-ui/react";
 import React from "react";
+import { Spinner } from "@chakra-ui/react";
 
 const LoadingSpinner = (): JSX.Element => {
   return (
diff --git a/src/components/tutorial/CalenderExample.tsx b/src/components/tutorial/CalenderExample.tsx
new file mode 100644
index 0000000..a241c55
--- /dev/null
+++ b/src/components/tutorial/CalenderExample.tsx
@@ -0,0 +1,210 @@
+import React, { useEffect } from "react";
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import { updateMonth } from "../../features/calender";
+import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react";
+import { format, isSameDay, isToday } from "date-fns";
+import Day from "../calender/Day";
+import { setCurrentWeek } from "../../features/tutorial";
+
+interface CalenderExampleProps {
+  type: "add" | "edit";
+  isLoading: boolean;
+}
+
+const CalenderExample = ({
+  type,
+  isLoading
+}: CalenderExampleProps): JSX.Element => {
+  // TODO: Check if the current date is the start of the user's preferred start of the week and use the previous week for the edit example.
+
+  const currDateStr: string = useAppSelector(
+    (state) => state.calender.currDate
+  );
+  const currDateObj: Date = new Date(currDateStr);
+
+  const dispatch = useAppDispatch();
+
+  // * Current Month * //
+  const selectedDate: SelectedDateInfo = useAppSelector(
+    (state) => state.calender.selectedDateInfo
+  );
+  const { layout, date: currSelectedDateStr } = selectedDate;
+
+  // * Stickers * //
+  const stickersMonth: StickerDays = useAppSelector(
+    (state) => state.stickers.stickersMonth
+  );
+
+  // Simulated user settings.
+  const userSettings = {
+    theme: "default",
+    startOfWeek: "Sunday"
+  };
+
+  // * Week Names * //
+  const currMonth: WeekLayout =
+    layout[`${userSettings.startOfWeek.toLowerCase()}`];
+  const { month, weekdays } = currMonth;
+
+  useEffect(() => {
+    const currDateObj: Date = new Date(currDateStr);
+    const currSelectedDateOj: Date = new Date(currSelectedDateStr);
+
+    if (!isSameDay(currDateObj, currSelectedDateOj)) {
+      dispatch(updateMonth(currDateObj.toJSON()));
+    }
+  }, [currDateStr, currSelectedDateStr, dispatch]);
+
+  // * The current week * //
+  const currWeek = useAppSelector((state) => state.tutorial.currWeek);
+
+  useEffect(() => {
+    const getCurrentWeek = (): MonthDay[] => {
+      let foundWeek: MonthDay[];
+
+      for (const week in month) {
+        const currWeek = month[week];
+
+        currWeek.forEach((day: MonthDay) => {
+          const { date } = day;
+
+          if (isToday(new Date(date))) {
+            foundWeek = currWeek;
+          }
+        });
+      }
+
+      return foundWeek || ([] as MonthDay[]);
+    };
+
+    if (currWeek === null) {
+      dispatch(setCurrentWeek(getCurrentWeek()));
+    }
+  }, [currWeek, dispatch, month]);
+
+  return (
+    <VStack
+      h="auto"
+      w="100%"
+      alignContent="center"
+      alignItems="center"
+      spacing={2}
+    >
+      <VStack
+        h="8.5rem"
+        w="100%"
+        alignContent="center"
+        alignItems="center"
+        spacing={0}
+      >
+        <HStack
+          w="100%"
+          h="auto"
+          alignContent="center"
+          alignItems="center"
+          spacing={0}
+          px={{ base: 1, sm: 2, md: 6 }}
+        >
+          {weekdays.map((weekDay) => {
+            return (
+              <Box
+                key={weekDay}
+                display="flex"
+                w="100%"
+                h={10}
+                bg="transparent"
+                border="1px solid #0068ff"
+                alignContent="center"
+                alignItems="center"
+              >
+                <Text display={{ base: "none", md: "block" }} w="100%" h="auto">
+                  {weekDay}
+                </Text>
+                <Text
+                  display={{ base: "none", sm: "block", md: "none" }}
+                  w="100%"
+                  h="auto"
+                >
+                  {weekDay.substring(0, 3)}
+                </Text>
+                <Text display={{ base: "block", sm: "none" }} w="100%" h="auto">
+                  {weekDay.substring(0, 2)}
+                </Text>
+              </Box>
+            );
+          })}
+        </HStack>
+        <SimpleGrid
+          w="100%"
+          h="100%"
+          columns={7}
+          px={{ base: 1, sm: 2, md: 6 }}
+          alignItems="center"
+        >
+          {currWeek &&
+            currWeek.map((day: MonthDay) => {
+              const { date, isOverflow, overflowDirection } = day;
+
+              const toDateObj: Date = new Date(date);
+
+              let sticker = null;
+
+              let id = "";
+
+              stickersMonth.map((stickerDay) => {
+                const { date: stickerDate } = stickerDay;
+
+                if (isSameDay(new Date(stickerDate), toDateObj)) {
+                  sticker = stickerDay.sticker;
+
+                  id = stickerDay.id;
+                }
+              });
+
+              return (
+                <Day
+                  isLoading={isLoading}
+                  isOverflow={isOverflow}
+                  overflowDirection={overflowDirection}
+                  currSticker={sticker}
+                  date={date}
+                  selectedDate={selectedDate.date}
+                  currDate={currDateObj}
+                  tutorial={type}
+                  key={
+                    id.length
+                      ? id
+                      : format(toDateObj, "yyyyddLL") +
+                        `/${sticker === null ? 0 : sticker}`
+                  }
+                />
+              );
+            })}
+        </SimpleGrid>
+      </VStack>
+      {type === "edit" && (
+        <VStack
+          w="100%"
+          h="auto"
+          alignContent="center"
+          alignItems="center"
+          spacing={2}
+        >
+          <Text fontSize="sm" color="whiteAlpha.800">
+            {
+              "Not being able to edit within this tutorial when the current date is the start of the week or month is a known bug."
+            }
+          </Text>
+          <Text fontSize="sm" color="whiteAlpha.800">
+            {"This bug will be fixed in beta v2."}
+          </Text>
+          <Text fontSize="sm" color="whiteAlpha.800">
+            {"You can skip the tutorial and try again tomorrow."}
+          </Text>
+        </VStack>
+      )}
+    </VStack>
+  );
+};
+
+export default CalenderExample;
diff --git a/src/components/tutorial/data/aboutApp.ts b/src/components/tutorial/data/aboutApp.ts
new file mode 100644
index 0000000..1851980
--- /dev/null
+++ b/src/components/tutorial/data/aboutApp.ts
@@ -0,0 +1,10 @@
+type AboutApp = string[];
+
+const aboutApp: AboutApp = [
+  "The Potty Chart is app that mimics a potty/star chart commonly used while potty training toddler or child.",
+  "The app can be used to track behavior, habits, diaper training, potty training (good luck), daily chores/tasks, or anything else you might want to track in a fun and visual way with colorful themes, stickers, and even receive encouraging messaged from your big/dom, followed, and friends.",
+  "The final app will have settings to disable any mentions and references of ABDL to allow a more general audience to use, such as for a master and pet relationship.",
+  "This is a beta build of the app. Some functionality may not work as intended, is not fully functional, and may be missing entirely."
+];
+
+export default aboutApp;
diff --git a/src/components/tutorial/data/appFunctionality.ts b/src/components/tutorial/data/appFunctionality.ts
new file mode 100644
index 0000000..9c62325
--- /dev/null
+++ b/src/components/tutorial/data/appFunctionality.ts
@@ -0,0 +1,9 @@
+type AppFunctionality = string[];
+
+const appFunctionality: AppFunctionality = [
+  "The app will generate stickers to display from the 1st of the month to the day before today. This is to simulate previous and continued use.",
+  "Ability to add a sticker to the current date.",
+  "Ability to add edit a sticker from a previous date with a confirmation prompt."
+];
+
+export default appFunctionality;
diff --git a/src/components/tutorial/index.tsx b/src/components/tutorial/index.tsx
new file mode 100644
index 0000000..3ad41b0
--- /dev/null
+++ b/src/components/tutorial/index.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import { VStack } from "@chakra-ui/react";
+import TutorialCalender from "./sections/TutorialCalender";
+import TutorialLinks from "./sections/TutorialLinks";
+import TutorialHeading from "./sections/TutorialHeading";
+import TutorialAboutApp from "./sections/TutorialAboutApp";
+import TutorialSubmitButtons from "./sections/TutorialSubmitButtons";
+import TutorialAppFunctionality from "./sections/TutorialAppFunctionality";
+
+interface TutorialProps {
+  isLoading: boolean;
+}
+
+const Tutorial = ({ isLoading }: TutorialProps): JSX.Element => {
+  return (
+    <VStack
+      h="auto"
+      w="auto"
+      justifyContent="center"
+      alignContent="center"
+      my={8}
+      mx={{ base: 0, sm: 2, md: 4 }}
+      py={4}
+      px={{ base: 0, sm: 2, md: 4 }}
+      bg="gray.700"
+      borderRadius={{ base: "", sm: "2xl" }}
+    >
+      <TutorialHeading />
+      <TutorialAboutApp />
+      <TutorialAppFunctionality />
+      <TutorialCalender isLoading={isLoading} />
+      <TutorialLinks />
+      <TutorialSubmitButtons isLoading={isLoading} />
+    </VStack>
+  );
+};
+
+export default Tutorial;
diff --git a/src/components/tutorial/sections/TutorialAboutApp.tsx b/src/components/tutorial/sections/TutorialAboutApp.tsx
new file mode 100644
index 0000000..5017de0
--- /dev/null
+++ b/src/components/tutorial/sections/TutorialAboutApp.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import { VStack, Heading, Divider, Text } from "@chakra-ui/react";
+import aboutApp from "../data/aboutApp";
+
+const TutorialAboutApp = (): JSX.Element => {
+  return (
+    <VStack
+      h="auto"
+      w="100%"
+      justifyContent="center"
+      alignContent="center"
+      spacing={4}
+    >
+      <Heading as="h3" size="lg">
+        {"About the App"}
+      </Heading>
+      <VStack
+        h="auto"
+        w="100%"
+        justifyContent="start"
+        alignContent="center"
+        spacing={1}
+      >
+        {aboutApp.map((string: string) => {
+          return <Text key={string.replaceAll(" ", "-")}>{string}</Text>;
+        })}
+      </VStack>
+      <Divider orientation="horizontal" />
+    </VStack>
+  );
+};
+
+export default TutorialAboutApp;
diff --git a/src/components/tutorial/sections/TutorialAppFunctionality.tsx b/src/components/tutorial/sections/TutorialAppFunctionality.tsx
new file mode 100644
index 0000000..c4f5b1c
--- /dev/null
+++ b/src/components/tutorial/sections/TutorialAppFunctionality.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import { VStack, Heading, Divider, Text } from "@chakra-ui/react";
+import appFunctionality from "../data/appFunctionality";
+
+const TutorialAppFunctionality = (): JSX.Element => {
+  return (
+    <VStack
+      h="auto"
+      w="100%"
+      justifyContent="center"
+      alignContent="center"
+      spacing={4}
+    >
+      <Heading as="h3" size="lg">
+        {"App Functionality"}
+      </Heading>
+      <VStack
+        h="auto"
+        w="100%"
+        justifyContent="start"
+        alignContent="center"
+        spacing={1}
+      >
+        {appFunctionality.map((string: string) => {
+          return <Text key={string.replaceAll(" ", "-")}>{string}</Text>;
+        })}
+      </VStack>
+      <Divider orientation="horizontal" />
+    </VStack>
+  );
+};
+
+export default TutorialAppFunctionality;
diff --git a/src/components/tutorial/sections/TutorialCalender.tsx b/src/components/tutorial/sections/TutorialCalender.tsx
new file mode 100644
index 0000000..4a110e7
--- /dev/null
+++ b/src/components/tutorial/sections/TutorialCalender.tsx
@@ -0,0 +1,74 @@
+import React from "react";
+import { Divider, Heading, HStack, Text, VStack } from "@chakra-ui/react";
+import CalenderExample from "../CalenderExample";
+
+interface CalenderExampleProps {
+  isLoading: boolean;
+}
+
+const TutorialCalender = ({ isLoading }: CalenderExampleProps): JSX.Element => {
+  return (
+    <VStack
+      h="auto"
+      w="100%"
+      justifyContent="center"
+      alignContent="center"
+      spacing={4}
+    >
+      <Heading as="h3" size="lg">
+        {"How to Use The Calender"}
+      </Heading>
+      <VStack
+        h="auto"
+        w="100%"
+        justifyContent="center"
+        alignItems="center"
+        alignContent="center"
+        spacing={4}
+      >
+        <Heading as="h4" size="md">
+          {"Add a Sticker to Today's Date"}
+        </Heading>
+        <HStack
+          w="100%"
+          h="auto"
+          alignContent="center"
+          justifyContent="center"
+          spacing={1}
+        >
+          <Text>{"Select the date with the"}</Text>
+          <Text color="#00ff3c">{" green "}</Text>
+          <Text>{"border."}</Text>
+        </HStack>
+        <CalenderExample type={"add"} isLoading={isLoading} />
+      </VStack>
+      <VStack
+        h="auto"
+        w="100%"
+        justifyContent="center"
+        alignItems="center"
+        alignContent="center"
+        spacing={4}
+      >
+        <Heading as="h4" size="md">
+          {"Add a Sticker to Previous Dates"}
+        </Heading>
+        <HStack
+          w="100%"
+          h="auto"
+          alignContent="center"
+          justifyContent="center"
+          spacing={1}
+        >
+          <Text>{"Select a date with a"}</Text>
+          <Text color="#00ff3c">{" green "}</Text>
+          <Text>{"border."}</Text>
+        </HStack>
+        <CalenderExample type={"edit"} isLoading={isLoading} />
+      </VStack>
+      <Divider orientation="horizontal" />
+    </VStack>
+  );
+};
+
+export default TutorialCalender;
diff --git a/src/components/tutorial/sections/TutorialHeading.tsx b/src/components/tutorial/sections/TutorialHeading.tsx
new file mode 100644
index 0000000..852f065
--- /dev/null
+++ b/src/components/tutorial/sections/TutorialHeading.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import { VStack, Heading, Divider } from "@chakra-ui/react";
+
+const TutorialHeading = (): JSX.Element => {
+  return (
+    <VStack
+      h="auto"
+      w="100%"
+      justifyContent="center"
+      alignContent="center"
+      spacing={4}
+    >
+      <Heading as="h2">{"Welcome to Code Name: LCM Potty Chart"}</Heading>
+      <Heading as="h3" size="md">
+        {"A Lucid Creations Media Project"}
+      </Heading>
+      <Divider orientation="horizontal" />
+    </VStack>
+  );
+};
+
+export default TutorialHeading;
diff --git a/src/components/tutorial/sections/TutorialLinks.tsx b/src/components/tutorial/sections/TutorialLinks.tsx
new file mode 100644
index 0000000..a0cb1a0
--- /dev/null
+++ b/src/components/tutorial/sections/TutorialLinks.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { Divider, Heading, VStack } from "@chakra-ui/react";
+import Buttons from "../../buttons";
+
+const TutorialLinks = (): JSX.Element => {
+  return (
+    <VStack
+      h="auto"
+      w="100%"
+      justifyContent="center"
+      alignContent="center"
+      spacing={4}
+    >
+      <Heading as="h3" size="lg">
+        {"More Info"}
+      </Heading>
+      <Buttons />
+      <Divider orientation="horizontal" />
+    </VStack>
+  );
+};
+
+export default TutorialLinks;
diff --git a/src/components/tutorial/sections/TutorialSubmitButtons.tsx b/src/components/tutorial/sections/TutorialSubmitButtons.tsx
new file mode 100644
index 0000000..3bb72fa
--- /dev/null
+++ b/src/components/tutorial/sections/TutorialSubmitButtons.tsx
@@ -0,0 +1,83 @@
+import { HStack, Button, VStack, Checkbox } from "@chakra-ui/react";
+import React from "react";
+import { useAppDispatch, useAppSelector } from "../../../app/hooks";
+import {
+  setTutorialCompleted,
+  setTempTutorialComplete,
+  toggleRememberCompleted
+} from "../../../features/tutorial";
+
+interface TutorialSubmitButtonsProps {
+  isLoading: boolean;
+}
+
+const TutorialSubmitButtons = ({
+  isLoading
+}: TutorialSubmitButtonsProps): JSX.Element => {
+  const rememberComplete: boolean = useAppSelector(
+    (state) => state.tutorial.rememberCompleted
+  );
+  const dispatch = useAppDispatch();
+
+  const handleComplete = (): void => {
+    if (rememberComplete) {
+      dispatch(setTutorialCompleted());
+    }
+
+    if (!rememberComplete) {
+      dispatch(setTempTutorialComplete());
+    }
+  };
+
+  const handleSkip = (): void => {
+    dispatch(setTempTutorialComplete());
+  };
+
+  const handleUpdateCheck = (): void => {
+    dispatch(toggleRememberCompleted());
+  };
+
+  return (
+    <HStack
+      h="auto"
+      w="90%"
+      justifyContent="space-between"
+      alignItems="flex-start"
+      pt={8}
+    >
+      <Button
+        type="button"
+        isDisabled={isLoading}
+        onClick={() => handleSkip()}
+        variant="skip"
+      >
+        {"Skip"}
+      </Button>
+      <VStack
+        h="auto"
+        w="auto"
+        justifyContent="center"
+        alignItems="center"
+        spacing={2}
+      >
+        <Button
+          type="button"
+          isDisabled={isLoading}
+          onClick={() => handleComplete()}
+          variant="primary"
+        >
+          {"Complete Tutorial"}
+        </Button>
+        <Checkbox
+          isChecked={rememberComplete}
+          isDisabled={isLoading}
+          onChange={() => handleUpdateCheck()}
+        >
+          {"Remember completed?"}
+        </Checkbox>
+      </VStack>
+    </HStack>
+  );
+};
+
+export default TutorialSubmitButtons;
diff --git a/src/features/calender/calender.ts b/src/features/calender/index.ts
similarity index 87%
rename from src/features/calender/calender.ts
rename to src/features/calender/index.ts
index f811855..ca324fa 100644
--- a/src/features/calender/calender.ts
+++ b/src/features/calender/index.ts
@@ -5,6 +5,7 @@ import populate from "../../../lib/populateMonth";
 interface CalenderSlice {
   currDate: string;
   selectedDateInfo: SelectedDateInfo;
+  isLoading: boolean;
 }
 
 const getCurrDate = (): Date => new Date();
@@ -17,7 +18,8 @@ const initialState: CalenderSlice = {
     date: dateParse(getCurrDate()),
     title: dateFormatter(getCurrDate()),
     layout: populate(getCurrDate())
-  }
+  },
+  isLoading: true
 };
 
 // TODO: Add a function that validated if a month has at least one sticker in it. Use that within the nav function (when filter is enabled).
@@ -50,9 +52,15 @@ const calenderSlice = createSlice({
     // Update current date
     updateCurrDate(state: CalenderSlice) {
       state.currDate = dateParse(new Date());
+    },
+    // Update isLoading
+    updateLoading(state: CalenderSlice, action: PayloadAction<boolean>) {
+      const { payload } = action;
+      state.isLoading = payload;
     }
   }
 });
 
-export const { updateMonth, updateCurrDate } = calenderSlice.actions;
+export const { updateMonth, updateCurrDate, updateLoading } =
+  calenderSlice.actions;
 export default calenderSlice.reducer;
diff --git a/src/features/tutorial/index.ts b/src/features/tutorial/index.ts
new file mode 100644
index 0000000..394f5fc
--- /dev/null
+++ b/src/features/tutorial/index.ts
@@ -0,0 +1,140 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { addMonths, endOfDay } from "date-fns";
+import versionStringToNumber from "../../../lib/versionStringToNumber";
+
+export interface StorageState {
+  exp: string;
+  version: number;
+  completed: boolean;
+}
+
+const endOfToday: Date = endOfDay(new Date());
+
+const generateExpDate = (): string => {
+  return endOfDay(addMonths(endOfToday, 1)).toJSON();
+};
+
+const generateVersion = (): number => {
+  const versionStr: string = process.env.NEXT_PUBLIC_APP_VERSION;
+
+  return versionStringToNumber(versionStr);
+};
+
+// * Storage Helpers * //
+
+const setTempStorage = (storageState: StorageState): void => {
+  sessionStorage.setItem("completedTutorial", JSON.stringify(storageState));
+};
+
+const getTempStorage = (): StorageState | null => {
+  return JSON.parse(sessionStorage.getItem("completedTutorial"));
+};
+
+const clearTempStorage = (): void => {
+  sessionStorage.removeItem("completedTutorial");
+};
+
+const setStorage = (storageState: StorageState): void => {
+  localStorage.setItem("completedTutorial", JSON.stringify(storageState));
+};
+
+const getStorage = (): StorageState | null => {
+  return JSON.parse(localStorage.getItem("completedTutorial"));
+};
+
+const clearStorage = (): void => {
+  localStorage.removeItem("completedTutorial");
+};
+
+interface TutorialSlice {
+  completedTutorial: boolean | null;
+  storageState: StorageState | null;
+  rememberCompleted: boolean;
+  currWeek: MonthDay[] | null;
+}
+
+const initialState: TutorialSlice = {
+  completedTutorial: null,
+  storageState: null,
+  rememberCompleted: false,
+  currWeek: null
+};
+
+const tutorialSlice = createSlice({
+  name: "Tutorial",
+  initialState,
+  reducers: {
+    // Set temp complete
+    setTempTutorialComplete(state: TutorialSlice) {
+      const exp: string = generateExpDate();
+      const version: number = generateVersion();
+      const storageState: StorageState = {
+        exp,
+        version,
+        completed: true
+      };
+
+      setTempStorage(storageState);
+      state.storageState = storageState;
+      state.completedTutorial = true;
+    },
+    // Set completed (remember)
+    setTutorialCompleted(state: TutorialSlice) {
+      const exp: string = generateExpDate();
+      const version: number = generateVersion();
+      const storageState: StorageState = {
+        exp,
+        version,
+        completed: true
+      };
+
+      setStorage(storageState);
+      state.storageState = storageState;
+      state.completedTutorial = true;
+    },
+    // Clear states and storages
+    clearTutorialCompleted(state: TutorialSlice) {
+      clearTempStorage();
+      clearStorage();
+      state.storageState = null;
+      state.completedTutorial = null;
+    },
+    // Get and set states
+    getAndSetTutorial(state: TutorialSlice) {
+      const temp = getTempStorage();
+      const local = getStorage();
+
+      if (temp !== null || local !== null) {
+        state.storageState = temp !== null ? temp : local;
+        state.completedTutorial =
+          temp !== null ? temp.completed : local.completed;
+      }
+
+      if (temp === null && local === null) {
+        state.completedTutorial = false;
+      }
+    },
+    // Toggle remember completed
+    toggleRememberCompleted(state: TutorialSlice) {
+      const { rememberCompleted } = state;
+
+      state.rememberCompleted = !rememberCompleted;
+    },
+    // Set current week
+    setCurrentWeek(state: TutorialSlice, action: PayloadAction<MonthDay[]>) {
+      const { payload } = action;
+
+      state.currWeek = payload;
+    }
+  }
+});
+
+export const {
+  setTempTutorialComplete,
+  setTutorialCompleted,
+  clearTutorialCompleted,
+  getAndSetTutorial,
+  toggleRememberCompleted,
+  setCurrentWeek
+} = tutorialSlice.actions;
+export default tutorialSlice.reducer;
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 1a0bec9..fb19683 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -2,6 +2,8 @@ import type { AppProps } from "next/app";
 import React from "react";
 import { ChakraProvider } from "@chakra-ui/react";
 import AppTheme from "../theme/AppTheme";
+import { Provider } from "react-redux";
+import { store } from "../app/store";
 import Layout from "../theme/layout/Layout";
 import Head from "next/head";
 
@@ -17,7 +19,9 @@ function LCMPottyChart({ Component, pageProps }: AppProps): JSX.Element {
               content="width=device-width, user-scalable=yes, initial-scale=1.0"
             />
           </Head>
-          <Component {...pageProps} />
+          <Provider store={store}>
+            <Component {...pageProps} />
+          </Provider>
         </Layout>
       </ChakraProvider>
     </React.StrictMode>
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index 0c6c1c9..dad86fb 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -1,11 +1,11 @@
-import React from "react";
 import NextDocument, { Html, Head, Main, NextScript } from "next/document";
+import React from "react";
 import { ColorModeScript } from "@chakra-ui/react";
 import AppTheme from "../theme/AppTheme";
 
 const description =
   // "Behavior and progress tracker for ABDLs and babyfurs alike. Track multiple littles and create any trackers you would like.";
-  "Alpha preview of a, calender like, 'start chart' behavior and progress tracker for ABDLs and babyfurs.";
+  "Beta preview of a, calender like, 'star chart' behavior and progress tracker for ABDLs, diaperfurs, and babyfurs.";
 
 const logo = "images/logo.svg";
 const logoOG = "/images/logo.png";
diff --git a/src/pages/calendar/[...date].tsx b/src/pages/calendar/[...date].tsx
index 7f99984..2379f1f 100644
--- a/src/pages/calendar/[...date].tsx
+++ b/src/pages/calendar/[...date].tsx
@@ -1,4 +1,6 @@
 import React, { useEffect, useState } from "react";
+import { Provider } from "react-redux";
+import { store } from "../../app/store";
 import { Box } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import {
@@ -13,21 +15,21 @@ import {
 // import findValidDateRange from "../../lib/findValidDateRange";
 import ErrorPage from "next/error";
 import Calender from "../../components/calender";
-import { Provider } from "react-redux";
-import { store } from "../../app/store";
 
 const DateRoute: React.FC<unknown> = () => {
   const router = useRouter();
   const { date: slug } = router.query;
 
-  const [date, setDate] = useState<UpdateCalendarProps | null>(null);
+  const [date, setDate] = useState<UpdateCalenderPropsDateLayout | null>(null);
 
   const [error, setError] = useState<boolean>(false);
 
   // const dateRange = useRef(findValidDateRange());
   // const validDateRange = Object.assign({}, dateRange.current);
 
-  const validateDateInput = (dateArr: number[]): UpdateCalendarProps => {
+  const validateDateInput = (
+    dateArr: number[]
+  ): UpdateCalenderPropsDateLayout => {
     if (!(dateArr.length >= 2) && !(dateArr.length <= 3)) {
       return {
         year: 0,
@@ -198,7 +200,7 @@ const DateRoute: React.FC<unknown> = () => {
   ) : (
     <Box textAlign="center" w="100%" h="auto" pt="50px" pb="10vh">
       <Provider store={store}>
-        <Calender {...date} />
+        <Calender date={date} isLoading={false} />
       </Provider>
     </Box>
   );
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index fa48616..1815d30 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,21 +1,130 @@
-import React, { useRef } from "react";
-import { Box } from "@chakra-ui/react";
-import { format } from "date-fns";
+import React, { Fragment, useEffect, useRef } from "react";
 import { Provider } from "react-redux";
 import { store } from "../app/store";
+import { useAppDispatch, useAppSelector } from "../app/hooks";
+import { updateLoading } from "../features/calender";
+import {
+  clearTutorialCompleted,
+  getAndSetTutorial,
+  StorageState
+} from "../features/tutorial";
+import { Box } from "@chakra-ui/react";
+import { format, isAfter, isBefore, startOfDay } from "date-fns";
 import Calender from "../components/calender";
+import Tutorial from "../components/tutorial";
+import LoadingOverlay from "../components/loading/LoadingOverlay";
+import versionStringToNumber from "../../lib/versionStringToNumber";
 
 const IndexPage = (): JSX.Element => {
-  const date = useRef<UpdateCalendarProps>({
-    year: parseInt(format(new Date(), "y")),
-    month: parseInt(format(new Date(), "M")),
-    day: parseInt(format(new Date(), "d"))
+  const currDateStr: string = useAppSelector(
+    (state) => state.calender.currDate
+  );
+  const isLoading: boolean = useAppSelector(
+    (state) => state.calender.isLoading
+  );
+
+  const currDateObj: Date = new Date(currDateStr);
+
+  // * Tutorial * //
+  const completedTutorial: boolean = useAppSelector(
+    (state) => state.tutorial.completedTutorial
+  );
+  const tutorialCompletionInfo: StorageState = useAppSelector(
+    (state) => state.tutorial.storageState
+  );
+  const dispatch = useAppDispatch();
+
+  // Get the completed tutorial cookie or have it set to false.
+  useEffect(() => {
+    if (completedTutorial === null && tutorialCompletionInfo === null) {
+      dispatch(getAndSetTutorial());
+    }
+
+    if (completedTutorial !== null) {
+      dispatch(updateLoading(false));
+    }
+  }, [completedTutorial, dispatch, tutorialCompletionInfo]);
+
+  // Checking the exp date of completed tutorial cookie and if the version completed is out of date.
+  useEffect(() => {
+    if (tutorialCompletionInfo !== null) {
+      const { exp, version } = tutorialCompletionInfo;
+      const currDateObj: Date = new Date(currDateStr);
+
+      /**
+       * Checks if the completed tutorial cookie is expired.
+       * @param {Date} expDate the date when the completed tutorital cookie expires.
+       * @returns {boolean} true if the cookie is expired, false is otherwise.
+       */
+      const expDateValidator = (expDate: Date): boolean => {
+        let flag = false;
+
+        const startOfToday = startOfDay(currDateObj);
+
+        if (isAfter(startOfToday, expDate)) {
+          flag = true;
+        }
+
+        return flag;
+      };
+
+      /**
+       * Checks if the last time the completed tutorial is before an update to the tutorial.
+       * @param {number} lastVersionCompleted the version number the tutorial was last completed.
+       * @returns {boolean} true if the version given is before the changes to the tutorial, false otherwise.
+       */
+      const versionValidator = (lastVersionCompleted: number): boolean => {
+        const lastVersionWithChangeStr: string =
+          process.env.NEXT_PUBLIC_NEW_TUTORIAL_VERSION;
+        const lastVersionWithChange: number = versionStringToNumber(
+          lastVersionWithChangeStr
+        );
+
+        const lastUpdatedDateStr: string =
+          process.env.NEXT_PUBLIC_LAST_UPDATE_DATE;
+        const lastUpdatedDate: Date = new Date(lastUpdatedDateStr);
+
+        let flag = false;
+
+        if (
+          lastVersionCompleted < lastVersionWithChange ||
+          (lastVersionCompleted === lastVersionWithChange &&
+            isBefore(currDateObj, lastUpdatedDate))
+        ) {
+          flag = true;
+          console.error("Completed cookie version is out of date.");
+        }
+
+        return flag;
+      };
+
+      if (expDateValidator(new Date(exp)) || versionValidator(version)) {
+        console.warn("Version outdated or cookie expired.");
+        dispatch(clearTutorialCompleted());
+      }
+    }
+  }, [currDateStr, dispatch, tutorialCompletionInfo]);
+
+  // Current date
+  const currDate = useRef<UpdateCalenderPropsDateLayout>({
+    year: parseInt(format(currDateObj, "y")),
+    month: parseInt(format(currDateObj, "M")),
+    day: parseInt(format(currDateObj, "d"))
   });
 
   return (
-    <Box textAlign="center" w="100%" h="auto" pt="50px" pb="10vh" minWidth="min-content">
+    <Box textAlign="center" w="100%" h="auto" pt="50px" minWidth="min-content">
       <Provider store={store}>
-        <Calender {...date.current} />
+        {isLoading === true ? (
+          <Fragment>
+            <LoadingOverlay />
+            <Calender date={currDate.current} isLoading={isLoading} />
+          </Fragment>
+        ) : completedTutorial ? (
+          <Calender date={currDate.current} isLoading={isLoading} />
+        ) : (
+          <Tutorial isLoading={isLoading} />
+        )}
       </Provider>
     </Box>
   );
diff --git a/src/theme/AppTheme.ts b/src/theme/AppTheme.ts
index d84e619..e1b10c6 100644
--- a/src/theme/AppTheme.ts
+++ b/src/theme/AppTheme.ts
@@ -29,7 +29,8 @@ const AppTheme = extendTheme({
       footer: "#0097a7",
       footerText: "black",
       content: "#2d3748",
-      patreon: "#FF424D"
+      patreon: "#FF424D",
+      twitter: "#1da1f2"
     },
     loading: {
       overlayBg: "#171923cb",
diff --git a/src/theme/components/buttonStyles.ts b/src/theme/components/buttonStyles.ts
index b0463c1..cdeaf18 100644
--- a/src/theme/components/buttonStyles.ts
+++ b/src/theme/components/buttonStyles.ts
@@ -15,9 +15,11 @@ const buttonStyles = {
   // styles for different visual variants ("outline", "solid")
   variants: {
     primary: (props: Dict<never> | StyleFunctionProps) => ({
-      bg: "rgba(255, 255, 255, .15)",
+      bg: "brand.primary",
       fontSize: "xl",
-      p: "2",
+      py: 3,
+      px: 4,
+      color: "whiteAlpha",
       _hover: {
         bg: mode(
           whiten("brand.primary", 20),
@@ -26,16 +28,29 @@ const buttonStyles = {
       }
     }),
     secondary: (props: Dict<never> | StyleFunctionProps) => ({
-      bg: "brand.primary",
+      bg: "brand.secondary",
       fontSize: "xl",
-      p: "2",
+      py: 3,
+      px: 4,
+      color: "whiteAlpha",
       _hover: {
         bg: mode(
-          whiten("brand.primary", 20),
-          darken("brand.primary", 20)
+          whiten("brand.secondary", 20),
+          darken("brand.secondary", 20)
         )(props)
       }
     }),
+    skip: (props: Dict<never> | StyleFunctionProps) => ({
+      bg: "transparent",
+      fontSize: "xl",
+      py: 3,
+      px: 4,
+      color: "whiteAlpha.800",
+      _hover: {
+        bg: mode(whiten("brand.danger", 20), darken("brand.danger", 20))(props),
+        color: "whiteAlpha.900"
+      }
+    }),
     stickerButton: (props: Dict<never> | StyleFunctionProps) => ({
       bg: "transparent",
       fontSize: "4rem",
@@ -48,27 +63,10 @@ const buttonStyles = {
         )(props)
       }
     }),
-    project: (props: Dict<never> | StyleFunctionProps) => ({
-      bg: "transparent",
-      fontSize: "md",
-      py: 2,
-      px: 4,
-      boxShadow:
-        "rgba(0, 134, 255, 0.2) 0px 0px 15px, rgba(0, 134, 255, 0.15) 0px 0px 3px 1px",
-      border: "1px solid rgba(0, 134, 255, 0.4)",
-      _hover: {
-        bg: mode(
-          whiten("brand.secondary", 20),
-          darken("brand.secondary", 20)
-        )(props),
-        boxShadow:
-          "rgba(0, 104, 255, 0.5) 0px 0px 15px, rgba(0, 104, 255, 0.3) 0px 0px 3px 1px"
-      }
-    }),
     nav: (props: Dict<never> | StyleFunctionProps) => ({
       bg: "transparent",
       fontSize: "md",
-      px: "2",
+      px: 2,
       _hover: {
         bg: mode(
           whiten("brand.secondary", 20),
@@ -79,15 +77,16 @@ const buttonStyles = {
     stickyNav: (/* props: Dict<never> | StyleFunctionProps */) => ({
       bg: "transparent",
       fontSize: "md",
-      px: "2",
+      px: 2,
       _hover: {
         textDecoration: "underline"
       }
     }),
-    credits: (props: Dict<never> | StyleFunctionProps) => ({
+    footer: (props: Dict<never> | StyleFunctionProps) => ({
       bg: "brand.main",
       fontSize: "lg",
-      p: 3,
+      py: 3,
+      px: 4,
       color: "whiteAlpha",
       _hover: {
         bg: mode(whiten("brand.main", 20), darken("brand.main", 20))(props)
@@ -113,22 +112,6 @@ const buttonStyles = {
         border: "1px solid rgba(0, 134, 255, 1)"
       }
     }),
-    collapse: (props: Dict<never> | StyleFunctionProps) => ({
-      bg: "transparent",
-      fontSize: "md",
-      p: 2,
-      h: 8,
-      color: "brand.hover",
-      textDecoration: "underline",
-      _hover: {
-        bg: mode(
-          whiten("brand.secondary", 20),
-          darken("brand.secondary", 20)
-        )(props),
-        color: "whiteAlpha.900",
-        textDecoration: "none"
-      }
-    }),
     submit: (props: Dict<never> | StyleFunctionProps) => ({
       fontSize: "lg",
       py: 2,
@@ -151,7 +134,7 @@ const buttonStyles = {
     mobileNav: (props: Dict<never> | StyleFunctionProps) => ({
       // bg: "transparent",
       fontSize: "md",
-      px: "2",
+      px: 2,
       boxShadow:
         "rgba(0, 134, 255, 0.30) 0px 0px 15px, rgba(0, 134, 255, 0.15) 0px 0px 3px 1px",
       _hover: {
@@ -180,6 +163,19 @@ const buttonStyles = {
           darken("brand.patreon", 20)
         )(props)
       }
+    }),
+    twitter: (props: Dict<never> | StyleFunctionProps) => ({
+      bg: "brand.twitter",
+      fontSize: "lg",
+      py: 3,
+      px: 4,
+      color: "whiteAlpha",
+      _hover: {
+        bg: mode(
+          whiten("brand.twitter", 20),
+          darken("brand.twitter", 20)
+        )(props)
+      }
     })
   },
   // default values for `size` and `variant`
diff --git a/src/theme/layout/Footer.tsx b/src/theme/layout/Footer.tsx
index a9d4620..e63dc1a 100644
--- a/src/theme/layout/Footer.tsx
+++ b/src/theme/layout/Footer.tsx
@@ -4,16 +4,18 @@ import {
   Text,
   VStack,
   Link,
-  HStack,
   // Image,
   Button,
   BoxProps
 } from "@chakra-ui/react";
-import { Icon } from "@iconify/react";
 // import BackToTopButton from "./BackToTopButton";
 import { motion } from "framer-motion";
+import Patreon from "../../components/buttons/Patreon";
+import CustomButton from "../../components/buttons/Custom";
+import Twitter from "../../components/buttons/Twitter";
+import Buttons from "../../components/buttons";
 
-export const MotionBox = motion<BoxProps>(Box);
+const MotionBox = motion<BoxProps>(Box);
 
 const Footer = (): JSX.Element => {
   // const [showBackToTop, setShowBackToTop] = useState<boolean>(false);
@@ -68,32 +70,7 @@ const Footer = (): JSX.Element => {
               </Button>
             </Link>
           </MotionBox> */}
-          <MotionBox whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
-            <Link
-              href="https://lucidcreations.media/introducing-code-name-potty-chart/"
-              target="_blank"
-              rel="noopener"
-            >
-              <Button color="whiteAlpha" variant="credits">
-                More About This App
-              </Button>
-            </Link>
-          </MotionBox>
-          <MotionBox whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
-            <Link
-              href="https://www.patreon.com/bePatron?u=15380906"
-              target="_blank"
-              rel="noopener"
-            >
-              <Button
-                color="whiteAlpha"
-                variant="patreon"
-                leftIcon={<Icon icon="ri:patreon-fill" />}
-              >
-                Fund This App
-              </Button>
-            </Link>
-          </MotionBox>
+          <Buttons />
           <Text color="brand.footerText" fontSize="xs">
             &copy;
             {` 2021 - ${new Date().getFullYear()} `}
diff --git a/src/theme/layout/Header.tsx b/src/theme/layout/Header.tsx
index 28bf10d..a500d96 100644
--- a/src/theme/layout/Header.tsx
+++ b/src/theme/layout/Header.tsx
@@ -15,7 +15,7 @@ import appLogo from "../../../public/images/logo.svg";
 
 const Header = (): JSX.Element => {
   const appName = "LCM Potty Chart";
-  const appVersion = "v0.0.11-alpha";
+  const appVersion = process.env.NEXT_PUBLIC_APP_VERSION_HEADER || "";
 
   // Add transparency while not at the top of the page.
   const [transparentNavbar, setTransparentNavbar] = useState<boolean>(false);
@@ -99,18 +99,18 @@ const Header = (): JSX.Element => {
     >
       {/* Logo | Site Name */}
       <HStack
+        display={{ base: "flex", lg: "none" }}
+        position="absolute"
         width="100%"
+        height={12}
+        top={0}
+        ml={4}
+        spacing="5px"
         justifyContent={{
           base: "flex-start",
           sm: "center"
         }}
         alignItems="center"
-        height={12}
-        top={0}
-        position="absolute"
-        ml={4}
-        display={{ base: "flex", lg: "none" }}
-        spacing="5px"
         _hover={{
           cursor: "default"
         }}
@@ -163,21 +163,21 @@ const Header = (): JSX.Element => {
         </HStack>
         <Menu isLazy lazyBehavior="unmount" isOpen={open}>
           <MenuButton
+            id="mobile-menu-button"
             as={IconButton}
             aria-label="Mobile Menu"
             icon={menuIcon()}
-            onClick={() => setOpen(!open)}
-            onMouseEnter={() => setHover(true)}
-            onMouseLeave={() => setHover(false)}
             display={{
               base: "inline-flex",
               lg: "none"
             }}
-            variant="mobileNav"
             bg={transparentNavbar ? "transparent" : "rgba(255, 255, 255, .15)"}
-            type="button"
             border={transparentNavbar ? "1px solid #0068ff" : "none"}
-            id="mobile-menu-button"
+            variant="mobileNav"
+            type="button"
+            onClick={() => setOpen(!open)}
+            onMouseEnter={() => setHover(true)}
+            onMouseLeave={() => setHover(false)}
           />
           <MobileNav updateOpen={setOpen} />
         </Menu>
diff --git a/src/theme/layout/Layout.tsx b/src/theme/layout/Layout.tsx
index 2398677..91ad7d1 100644
--- a/src/theme/layout/Layout.tsx
+++ b/src/theme/layout/Layout.tsx
@@ -1,5 +1,4 @@
 import React, { FC, ReactNode } from "react";
-
 import type { AppProps } from "next/app";
 import Header from "../layout/Header";
 import { Box } from "@chakra-ui/layout";
diff --git a/src/theme/layout/MobileNav.tsx b/src/theme/layout/MobileNav.tsx
index 5af35f6..e0a604f 100644
--- a/src/theme/layout/MobileNav.tsx
+++ b/src/theme/layout/MobileNav.tsx
@@ -17,12 +17,12 @@ const MobileNav: FC<MobileNavProps> = ({ updateOpen }: MobileNavProps) => {
     <MenuList
       as="nav"
       display={{ base: "block", lg: "none" }}
-      bg="brand.main"
       h="auto"
       w="100%"
       p={0}
       border="none"
       boxShadow="none"
+      bg="brand.main"
     >
       {navItems.map((navItem: NavItem, index: number) => {
         return (
diff --git a/types/Calender.d.ts b/types/Calender.d.ts
index b5e598b..479fb63 100644
--- a/types/Calender.d.ts
+++ b/types/Calender.d.ts
@@ -39,11 +39,15 @@ interface MonthLayout {
   monday: WeekLayout;
 }
 
-interface UpdateCalendarProps {
+interface UpdateCalenderPropsDateLayout {
   year: number;
   month: number;
   day: number;
 }
+interface UpdateCalendarProps {
+  date: UpdateCalenderPropsDateLayout;
+  isLoading: boolean;
+}
 
 interface SelectedDateInfo {
   date: string;
diff --git a/yarn.lock b/yarn.lock
index c6e8606..d551a46 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -78,7 +78,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.9.2":
+"@babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.9.2":
   version: 7.18.3
   resolution: "@babel/runtime@npm:7.18.3"
   dependencies:
@@ -1446,13 +1446,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/eslint-plugin@npm:<5.28.0":
-  version: 5.27.1
-  resolution: "@typescript-eslint/eslint-plugin@npm:5.27.1"
+"@typescript-eslint/eslint-plugin@npm:^5.29.0":
+  version: 5.29.0
+  resolution: "@typescript-eslint/eslint-plugin@npm:5.29.0"
   dependencies:
-    "@typescript-eslint/scope-manager": 5.27.1
-    "@typescript-eslint/type-utils": 5.27.1
-    "@typescript-eslint/utils": 5.27.1
+    "@typescript-eslint/scope-manager": 5.29.0
+    "@typescript-eslint/type-utils": 5.29.0
+    "@typescript-eslint/utils": 5.29.0
     debug: ^4.3.4
     functional-red-black-tree: ^1.0.1
     ignore: ^5.2.0
@@ -1465,7 +1465,7 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: ee00d8d3a7b395e346801b7bf30209e278f06b5c283ad71c03b34db9e2d68a43ca0e292e315fa7e5bf131a8839ff4a24e0ed76c37811d230f97aae7e123d73ea
+  checksum: b1022a640f80c314ac8b247a2ccdd21f4b523b3cb8906956f5d276008ac964c8a1e951b2b2b16ca9621eb795dc9bbf6447b5b767acfe4866a1bc3e3527d966fc
   languageName: node
   linkType: hard
 
@@ -1496,21 +1496,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/scope-manager@npm:5.27.1":
-  version: 5.27.1
-  resolution: "@typescript-eslint/scope-manager@npm:5.27.1"
+"@typescript-eslint/scope-manager@npm:5.29.0":
+  version: 5.29.0
+  resolution: "@typescript-eslint/scope-manager@npm:5.29.0"
   dependencies:
-    "@typescript-eslint/types": 5.27.1
-    "@typescript-eslint/visitor-keys": 5.27.1
-  checksum: 401bf2b46de08ddb80ec9f36df7d58bf5de7837185a472b190b670d421d685743aad4c9fa8a6893f65ba933b822c5d7060c640e87cf0756d7aa56abdd25689cc
+    "@typescript-eslint/types": 5.29.0
+    "@typescript-eslint/visitor-keys": 5.29.0
+  checksum: 540642bef9c55fd7692af98dfb42ab99eeb82553f42ab2a3c4e132e02b5ba492da1c6bf1ca6b02b900a678fc74399ad6c564c0ca20d91032090b6cbcb01a5bde
   languageName: node
   linkType: hard
 
-"@typescript-eslint/type-utils@npm:5.27.1":
-  version: 5.27.1
-  resolution: "@typescript-eslint/type-utils@npm:5.27.1"
+"@typescript-eslint/type-utils@npm:5.29.0":
+  version: 5.29.0
+  resolution: "@typescript-eslint/type-utils@npm:5.29.0"
   dependencies:
-    "@typescript-eslint/utils": 5.27.1
+    "@typescript-eslint/utils": 5.29.0
     debug: ^4.3.4
     tsutils: ^3.21.0
   peerDependencies:
@@ -1518,7 +1518,7 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 43b7da26ea1bd7d249c45d168ec88f971fb71362bbc21ec4748d73b1ecb43f4ca59f5ed338e8dbc74272ae4ebac1cab87a9b62c0fa616c6f9bd833a212dc8a40
+  checksum: 686b8ff05a7591f76a2a1d3746b988168dcbd59c2f52de095b19e4f8e17063e03dc3d0f7b3d84f7be6880f2df97c3e184877664d0b4275ea9871c31d1e58c7d2
   languageName: node
   linkType: hard
 
@@ -1529,10 +1529,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/types@npm:5.27.1":
-  version: 5.27.1
-  resolution: "@typescript-eslint/types@npm:5.27.1"
-  checksum: 81faa50256ba67c23221273744c51676774fe6a1583698c3a542f3e2fd21ab34a4399019527c9cf7ab4e5a1577272f091d5848d3af937232ddb2dbf558a7c39a
+"@typescript-eslint/types@npm:5.29.0":
+  version: 5.29.0
+  resolution: "@typescript-eslint/types@npm:5.29.0"
+  checksum: 982ecdd69103105cabff8deac7f82f6002cf909238702ce902133e9af655cd962f977d5adf650c5ddae80d8c0e46abe1612a9141b25c7ed20ba8d662eb7ab871
   languageName: node
   linkType: hard
 
@@ -1554,12 +1554,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/typescript-estree@npm:5.27.1":
-  version: 5.27.1
-  resolution: "@typescript-eslint/typescript-estree@npm:5.27.1"
+"@typescript-eslint/typescript-estree@npm:5.29.0":
+  version: 5.29.0
+  resolution: "@typescript-eslint/typescript-estree@npm:5.29.0"
   dependencies:
-    "@typescript-eslint/types": 5.27.1
-    "@typescript-eslint/visitor-keys": 5.27.1
+    "@typescript-eslint/types": 5.29.0
+    "@typescript-eslint/visitor-keys": 5.29.0
     debug: ^4.3.4
     globby: ^11.1.0
     is-glob: ^4.0.3
@@ -1568,23 +1568,23 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 59d2a0885be7d54bd86472a446d84930cc52d2690ea432d9164075ea437b3b4206dadd49799764ad0fb68f3e4ebb4e36db9717c7a443d0f3c82d5659e41fbd05
+  checksum: b91107a9fc31bf511aaa70f1e6d1d832d3acf08cfe999c870169447a7c223abff54c1d604bbb08d7c069dd98b43fb279bc314d1726097704fe8ad4c6e0969b12
   languageName: node
   linkType: hard
 
-"@typescript-eslint/utils@npm:5.27.1":
-  version: 5.27.1
-  resolution: "@typescript-eslint/utils@npm:5.27.1"
+"@typescript-eslint/utils@npm:5.29.0":
+  version: 5.29.0
+  resolution: "@typescript-eslint/utils@npm:5.29.0"
   dependencies:
     "@types/json-schema": ^7.0.9
-    "@typescript-eslint/scope-manager": 5.27.1
-    "@typescript-eslint/types": 5.27.1
-    "@typescript-eslint/typescript-estree": 5.27.1
+    "@typescript-eslint/scope-manager": 5.29.0
+    "@typescript-eslint/types": 5.29.0
+    "@typescript-eslint/typescript-estree": 5.29.0
     eslint-scope: ^5.1.1
     eslint-utils: ^3.0.0
   peerDependencies:
     eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
-  checksum: 51add038226cddad2b3322225de18d53bc1ed44613f7b3a379eb597114b8830a632990b0f4321e0ddf3502b460d80072d7e789be89135b5e11e8dae167005625
+  checksum: 216f51fb9c176437919af55db9ed14db8af7b020611e954c06e69956b9e3248cbfe6a218013d6c17b716116dca6566a4c03710f9b48ce4e94f89312d61c16d07
   languageName: node
   linkType: hard
 
@@ -1598,13 +1598,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/visitor-keys@npm:5.27.1":
-  version: 5.27.1
-  resolution: "@typescript-eslint/visitor-keys@npm:5.27.1"
+"@typescript-eslint/visitor-keys@npm:5.29.0":
+  version: 5.29.0
+  resolution: "@typescript-eslint/visitor-keys@npm:5.29.0"
   dependencies:
-    "@typescript-eslint/types": 5.27.1
+    "@typescript-eslint/types": 5.29.0
     eslint-visitor-keys: ^3.3.0
-  checksum: 8f104eda321cd6c613daf284fbebbd32b149d4213d137b0ce1caec7a1334c9f46c82ed64aff1243b712ac8c13f67ac344c996cd36d21fbb15032c24d9897a64a
+  checksum: 15f228ad9ffaf0e42cc6b2ee4e5095c1e89c4c2dc46a65d19ca0e2296d88c08a1192039d942bd9600b1496176749f6322d636dd307602dbab90404a9501b4d6e
   languageName: node
   linkType: hard
 
@@ -1682,13 +1682,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ansi-regex@npm:^2.0.0":
-  version: 2.1.1
-  resolution: "ansi-regex@npm:2.1.1"
-  checksum: 190abd03e4ff86794f338a31795d262c1dfe8c91f7e01d04f13f646f1dcb16c5800818f886047876f1272f065570ab86b24b99089f8b68a0e11ff19aed4ca8f1
-  languageName: node
-  linkType: hard
-
 "ansi-regex@npm:^5.0.1":
   version: 5.0.1
   resolution: "ansi-regex@npm:5.0.1"
@@ -1714,13 +1707,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"aproba@npm:^1.0.3":
-  version: 1.2.0
-  resolution: "aproba@npm:1.2.0"
-  checksum: 0fca141966559d195072ed047658b6e6c4fe92428c385dd38e288eacfc55807e7b4989322f030faff32c0f46bb0bc10f1e0ac32ec22d25315a1e5bbc0ebb76dc
-  languageName: node
-  linkType: hard
-
 "aproba@npm:^1.0.3 || ^2.0.0":
   version: 2.0.0
   resolution: "aproba@npm:2.0.0"
@@ -1738,16 +1724,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"are-we-there-yet@npm:~1.1.2":
-  version: 1.1.7
-  resolution: "are-we-there-yet@npm:1.1.7"
-  dependencies:
-    delegates: ^1.0.0
-    readable-stream: ^2.0.6
-  checksum: 70d251719c969b2745bfe5ddf3ebaefa846a636e90a6d5212573676af5d6670e15457761d4725731e19cbebdce42c4ab0cbedf23ab047f2a08274985aa10a3c7
-  languageName: node
-  linkType: hard
-
 "argparse@npm:^2.0.1":
   version: 2.0.1
   resolution: "argparse@npm:2.0.1"
@@ -1845,6 +1821,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"axe-core@npm:^4.4.2":
+  version: 4.4.2
+  resolution: "axe-core@npm:4.4.2"
+  checksum: 93fbb36c5ac8ab5e67e49678a6f7be0dc799a9f560edd95cca1f0a8183def8c50205972366b9941a3ea2b20224a1fe230e6d87ef38cb6db70472ed1b694febd1
+  languageName: node
+  linkType: hard
+
 "axobject-query@npm:^2.2.0":
   version: 2.2.0
   resolution: "axobject-query@npm:2.2.0"
@@ -2018,13 +2001,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"code-point-at@npm:^1.0.0":
-  version: 1.1.0
-  resolution: "code-point-at@npm:1.1.0"
-  checksum: 17d5666611f9b16d64fdf48176d9b7fb1c7d1c1607a189f7e600040a11a6616982876af148230336adb7d8fe728a559f743a4e29db3747e3b1a32fa7f4529681
-  languageName: node
-  linkType: hard
-
 "color-convert@npm:^1.9.0":
   version: 1.9.3
   resolution: "color-convert@npm:1.9.3"
@@ -2100,7 +2076,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"console-control-strings@npm:^1.0.0, console-control-strings@npm:^1.1.0, console-control-strings@npm:~1.1.0":
+"console-control-strings@npm:^1.1.0":
   version: 1.1.0
   resolution: "console-control-strings@npm:1.1.0"
   checksum: 8755d76787f94e6cf79ce4666f0c5519906d7f5b02d4b884cf41e11dcd759ed69c57da0670afd9236d229a46e0f9cf519db0cd829c6dca820bb5a5c3def584ed
@@ -2132,13 +2108,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"core-util-is@npm:~1.0.0":
-  version: 1.0.3
-  resolution: "core-util-is@npm:1.0.3"
-  checksum: 9de8597363a8e9b9952491ebe18167e3b36e7707569eed0ebf14f8bba773611376466ae34575bca8cfe3c767890c859c74056084738f09d4e4a6f902b2ad7d99
-  languageName: node
-  linkType: hard
-
 "cosmiconfig@npm:^6.0.0":
   version: 6.0.0
   resolution: "cosmiconfig@npm:6.0.0"
@@ -2186,7 +2155,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"damerau-levenshtein@npm:^1.0.7":
+"damerau-levenshtein@npm:^1.0.7, damerau-levenshtein@npm:^1.0.8":
   version: 1.0.8
   resolution: "damerau-levenshtein@npm:1.0.8"
   checksum: d240b7757544460ae0586a341a53110ab0a61126570ef2d8c731e3eab3f0cb6e488e2609e6a69b46727635de49be20b071688698744417ff1b6c1d7ccd03e0de
@@ -2589,6 +2558,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-plugin-jsx-a11y@npm:^6.6.0":
+  version: 6.6.0
+  resolution: "eslint-plugin-jsx-a11y@npm:6.6.0"
+  dependencies:
+    "@babel/runtime": ^7.18.3
+    aria-query: ^4.2.2
+    array-includes: ^3.1.5
+    ast-types-flow: ^0.0.7
+    axe-core: ^4.4.2
+    axobject-query: ^2.2.0
+    damerau-levenshtein: ^1.0.8
+    emoji-regex: ^9.2.2
+    has: ^1.0.3
+    jsx-ast-utils: ^3.3.1
+    language-tags: ^1.0.5
+    minimatch: ^3.1.2
+    semver: ^6.3.0
+  peerDependencies:
+    eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
+  checksum: d9da9a3ec71137c12519289c63e71250d5d78d4b7729b84e7e12edf1aad993083f23303d9b62359591b2f8aababb1bbec032cd84f1425e759b11a055e3acd144
+  languageName: node
+  linkType: hard
+
 "eslint-plugin-react-hooks@npm:<4.6.0, eslint-plugin-react-hooks@npm:^4.5.0":
   version: 4.5.0
   resolution: "eslint-plugin-react-hooks@npm:4.5.0"
@@ -2598,7 +2590,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-react@npm:^7.29.4, eslint-plugin-react@npm:^7.30.0":
+"eslint-plugin-react@npm:^7.29.4":
   version: 7.30.0
   resolution: "eslint-plugin-react@npm:7.30.0"
   dependencies:
@@ -2622,6 +2614,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-plugin-react@npm:^7.30.1":
+  version: 7.30.1
+  resolution: "eslint-plugin-react@npm:7.30.1"
+  dependencies:
+    array-includes: ^3.1.5
+    array.prototype.flatmap: ^1.3.0
+    doctrine: ^2.1.0
+    estraverse: ^5.3.0
+    jsx-ast-utils: ^2.4.1 || ^3.0.0
+    minimatch: ^3.1.2
+    object.entries: ^1.1.5
+    object.fromentries: ^2.0.5
+    object.hasown: ^1.1.1
+    object.values: ^1.1.5
+    prop-types: ^15.8.1
+    resolve: ^2.0.0-next.3
+    semver: ^6.3.0
+    string.prototype.matchall: ^4.0.7
+  peerDependencies:
+    eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
+  checksum: 553fb9ece6beb7c14cf6f84670c786c8ac978c2918421994dcc4edd2385302022e5d5ac4a39fafdb35954e29cecddefed61758040c3c530cafcf651f674a9d51
+  languageName: node
+  linkType: hard
+
 "eslint-scope@npm:^5.1.1":
   version: 5.1.1
   resolution: "eslint-scope@npm:5.1.1"
@@ -2889,9 +2905,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"framer-motion@npm:^6.3.11":
-  version: 6.3.11
-  resolution: "framer-motion@npm:6.3.11"
+"framer-motion@npm:^6.3.15":
+  version: 6.3.15
+  resolution: "framer-motion@npm:6.3.15"
   dependencies:
     "@emotion/is-prop-valid": ^0.8.2
     framesync: 6.0.1
@@ -2905,7 +2921,7 @@ __metadata:
   dependenciesMeta:
     "@emotion/is-prop-valid":
       optional: true
-  checksum: 2333b296a109ec0ef86421453f66a92b63e07930a491102f1007bbe48f40594d8c51a96ca937f8f3f013ba658147049bf1fa9feebc44487b8e7617bb674fb254
+  checksum: d761745e25c7c81c96e15c73b311afb1b732c31f8deb6dc9f71edff32f4b0495af28580707288ae3827a8c1b2a71e093b7b97746ddf73dc7aaecf5d2a29ce71c
   languageName: node
   linkType: hard
 
@@ -2999,22 +3015,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"gauge@npm:~2.7.3":
-  version: 2.7.4
-  resolution: "gauge@npm:2.7.4"
-  dependencies:
-    aproba: ^1.0.3
-    console-control-strings: ^1.0.0
-    has-unicode: ^2.0.0
-    object-assign: ^4.1.0
-    signal-exit: ^3.0.0
-    string-width: ^1.0.1
-    strip-ansi: ^3.0.1
-    wide-align: ^1.1.0
-  checksum: a89b53cee65579b46832e050b5f3a79a832cc422c190de79c6b8e2e15296ab92faddde6ddf2d376875cbba2b043efa99b9e1ed8124e7365f61b04e3cee9d40ee
-  languageName: node
-  linkType: hard
-
 "get-intrinsic@npm:^1.0.2, get-intrinsic@npm:^1.1.0, get-intrinsic@npm:^1.1.1":
   version: 1.1.1
   resolution: "get-intrinsic@npm:1.1.1"
@@ -3200,7 +3200,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"has-unicode@npm:^2.0.0, has-unicode@npm:^2.0.1":
+"has-unicode@npm:^2.0.1":
   version: 2.0.1
   resolution: "has-unicode@npm:2.0.1"
   checksum: 1eab07a7436512db0be40a710b29b5dc21fa04880b7f63c9980b706683127e3c1b57cb80ea96d47991bdae2dfe479604f6a1ba410106ee1046a41d1bd0814400
@@ -3340,7 +3340,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"inherits@npm:2, inherits@npm:^2.0.3, inherits@npm:^2.0.4, inherits@npm:~2.0.3":
+"inherits@npm:2, inherits@npm:^2.0.3, inherits@npm:^2.0.4":
   version: 2.0.4
   resolution: "inherits@npm:2.0.4"
   checksum: 4a48a733847879d6cf6691860a6b1e3f0f4754176e4d71494c41f3475553768b10f84b5ce1d40fbd0e34e6bfbb864ee35858ad4dd2cf31e02fc4a154b724d7f1
@@ -3446,15 +3446,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-fullwidth-code-point@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "is-fullwidth-code-point@npm:1.0.0"
-  dependencies:
-    number-is-nan: ^1.0.0
-  checksum: 4d46a7465a66a8aebcc5340d3b63a56602133874af576a9ca42c6f0f4bd787a743605771c5f246db77da96605fefeffb65fc1dbe862dcc7328f4b4d03edf5a57
-  languageName: node
-  linkType: hard
-
 "is-fullwidth-code-point@npm:^3.0.0":
   version: 3.0.0
   resolution: "is-fullwidth-code-point@npm:3.0.0"
@@ -3547,13 +3538,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"isarray@npm:~1.0.0":
-  version: 1.0.0
-  resolution: "isarray@npm:1.0.0"
-  checksum: f032df8e02dce8ec565cf2eb605ea939bdccea528dbcf565cdf92bfa2da9110461159d86a537388ef1acef8815a330642d7885b29010e8f7eac967c9993b65ab
-  languageName: node
-  linkType: hard
-
 "isexe@npm:^2.0.0":
   version: 2.0.0
   resolution: "isexe@npm:2.0.0"
@@ -3621,6 +3605,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jsx-ast-utils@npm:^3.3.1":
+  version: 3.3.1
+  resolution: "jsx-ast-utils@npm:3.3.1"
+  dependencies:
+    array-includes: ^3.1.5
+    object.assign: ^4.1.2
+  checksum: 1d4b32fd24bbba561d5ca5c8d6ea095be646f83fc357d6f0cd2752f97f3ba0e0ffabc2f54b37a9d98258fc8ec0e1286cb7723cc1c9dc7af402d74fff72ae0a2b
+  languageName: node
+  linkType: hard
+
 "language-subtag-registry@npm:~0.3.2":
   version: 0.3.21
   resolution: "language-subtag-registry@npm:0.3.21"
@@ -3731,22 +3725,22 @@ __metadata:
     "@types/node": ^18.0.0
     "@types/react": ^18.0.14
     "@types/react-redux": ^7.1.24
-    "@typescript-eslint/eslint-plugin": <5.28.0
+    "@typescript-eslint/eslint-plugin": ^5.29.0
     date-fns: ^2.28.0
     eslint: ^8.18.0
     eslint-config-next: ^12.1.6
     eslint-config-prettier: ^8.5.0
-    eslint-plugin-jsx-a11y: ^6.5.1
-    eslint-plugin-react: ^7.30.0
+    eslint-plugin-jsx-a11y: ^6.6.0
+    eslint-plugin-react: ^7.30.1
     eslint-plugin-react-hooks: <4.6.0
     formik: ^2.2.9
-    framer-motion: ^6.3.11
+    framer-motion: ^6.3.15
     next: 12.1.6
     prettier: ^2.7.1
     react: ^18.2.0
     react-dom: ^18.2.0
     react-redux: ^8.0.2
-    sharp: ^0.30.6
+    sharp: ^0.30.7
     typescript: ^4.7.4
   languageName: unknown
   linkType: soft
@@ -4074,18 +4068,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"npmlog@npm:^4.0.1":
-  version: 4.1.2
-  resolution: "npmlog@npm:4.1.2"
-  dependencies:
-    are-we-there-yet: ~1.1.2
-    console-control-strings: ~1.1.0
-    gauge: ~2.7.3
-    set-blocking: ~2.0.0
-  checksum: edbda9f95ec20957a892de1839afc6fb735054c3accf6fbefe767bac9a639fd5cea2baeac6bd2bcd50a85cb54924d57d9886c81c7fbc2332c2ddd19227504192
-  languageName: node
-  linkType: hard
-
 "npmlog@npm:^6.0.0":
   version: 6.0.2
   resolution: "npmlog@npm:6.0.2"
@@ -4098,14 +4080,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"number-is-nan@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "number-is-nan@npm:1.0.1"
-  checksum: 13656bc9aa771b96cef209ffca31c31a03b507ca6862ba7c3f638a283560620d723d52e626d57892c7fff475f4c36ac07f0600f14544692ff595abff214b9ffb
-  languageName: node
-  linkType: hard
-
-"object-assign@npm:^4.1.0, object-assign@npm:^4.1.1":
+"object-assign@npm:^4.1.1":
   version: 4.1.1
   resolution: "object-assign@npm:4.1.1"
   checksum: fcc6e4ea8c7fe48abfbb552578b1c53e0d194086e2e6bbbf59e0a536381a292f39943c6e9628af05b5528aa5e3318bb30d6b2e53cadaf5b8fe9e12c4b69af23f
@@ -4331,9 +4306,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prebuild-install@npm:^7.1.0":
-  version: 7.1.0
-  resolution: "prebuild-install@npm:7.1.0"
+"prebuild-install@npm:^7.1.1":
+  version: 7.1.1
+  resolution: "prebuild-install@npm:7.1.1"
   dependencies:
     detect-libc: ^2.0.0
     expand-template: ^2.0.3
@@ -4342,7 +4317,6 @@ __metadata:
     mkdirp-classic: ^0.5.3
     napi-build-utils: ^1.0.1
     node-abi: ^3.3.0
-    npmlog: ^4.0.1
     pump: ^3.0.0
     rc: ^1.2.7
     simple-get: ^4.0.0
@@ -4350,7 +4324,7 @@ __metadata:
     tunnel-agent: ^0.6.0
   bin:
     prebuild-install: bin.js
-  checksum: 204f2d89c6d6179fa1039036514aa72f7d0b537e421ef72c40840286e318f41489f00f22c6acc725cce6e10d43825b69dcabeaadfc917db781c58cd56fc25f90
+  checksum: dbf96d0146b6b5827fc8f67f72074d2e19c69628b9a7a0a17d0fad1bf37e9f06922896972e074197fc00a52eae912993e6ef5a0d471652f561df5cb516f3f467
   languageName: node
   linkType: hard
 
@@ -4370,13 +4344,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"process-nextick-args@npm:~2.0.0":
-  version: 2.0.1
-  resolution: "process-nextick-args@npm:2.0.1"
-  checksum: 1d38588e520dab7cea67cbbe2efdd86a10cc7a074c09657635e34f035277b59fbb57d09d8638346bf7090f8e8ebc070c96fa5fd183b777fff4f5edff5e9466cf
-  languageName: node
-  linkType: hard
-
 "promise-inflight@npm:^1.0.1":
   version: 1.0.1
   resolution: "promise-inflight@npm:1.0.1"
@@ -4607,21 +4574,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"readable-stream@npm:^2.0.6":
-  version: 2.3.7
-  resolution: "readable-stream@npm:2.3.7"
-  dependencies:
-    core-util-is: ~1.0.0
-    inherits: ~2.0.3
-    isarray: ~1.0.0
-    process-nextick-args: ~2.0.0
-    safe-buffer: ~5.1.1
-    string_decoder: ~1.1.1
-    util-deprecate: ~1.0.1
-  checksum: e4920cf7549a60f8aaf694d483a0e61b2a878b969d224f89b3bc788b8d920075132c4b55a7494ee944c7b6a9a0eada28a7f6220d80b0312ece70bbf08eeca755
-  languageName: node
-  linkType: hard
-
 "readable-stream@npm:^3.1.1, readable-stream@npm:^3.4.0, readable-stream@npm:^3.6.0":
   version: 3.6.0
   resolution: "readable-stream@npm:3.6.0"
@@ -4777,7 +4729,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"safe-buffer@npm:~5.1.0, safe-buffer@npm:~5.1.1":
+"safe-buffer@npm:~5.1.1":
   version: 5.1.2
   resolution: "safe-buffer@npm:5.1.2"
   checksum: f2f1f7943ca44a594893a852894055cf619c1fbcb611237fc39e461ae751187e7baf4dc391a72125e0ac4fb2d8c5c0b3c71529622e6a58f46b960211e704903c
@@ -4820,27 +4772,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"set-blocking@npm:^2.0.0, set-blocking@npm:~2.0.0":
+"set-blocking@npm:^2.0.0":
   version: 2.0.0
   resolution: "set-blocking@npm:2.0.0"
   checksum: 6e65a05f7cf7ebdf8b7c75b101e18c0b7e3dff4940d480efed8aad3a36a4005140b660fa1d804cb8bce911cac290441dc728084a30504d3516ac2ff7ad607b02
   languageName: node
   linkType: hard
 
-"sharp@npm:^0.30.6":
-  version: 0.30.6
-  resolution: "sharp@npm:0.30.6"
+"sharp@npm:^0.30.7":
+  version: 0.30.7
+  resolution: "sharp@npm:0.30.7"
   dependencies:
     color: ^4.2.3
     detect-libc: ^2.0.1
     node-addon-api: ^5.0.0
     node-gyp: latest
-    prebuild-install: ^7.1.0
+    prebuild-install: ^7.1.1
     semver: ^7.3.7
     simple-get: ^4.0.1
     tar-fs: ^2.1.1
     tunnel-agent: ^0.6.0
-  checksum: 2560b5769d78ee660d767e59f6fa56531c448d16383f9700e4ecb8016382104c1bb42991bdd4ea741c0f4d934ea5246c5d602fc5f39062bcc1c2c8786421fd5a
+  checksum: bbc63ca3c7ea8a5bff32cd77022cfea30e25a03f5bd031e935924bf6cf0e11e3388e8b0e22b3137bf8816aa73407f1e4fbeb190f3a35605c27ffca9f32b91601
   languageName: node
   linkType: hard
 
@@ -4871,7 +4823,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"signal-exit@npm:^3.0.0, signal-exit@npm:^3.0.7":
+"signal-exit@npm:^3.0.7":
   version: 3.0.7
   resolution: "signal-exit@npm:3.0.7"
   checksum: a2f098f247adc367dffc27845853e9959b9e88b01cb301658cfe4194352d8d2bb32e18467c786a7fe15f1d44b233ea35633d076d5e737870b7139949d1ab6318
@@ -4963,17 +4915,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"string-width@npm:^1.0.1":
-  version: 1.0.2
-  resolution: "string-width@npm:1.0.2"
-  dependencies:
-    code-point-at: ^1.0.0
-    is-fullwidth-code-point: ^1.0.0
-    strip-ansi: ^3.0.0
-  checksum: 5c79439e95bc3bd7233a332c5f5926ab2ee90b23816ed4faa380ce3b2576d7800b0a5bb15ae88ed28737acc7ea06a518c2eef39142dd727adad0e45c776cd37e
-  languageName: node
-  linkType: hard
-
 "string-width@npm:^1.0.2 || 2 || 3 || 4, string-width@npm:^4.2.3":
   version: 4.2.3
   resolution: "string-width@npm:4.2.3"
@@ -5052,24 +4993,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"string_decoder@npm:~1.1.1":
-  version: 1.1.1
-  resolution: "string_decoder@npm:1.1.1"
-  dependencies:
-    safe-buffer: ~5.1.0
-  checksum: 9ab7e56f9d60a28f2be697419917c50cac19f3e8e6c28ef26ed5f4852289fe0de5d6997d29becf59028556f2c62983790c1d9ba1e2a3cc401768ca12d5183a5b
-  languageName: node
-  linkType: hard
-
-"strip-ansi@npm:^3.0.0, strip-ansi@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "strip-ansi@npm:3.0.1"
-  dependencies:
-    ansi-regex: ^2.0.0
-  checksum: 9b974de611ce5075c70629c00fa98c46144043db92ae17748fb780f706f7a789e9989fd10597b7c2053ae8d1513fd707816a91f1879b2f71e6ac0b6a863db465
-  languageName: node
-  linkType: hard
-
 "strip-ansi@npm:^6.0.1":
   version: 6.0.1
   resolution: "strip-ansi@npm:6.0.1"
@@ -5412,7 +5335,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"util-deprecate@npm:^1.0.1, util-deprecate@npm:~1.0.1":
+"util-deprecate@npm:^1.0.1":
   version: 1.0.2
   resolution: "util-deprecate@npm:1.0.2"
   checksum: 474acf1146cb2701fe3b074892217553dfcf9a031280919ba1b8d651a068c9b15d863b7303cb15bd00a862b498e6cf4ad7b4a08fb134edd5a6f7641681cb54a2
@@ -5450,7 +5373,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"wide-align@npm:^1.1.0, wide-align@npm:^1.1.5":
+"wide-align@npm:^1.1.5":
   version: 1.1.5
   resolution: "wide-align@npm:1.1.5"
   dependencies: