diff --git a/package.json b/package.json
index 2b0fdaf..bc94b84 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "lodash.keyby": "^4.6.0",
     "lodash.mapvalues": "^4.6.0",
     "lodash.uniq": "^4.5.0",
+    "moment": "^2.22.2",
     "popper.js": "^1.12.9",
     "vue": "^2.5.3"
   },
diff --git a/src/App.vue b/src/App.vue
index e614ad7..161517e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,24 +1,109 @@
 <template>
-  <div id="app">
+  <div id="app" class="bg-light">
     <CornerBanner url="https://github.com/mkopinsky/howmanychagim"/>
     <div class="top">
       <h1>How many Chagim?</h1>
-      <h3 class="year-selector">
-        <a
-            v-for="year in availableYears"
-            :class="{'px-1': true, 'active': year===selectedYear}"
-            href="#"
-            @click="selectYear(year)"
-        >{{ year }}</a>
-      </h3>
-      <div class="grand-totals mb-3">
-        <h4>
-          Total: <span class="badge badge-warning">{{ totalWeekdays() }}</span> work days,
-          <span class="badge badge-secondary">{{ totalWeekends() }}</span> weekends
-        </h4>
+    </div>
+    <div class="col-lg-6 offset-lg-3">
+      <div class="card">
+        <h5 class="card-header d-none">
+          Settings
+        </h5>
+        <div class="card-body">
+          <div class="form-group row">
+            <label class="col-sm-5 col-form-label">Select a Year</label>
+            <div class="col-sm-7 btn-group-toggle btn-group" data-toggle="buttons">
+              <label v-for="year in availableYears" class="btn btn-outline-primary" :class="{active: year==selectedYear}">
+                <input type="radio" :value="year" v-model="selectedYear"/>
+                {{ year }}
+              </label>
+            </div>
+          </div>
+          <div class="form-group row">
+            <label class="col-sm-5 col-form-label">Choose your Work Week</label>
+            <div class="col-sm-7 btn-group-toggle btn-group" data-toggle="buttons">
+              <label v-for="day, i in weekdays" class="btn btn-outline-primary" @click="toggleDay(day)" :class="{active: settings.weekdays[day]}">
+                {{ day[0] }}
+              </label>
+            </div>
+          </div>
+
+          <div class="form-group row">
+            <label class="col-sm-5 col-form-label">What will you take off?</label>
+            <div class="col-sm-7">
+              <div class="form-check">
+                <input class="form-check-input" type="checkbox" id="defaultCheck1" checked>
+                <label class="form-check-label" for="defaultCheck1">
+                  Yom tov
+                </label>
+              </div>
+              <div class="form-check">
+                <input class="form-check-input" type="checkbox" id="defaultCheck2">
+                <label class="form-check-label" for="defaultCheck2">
+                  Chol Hamoed
+                </label>
+              </div>
+              <div class="form-check">
+                <input class="form-check-input" type="checkbox" id="defaultCheck3">
+                <label class="form-check-label" for="defaultCheck3">
+                  Purim
+                </label>
+              </div>
+              <div class="form-check">
+                <input class="form-check-input" type="checkbox" id="defaultCheck4" checked>
+                <label class="form-check-label" for="defaultCheck4">
+                  Tisha B'av
+                </label>
+              </div>
+              <div class="form-check">
+                <input class="form-check-input" type="checkbox" id="defaultCheck5">
+                <label class="form-check-label" for="defaultCheck5">
+                  Minor Fast Days
+                </label>
+              </div>
+
+            </div>
+          </div>
+
+        </div>
+        <div class="card-footer mb-0">
+          <h4>Total: <span class="badge badge-primary">{{ totalWeekdays() }}</span> work days</h4>
+          <ul>
+            <li v-for="holidays, month in selectedHolidaysByMonth" v-if="holidays.length > 0">
+              <span class="badge badge-primary">{{ totalWeekdays(month) }}</span>
+              {{ month }}:
+              <span v-for="holiday, i in holidays">
+                <span style="border-bottom: 1px dotted black" v-b-tooltip.hover :title="holiday.title">
+                  {{ formatShort(holiday.date) }}
+                </span>
+                <span v-if="i < holidays.length - 1">, </span>
+              </span>
+
+            </li>
+          </ul>
+        </div>
       </div>
     </div>
