diff --git a/backend/src/appointment/controller/calendar.py b/backend/src/appointment/controller/calendar.py
index 645ae678f..41114a619 100644
--- a/backend/src/appointment/controller/calendar.py
+++ b/backend/src/appointment/controller/calendar.py
@@ -1,330 +1,334 @@
-"""Module: caldav
-
-Handle connection to a CalDAV server.
-"""
-import json
-import logging
-from caldav import DAVClient
-from google.oauth2.credentials import Credentials
-from icalendar import Calendar, Event, vCalAddress, vText
-from datetime import datetime, timedelta, timezone
-from dateutil.parser import parse
-
-from .google_client import GoogleClient
-from ..database import schemas
-from ..database.models import CalendarProvider
-from ..controller.mailer import Attachment, InvitationMail
-
-
-class GoogleConnector:
-    """Generic interface for Google Calendar REST API. This should match CaldavConnector (except for the constructor)"""
-
-    def __init__(
-        self,
-        db,
-        google_client: GoogleClient,
-        calendar_id,
-        subscriber_id,
-        google_tkn: str = None,
-    ):
-        # store credentials of remote location
-        self.db = db
-        self.google_client = google_client
-        self.provider = CalendarProvider.google
-        self.calendar_id = calendar_id
-        self.subscriber_id = subscriber_id
-        # Create the creds class from our token (this requires a refresh token!!)
-        self.google_token = Credentials.from_authorized_user_info(json.loads(google_tkn), self.google_client.SCOPES)
-
-    def sync_calendars(self):
-        """Sync our google calendars"""
-
-        # We only support google right now!
-        self.google_client.sync_calendars(db=self.db, subscriber_id=self.subscriber_id, token=self.google_token)
-
-    def list_calendars(self):
-        """find all calendars on the remote server"""
-        calendars = []
-        remote_calendars = self.google_client.list_calendars(self.google_token)
-        for c in remote_calendars:
-            calendars.append(
-                schemas.CalendarConnectionOut(
-                    title=c.summary,
-                    url=str(c.id),
-                    user=c.id,
-                )
-            )
-
-        return calendars
-
-    def list_events(self, start, end):
-        """find all events in given date range on the remote server"""
-        time_min = datetime.strptime(start, "%Y-%m-%d").isoformat() + "Z"
-        time_max = datetime.strptime(end, "%Y-%m-%d").isoformat() + "Z"
-
-        # We're storing google cal id in user...for now.
-        remote_events = self.google_client.list_events(self.calendar_id, time_min, time_max, self.google_token)
-
-        events = []
-        for event in remote_events:
-            status = event.get("status").lower()
-
-            # Ignore cancelled events
-            if status == "cancelled":
-                continue
-
-            # Mark tentative events
-            attendees = event.get("attendees") or []
-            tentative = any(
-                (attendee.get("self") and attendee.get("responseStatus") == "tentative") for attendee in attendees
-            )
-
-            summary = event.get("summary", "Title not found!")
-            description = event.get("description", "")
-
-            all_day = "date" in event.get("start")
-
-            start = event.get("start")["date"] if all_day else event.get("start")["dateTime"]
-            end = event.get("end")["date"] if all_day else event.get("end")["dateTime"]
-
-            events.append(
-                schemas.Event(
-                    title=summary,
-                    start=start,
-                    end=end,
-                    all_day=all_day,
-                    tentative=tentative,
-                    description=description,
-                )
-            )
-
-        return events
-
-    def create_event(
-        self,
-        event: schemas.Event,
-        attendee: schemas.AttendeeBase,
-        organizer: schemas.Subscriber,
-    ):
-        """add a new event to the connected calendar"""
-
-        description = [event.description]
-
-        # Place url and phone in desc if available:
-        if event.location.url:
-            description.append(f"Join online at: {event.location.url}")
-
-        if event.location.phone:
-            description.append(f"Join by phone: {event.location.phone}")
-
-        body = {
-            "summary": event.title,
-            "location": event.location.name,
-            "description": "\n".join(description),
-            "start": {"dateTime": event.start},
-            "end": {"dateTime": event.end},
-            "attendees": [
-                {"displayName": organizer.name, "email": organizer.email},
-                {"displayName": attendee.name, "email": attendee.email},
-            ],
-        }
-        self.google_client.create_event(calendar_id=self.calendar_id, body=body, token=self.google_token)
-        return event
-
-    def delete_events(self, start):
-        """delete all events in given date range from the server"""
-        # Not used?
-        pass
-
-
-class CalDavConnector:
-    def __init__(self, url: str, user: str, password: str):
-        # store credentials of remote location
-        self.provider = CalendarProvider.caldav
-        self.url = url
-        self.user = user
-        self.password = password
-        # connect to CalDAV server
-        self.client = DAVClient(url=url, username=user, password=password)
-
-    def sync_calendars(self):
-        pass
-
-    def list_calendars(self):
-        """find all calendars on the remote server"""
-        calendars = []
-        principal = self.client.principal()
-        for c in principal.calendars():
-            calendars.append(
-                schemas.CalendarConnectionOut(
-                    title=c.name,
-                    url=str(c.url),
-                    user=self.user,
-                )
-            )
-        return calendars
-
-    def list_events(self, start, end):
-        """find all events in given date range on the remote server"""
-        events = []
-        calendar = self.client.calendar(url=self.url)
-        result = calendar.search(
-            start=datetime.strptime(start, "%Y-%m-%d"),
-            end=datetime.strptime(end, "%Y-%m-%d"),
-            event=True,
-            expand=True,
-        )
-        for e in result:
-            status = e.icalendar_component["status"].lower() if "status" in e.icalendar_component else ""
-
-            # Ignore cancelled events
-            if status == "cancelled":
-                continue
-
-            # Mark tentative events
-            tentative = status == "tentative"
-
-            events.append(
-                schemas.Event(
-                    title=str(e.vobject_instance.vevent.summary.value),
-                    start=str(e.vobject_instance.vevent.dtstart.value),
-                    end=str(e.vobject_instance.vevent.dtend.value),
-                    all_day=not isinstance(e.vobject_instance.vevent.dtstart.value, datetime),
-                    tentative=tentative,
-                    description=e.icalendar_component["description"] if "description" in e.icalendar_component else "",
-                )
-            )
-        return events
-
-    def create_event(
-        self,
-        event: schemas.Event,
-        attendee: schemas.AttendeeBase,
-        organizer: schemas.Subscriber,
-    ):
-        """add a new event to the connected calendar"""
-        calendar = self.client.calendar(url=self.url)
-        # save event
-        caldavEvent = calendar.save_event(
-            dtstart=datetime.fromisoformat(event.start),
-            dtend=datetime.fromisoformat(event.end),
-            summary=event.title,
-            # TODO: handle location
-            description=event.description,
-        )
-        # save attendee data
-        caldavEvent.add_attendee((organizer.name, organizer.email))
-        caldavEvent.add_attendee((attendee.name, attendee.email))
-        caldavEvent.save()
-        return event
-
-    def delete_events(self, start):
-        """delete all events in given date range from the server"""
-        calendar = self.client.calendar(url=self.url)
-        result = calendar.events()
-        count = 0
-        for e in result:
-            if str(e.vobject_instance.vevent.dtstart.value).startswith(start):
-                e.delete()
-                count += 1
-        return count
-
-
-class Tools:
-    def create_vevent(
-        self,
-        appointment: schemas.Appointment | schemas.AppointmentBase,
-        slot: schemas.Slot,
-        organizer: schemas.Subscriber,
-    ):
-        """create an event in ical format for .ics file creation"""
-        cal = Calendar()
-        cal.add("prodid", "-//Thunderbird Appointment//tba.dk//")
-        cal.add("version", "2.0")
-        org = vCalAddress("MAILTO:" + organizer.email)
-        org.params["cn"] = vText(organizer.name)
-        org.params["role"] = vText("CHAIR")
-        event = Event()
-        event.add("summary", appointment.title)
-        event.add("dtstart", slot.start.replace(tzinfo=timezone.utc))
-        event.add(
-            "dtend",
-            slot.start.replace(tzinfo=timezone.utc) + timedelta(minutes=slot.duration),
-        )
-        event.add("dtstamp", datetime.utcnow())
-        event["description"] = appointment.details
-        event["organizer"] = org
-        cal.add_component(event)
-        return cal.to_ical()
-
-    def send_vevent(
-        self,
-        appointment: schemas.Appointment | schemas.AppointmentBase,
-        slot: schemas.Slot,
-        organizer: schemas.Subscriber,
-        attendee: schemas.AttendeeBase,
-    ):
-        """send a booking confirmation email to attendee with .ics file attached"""
-        invite = Attachment(
-            mime=("text", "calendar"),
-            filename="invite.ics",
-            data=self.create_vevent(appointment, slot, organizer),
-        )
-        mail = InvitationMail(sender=organizer.email, to=attendee.email, attachments=[invite])
-        mail.send()
-
-    def available_slots_from_schedule(s: schemas.ScheduleBase):
-        """This helper calculates a list of slots according to the given schedule."""
-        now = datetime.utcnow()
-        earliest_start = now + timedelta(minutes=s.earliest_booking)
-        farthest_end = now + timedelta(minutes=s.farthest_booking)
-        start = datetime.combine(s.start_date, s.start_time)
-        end = min([datetime.combine(s.end_date, s.end_time), farthest_end]) if s.end_date else farthest_end
-        slots = []
-        # set the first date to an allowed weekday
-        weekdays = s.weekdays if type(s.weekdays) == list else json.loads(s.weekdays)
-        if not weekdays or len(weekdays) == 0:
-            weekdays = [1, 2, 3, 4, 5]
-        while start.isoweekday() not in weekdays:
-            start = start + timedelta(days=1)
-        # init date generation: pointer holds the current slot start datetime
-        pointer = start
-        counter = 0
-        # set fix event limit of 1000 for now for performance reasons. Can be removed later.
-        while pointer < end and counter < 1000:
-            counter += 1
-            if pointer >= earliest_start:
-                slots.append(schemas.SlotBase(start=pointer, duration=s.slot_duration))
-            next_start = pointer + timedelta(minutes=s.slot_duration)
-            # if the next slot still fits into the current day
-            if next_start.time() < s.end_time:
-                pointer = next_start
-            # if the next slot has to be on the next available day
-            else:
-                next_date = datetime.combine(pointer.date() + timedelta(days=1), s.start_time)
-                # check weekday and skip da if it isn't allowed
-                while next_date.isoweekday() not in weekdays:
-                    next_date = next_date + timedelta(days=1)
-                pointer = next_date
-        return slots
-
-    def events_set_difference(a_list: list[schemas.SlotBase], b_list: list[schemas.Event]):
-        """This helper removes all events from list A, which have a time collision with any event in list B
-        and returns all remaining elements from A as new list.
-        """
-        available_slots = []
-        for a in a_list:
-            a_start = a.start
-            a_end = a_start + timedelta(minutes=a.duration)
-            collision_found = False
-            for b in b_list:
-                b_start = parse(b.start)
-                b_end = parse(b.end)
-                # if there is an overlap of both date ranges, a collision was found
-                # see https://en.wikipedia.org/wiki/De_Morgan%27s_laws
-                if a_start.timestamp() < b_end.timestamp() and a_end.timestamp() > b_start.timestamp():
-                    collision_found = True
-                    break
-            if not collision_found:
-                available_slots.append(a)
-        return available_slots
+"""Module: caldav
+
+Handle connection to a CalDAV server.
+"""
+import json
+import logging
+from caldav import DAVClient
+from google.oauth2.credentials import Credentials
+from icalendar import Calendar, Event, vCalAddress, vText
+from datetime import datetime, timedelta, timezone
+from dateutil.parser import parse
+
+from .google_client import GoogleClient
+from ..database import schemas
+from ..database.models import CalendarProvider
+from ..controller.mailer import Attachment, InvitationMail
+
+
+class GoogleConnector:
+    """Generic interface for Google Calendar REST API.
+       This should match CaldavConnector (except for the constructor).
+    """
+
+    def __init__(
+        self,
+        db,
+        google_client: GoogleClient,
+        calendar_id,
+        subscriber_id,
+        google_tkn: str = None,
+    ):
+        # store credentials of remote location
+        self.db = db
+        self.google_client = google_client
+        self.provider = CalendarProvider.google
+        self.calendar_id = calendar_id
+        self.subscriber_id = subscriber_id
+        self.google_token = None
+        # Create the creds class from our token (requires a refresh token)
+        if google_tkn:
+            self.google_token = Credentials.from_authorized_user_info(json.loads(google_tkn), self.google_client.SCOPES)
+
+    def sync_calendars(self):
+        """Sync google calendars"""
+
+        # We only support google right now!
+        self.google_client.sync_calendars(db=self.db, subscriber_id=self.subscriber_id, token=self.google_token)
+
+    def list_calendars(self):
+        """find all calendars on the remote server"""
+        calendars = []
+        remote_calendars = self.google_client.list_calendars(self.google_token)
+        for c in remote_calendars:
+            calendars.append(
+                schemas.CalendarConnectionOut(
+                    title=c.summary,
+                    url=str(c.id),
+                    user=c.id,
+                )
+            )
+
+        return calendars
+
+    def list_events(self, start, end):
+        """find all events in given date range on the remote server"""
+        time_min = datetime.strptime(start, "%Y-%m-%d").isoformat() + "Z"
+        time_max = datetime.strptime(end, "%Y-%m-%d").isoformat() + "Z"
+
+        # We're storing google cal id in user...for now.
+        remote_events = self.google_client.list_events(self.calendar_id, time_min, time_max, self.google_token)
+
+        events = []
+        for event in remote_events:
+            status = event.get("status").lower()
+
+            # Ignore cancelled events
+            if status == "cancelled":
+                continue
+
+            # Mark tentative events
+            attendees = event.get("attendees") or []
+            tentative = any(
+                (attendee.get("self") and attendee.get("responseStatus") == "tentative") for attendee in attendees
+            )
+
+            summary = event.get("summary", "Title not found!")
+            description = event.get("description", "")
+
+            all_day = "date" in event.get("start")
+
+            start = event.get("start")["date"] if all_day else event.get("start")["dateTime"]
+            end = event.get("end")["date"] if all_day else event.get("end")["dateTime"]
+
+            events.append(
+                schemas.Event(
+                    title=summary,
+                    start=start,
+                    end=end,
+                    all_day=all_day,
+                    tentative=tentative,
+                    description=description,
+                )
+            )
+
+        return events
+
+    def create_event(
+        self,
+        event: schemas.Event,
+        attendee: schemas.AttendeeBase,
+        organizer: schemas.Subscriber,
+    ):
+        """add a new event to the connected calendar"""
+
+        description = [event.description]
+
+        # Place url and phone in desc if available:
+        if event.location.url:
+            description.append(f"Join online at: {event.location.url}")
+
+        if event.location.phone:
+            description.append(f"Join by phone: {event.location.phone}")
+
+        body = {
+            "summary": event.title,
+            "location": event.location.name,
+            "description": "\n".join(description),
+            "start": {"dateTime": event.start},
+            "end": {"dateTime": event.end},
+            "attendees": [
+                {"displayName": organizer.name, "email": organizer.email},
+                {"displayName": attendee.name, "email": attendee.email},
+            ],
+        }
+        self.google_client.create_event(calendar_id=self.calendar_id, body=body, token=self.google_token)
+        return event
+
+    def delete_events(self, start):
+        """delete all events in given date range from the server"""
+        # Not used?
+        pass
+
+
+class CalDavConnector:
+    def __init__(self, url: str, user: str, password: str):
+        # store credentials of remote location
+        self.provider = CalendarProvider.caldav
+        self.url = url
+        self.user = user
+        self.password = password
+        # connect to CalDAV server
+        self.client = DAVClient(url=url, username=user, password=password)
+
+    def sync_calendars(self):
+        pass
+
+    def list_calendars(self):
+        """find all calendars on the remote server"""
+        calendars = []
+        principal = self.client.principal()
+        for c in principal.calendars():
+            calendars.append(
+                schemas.CalendarConnectionOut(
+                    title=c.name,
+                    url=str(c.url),
+                    user=self.user,
+                )
+            )
+        return calendars
+
+    def list_events(self, start, end):
+        """find all events in given date range on the remote server"""
+        events = []
+        calendar = self.client.calendar(url=self.url)
+        result = calendar.search(
+            start=datetime.strptime(start, "%Y-%m-%d"),
+            end=datetime.strptime(end, "%Y-%m-%d"),
+            event=True,
+            expand=True,
+        )
+        for e in result:
+            status = e.icalendar_component["status"].lower() if "status" in e.icalendar_component else ""
+
+            # Ignore cancelled events
+            if status == "cancelled":
+                continue
+
+            # Mark tentative events
+            tentative = status == "tentative"
+
+            events.append(
+                schemas.Event(
+                    title=str(e.vobject_instance.vevent.summary.value),
+                    start=str(e.vobject_instance.vevent.dtstart.value),
+                    end=str(e.vobject_instance.vevent.dtend.value),
+                    all_day=not isinstance(e.vobject_instance.vevent.dtstart.value, datetime),
+                    tentative=tentative,
+                    description=e.icalendar_component["description"] if "description" in e.icalendar_component else "",
+                )
+            )
+        return events
+
+    def create_event(
+        self,
+        event: schemas.Event,
+        attendee: schemas.AttendeeBase,
+        organizer: schemas.Subscriber,
+    ):
+        """add a new event to the connected calendar"""
+        calendar = self.client.calendar(url=self.url)
+        # save event
+        caldavEvent = calendar.save_event(
+            dtstart=datetime.fromisoformat(event.start),
+            dtend=datetime.fromisoformat(event.end),
+            summary=event.title,
+            # TODO: handle location
+            description=event.description,
+        )
+        # save attendee data
+        caldavEvent.add_attendee((organizer.name, organizer.email))
+        caldavEvent.add_attendee((attendee.name, attendee.email))
+        caldavEvent.save()
+        return event
+
+    def delete_events(self, start):
+        """delete all events in given date range from the server"""
+        calendar = self.client.calendar(url=self.url)
+        result = calendar.events()
+        count = 0
+        for e in result:
+            if str(e.vobject_instance.vevent.dtstart.value).startswith(start):
+                e.delete()
+                count += 1
+        return count
+
+
+class Tools:
+    def create_vevent(
+        self,
+        appointment: schemas.Appointment | schemas.AppointmentBase,
+        slot: schemas.Slot,
+        organizer: schemas.Subscriber,
+    ):
+        """create an event in ical format for .ics file creation"""
+        cal = Calendar()
+        cal.add("prodid", "-//Thunderbird Appointment//tba.dk//")
+        cal.add("version", "2.0")
+        org = vCalAddress("MAILTO:" + organizer.email)
+        org.params["cn"] = vText(organizer.name)
+        org.params["role"] = vText("CHAIR")
+        event = Event()
+        event.add("summary", appointment.title)
+        event.add("dtstart", slot.start.replace(tzinfo=timezone.utc))
+        event.add(
+            "dtend",
+            slot.start.replace(tzinfo=timezone.utc) + timedelta(minutes=slot.duration),
+        )
+        event.add("dtstamp", datetime.utcnow())
+        event["description"] = appointment.details
+        event["organizer"] = org
+        cal.add_component(event)
+        return cal.to_ical()
+
+    def send_vevent(
+        self,
+        appointment: schemas.Appointment | schemas.AppointmentBase,
+        slot: schemas.Slot,
+        organizer: schemas.Subscriber,
+        attendee: schemas.AttendeeBase,
+    ):
+        """send a booking confirmation email to attendee with .ics file attached"""
+        invite = Attachment(
+            mime=("text", "calendar"),
+            filename="invite.ics",
+            data=self.create_vevent(appointment, slot, organizer),
+        )
+        mail = InvitationMail(sender=organizer.email, to=attendee.email, attachments=[invite])
+        mail.send()
+
+    def available_slots_from_schedule(s: schemas.ScheduleBase):
+        """This helper calculates a list of slots according to the given schedule."""
+        now = datetime.utcnow()
+        earliest_start = now + timedelta(minutes=s.earliest_booking)
+        farthest_end = now + timedelta(minutes=s.farthest_booking)
+        start = datetime.combine(s.start_date, s.start_time)
+        end = min([datetime.combine(s.end_date, s.end_time), farthest_end]) if s.end_date else farthest_end
+        slots = []
+        # set the first date to an allowed weekday
+        weekdays = s.weekdays if type(s.weekdays) == list else json.loads(s.weekdays)
+        if not weekdays or len(weekdays) == 0:
+            weekdays = [1, 2, 3, 4, 5]
+        while start.isoweekday() not in weekdays:
+            start = start + timedelta(days=1)
+        # init date generation: pointer holds the current slot start datetime
+        pointer = start
+        counter = 0
+        # set fix event limit of 1000 for now for performance reasons. Can be removed later.
+        while pointer < end and counter < 1000:
+            counter += 1
+            if pointer >= earliest_start:
+                slots.append(schemas.SlotBase(start=pointer, duration=s.slot_duration))
+            next_start = pointer + timedelta(minutes=s.slot_duration)
+            # if the next slot still fits into the current day
+            if next_start.time() < s.end_time:
+                pointer = next_start
+            # if the next slot has to be on the next available day
+            else:
+                next_date = datetime.combine(pointer.date() + timedelta(days=1), s.start_time)
+                # check weekday and skip da if it isn't allowed
+                while next_date.isoweekday() not in weekdays:
+                    next_date = next_date + timedelta(days=1)
+                pointer = next_date
+        return slots
+
+    def events_set_difference(a_list: list[schemas.SlotBase], b_list: list[schemas.Event]):
+        """This helper removes all events from list A, which have a time collision with any event in list B
+        and returns all remaining elements from A as new list.
+        """
+        available_slots = []
+        for a in a_list:
+            a_start = a.start
+            a_end = a_start + timedelta(minutes=a.duration)
+            collision_found = False
+            for b in b_list:
+                b_start = parse(b.start)
+                b_end = parse(b.end)
+                # if there is an overlap of both date ranges, a collision was found
+                # see https://en.wikipedia.org/wiki/De_Morgan%27s_laws
+                if a_start.timestamp() < b_end.timestamp() and a_end.timestamp() > b_start.timestamp():
+                    collision_found = True
+                    break
+            if not collision_found:
+                available_slots.append(a)
+        return available_slots
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index f996726de..21dc5394b 100755
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -2,14 +2,14 @@
   <!-- authenticated subscriber content -->
   <template v-if="isAuthenticated">
     <site-notification
