diff --git a/src/components/screens/Day/Day.js b/src/components/screens/Day/Day.js
index c1de956..a13f1c7 100644
--- a/src/components/screens/Day/Day.js
+++ b/src/components/screens/Day/Day.js
@@ -18,6 +18,7 @@ const JournalHeading = styled.h2`
margin-top: ${SIZES.medium};
`;
const JournalEntryArea = styled.textarea`
+ font-family: sans-serif;
flex-grow: 0.8;
color: ${props => props.theme.colors.primary};
caret-color: ${props => props.theme.colors.secondary};
diff --git a/src/components/screens/Month/Month.js b/src/components/screens/Month/Month.js
index 34bdb5f..73ccbe2 100644
--- a/src/components/screens/Month/Month.js
+++ b/src/components/screens/Month/Month.js
@@ -1,8 +1,38 @@
import React, { Component } from "react";
-import { subDays, format, isToday } from "date-fns";
+import styled from "@emotion/styled";
+import {
+ isAfter,
+ format,
+ addMonths,
+ subMonths,
+ getDaysInMonth,
+ startOfMonth
+} from "date-fns";
import Seek from "../../Seek";
+const YearCardGrid = styled.div`
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+ grid-gap: 20px;
+ margin-top: 20px;
+`;
+const YearCard = styled.div`
+ color: ${props =>
+ props.disabled
+ ? props.theme.colors.quarternary
+ : props.theme.colors.secondary};
+ border: 1px solid;
+ border-color: ${props => props.theme.colors.quarternary};
+ padding: 30px;
+ border-radius: 5px;
+ text-align: center;
+ user-select: none;
+ &:hover {
+ border-color: ${props => !props.disabled && props.theme.colors.tertiary};
+ }
+`;
+
class Month extends Component {
render() {
const {
@@ -11,15 +41,25 @@ class Month extends Component {
}
} = this.props;
const currentDay = new Date(year, month - 1);
+
+ let yearCards = [];
+ for (let i = 0; i < getDaysInMonth(currentDay); i++) {
+ yearCards.push(