-    <div class="row">
+    <div class="row d-none">
+      <div class="col-lg-3">
+        <h2>Select a year</h2>
+        <div class="btn-group-toggle btn-group" data-toggle="buttons">
+          <label v-for="year in availableYears" class="btn btn-outline-primary" :class="{active: year==selectedYear}">
+            <input type="radio" :value="year" v-model="selectedYear"/>
+            {{ year }}
+          </label>
+        </div>
+      </div>
+
+    </div>
+    <div class="row col-lg-9 offset-lg-2 text-center">
+      <calendar
+          :year="selectedYear"
+          :selectedDays="selected"
+          :getClassesForDate="getClassesForDate"
+      />
+    </div>
+    <div class="row d-none">
 
       <div class="col-lg-3 col-sm-6" v-for="holidays, month in holidays.holidaysByMonth">
         <div class="card">
@@ -44,7 +129,7 @@
         </div>
       </div>
     </div>
-    <div id="footer" class="text-center">
+    <div id="footer" class="text-center mt-4">
       &copy; 2018 Michael Kopinsky. Licensed under MIT.
     </div>
   </div>
@@ -58,16 +143,30 @@ import _keyby from 'lodash.keyby';
 import _mapValues from 'lodash.mapvalues';
 import _uniq from 'lodash.uniq';
 import isWeekend from 'date-fns/is_weekend';