-      v-if="siteNotificationStore.display"
+      v-if="siteNotificationStore.isVisible"
       :title="siteNotificationStore.title"
       :action-url="siteNotificationStore.actionUrl"
     >
       {{ siteNotificationStore.message }}
     </site-notification>
     <nav-bar :nav-items="navItems" />
-    <main class="mx-4 pt-24 lg:mx-8 min-h-full">
+    <main class="mx-4 pt-24 lg:mx-8 min-h-full pb-24">
       <router-view
         :calendars="calendars"
         :appointments="appointments"
@@ -20,7 +20,7 @@
   <!-- for home page and booking page -->
   <template v-else-if="routeIsPublic">
     <title-bar />
-    <main class="mx-4 pt-24 lg:mx-8 min-h-full">
+    <main class="mx-4 pt-24 lg:mx-8 min-h-full pb-24">
       <router-view />
     </main>
     <footer-bar />
@@ -40,7 +40,7 @@ import { useRoute } from "vue-router";
 import NavBar from "@/components/NavBar";
 import TitleBar from "@/components/TitleBar";
 import SiteNotification from "@/elements/SiteNotification";
-import { siteNotificationStore } from "@/stores/alert-store";
+import { useSiteNotificationStore } from "@/stores/alert-store";
 
 // stores
 import { useUserStore } from '@/stores/user-store';
