diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..36b3563
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "trailingComma": "none"
+}
diff --git a/components/calender/CalenderNav.tsx b/components/calender/CalenderNav.tsx
index a01e89d..11a00ee 100644
--- a/components/calender/CalenderNav.tsx
+++ b/components/calender/CalenderNav.tsx
@@ -14,7 +14,7 @@ const CalenderNav = (): JSX.Element => {
   const handleNavButtons = (direction: "next" | "prev") => {
     if (direction === "next") {
       const newMonth = add(selectedDate, {
-        months: 1,
+        months: 1
       });
 
       const year = format(newMonth, "y");
@@ -23,7 +23,7 @@ const CalenderNav = (): JSX.Element => {
       router.push(`/calendar/${year}/${month}`);
     } else if (direction === "prev") {
       const newMonth = sub(selectedDate, {
-        months: 1,
+        months: 1
       });
 
       const year = format(newMonth, "y");
diff --git a/components/calender/DatePicker.tsx b/components/calender/DatePicker.tsx
index 1130b08..03d76ed 100644
--- a/components/calender/DatePicker.tsx
+++ b/components/calender/DatePicker.tsx
@@ -14,7 +14,7 @@ import {
   PopoverContent,
   PopoverHeader,
   PopoverTrigger,
-  VStack,
+  VStack
 } from "@chakra-ui/react";
 import {
   Formik,
@@ -22,7 +22,7 @@ import {
   FormikProps,
   Form,
   Field,
-  FieldProps,
+  FieldProps
 } from "formik";
 import { format } from "date-fns";
 import { CalenderContext } from "../../contexts/CalenderContext";
@@ -57,7 +57,7 @@ const DatePicker = (): JSX.Element => {
         const date: UpdateCalendarProps = {
           year: parseInt(dateArr[0]),
           month: parseInt(dateArr[1]),
-          day: parseInt(dateArr[2]),
+          day: parseInt(dateArr[2])
         };
 
         if (!/^(19|20)\d{2}$/.test(`${date.year}`)) {
@@ -97,7 +97,7 @@ const DatePicker = (): JSX.Element => {
           const date: UpdateCalendarProps = {
             year: parseInt(dateArr[0]),
             month: parseInt(dateArr[1]),
-            day: parseInt(dateArr[2]),
+            day: parseInt(dateArr[2])
           };
 
           return resolve(router.push(`/calendar/${date.year}/${date.month}`));
@@ -116,15 +116,15 @@ const DatePicker = (): JSX.Element => {
     bg: "gray.900",
     borderColor: "white",
     _placeholder: {
-      color: "white",
+      color: "white"
     },
     _focus: {
       bg: "#000",
       color: "#FFF",
       borderColor: "#63b3ed",
       boxShadow: "0 0 0 1px #63b3ed",
-      zIndex: "1",
-    },
+      zIndex: "1"
+    }
   };
 
   const initRef = useRef();
@@ -148,7 +148,7 @@ const DatePicker = (): JSX.Element => {
         <PopoverBody textAlign="center">
           <Formik
             initialValues={{
-              date: "",
+              date: ""
             }}
             onSubmit={(data, actions) => {
               handleSubmit(data)
@@ -156,8 +156,8 @@ const DatePicker = (): JSX.Element => {
                   actions.setSubmitting(false);
                   actions.resetForm({
                     values: {
-                      date: "",
-                    },
+                      date: ""
+                    }
                   });
                 })
                 .catch(() => {
@@ -169,7 +169,7 @@ const DatePicker = (): JSX.Element => {
               <Form
                 style={{
                   width: "100%",
-                  height: "auto",
+                  height: "auto"
                 }}
               >
                 <VStack
@@ -223,8 +223,8 @@ const DatePicker = (): JSX.Element => {
                                     boxShadow: "0 0 0 1px #00c17c",
                                     _hover: {
                                       borderColor: "brand.valid",
-                                      boxShadow: "0 0 0 1px #00c17c",
-                                    },
+                                      boxShadow: "0 0 0 1px #00c17c"
+                                    }
                                   }
                                 : "")}
                             />
diff --git a/components/calender/FormValidateEmoji.tsx b/components/calender/FormValidateEmoji.tsx
index 2edbd19..a231114 100644
--- a/components/calender/FormValidateEmoji.tsx
+++ b/components/calender/FormValidateEmoji.tsx
@@ -5,7 +5,7 @@ interface FormValidateEmojiProps {
 }
 
 const FormValidateEmoji: FC<FormValidateEmojiProps> = ({
-  type,
+  type
 }: FormValidateEmojiProps) => {
   interface Validations {
     [key: string]: JSX.Element;
@@ -26,7 +26,7 @@ const FormValidateEmoji: FC<FormValidateEmojiProps> = ({
       <span role="img" aria-label="Check">
         ✔
       </span>
-    ),
+    )
   };
 
   return validations[`${type}`];
diff --git a/components/calender/index.tsx b/components/calender/index.tsx
index cb3945c..0d3f179 100644
--- a/components/calender/index.tsx
+++ b/components/calender/index.tsx
@@ -28,7 +28,7 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
   // Simulated user settings context
   const userSettings = {
     theme: "default",
-    startOfWeek: "Sunday",
+    startOfWeek: "Sunday"
   };
 
   return (
diff --git a/contexts/CalenderContext.tsx b/contexts/CalenderContext.tsx
index c16b2a3..fa14ab6 100644
--- a/contexts/CalenderContext.tsx
+++ b/contexts/CalenderContext.tsx
@@ -68,7 +68,7 @@ interface CalenderContextState {
 const CalenderContext = createContext({} as CalenderContextState);
 
 const CalenderContextProvider = ({
-  children,
+  children
 }: {
   children: ReactNode;
 }): JSX.Element => {
@@ -81,7 +81,7 @@ const CalenderContextProvider = ({
         3: "Wednesday",
         4: "Thursday",
         5: "Friday",
-        6: "Saturday",
+        6: "Saturday"
       },
       Monday: {
         0: "Monday",
@@ -90,9 +90,9 @@ const CalenderContextProvider = ({
         3: "Thursday",
         4: "Friday",
         5: "Saturday",
-        6: "Sunday",
-      },
-    },
+        6: "Sunday"
+      }
+    }
   };
 
   // Selected month & year
@@ -157,7 +157,7 @@ const CalenderContextProvider = ({
         "Wednesday",
         "Thursday",
         "Friday",
-        "Saturday",
+        "Saturday"
       ],
       Monday: [
         "Monday",
@@ -166,9 +166,9 @@ const CalenderContextProvider = ({
         "Thursday",
         "Friday",
         "Saturday",
-        "Sunday",
-      ],
-    },
+        "Sunday"
+      ]
+    }
   };
 
   //TODO: Create an object of arrays that will align with the days on the week. Make two sets for each start of the week setting.
@@ -193,7 +193,7 @@ const CalenderContextProvider = ({
     selectedDate,
     daysOfMonth,
     daysOfWeek,
-    setDate,
+    setDate
   };
 
   return (
diff --git a/contexts/NewCalenderContext.tsx b/contexts/NewCalenderContext.tsx
index e3ac928..821a59f 100644
--- a/contexts/NewCalenderContext.tsx
+++ b/contexts/NewCalenderContext.tsx
@@ -8,7 +8,7 @@ import {
   sub,
   set,
   isAfter,
-  isBefore,
+  isBefore
 } from "date-fns";
 // TODO: import types
 
@@ -72,7 +72,7 @@ interface CalenderContextState {
 const NewCalenderContext = createContext({} as CalenderContextState);
 
 const NewCalenderContextProvider = ({
-  children,
+  children
 }: {
   children: ReactNode;
 }): JSX.Element => {
@@ -85,7 +85,7 @@ const NewCalenderContextProvider = ({
         "Wednesday",
         "Thursday",
         "Friday",
-        "Saturday",
+        "Saturday"
       ],
       monday: [
         "Monday",
@@ -94,30 +94,9 @@ const NewCalenderContextProvider = ({
         "Thursday",
         "Friday",
         "Saturday",
-        "Sunday",
-      ],
-    },
-  };
-
-  const ISOToIndex = {
-    sunday: {
-      Sun: 0,
-      Mon: 1,
-      Tue: 2,
-      Wed: 3,
-      Thu: 4,
-      Fri: 5,
-      Sat: 6,
-    },
-    monday: {
-      Mon: -1,
-      Tue: 0,
-      Wed: 1,
-      Thu: 2,
-      Fri: 3,
-      Sat: 4,
-      Sun: 5,
-    },
+        "Sunday"
+      ]
+    }
   };
 
   const [selectedDate, setSelectedMonth] = useState<Date>(new Date());
@@ -133,18 +112,18 @@ const NewCalenderContextProvider = ({
     prevMonth: {
       date: prevMonth,
       endDay: getDate(endOfMonth(prevMonth)),
-      days: getDate(endOfMonth(prevMonth)),
+      days: getDate(endOfMonth(prevMonth))
     },
     startOfWeek: {
       sunday: {
         layout: weekDays.startOfWeek.sunday,
-        month: {} as Month,
+        month: {} as Month
       },
       monday: {
         layout: weekDays.startOfWeek.monday,
-        month: {} as Month,
-      },
-    },
+        month: {} as Month
+      }
+    }
   });
 
   //TODO Add a function that will populate the "MONTH" layout for the context. It should take in the start of the week (Sunday, Monday) and output the appropriate layout based on that preference.
@@ -172,19 +151,40 @@ const NewCalenderContextProvider = ({
   ): void => {
     const { endDay: endLastMonth } = prevMonth;
 
+    const ISOToIndex = {
+      sunday: {
+        Sun: 0,
+        Mon: 1,
+        Tue: 2,
+        Wed: 3,
+        Thu: 4,
+        Fri: 5,
+        Sat: 6
+      },
+      monday: {
+        Mon: -1,
+        Tue: 0,
+        Wed: 1,
+        Thu: 2,
+        Fri: 3,
+        Sat: 4,
+        Sun: 5
+      }
+    };
+
     const sundays = {
       week1: new Array(7).fill(null),
       week2: new Array(7).fill(null),
       week3: new Array(7).fill(null),
       week4: new Array(7).fill(null),
       week5: new Array(7).fill(null),
-      week6: new Array(7).fill(null),
+      week6: new Array(7).fill(null)
     };
 
     const sunStartDay = endLastMonth - (ISOToIndex.sunday[startOfMonth] - 1);
 
     let sunCurrDate = set(sub(selectedDate, { months: 1 }), {
-      date: sunStartDay,
+      date: sunStartDay
     });
 
     for (let week in sundays) {
@@ -193,7 +193,7 @@ const NewCalenderContextProvider = ({
       thisWeek.forEach((e, i, a) => {
         const day = {
           isOverflow: isOverflow(selectedDate, sunCurrDate),
-          date: sunCurrDate,
+          date: sunCurrDate
         };
         sunCurrDate = add(sunCurrDate, { days: 1 });
 
@@ -207,13 +207,13 @@ const NewCalenderContextProvider = ({
       week3: new Array(7).fill(null),
       week4: new Array(7).fill(null),
       week5: new Array(7).fill(null),
-      week6: new Array(7).fill(null),
+      week6: new Array(7).fill(null)
     };
 
     const monStartDay = endLastMonth - ISOToIndex.monday[startOfMonth];
 
     let monCurrDate = set(sub(selectedDate, { months: 1 }), {
-      date: monStartDay,
+      date: monStartDay
     });
 
     for (let week in mondays) {
@@ -222,7 +222,7 @@ const NewCalenderContextProvider = ({
       thisWeek.forEach((e, i, a) => {
         const day = {
           isOverflow: isOverflow(selectedDate, monCurrDate),
-          date: monCurrDate,
+          date: monCurrDate
         };
         monCurrDate = add(monCurrDate, { days: 1 });
 
@@ -248,7 +248,7 @@ const NewCalenderContextProvider = ({
   //TODO: Add a useEffect that will trigger the update function(s) to run when the selected date is updated.
 
   const calenderContextValues = {
-    selectedMonthInfo,
+    selectedMonthInfo
   };
 
   return (
diff --git a/pages/calendar/[...date].tsx b/pages/calendar/[...date].tsx
index aaa6945..1eb321f 100644
--- a/pages/calendar/[...date].tsx
+++ b/pages/calendar/[...date].tsx
@@ -22,14 +22,14 @@ const DateRoute: React.FC<unknown> = () => {
       return {
         year: 0,
         month: 0,
-        day: 0,
+        day: 0
       };
     }
 
     const date = {
       year: 0,
       month: 0,
-      day: 0,
+      day: 0
     };
 
     if (/^(19|20)\d{2}$/.test(`${dateArr[0]}`)) {
diff --git a/pages/index.tsx b/pages/index.tsx
index dee6334..1872276 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -15,7 +15,7 @@ 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")),
+    day: parseInt(format(new Date(), "d"))
   });
   return (
     <Box textAlign="center" w="100%" h="auto" pt="50px" pb="10vh">
diff --git a/theme/AppTheme.ts b/theme/AppTheme.ts
index 794cd3b..16de8ea 100644
--- a/theme/AppTheme.ts
+++ b/theme/AppTheme.ts
@@ -4,7 +4,7 @@ import buttons from "./components/buttonStyles";
 
 const config: ThemeConfig = {
   initialColorMode: "dark",
-  useSystemColorMode: false,
+  useSystemColorMode: false
 };
 
 // const breakpoints = createBreakpoints({
@@ -29,19 +29,19 @@ const AppTheme = extendTheme({
       footer: "#0097a7",
       footerText: "black",
       content: "#2d3748",
-      patreon: "#FF424D",
-    },
+      patreon: "#FF424D"
+    }
   },
   styles: {
     global: {
       body: {
-        bg: "gray.900",
-      },
-    },
+        bg: "gray.900"
+      }
+    }
   },
   components: {
-    Button: buttons,
-  },
+    Button: buttons
+  }
   // breakpoints,
 });
 
diff --git a/theme/components/buttonStyles.ts b/theme/components/buttonStyles.ts
index ca5c83a..1234830 100644
--- a/theme/components/buttonStyles.ts
+++ b/theme/components/buttonStyles.ts
@@ -3,7 +3,7 @@ import {
   darken,
   mode,
   StyleFunctionProps,
-  whiten,
+  whiten
 } from "@chakra-ui/theme-tools";
 import { Dict } from "@chakra-ui/utils";
 
@@ -22,8 +22,8 @@ const buttonStyles = {
         bg: mode(
           whiten("brand.primary", 20),
           darken("brand.primary", 20)
-        )(props),
-      },
+        )(props)
+      }
     }),
     contactSecondary: (props: Dict<never> | StyleFunctionProps) => ({
       bg: "brand.primary",
@@ -33,8 +33,8 @@ const buttonStyles = {
         bg: mode(
           whiten("brand.primary", 20),
           darken("brand.primary", 20)
-        )(props),
-      },
+        )(props)
+      }
     }),
     project: (props: Dict<never> | StyleFunctionProps) => ({
       bg: "transparent",
@@ -50,8 +50,8 @@ const buttonStyles = {
           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",
-      },
+          "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",
@@ -61,16 +61,16 @@ const buttonStyles = {
         bg: mode(
           whiten("brand.secondary", 20),
           darken("brand.secondary", 20)
-        )(props),
-      },
+        )(props)
+      }
     }),
     stickyNav: (/* props: Dict<never> | StyleFunctionProps */) => ({
       bg: "transparent",
       fontSize: "md",
       px: "2",
       _hover: {
-        textDecoration: "underline",
-      },
+        textDecoration: "underline"
+      }
     }),
     credits: (props: Dict<never> | StyleFunctionProps) => ({
       bg: "brand.main",
@@ -78,8 +78,8 @@ const buttonStyles = {
       p: 3,
       color: "whiteAlpha",
       _hover: {
-        bg: mode(whiten("brand.main", 20), darken("brand.main", 20))(props),
-      },
+        bg: mode(whiten("brand.main", 20), darken("brand.main", 20))(props)
+      }
     }),
     backToTop: (props: Dict<never> | StyleFunctionProps) => ({
       bg: "rgba(23, 25, 35, 0.5)",
@@ -98,8 +98,8 @@ const buttonStyles = {
         boxShadow:
           "rgba(0, 104, 255, 0.5) 0px 0px 15px, rgba(0, 104, 255, 0.3) 0px 0px 3px 1px",
         color: "whiteAlpha.900",
-        border: "1px solid rgba(0, 134, 255, 1)",
-      },
+        border: "1px solid rgba(0, 134, 255, 1)"
+      }
     }),
     collapse: (props: Dict<never> | StyleFunctionProps) => ({
       bg: "transparent",
@@ -114,8 +114,8 @@ const buttonStyles = {
           darken("brand.secondary", 20)
         )(props),
         color: "whiteAlpha.900",
-        textDecoration: "none",
-      },
+        textDecoration: "none"
+      }
     }),
     submit: (props: Dict<never> | StyleFunctionProps) => ({
       fontSize: "lg",
@@ -132,9 +132,9 @@ const buttonStyles = {
           )(props),
           boxShadow:
             "rgba(252, 129, 129, .95) 0px 0px 15px, rgba(252, 129, 129, 0.75) 0px 0px 3px 1px",
-          border: "1px solid #FC8181",
-        },
-      },
+          border: "1px solid #FC8181"
+        }
+      }
     }),
     mobileNav: (props: Dict<never> | StyleFunctionProps) => ({
       // bg: "transparent",
@@ -148,14 +148,14 @@ const buttonStyles = {
           darken("brand.secondary", 20)
         )(props),
         boxShadow:
-          "rgba(0, 134, 255, 0.5) 0px 0px 15px, rgba(0, 134, 255, 0.3) 0px 0px 3px 1px",
+          "rgba(0, 134, 255, 0.5) 0px 0px 15px, rgba(0, 134, 255, 0.3) 0px 0px 3px 1px"
       },
       _expanded: {
         bg: "brand.primary",
         boxShadow:
           "rgba(0, 134, 255, 0.5) 0px 0px 15px, rgba(0, 134, 255, 0.3) 0px 0px 3px 1px",
-        border: "1px solid #0068ff",
-      },
+        border: "1px solid #0068ff"
+      }
     }),
     patreon: (props: Dict<never> | StyleFunctionProps) => ({
       bg: "brand.patreon",
@@ -166,12 +166,12 @@ const buttonStyles = {
         bg: mode(
           whiten("brand.patreon", 20),
           darken("brand.patreon", 20)
-        )(props),
-      },
-    }),
+        )(props)
+      }
+    })
   },
   // default values for `size` and `variant`