+import moment from 'moment';
+
+import calendar from './calendar/index.vue';
 import CornerBanner from './CornerBanner.vue';
 
 export default {
   name: 'app',
-  components: {CornerBanner},
   data() {
     const currentYear = new Date().getFullYear();
     return {
       availableYears: [currentYear - 1, currentYear, currentYear + 1, currentYear + 2],
       selectedYear: currentYear,
+      weekdays: moment.weekdays(),
+      settings: {
+        weekdays: {
+          'Sunday': false,
+          'Monday': true,
+          'Tuesday': true,
+          'Wednesday': true,
+          'Thursday': true,
+          'Friday': true,
+          'Saturday': false,
+        }
+      },
       holidays: {
         all: [],
         holidaysByMonth: {}
@@ -75,29 +174,74 @@ export default {
       selected: {}
     };
   },
+  components: {
+    calendar,
+    CornerBanner,
+  },
   mounted() {
     this.reloadHolidays();
   },
+  computed: {
+    selectedHolidaysByMonth() {
+      return _mapValues(
+          this.holidays.holidaysByMonth,
+          holidays => holidays.filter(holiday => this.selected[holiday.date])
+      );
+    },
+
+  },
   methods: {
+    getClassesForDate(date, month) {
+      if (date.format('MMMM') != month) {
+        return 'gray';
+      }
+
+      const dateStr = date.format('YYYY-MM-DD');
+      let classes = [];
+      if (this.selected[dateStr]) {
+        classes.push('active');
+      }
+
+      if (isWeekend(dateStr)) {
+        classes.push('weekend');
+      }
+
+      let holidays = this.holidays.all.filter(holiday => holiday.date == dateStr);
+      holidays.forEach(holiday => {
+        if (!!holiday.yomtov) {
+          classes.push('yomtov');
+        } else {
+          classes.push('holiday');
+        }
+      });
+
+      return classes.join(' ');
+    },
     reloadHolidays() {
       getHolidays(this.selectedYear).then(holidays => {
         this.holidays = holidays;
         this.selected = _mapValues(
             _keyby(this.holidays.all, 'date'),
             // Default to selecting yomtov days
-            holiday => !!holiday.yomtov
+            holiday => !!holiday.yomtov // && !isWeekend(holiday.date)
         );
       });
     },
     format(date) {
       return format(date, 'ddd MMM Do');
     },
+    formatShort(date) {
+      return format(date, 'ddd Do');
+    },
     selectYear(year) {
       this.selectedYear = year;
       this.reloadHolidays();
     },
-    toggle(date, event) {
-      this.selected[date] = event.target.checked;
+    toggleDay(day) {
+      this.settings.weekdays[day] = !this.settings.weekdays[day];
+    },
+    toggle(date) {
+      this.selected[date] = !this.selected[date];
     },
     totalWeekdays(month) {
       let holidays = month
@@ -128,12 +272,18 @@ export default {
 </script>
 
 <style lang="scss">
+$primary: #3276b1;
+$danger: #ff4136;
+
+@import "../node_modules/bootstrap/scss/bootstrap";
+@import "../node_modules/bootstrap-vue/dist/bootstrap-vue.css";
+
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #2c3e50;
-  margin: 60px 30px 20px;
+  padding: 60px 30px 20px;
 
   .top {
     text-align: center;
@@ -161,6 +311,33 @@ export default {
   span.total {
     font-weight: bold;
   }
+
+  .day-cell {
+
+    &.yomtov {
+      border: 1px solid $primary;
+
+      &.active:hover,
+      &.active {
+        background: $primary;
+        color: white;
+      }
+    }
+
+    &.weekend, &.gray {
+      opacity: 0.7;
+    }
+
+    &.holiday {
+      border: 1px solid $warning;
+
+      &.active:hover,
+      &.active {
+        background: $warning;
+        color: white;
+      }
+    }
+  }
 }
 
 h1, h2 {
diff --git a/src/calendar/index.vue b/src/calendar/index.vue
new file mode 100644
index 0000000..5db03ab
--- /dev/null
+++ b/src/calendar/index.vue
@@ -0,0 +1,150 @@
+<template>
+  <div>
+    <div class="month-container" v-for="month, i in text.months">
+      <div class="month-body">
+        <p>{{month}}</p>
+        <div>
+          <span v-for="w in text.daysOfWeek" class="dayOfWeekLabel">{{w}}</span>
+        </div>
+        <div>
+          <span v-for="d in dateRange[i]" class="day-cell" :class="getClassesForDate(d.date, month)" @click="daySelect(d, $event)">
+            <div>
+              {{d.date.date()}}
+            </div>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+/**
+ * Much of this calendar component was copied from the vue2-slot-calendar, with modifications
+ * to remove what I didn't need, and to better suit my needs for the parts I do need.
+ * Original component is Copyright (c) 2018 Terry Cai, licensed under MIT.
+ * 
+ * https://registry.npmjs.org/vue2-slot-calendar
+ */
+
+import moment from 'moment';
+
+export default {
+  name: 'calendar',
+  props: {
+    selectedDays: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    year: {
+      type: [Number, String]
+    },
+    getClassesForDate: {
+      type: Function,
+      default () {
+        return function (date) {
+          return '';
+        }
+      }
+    }
+  },
+  mounted () {
+    this.getDateRange();
+  },
+  data () {
+    return {
+      dateRange: [],
+      text: {
+        daysOfWeek: moment.weekdaysMin(),
+        months: moment.months(),
+      }
+    };
+  },
+  methods: {
+    daySelect(d, event) {
+      this.$parent.toggle(d.date.format('YYYY-MM-DD'))
+    },
+    getDateRange() {
+      this.dateRange = [];
+      for (let p = 0; p < 12; p++) {
+        this.dateRange[p] = []
+
+        const currMonth = moment({year: this.year, month: p, day: 1});
+        const prevMonth = moment(currMonth).subtract(1, 'month');
+        const nextMonth = moment(currMonth).add(1, 'month');
+
+        // Add any needed days from the previous month
+        for (let i = 0; i < currMonth.day(); i++) {
+          let date = moment(currMonth).subtract(currMonth.day() - i, 'days');
+          this.dateRange[p].push({
+            date: date,
+            isCurrentMonth: false
+          });
+        }
+        // Current month
+        for (let i = 1; i <= currMonth.daysInMonth(); i++) {
+          let date = moment(currMonth).date(i);
+          this.dateRange[p].push({
+            date: date,
+            isCurrentMonth: true
+          });
+        }
+        // Next month (if needed)
+        const nextMonthNeed = (42 - this.dateRange[p].length) % 7;
+        for (let i = 0; i < nextMonthNeed; i++) {
+          let date = moment(nextMonth).date(i + 1);
+          this.dateRange[p].push({
+            date: date,
+            isCurrentMonth: false
+          })
+        }
+      }
+      
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import "../../node_modules/bootstrap/scss/bootstrap";
+/*!
+ * Based on vue2-calendar v2.1.4
+ * (c) 2018 Terry <gidcai@gmail.com>
+ * https://github.com/icai/vue2-calendar#readme
+ */
+.month-container {
+  width: 218px;
+  float: left;
+  min-height: 260px;
+}
+.month-body {
+  padding: 10px 10px;
+  text-align: center;
+
+  span {
+    display: inline-block;
+    width: 28px;
+    line-height: 28px;
+    height: 28px;
+    text-align: center;
+
+    &.dayOfWeekLabel {
+      font-weight: bold;
+    }
+    &.day-cell {
+      cursor: pointer;
+
+      &:hover {
+        background-color: #eeeeee;
+      }
+
+      &.active:hover,
+      &.active {
+        background: $primary;
+        border: 1px solid $primary;
+        color: white;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/holidays/index.js b/src/holidays/index.js
index 14e09fc..baf421d 100644
--- a/src/holidays/index.js
+++ b/src/holidays/index.js
@@ -1,12 +1,5 @@
-
-// TODO (maybe): fetch data via API rather than stored on disk
-// https://www.hebcal.com/home/195/jewish-calendar-rest-api
-// http://www.hebcal.com/hebcal/?v=1&cfg=json&maj=on&min=on&mod=on&nx=off&year=now&month=x&ss=off&mf=on&c=off&geo=off&m=0&s=off&D=on
-import data from './2018.json';
 import parse from 'date-fns/parse';
 
-// var  data = fetch('http://www.hebcal.com/hebcal/?v=1&cfg=json&maj=on&min=on&mod=on&nx=off&year=now&month=x&ss=off&mf=on&c=off&geo=off&m=0&s=off&D=on');
-
 function organize(data) {
   let hebdates = data
     .items
@@ -30,7 +23,7 @@ function organize(data) {
 }
 function sortByMonth(holidays) {
   let holidaysByMonth = {};
-  let months = [
+  const months = [
     'January', 'February', 'March', 'April', 'May', 'June',
     'July', 'August', 'September', 'October', 'November', 'December'
   ];
@@ -43,7 +36,9 @@ function sortByMonth(holidays) {
 
 
 export default function(year) {
-  var url = 'https://www.hebcal.com/hebcal/?v=1&cfg=json&maj=on&min=on&mod=on&nx=off&year='+year+'&month=x&ss=off&mf=on&c=off&geo=off&m=0&s=off&D=on';
+  // TODO: Pull hebcal API access into a separate module with a clear API
+  // https://www.hebcal.com/home/195/jewish-calendar-rest-api
+  const url = 'https://www.hebcal.com/hebcal/?v=1&cfg=json&maj=on&min=on&mod=on&nx=off&year='+year+'&month=x&ss=off&mf=on&c=off&geo=off&m=0&s=off&D=on';
   return fetch(url)
     .then(response => response.json())
     .then(data => {
diff --git a/src/main.js b/src/main.js
index 57f3d36..861de67 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,8 +1,6 @@
 import Vue from 'vue'
 import BootstrapVue from "bootstrap-vue"
 import App from './App.vue'
-import "bootstrap/dist/css/bootstrap.min.css"
-import "bootstrap-vue/dist/bootstrap-vue.css"
 
 Vue.use(BootstrapVue)
 
diff --git a/yarn.lock b/yarn.lock
index cb5b2ed..ab263f8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3741,6 +3741,11 @@ mixin-object@^2.0.1:
   dependencies:
     minimist "^1.2.5"
 
+moment@^2.22.2:
+  version "2.29.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
+  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"