diff --git a/src/App.js b/src/App.js
index 3116d1d..71e0ea6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -43,7 +43,7 @@ class App extends Component {
   };
 
   render() {
-    const { authUser, selectedTheme } = this.state;
+    const { selectedTheme } = this.state;
 
     const currentTheme = theme[selectedTheme];
     return (
diff --git a/src/components/firebase/fire.js b/src/components/firebase/fire.js
index c887eb7..56fdba0 100644
--- a/src/components/firebase/fire.js
+++ b/src/components/firebase/fire.js
@@ -20,9 +20,9 @@ class Firebase {
       .firestore()
       .enablePersistence()
       .catch(function(err) {
-        if (err.code == "failed-precondition") {
+        if (err.code === "failed-precondition") {
           console.error("firestore won't work offline with multiple tabs open");
-        } else if (err.code == "unimplemented") {
+        } else if (err.code === "unimplemented") {
           console.error(
             "current browser can't take advantage of firestore offline"
           );
diff --git a/src/components/screens/Day/Day.js b/src/components/screens/Day/Day.js
index 1f16cc5..c1de956 100644
--- a/src/components/screens/Day/Day.js
+++ b/src/components/screens/Day/Day.js
@@ -60,7 +60,7 @@ class Day extends Component {
       }
     } = this.props;
     history.listen((location, action) => {
-      const [blank, year, month, day] = location.pathname.split("/");
+      const [, year, month, day] = location.pathname.split("/");
       this.onRouteChanged(year, month, day);
     });
     this.getDocRef(year, month, day, false);
@@ -144,8 +144,7 @@ class Day extends Component {
     const {
       match: {
         params: { year, month, day }
-      },
-      theme
+      }
     } = this.props;
     const { text, loading } = this.state;
     const currentDay = new Date(year, month - 1, day);
@@ -161,9 +160,7 @@ class Day extends Component {
         />
         <JournalHeading>RECORD THOUGHTS ABOUT YOUR DAY</JournalHeading>
         {loading ? (
-          <div style={{ color: theme.colors.tertiary, fontSize: 12 }}>
-            loading...
-          </div>
+          <JournalEntryArea disabled placeholder="Loading..." />
         ) : (
           <JournalEntryArea
             placeholder="Start writing..."
diff --git a/src/components/screens/Month/Month.js b/src/components/screens/Month/Month.js
index ea7876c..34bdb5f 100644
--- a/src/components/screens/Month/Month.js
+++ b/src/components/screens/Month/Month.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { addDays, subDays, format, isToday } from "date-fns";
+import { subDays, format, isToday } from "date-fns";
 
 import Seek from "../../Seek";
 
@@ -11,7 +11,6 @@ class Month extends Component {
       }
     } = this.props;
     const currentDay = new Date(year, month - 1);
-    console.log(currentDay);
     return (
       <div>
         <Seek
diff --git a/src/components/screens/Register/Register.js b/src/components/screens/Register/Register.js
index 204a7ec..15c173a 100644
--- a/src/components/screens/Register/Register.js
+++ b/src/components/screens/Register/Register.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Link, withRouter } from "react-router-dom";
+import { withRouter } from "react-router-dom";
 
 import { FirebaseContext } from "../../firebase";
 
@@ -26,8 +26,8 @@ class RegisterForm extends Component {
   }
 
   onSubmit = event => {
-    const { username, email, passwordOne } = this.state;
-    const { firebase } = this.props
+    const { email, passwordOne } = this.state;
+    const { firebase } = this.props;
 
     firebase
       .doCreateUserWithEmailAndPassword(email, passwordOne)
@@ -39,12 +39,15 @@ class RegisterForm extends Component {
           passwordTwo: "",
           error: null
         });
-        const { user } = result
-        console.log(user)
-        firebase.db.collection("users").doc(user.uid).set({
-          email: user.email,
-          theme: "LIGHT"
-        })
+        const { user } = result;
+        console.log(user);
+        firebase.db
+          .collection("users")
+          .doc(user.uid)
+          .set({
+            email: user.email,
+            theme: "LIGHT"
+          });
         this.props.history.push("/home");
       })
       .catch(error => {
diff --git a/src/components/screens/User/User.js b/src/components/screens/User/User.js
index 9f592e7..c51a150 100644
--- a/src/components/screens/User/User.js
+++ b/src/components/screens/User/User.js
@@ -16,11 +16,14 @@ class User extends React.Component {
 
   addUser = e => {
     e.preventDefault();
-    const { firebase } = this.props
+    const { firebase } = this.props;
 
-    const userRef = firebase.db.collection("users").doc().add({
-      name: this.state.name
-    });
+    firebase.db
+      .collection("users")
+      .doc()
+      .add({
+        name: this.state.name
+      });
     this.setState({ name: "" });
   };
 
diff --git a/src/components/screens/Year/Year.js b/src/components/screens/Year/Year.js
index 76edf1a..e7ed293 100644
--- a/src/components/screens/Year/Year.js
+++ b/src/components/screens/Year/Year.js
@@ -1,8 +1,34 @@
 import React, { Component } from "react";
-import { addYears, subYears, format } from "date-fns";
+import { Link } from "react-router-dom";
+import styled from "@emotion/styled";
+import { addYears, subYears, format, isThisYear, getMonth } from "date-fns";
+import { withTheme } from "emotion-theming";
 
+import { months } from "../../../utils/date";
 import Seek from "../../Seek";
 
+const MonthCardGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  grid-gap: 20px;
+  margin-top: 20px;
+`;
+const MonthCard = 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: 40px;
+  border-radius: 5px;
+  text-align: center;
+  user-select: none;
+  &:hover {
+    border-color: ${props => !props.disabled && props.theme.colors.tertiary};
+  }
+`;
+
 class Year extends Component {
   render() {
     const {
@@ -11,7 +37,12 @@ class Year extends Component {
       }
     } = this.props;
     const currentDate = new Date(year, 0, 1);
-    console.log(currentDate.getFullYear());
+
+    // include all months unless it's this year
+    let monthIndexesToInclude = 11;
+    if (isThisYear(currentDate)) {
+      monthIndexesToInclude = getMonth(new Date());
+    }
     return (
       <div>
         <Seek
@@ -20,9 +51,27 @@ class Year extends Component {
           next={format(addYears(currentDate, 1), "/YYYY")}
           disableNext={year >= new Date().getFullYear()}
         />
+        <MonthCardGrid>
+          {months.long.map((month, index) => {
+            const isDisabled = monthIndexesToInclude < index;
+            return isDisabled ? (
+              <MonthCard key={index} disabled={isDisabled}>
+                {month}
+              </MonthCard>
+            ) : (
+              <Link
+                key={index}
+                to={format(new Date(year, index), "/YYYY/MM")}
+                style={{ textDecoration: "none" }}
+              >
+                <MonthCard>{month}</MonthCard>
+              </Link>
+            );
+          })}
+        </MonthCardGrid>
       </div>
     );
   }
 }
 
-export default Year;
+export default withTheme(Year);
diff --git a/src/index.js b/src/index.js
index aeb67da..fd2ce9e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -16,4 +16,4 @@ ReactDOM.render(
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+serviceWorker.register();
diff --git a/src/serviceWorker.js b/src/serviceWorker.js
index f8c7e50..5ef2083 100644
--- a/src/serviceWorker.js
+++ b/src/serviceWorker.js
@@ -11,9 +11,9 @@
 // opt-in, read https://bit.ly/CRA-PWA
 
 const isLocalhost = Boolean(
-  window.location.hostname === 'localhost' ||
+  window.location.hostname === "localhost" ||
     // [::1] is the IPv6 localhost address.
-    window.location.hostname === '[::1]' ||
+    window.location.hostname === "[::1]" ||
     // 127.0.0.1/8 is considered localhost for IPv4.
     window.location.hostname.match(
       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
@@ -21,7 +21,7 @@ const isLocalhost = Boolean(
 );
 
 export function register(config) {
-  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+  if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
     // The URL constructor is available in all browsers that support SW.
     const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
     if (publicUrl.origin !== window.location.origin) {
@@ -31,7 +31,7 @@ export function register(config) {
       return;
     }
 
-    window.addEventListener('load', () => {
+    window.addEventListener("load", () => {
       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 
       if (isLocalhost) {
@@ -42,8 +42,8 @@ export function register(config) {
         // service worker/PWA documentation.
         navigator.serviceWorker.ready.then(() => {
           console.log(
-            'This web app is being served cache-first by a service ' +
-              'worker. To learn more, visit https://bit.ly/CRA-PWA'
+            "This web app is being served cache-first by a service " +
+              "worker. To learn more, visit https://bit.ly/CRA-PWA"
           );
         });
       } else {
@@ -64,14 +64,14 @@ function registerValidSW(swUrl, config) {
           return;
         }
         installingWorker.onstatechange = () => {
-          if (installingWorker.state === 'installed') {
+          if (installingWorker.state === "installed") {
             if (navigator.serviceWorker.controller) {
               // At this point, the updated precached content has been fetched,
               // but the previous service worker will still serve the older
               // content until all client tabs are closed.
               console.log(
-                'New content is available and will be used when all ' +
-                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
+                "New content is available and will be used when all " +
+                  "tabs for this page are closed. See https://bit.ly/CRA-PWA."
               );
 
               // Execute callback
@@ -82,7 +82,7 @@ function registerValidSW(swUrl, config) {
               // At this point, everything has been precached.
               // It's the perfect time to display a
               // "Content is cached for offline use." message.
-              console.log('Content is cached for offline use.');
+              console.log("Content is cached for offline use.");
 
               // Execute callback
               if (config && config.onSuccess) {
@@ -94,7 +94,7 @@ function registerValidSW(swUrl, config) {
       };
     })
     .catch(error => {
-      console.error('Error during service worker registration:', error);
+      console.error("Error during service worker registration:", error);
     });
 }
 
@@ -103,10 +103,10 @@ function checkValidServiceWorker(swUrl, config) {
   fetch(swUrl)
     .then(response => {
       // Ensure service worker exists, and that we really are getting a JS file.
-      const contentType = response.headers.get('content-type');
+      const contentType = response.headers.get("content-type");
       if (
         response.status === 404 ||
-        (contentType != null && contentType.indexOf('javascript') === -1)
+        (contentType != null && contentType.indexOf("javascript") === -1)
       ) {
         // No service worker found. Probably a different app. Reload the page.
         navigator.serviceWorker.ready.then(registration => {
@@ -121,13 +121,13 @@ function checkValidServiceWorker(swUrl, config) {
     })
     .catch(() => {
       console.log(
-        'No internet connection found. App is running in offline mode.'
+        "No internet connection found. App is running in offline mode."
       );
     });
 }
 
 export function unregister() {
-  if ('serviceWorker' in navigator) {
+  if ("serviceWorker" in navigator) {
     navigator.serviceWorker.ready.then(registration => {
       registration.unregister();
     });
diff --git a/src/utils/date.js b/src/utils/date.js
index 8bb1718..c175840 100644
--- a/src/utils/date.js
+++ b/src/utils/date.js
@@ -1,5 +1,3 @@
-import format from "date-fns/format";
-
 export const pad = n => (n < 10 ? "0" : "") + n;
 
 export const todayUrl = (date = new Date()) =>
@@ -8,7 +6,7 @@ export const todayUrl = (date = new Date()) =>
 export const yearUrl = (date = new Date()) => `/${date.getFullYear()}/`;
 
 export const months = {
-  short: Array.from({ length: 12 }, (x, index) =>
-    new Date(0, index).toLocaleDateString("en-US", { month: "short" })
+  long: Array.from({ length: 12 }, (x, index) =>
+    new Date(0, index).toLocaleDateString("en-US", { month: "long" })
   )
 };