-  defaultProps: {},
+  defaultProps: {}
 };
 
 export default buttonStyles;
diff --git a/theme/layout/BackToTopButton.tsx b/theme/layout/BackToTopButton.tsx
index 930b203..c26a021 100644
--- a/theme/layout/BackToTopButton.tsx
+++ b/theme/layout/BackToTopButton.tsx
@@ -7,7 +7,7 @@ interface BackToTopButtonProps {
 }
 
 const BackToTopButton: FC<BackToTopButtonProps> = ({
-  show,
+  show
 }: BackToTopButtonProps) => {
   return (
     <Flex
diff --git a/theme/layout/Footer.tsx b/theme/layout/Footer.tsx
index c5f274f..b83d3b3 100644
--- a/theme/layout/Footer.tsx
+++ b/theme/layout/Footer.tsx
@@ -7,7 +7,7 @@ import {
   HStack,
   // Image,
   Button,
-  BoxProps,
+  BoxProps
 } from "@chakra-ui/react";
 import { Icon } from "@iconify/react";
 // import BackToTopButton from "./BackToTopButton";
diff --git a/theme/layout/Header.tsx b/theme/layout/Header.tsx
index f5c7c69..27b0e5f 100644
--- a/theme/layout/Header.tsx
+++ b/theme/layout/Header.tsx
@@ -5,7 +5,7 @@ import {
   Box,
   IconButton,
   Menu,
-  MenuButton,
+  MenuButton
 } from "@chakra-ui/react";
 import { Icon } from "@iconify/react";
 import DesktopNav from "./DesktopNav";
@@ -54,7 +54,7 @@ const Header = (): JSX.Element => {
     const iconType = {
       default: <Icon icon="bx:bx-menu-alt-right" />,
       hover: <Icon icon="bx:bx-menu" />,
-      open: <Icon icon="bx:bx-x" />,
+      open: <Icon icon="bx:bx-x" />
     };
 
     if (open) {
@@ -91,7 +91,7 @@ const Header = (): JSX.Element => {
         bg: "brand.main",
         boxShadow: open
           ? "none"
-          : "rgba(0, 134, 255, 0.9) 0px 0px 15px, rgba(0, 134, 255, 0.7) 0px 0px 3px 1px",
+          : "rgba(0, 134, 255, 0.9) 0px 0px 15px, rgba(0, 134, 255, 0.7) 0px 0px 3px 1px"
       }}
       h={open ? "125px" : "auto"}
     >
@@ -107,7 +107,7 @@ const Header = (): JSX.Element => {
         d={{ base: "flex", lg: "none" }}
         spacing="5px"
         _hover={{
-          cursor: "default",
+          cursor: "default"
         }}
       >
         <Heading as="h1" size="md">
@@ -140,7 +140,7 @@ const Header = (): JSX.Element => {
               height="auto"
               spacing="5px"
               _hover={{
-                cursor: "default",
+                cursor: "default"
               }}
             >
               <Heading as="h1" size="md">
diff --git a/theme/layout/MobileNav.tsx b/theme/layout/MobileNav.tsx
index 08ac873..fa43d21 100644
--- a/theme/layout/MobileNav.tsx
+++ b/theme/layout/MobileNav.tsx
@@ -4,7 +4,7 @@ import {
   Link,
   MenuDivider,
   MenuItem,
-  MenuList,
+  MenuList
 } from "@chakra-ui/react";
 import navItems, { NavItem } from "./navItems";
 
@@ -33,10 +33,10 @@ const MobileNav: FC<MobileNavProps> = ({ updateOpen }: MobileNavProps) => {
             h="auto"
             p={0}
             _hover={{
-              backgroundColor: "none",
+              backgroundColor: "none"
             }}
             _focus={{
-              backgroundColor: "none",
+              backgroundColor: "none"
             }}
           >
             <Link onClick={() => updateOpen(false)} href={navItem[1]}>