@@ -51,6 +51,7 @@ const currentUser = useUserStore(); // data: { username, email, name, level, tim
 const apiUrl = inject("apiUrl");
 const dj = inject("dayjs");
 const route = useRoute();
+const siteNotificationStore = useSiteNotificationStore();
 
 // handle auth and fetch
 const auth = useAuth0();
@@ -74,24 +75,23 @@ const call = createFetch({
     async onFetchError({ data, response, error }) {
       // Catch any google refresh error that may occur
       if (
-        data?.detail?.error === "google_refresh_error" &&
-        siteNotificationStore.value.id !== "google_refresh_error"
+        data?.detail?.error === 'google_refresh_error' &&
+        !siteNotificationStore.isSameNotification('google_refresh_error')
       ) {
         // Ensure other async calls don't reach here
-        siteNotificationStore.value.id = data.detail.error;
+        siteNotificationStore.lock(data.detail.error);
 
         // Retrieve the google auth url, and if that fails send them to calendar settings!
         const { data: urlData, error: urlError } = await call('google/auth').get();
         const url = urlError.value ? '/settings/calendar' : urlData.value.slice(1, -1);
 
         // Update our site notification store with the error details
-        siteNotificationStore.value = {
-          id: data.detail.error,
-          display: true,
-          actionUrl: url,
-          title: "Action needed!",
-          message: data.detail?.message || "Please re-connect with Google",
-        };
+        siteNotificationStore.show(
+          data.detail.error,
+          'Action needed!',
+          data.detail?.message || 'Please re-connect with Google',
+          url,
+        );
       }
 
       // Pass the error along
@@ -124,10 +124,13 @@ const routeIsPublic = computed(
 
 // check login state of current user first
 const checkLogin = async () => {
-  console.log(auth.user.value, currentUser.data);
   if (auth.isAuthenticated.value) {
     if (currentUser.exists() && currentUser.data.email === auth.user.value.email) {
       // avoid calling the backend unnecessarily
+      // TODO: There seems to be an issue with different session durations.
+      //       Somehow the frontend `auth` is still valid, but the backend
+      //       403s calls to the API. Might be Auth0. Check again,
+      //       as soon as Auth0 got replaced by Mozilla accounts.
       return;
     }
     // call backend to create user if they do not exist in database
diff --git a/frontend/src/components/CalendarManagement.vue b/frontend/src/components/CalendarManagement.vue
index 5d0b955e1..67aed06e4 100644
--- a/frontend/src/components/CalendarManagement.vue
+++ b/frontend/src/components/CalendarManagement.vue
@@ -2,22 +2,22 @@
   <div class="flex max-w-2xl">
     <div class="text-xl">{{ title }}</div>
     <div class="inline-flex mx-auto mr-0" v-if="type === calendarManagementType.connect">
-      <button
-        class="bg-transparent disabled:scale-100 disabled:shadow-none disabled:opacity-50"
+      <secondary-button
+        class="text-sm !text-teal-500 disabled:scale-100 disabled:shadow-none disabled:opacity-50"
         :disabled="loading"
         @click="emit('sync')"
       >
         <span class="inline-block mr-2">
           {{ t('label.syncCalendars') }}
         </span>
-        <icon-refresh class="inline-block h-5 w-5 stroke-2 stroke-white fill-transparent"></icon-refresh>
-      </button>
+        <icon-refresh class="inline-block h-4 w-4 stroke-2" :class="{ 'animate-spin': loading }" />
+      </secondary-button>
     </div>
   </div>
   <div v-if="filteredCalendars?.length" class="pl-6 flex flex-col gap-2 max-w-2xl">
     <div v-for="cal in filteredCalendars" :key="cal.id" class="flex gap-2 items-center">
       <div class="flex-center w-6 h-6 rounded-lg" :style="{ backgroundColor: cal.color ?? '#38bdf8' }">
-        <icon-calendar class="w-4 h-4 fill-transparent stroke-2 stroke-white"/>
+        <icon-calendar class="w-4 h-4 stroke-2 stroke-white"/>
       </div>
       <span class="calendar-title">
       {{ cal.title }}
@@ -31,7 +31,7 @@
             bg-teal-500 text-white disabled:scale-100 disabled:shadow-none disabled:opacity-50
           "
       >
-        <icon-arrow-right class="h-3 w-3 stroke-2 stroke-white fill-transparent"/>
+        <icon-arrow-right class="h-3 w-3 stroke-3"/>
         {{ t('label.connectCalendar') }}
       </button>
       <button
@@ -43,7 +43,7 @@
             bg-teal-500 text-white disabled:scale-100 disabled:shadow-none disabled:opacity-50
           "
       >
-        <icon-pencil class="h-3 w-3 stroke-2 stroke-white fill-transparent"/>
+        <icon-pencil class="h-3 w-3 stroke-3"/>
         {{ t('label.editCalendar') }}
       </button>
       <button
@@ -52,19 +52,18 @@
         :disabled="loading"
         @click="emit('remove', cal.id)"
       >
-        <icon-x class="h-5 w-5 stroke-2 stroke-red-500 fill-transparent"/>
+        <icon-x class="h-5 w-5 stroke-2 stroke-red-500"/>
       </button>
     </div>
   </div>
 </template>
 
 <script setup>
-import {
-  IconArrowRight, IconCalendar, IconPencil, IconX, IconRefresh,
-} from '@tabler/icons-vue';
 import { calendarManagementType } from '@/definitions';
 import { computed } from 'vue';
+import { IconArrowRight, IconCalendar, IconPencil, IconX, IconRefresh } from '@tabler/icons-vue';
 import { useI18n } from 'vue-i18n';
+import SecondaryButton from '@/elements/SecondaryButton';
 
 const { t } = useI18n({ useScope: 'global' });
 const emit = defineEmits(['modify', 'remove', 'sync']);
diff --git a/frontend/src/components/FooterBar.vue b/frontend/src/components/FooterBar.vue
index 2a8d2ac4e..486bf08e4 100644
--- a/frontend/src/components/FooterBar.vue
+++ b/frontend/src/components/FooterBar.vue
@@ -1,24 +1,22 @@
 <template>
-  <footer
-    class="
-      relative z-50 h-16 w-full px-4 shadow-lg border-t flex justify-between mt-2
-      bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600
-    "
-  >
+  <footer class="
+    relative z-50 h-16 w-full -mt-16 px-4 shadow-lg border-t flex justify-between
+    bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600
+  ">
       <ul class="flex justify-center gap-8 w-full">
-        <li
-          class="flex text-base border-t-4 border-t-transparent transition-all ease-in-out
-                 text-gray-600 dark:text-gray-300 hover:border-t-gray-200 dark:hover:border-t-gray-400"
-        >
-          <router-link class="flex justify-center min-w-[120px] items-center" :to="{ name: 'privacy' }">
+        <li class="
+          flex text-base border-t-4 border-t-transparent transition-all ease-in-out
+          text-gray-600 dark:text-gray-300 hover:border-t-gray-200 dark:hover:border-t-gray-400
+        ">
+          <router-link class="flex-center min-w-[120px]" :to="{ name: 'privacy' }" target="_blank">
             Privacy
           </router-link>
         </li>
-        <li
-          class="flex text-base border-t-4 border-t-transparent transition-all ease-in-out
-                 text-gray-600 dark:text-gray-300 hover:border-t-gray-200 dark:hover:border-t-gray-400"
-        >
-          <router-link class="flex justify-center min-w-[120px] items-center" :to="{ name: 'terms' }">
+        <li class="
+          flex text-base border-t-4 border-t-transparent transition-all ease-in-out
+          text-gray-600 dark:text-gray-300 hover:border-t-gray-200 dark:hover:border-t-gray-400
+        ">
+          <router-link class="flex-center min-w-[120px]" :to="{ name: 'terms' }" target="_blank">
             Legal
           </router-link>
         </li>
diff --git a/frontend/src/components/SettingsCalendar.vue b/frontend/src/components/SettingsCalendar.vue
index b3f36889b..e2c96ef07 100644
--- a/frontend/src/components/SettingsCalendar.vue
+++ b/frontend/src/components/SettingsCalendar.vue
@@ -5,16 +5,25 @@
     <alert-box title="Calendar Connect Error" v-if="calendarConnectError">{{calendarConnectError}}</alert-box>
 
     <!-- list of possible calendars to connect -->
-    <CalendarManagement
-        :title="t('heading.calendarsUnconnected')" :type="calendarManagementType.connect" :calendars="calendars"
-        :loading="loading" @sync="syncCalendars" @modify="connectCalendar"
-    ></CalendarManagement>
+    <calendar-management
+      :title="t('heading.calendarsUnconnected')"
+      :type="calendarManagementType.connect"
+      :calendars="calendars"
+      :loading="loading"
+      @sync="syncCalendars"
+      @modify="connectCalendar"
+    />
 
     <!-- list of calendar connections -->
-    <CalendarManagement
-        :title="t('heading.calendarsConnected')" :type="calendarManagementType.edit" :calendars="calendars"
-        :loading="loading" @remove="deleteCalendar" @modify="editCalendar">
-    </CalendarManagement>
+    <calendar-management
+      :title="t('heading.calendarsConnected')"
+      :type="calendarManagementType.edit"
+      :calendars="calendars"
+      :loading="loading"
+      @remove="deleteCalendar"
+      @modify="editCalendar"
+    />
+
     <div class="flex gap-4">
       <secondary-button
         :label="t('label.addCalendar', { provider: t('label.google') })"
@@ -180,23 +189,17 @@
 </template>
 
 <script setup>
-import {
-  ref, reactive, inject, onMounted, computed,
-} from 'vue';
+import { calendarManagementType } from '@/definitions';
+import { IconArrowRight } from '@tabler/icons-vue';
+import { ref, reactive, inject, onMounted, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import SecondaryButton from '@/elements/SecondaryButton';
-import PrimaryButton from '@/elements/PrimaryButton';
-
-// icons
-import {
-  IconArrowRight,
-} from '@tabler/icons-vue';
 import { useRoute, useRouter } from 'vue-router';
 import AlertBox from '@/elements/AlertBox';
 import CalendarManagement from '@/components/CalendarManagement.vue';
-import { calendarManagementType } from '@/definitions';
 import GoogleSignInBtn from '@/assets/img/google/1x/btn_google_signin_light_normal_web.png';
 import GoogleSignInBtn2x from '@/assets/img/google/2x/btn_google_signin_light_normal_web@2x.png';
+import PrimaryButton from '@/elements/PrimaryButton';
+import SecondaryButton from '@/elements/SecondaryButton';
 
 // component constants
 const { t } = useI18n({ useScope: 'global' });
diff --git a/frontend/src/elements/PrimaryButton.vue b/frontend/src/elements/PrimaryButton.vue
index 62d52f46b..1f3edd685 100644
--- a/frontend/src/elements/PrimaryButton.vue
+++ b/frontend/src/elements/PrimaryButton.vue
@@ -21,7 +21,12 @@
       v-if="copy && copied"
       class="h-6 w-6 stroke-2 stroke-current fill-transparent"
     />
-    {{ label }}
+    <template v-if="label">
+      {{ label }}
+    </template>
+    <template v-else>
+      <slot></slot>
+    </template>
   </button>
 </template>
 
diff --git a/frontend/src/elements/SecondaryButton.vue b/frontend/src/elements/SecondaryButton.vue
index b60ccd557..4635f4aa9 100644
--- a/frontend/src/elements/SecondaryButton.vue
+++ b/frontend/src/elements/SecondaryButton.vue
@@ -21,7 +21,12 @@
       v-if="copy && copied"
       class="h-6 w-6 stroke-2 stroke-current fill-transparent"
     />
-    {{ label }}
+    <template v-if="label">
+      {{ label }}
+    </template>
+    <template v-else>
+      <slot></slot>
+    </template>
   </button>
 </template>
 
diff --git a/frontend/src/elements/SiteNotification.vue b/frontend/src/elements/SiteNotification.vue
index ace62c35a..f3cc35ed6 100644
--- a/frontend/src/elements/SiteNotification.vue
+++ b/frontend/src/elements/SiteNotification.vue
@@ -2,7 +2,7 @@
   <a :href="actionUrl">
     <div
       class="
-        fixed left-1/2 -translate-x-1/2 my-2.5 p-2 leading-none lg:rounded-full
+        z-[999] fixed left-1/2 -translate-x-1/2 my-2.5 p-2 leading-none lg:rounded-full
         flex lg:inline-flex items-center shadow-md dark:shadow-lg
         bg-rose-600 dark:bg-rose-900 text-white shadow-black/30"
       role="alert"
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index d50fa1ecc..082e66e09 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -37,8 +37,8 @@
   "info": {
     "bookedPleaseCheckEmail": "Das Event wurde bereits gebucht, bitte überprüfe deinen Posteingang um das Event in deinen Kalender einzutragen.",
     "bookingLinkHasAlreadyBeenUsed": "Dieser Buchungslink wurde offenbar schon genutzt.",
-    "bookingSuccessful": "Die Buchung war erfolgreich!",
-    "bookingSuccessfullyRequested": "Die Buchung wurde erfolgreich angefragt!",
+    "bookingSuccessful": "Erfolgreich gebucht!",
+    "bookingSuccessfullyRequested": "Buchung erfolgreich angefragt!",
     "invitationWasSent": "Eine Einladung wurde an deine E-Mail-Adresse gesandt.",
     "noPendingAppointmentsInList": "Hier gibt es aktuell keine ausstehenden Termine."
   },
@@ -73,7 +73,7 @@
     "attendees": "Teilnehmer",
     "availabilityDay": "Verfügbarer Tag",
     "availableDays": "Verfügbare Tage",
-    "bookEvent": "Event buchen",
+    "bookEvent": "Buchen",
     "booked": "Gebucht",
     "bookingLink": "Buchungslink",
     "bookingSettings": "Buchungseinstellungen",
@@ -191,9 +191,9 @@
     "accountDataNotice": "Lade all Deine Daten von Thunderbird Appointment herunter.",
     "accountDeletionFinalWarning": "Warnung: Die Löschung des Benutzerkontos ist dauerhaft! Du wirst all Deine Daten von Thunderbird Appointment verlieren. Deine verbundenen Kalender bleiben unverändert.",
     "accountDeletionWarning": "Achtung: Die Löschung des Benutzerkontos ist dauerhaft! Du wirst all Deine Daten von Thunderbird Appointment verlieren. Deine verbundenen Kalender bleiben unverändert. Bestätige die Löschung mit deinen Login-Daten.",
-    "chooseDayTime": "Wähle eine Zeit an einem Tag aus:",
+    "chooseDateAndTime": "Wähle einen Tag und eine Zeit für ein Treffen:",
     "defineDaysAndTimeSlots": "Definiere Tage und Zeitfenster, damit Teilnehmer die Zeit des Events auswählen können…",
-    "disclaimerGABooking": "Jede GV-Buchung muss vom Eigentümer der GV bestätigt werden.",
+    "disclaimerGABooking": "Bitte beachten: Der Eigentümer muss die Buchung bestätigen.",
     "googlePermissionCalendarName": "Anzeigen und Herunterladen aller Kalender des Google-Kontos",
     "googlePermissionCalendarReason": "Thunderbird Appointment benötigt diese Berechtigung, um eine Liste von Kalendern anzuzeigen, die verbunden werden können.",
     "googlePermissionDisclaimer": "Thunderbird Appointment benötigt die folgenden Berechtigungen von Google, um korrekt zu funktionieren",
@@ -204,7 +204,7 @@
     "homepageGreetingIntro": "Herzlich Willkommen zu Thunderbird Appointment!",
     "homepageGreetingUnauthenticated": "Wir befinden uns derzeit in der Testphase und hoffen, dass wir sie die Anwendung bald produktiv nutzen können. Um sich an den Tests zu beteiligen, bitte anmelden.",
     "invitationSentToAddress": "Eine Einladung für dieses Event wurde dir an {address} geschickt",
-    "nameIsInvitingYou": "{name} bittet dich, eine Zeit auszuwählen",
+    "nameIsInvitingYou": "{name} lädt dich ein",
     "recipientsCanScheduleBetween": "Empfänger können einen Termin zwischen {earliest} und {farthest} ab dem aktuellen Zeitpunkt wählen. ",
     "refreshLinkNotice": "This will refresh your short link. Please note that any old short links will no longer work.",
     "titleIsReadyForBookings": "{title} ist für Buchungen bereit",
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index ce087c476..f7b93a674 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -37,8 +37,8 @@
   "info": {
     "bookedPleaseCheckEmail": "This event has been booked, please check your email to add it to you calendar.",
     "bookingLinkHasAlreadyBeenUsed": "It seems that this booking link has already been used.",
-    "bookingSuccessful": "The booking was successful!",
-    "bookingSuccessfullyRequested": "The booking was successfully requested!",
+    "bookingSuccessful": "Booking successful!",
+    "bookingSuccessfullyRequested": "Booking successfully requested!",
     "invitationWasSent": "An invitation was sent to your email.",
     "noPendingAppointmentsInList": "There are currently no pending appointments in this list."
   },
@@ -73,7 +73,7 @@
     "attendees": "Attendees",
     "availabilityDay": "Availability Day",
     "availableDays": "Available Days",
-    "bookEvent": "Book event",
+    "bookEvent": "Book",
     "booked": "Booked",
     "bookingLink": "Booking Link",
     "bookingSettings": "Booking Settings",
@@ -191,9 +191,9 @@
     "accountDataNotice": "Download all of your data from Thunderbird Appointment.",
     "accountDeletionFinalWarning": "Last chance! Deleting your account is permanent, and you all of your saved data on Thunderbird Appointment will be removed. Your calendars will remain unchanged.",
     "accountDeletionWarning": "Warning, deleting your account is permanent! You will lose all saved data on Thunderbird Appointment. Your calendars will remain unchanged. There is a second confirmation after you login.",
-    "chooseDayTime": "Choose the day and time:",
+    "chooseDateAndTime": "Choose a date and time to meet:",
     "defineDaysAndTimeSlots": "Define days and time slots to allow users to select the event time…",
-    "disclaimerGABooking": "Disclaimer: any GA booking done has to be confirmed by the owner of the GA",
+    "disclaimerGABooking": "Please note: The calendar owner will confirm your booking.",
     "googlePermissionCalendarName": "See and download any calendar you can access using your Google Calendar",
     "googlePermissionCalendarReason": "Thunderbird Appointment requires this permission in order to display a list of calendars that you can connect with.",
     "googlePermissionDisclaimer": "Thunderbird Appointment requires the following permissions from Google Calendar in order to function correctly",
@@ -204,7 +204,7 @@
     "homepageGreetingIntro": "Welcome to Thunderbird Appointment!",
     "homepageGreetingUnauthenticated": "We're currently testing and hope to be available to use soon. If you're taking part in the testing, please log in.",
     "invitationSentToAddress": "An invitation for this event has been emailed to you at {address}",
-    "nameIsInvitingYou": "{name} is inviting you to choose a date",
+    "nameIsInvitingYou": "{name} is inviting you",
     "recipientsCanScheduleBetween": "Recipients can schedule an appointment between {earliest} and {farthest} ahead of time. ",
     "refreshLinkNotice": "This will refresh your short link. Please note that any old short links will no longer work.",
     "titleIsReadyForBookings": "{title} is ready for bookings",
diff --git a/frontend/src/stores/alert-store.js b/frontend/src/stores/alert-store.js
index 8b20e8b15..074c0eac2 100644
--- a/frontend/src/stores/alert-store.js
+++ b/frontend/src/stores/alert-store.js
@@ -1,7 +1,6 @@
-import { ref } from 'vue';
+import { defineStore } from 'pinia';
 
-// eslint-disable-next-line import/prefer-default-export
-export const siteNotificationStore = ref({
+const initialSiteNotificationObject = {
   // Ensure we don't need to set the same notification twice
   id: null,
   // Details
@@ -9,4 +8,49 @@ export const siteNotificationStore = ref({
   title: '',
   message: '',
   actionUrl: '',
+};
+
+// eslint-disable-next-line import/prefer-default-export
+export const useSiteNotificationStore = defineStore('siteNotification', {
+  state: () => ({
+    data: initialSiteNotificationObject,
+  }),
+  getters: {
+    isVisible() {
+      return this.data.display;
+    },
+    title() {
+      return this.data.title;
+    },
+    actionUrl() {
+      return this.data.actionUrl;
+    },
+    message() {
+      return this.data.message;
+    },
+  },
+  actions: {
+    isSameNotification(id) {
+      return this.data.id === id;
+    },
+    lock(id) {
+      this.$patch({
+        data: { id },
+      });
+    },
+    show(id, title, message, actionUrl) {
+      this.$patch({
+        data: {
+          id,
+          display: true,
+          title,
+          message,
+          actionUrl,
+        },
+      });
+    },
+    reset() {
+      this.$patch({ data: initialSiteNotificationObject });
+    },
+  },
 });
diff --git a/frontend/src/views/BookingView.vue b/frontend/src/views/BookingView.vue
index 7ff0625f0..60e0bf613 100644
--- a/frontend/src/views/BookingView.vue
+++ b/frontend/src/views/BookingView.vue
@@ -82,16 +82,11 @@
     >
       <div v-if="appointment">
         <div class="text-3xl text-gray-700 dark:text-gray-400 mb-4">{{ appointment.title }}</div>
-        <div class="flex justify-between font-semibold">
-          <div>
-            {{ t('text.nameIsInvitingYou', { name: appointment.owner_name }) }}
-          </div>
-          <div v-if="isAvailabilityRoute">
-            {{ t('text.disclaimerGABooking') }}
-          </div>
+        <div class="font-semibold">
+          {{ t('text.nameIsInvitingYou', { name: appointment.owner_name }) }}
         </div>
         <div class="text-gray-700 dark:text-gray-400 mb-6">{{ appointment.details }}</div>
-        <div class="text-xl mb-6">{{ t('text.chooseDayTime') }}</div>
+        <div class="text-xl mb-6">{{ t('text.chooseDateAndTime') }}</div>
         <calendar-page-heading
           :nav="showNavigation && activeView == views.month"
           :month="activeDate.format('MMMM')"
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 6a180f78f..5e257a7e9 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -1,18 +1,22 @@
 <template>
-  <div class="h-full p-4 flex-center flex-col gap-8">
+  <div class="h-full p-4 flex-center flex-col gap-12">
     <img class="w-full max-w-md" src="/appointment_logo.svg" alt="Appointment Logo" />
-    {{ $t('text.homepageGreetingIntro') }}
-    <p v-if="!isAuthenticated">{{ $t('text.homepageGreetingUnauthenticated') }}</p>
-    <i18n-t
-      v-if="isAuthenticated"
-      keypath="text.homepageGreetingAuthenticated"
-      tag="label"
-      for="text.homepageGreetingAuthenticatedLink"
-    >
-      <a class="underline" href="/settings/calendar">
-        {{ $t('text.homepageGreetingAuthenticatedLink') }}
-      </a>
-    </i18n-t>
+    <h2 class="text-2xl pt-6">
+      {{ $t('text.homepageGreetingIntro') }}
+    </h2>
+    <div class="max-w-lg text-center">
+      <p v-if="!isAuthenticated">{{ $t('text.homepageGreetingUnauthenticated') }}</p>
+      <i18n-t
+        v-if="isAuthenticated"
+        keypath="text.homepageGreetingAuthenticated"
+        tag="label"
+        for="text.homepageGreetingAuthenticatedLink"
+      >
+        <a class="underline" href="/settings/calendar">
+          {{ $t('text.homepageGreetingAuthenticatedLink') }}
+        </a>
+      </i18n-t>
+    </div>
   </div>
 
 </template>
diff --git a/frontend/src/views/ScheduleView.vue b/frontend/src/views/ScheduleView.vue
index 200ddc215..62bc39896 100644
--- a/frontend/src/views/ScheduleView.vue
+++ b/frontend/src/views/ScheduleView.vue
@@ -158,10 +158,7 @@ const getRemoteEvents = async (from, to) => {
 
 // user configured schedules from db (only the first for now, later multiple schedules will be available)
 const schedules = ref([]);
-const firstSchedule = computed(() => schedules.value.length > 0
-  ? schedules.value[0]
-  : null
-);
+const firstSchedule = computed(() => schedules.value?.length > 0 ? schedules.value[0] : null );
 const schedulesReady = ref(false);
 const getFirstSchedule = async () => {
   calendarEvents.value = [];
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 75a79f7b0..59143d30e 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,27 +1,30 @@
-const defaultTheme = require("tailwindcss/defaultTheme");
-
-module.exports = {
-  content: ["./public/index.html", "./src/**/*.{vue,js}"],
-  theme: {
-    fontFamily: {
-      sans: ['"Open Sans"', ...defaultTheme.fontFamily.sans],
-      display: ['"Raleway"', ...defaultTheme.fontFamily.sans],
-    },
-    extend: {
-      gridTemplateColumns: {
-        week: "100px repeat(7, 1fr)",
-        day: "100px 1fr",
-        context: "28px 1fr",
-      },
-      maxWidth: {
-        "2xs": "16rem",
-      },
-      scale: {
-        102: "1.02",
-        98: "0.98",
-      },
-    },
-  },
-  darkMode: "class",
-  plugins: [require("@tailwindcss/forms")],
-};
+const defaultTheme = require("tailwindcss/defaultTheme");
+
+module.exports = {
+  content: ["./public/index.html", "./src/**/*.{vue,js}"],
+  theme: {
+    fontFamily: {
+      sans: ['"Open Sans"', ...defaultTheme.fontFamily.sans],
+      display: ['"Raleway"', ...defaultTheme.fontFamily.sans],
+    },
+    extend: {
+      gridTemplateColumns: {
+        week: "100px repeat(7, 1fr)",
+        day: "100px 1fr",
+        context: "28px 1fr",
+      },
+      maxWidth: {
+        "2xs": "16rem",
+      },
+      scale: {
+        102: "1.02",
+        98: "0.98",
+      },
+      strokeWidth: {
+        3: "3",
+      }
+    },
+  },
+  darkMode: "class",
+  plugins: [require("@tailwindcss/forms")],
+};