diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 73c536c..f620e78 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -10,7 +10,7 @@ Still, **before contributing, please read this short guide** to make sure you su
 
 The app's most up-to-date development version is on the `develop` branch. **You should always submit pull requests against `develop`** and you should be working on this branch locally.
 
-**The `prod` branch is only updated when a new version is released** as it contains the deployed version of the application (found at https://another-pomodoro.netlify.app).
+**The `prod` branch is only updated when a new version is released** as it contains the deployed version of the application (found at https://focustide.app).
 
 The `preview` branch is for testing production updates early, it is rarely updated -- sometimes the `develop` branch is merged into it before it is merged into `prod` to test new releases.
 
@@ -93,7 +93,7 @@ FocusTide is an open software and such it welcomes others to contribute code (fi
 
 [![Crowdin](https://badges.crowdin.net/anotherpomodoro/localized.svg)](https://crowdin.com/project/anotherpomodoro)
 
-Translations are managed through [AnotherPomodoro's Crowdin project](https://crowdin.com/project/anotherpomodoro). If you want to contribute translations for your own language, please [create an issue](https://github.com/Hanziness/AnotherPomodoro/issues/new/choose).
+Translations are managed through [FocusTide's Crowdin project](https://crowdin.com/project/anotherpomodoro). If you want to contribute translations for your own language, please [create an issue](https://github.com/Hanziness/AnotherPomodoro/issues/new/choose).
 
 ## Technical requirements
 
diff --git a/README.md b/README.md
index 364b87d..c816f0a 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,8 @@
 # ⏳ FocusTide
 
-Free, modern and open-source timer application, right in your browser.
+Free, modern and open-source timer application, right in your browser. Formerly AnotherPomodoro.
 
-[<img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" height="54">](https://www.buymeacoffee.com/imreg?utm_source=github&utm_medium=web&utm_content=readme) <a href="https://www.producthunt.com/posts/anotherpomodoro?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-anotherpomodoro" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=327185&theme=light" alt="FocusTide - Modern & customizable productivity timer | Product Hunt" width="250" height="54" /></a>
+[<img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" height="54">](https://www.buymeacoffee.com/imreg?utm_source=github&utm_medium=web&utm_content=readme) <a href="https://www.producthunt.com/posts/anotherpomodoro?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-focustide" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=327185&theme=light" alt="FocusTide - Modern & customizable productivity timer | Product Hunt" width="250" height="54" /></a>
 
 ![Netlify Status](https://api.netlify.com/api/v1/badges/7cb2b7fb-cacd-4acf-803b-8af9dad9f2a8/deploy-status) ![License](https://img.shields.io/github/license/Hanziness/AnotherPomodoro) ![GitHub package.json version](https://img.shields.io/github/package-json/v/Hanziness/AnotherPomodoro) [![Crowdin translation status](https://badges.crowdin.net/anotherpomodoro/localized.svg)](https://crowdin.com/project/anotherpomodoro)
 
@@ -106,6 +106,6 @@ $ yarn generate
 
 If you like this project or it has helped you, please consider buying the maintainer a coffee. You won't be annoyed to do so while using the app!
 
-<p align="center"><a href="https://www.producthunt.com/posts/anotherpomodoro?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-anotherpomodoro" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=327185&theme=light" alt="AnotherPomodoro - Modern & customizable productivity timer | Product Hunt" width="250" height="54" /></a></p>
+<p align="center"><a href="https://www.producthunt.com/posts/anotherpomodoro?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-focustide" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=327185&theme=light" alt="FocusTide - Modern & customizable productivity timer | Product Hunt" width="250" height="54" /></a></p>
 
 <p align="center"><a href="https://www.buymeacoffee.com/imreg?utm_source=github&utm_medium=web&utm_content=readme"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" width="250"></a></p>
diff --git a/components/appBar.vue b/components/appBar.vue
index 7e8f2c6..8712b97 100644
--- a/components/appBar.vue
+++ b/components/appBar.vue
@@ -30,12 +30,14 @@ const settingsStore = useSettings()
       no-content-theme
       no-padding
       inner-class="p-1"
+      :aria-label="$t('appbar.todo')"
       @click="openPanels.todo = !openPanels.todo"
     >
       <ChecklistIcon class="inline-block" />
     </CButton>
     <CButton
       circle
+      :aria-label="$t('appbar.settings')"
       :importance="ButtonImportance.Filled"
       :theme="ButtonTheme.Neutral"
       class="h-11"
diff --git a/components/base/inputText.vue b/components/base/inputText.vue
index 0901292..60d68c5 100644
--- a/components/base/inputText.vue
+++ b/components/base/inputText.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { defineProps } from 'vue'
-
 const props = defineProps({
   value: {
     type: String,
diff --git a/components/error/errorAction.vue b/components/error/errorAction.vue
deleted file mode 100644
index 8eb5a1c..0000000
--- a/components/error/errorAction.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<script setup lang="ts">
-import { PropType } from 'vue'
-
-enum ErrorActionState {
-  Recommended = 'recommended',
-  Default = 'default',
-  Disabled = 'disabled'
-}
-
-const props = defineProps({
-  state: {
-    type: String as PropType<ErrorActionState>,
-    default: 'default'
-  },
-
-  textColours: {
-    type: Boolean,
-    default: false
-  },
-
-  href: {
-    type: String,
-    default: null
-  }
-})
-
-const emit = defineEmits<{(type: 'click', event: MouseEvent): void}>()
-
-const handleClick = (event: MouseEvent) => {
-  if (props.state === 'disabled') {
-    return
-  }
-
-  emit('click', event)
-}
-</script>
-
-<template>
-  <a
-    role="button"
-    :href="state !== ErrorActionState.Disabled ? props.href : undefined"
-    :aria-disabled="state === ErrorActionState.Disabled"
-    :disabled="state === ErrorActionState.Disabled"
-    :class="[
-      'transition relative overflow-hidden rounded-lg bg-current outline-current before:block before:absolute before:inset-0 before:transition',
-      {
-        'outline outline-offset-2 before:bg-black before:bg-opacity-0 before:hover:bg-opacity-10 before:active:bg-opacity-20 cursor-pointer mx-1': state === 'recommended',
-        'before:bg-slate-100 before:bg-opacity-70 before:hover:bg-opacity-50 before:active:bg-opacity-30 cursor-pointer': state === 'default',
-        'opacity-60 cursor-not-allowed': props.state === ErrorActionState.Disabled
-      }
-    ]"
-    @click="handleClick"
-  >
-    <div :class="['relative flex px-3 py-2 flex-row space-x-1 pointer-events-none', { 'text-white': props.textColours && props.state === ErrorActionState.Recommended, 'text-black': props.textColours && props.state !== ErrorActionState.Recommended }]">
-      <slot name="icon" />
-      <slot />
-    </div>
-  </a>
-</template>
diff --git a/components/error/errorActionBar.vue b/components/error/errorActionBar.vue
index b4fc91d..9975e54 100644
--- a/components/error/errorActionBar.vue
+++ b/components/error/errorActionBar.vue
@@ -5,6 +5,12 @@ const state = reactive({
   items: [] as HTMLElement[]
 })
 
+const sortOrder = {
+  recommended: 0,
+  primary: 1,
+  secondary: 2
+}
+
 const primary: Ref<HTMLElement | null> = ref(null)
 const secondary: Ref<HTMLElement | null> = ref(null)
 const items: Ref<HTMLElement | null> = ref(null)
@@ -36,12 +42,6 @@ watch(() => state.items, (newValue) => {
 })
 
 onMounted(() => {
-  const sortOrder = {
-    recommended: 0,
-    primary: 1,
-    secondary: 2
-  }
-
   // collect all nodes with a `data-row` attribute
   state.items = []
   if (items != null) {
diff --git a/components/error/types.ts b/components/error/types.ts
new file mode 100644
index 0000000..f02e966
--- /dev/null
+++ b/components/error/types.ts
@@ -0,0 +1,12 @@
+export enum ErrorActionState {
+  Recommended = 'recommended',
+  Default = 'default',
+  Disabled = 'disabled'
+}
+
+export enum ActionType {
+  RECOMMEND = 'recommended',
+  PRIMARY = 'primary',
+  SECONDARY = 'secondary',
+  HIDE = 'disabled'
+}
diff --git a/components/settings/aboutTab.vue b/components/settings/aboutTab.vue
index 7fa36c4..043ffc8 100644
--- a/components/settings/aboutTab.vue
+++ b/components/settings/aboutTab.vue
@@ -81,7 +81,7 @@ const mainStore = useMain()
           bg-class="bg-[#1da1f2]"
           inner-class="!p-4 text-slate-50"
         >
-          <BrandTwitterIcon :aria-label="$t('index.alt.links.share.twitter')" size="24" />
+          <BrandTwitterIcon :aria-label="$t('support.share.twitter')" size="24" />
         </Button>
         <Button
           link
@@ -94,7 +94,7 @@ const mainStore = useMain()
           bg-class="bg-[#1877f2]"
           inner-class="!p-4 text-slate-50"
         >
-          <BrandFacebookIcon :aria-label="$t('index.alt.links.share.facebook')" size="24" class="translate-x-[-1px]" />
+          <BrandFacebookIcon :aria-label="$t('support.share.facebook')" size="24" class="translate-x-[-1px]" />
         </Button>
         <Button
           link
@@ -107,7 +107,7 @@ const mainStore = useMain()
           bg-class="bg-[#ff4500]"
           inner-class="!p-4 text-slate-50"
         >
-          <BrandRedditIcon :aria-label="$t('index.alt.links.share.reddit')" size="24" />
+          <BrandRedditIcon :aria-label="$t('support.share.reddit')" size="24" />
         </Button>
       </div>
     </div>
diff --git a/components/timer/controls/controlsNew.vue b/components/timer/controls/controlsNew.vue
index ee12f46..d35528a 100644
--- a/components/timer/controls/controlsNew.vue
+++ b/components/timer/controls/controlsNew.vue
@@ -33,17 +33,27 @@ const advance = () => {
       :importance="ButtonImportance.Filled"
       class="h-16 transition"
       :class="{ 'scale-0 opacity-0 pointer-events-none' : !scheduleStore.isRunning }"
+      :aria-label="$t('controls.stop')"
       @click="reset"
     >
       <PlayerStopIcon :size="24" />
     </CButton>
 
-    <CButton inner-class="p-6 px-8 transition" bg-class="rounded-full" :theme="ButtonTheme.NeutralDark" :importance="ButtonImportance.Filled" @click="playPause">
+    <CButton
+      :aria-label="$t('controls.play')"
+      inner-class="p-6 px-8 transition"
+      bg-class="rounded-full"
+      class="h-20 w-28"
+      :theme="ButtonTheme.NeutralDark"
+      :importance="ButtonImportance.Filled"
+      @click="playPause"
+    >
       <PlayerPlayIcon v-if="scheduleStore.timerState !== TimerState.RUNNING" :size="28" />
       <PlayerPauseIcon v-else :size="28" />
     </CButton>
 
     <CButton
+      :aria-label="$t('controls.advance')"
       circle
       inner-class="p-5"
       :theme="ButtonTheme.Secondary"
diff --git a/components/tutorial/onboarding/page0_welcome.vue b/components/tutorial/onboarding/page0_welcome.vue
index acbc942..43666f0 100644
--- a/components/tutorial/onboarding/page0_welcome.vue
+++ b/components/tutorial/onboarding/page0_welcome.vue
@@ -11,7 +11,7 @@ const settingsStore = useSettings()
 <template>
   <OnboardingPage>
     <div class="py-3 flex gap-2 text-3xl flex-col md:flex-row justify-center items-center">
-      <img class="w-10" src="/favicon.svg" role="note">
+      <img width="40" height="40" class="w-10" src="/favicon.svg" role="note">
       <span v-text="$t('tutorials.onboarding.pages.0.title')" />
     </div>
 
diff --git a/error.vue b/error.vue
index 93ee67a..b265c6c 100644
--- a/error.vue
+++ b/error.vue
@@ -1,219 +1,206 @@
-<template>
-  <div class="flex flex-col items-center justify-center w-screen h-screen p-6 text-gray-100 bg-gray-900">
-    <div>
-      <component :is="errorHeading.icon" size="128" stroke-width="1.25" />
-    </div>
-    <h1 class="mt-2 text-5xl font-bold tracking-tighter text-center uppercase" v-text="errorHeading.title" />
-
-    <!-- Error description -->
-    <div class="max-w-screen-lg mt-8 overflow-hidden border-2 border-gray-300 rounded-lg">
-      <transition name="showerror-transition" mode="out-in">
-        <div v-if="!showError" class="flex flex-row items-center p-4 space-x-4 text-gray-100 transition bg-gray-700 cursor-pointer hover:bg-gray-600 active:bg-gray-800" role="button" @click="showError = true">
-          <IconShowError size="42" />
-          <div>
-            <div class="font-bold" v-text="$t('errorpage.showError.main')" />
-            <div v-text="$t('errorpage.showError.sub')" />
-          </div>
-        </div>
-        <pre v-else-if="showError" class="p-4 overflow-y-scroll max-h-56" v-text="fullError" />
-      </transition>
-    </div>
-
-    <!-- Recommended actions -->
-    <ActionBar class="mt-8">
-      <ActionButton v-bind="getRowAndState('reset')" class="text-red-500" text-colours @click="actionReset">
-        <IconReset />
-        <div v-text="$t('errorpage.action.reset')" />
-      </ActionButton>
-      <ActionButton v-bind="getRowAndState('reload')" class="text-blue-500" text-colours @click="actionReload">
-        <IconReload />
-        <div v-text="$t('errorpage.action.reload')" />
-      </ActionButton>
-      <ActionButton v-bind="getRowAndState('home')" class="text-emerald-500" text-colours href="/">
-        <IconHome />
-        <div v-text="$t('errorpage.action.home')" />
-      </ActionButton>
-      <ActionButton v-bind="getRowAndState('githubIssue')" class="text-gray-400" text-colours href="https://github.com/Hanziness/AnotherPomodoro/issues?utm_source=AnotherPomodor&utm_medium=web&utm_content=error">
-        <IconGithub />
-        <div v-text="$t('errorpage.action.githubIssue')" />
-      </ActionButton>
-      <ActionButton v-bind="getRowAndState('githubDiscussion')" class="text-gray-400" text-colours href="https://github.com/Hanziness/AnotherPomodoro/discussions?utm_source=AnotherPomodor&utm_medium=web&utm_content=error">
-        <IconDiscussion />
-        <div v-text="$t('errorpage.action.githubDiscussion')" />
-      </ActionButton>
-      <ActionButton v-bind="getRowAndState('twitter')" class="text-[#1da1f2]" text-colours href="https://twitter.com/AnotherPomodoro?utm_source=AnotherPomodor&utm_medium=web&utm_content=error">
-        <IconTwitter />
-        <div v-text="$t('errorpage.action.twitter')" />
-      </ActionButton>
-    </ActionBar>
-  </div>
-</template>
-
-<script>
-import { MoodSadIcon, RoadSignIcon, MoodConfuzedIcon, RefreshAlertIcon, RefreshIcon, HomeIcon, BrandGithubIcon, BrandTwitterIcon, MessagesIcon, BugIcon } from 'vue-tabler-icons'
-import { mapActions } from 'pinia'
-import ActionButton from '~~/components/error/errorAction.vue'
+<script setup lang="ts">
+import { MoodSadIcon as IconCrash, RoadSignIcon as IconLost, MoodConfuzedIcon as IconOtherError, RefreshAlertIcon as IconReset, RefreshIcon as IconReload, HomeIcon as IconHome, BrandGithubIcon as IconGithub, BrandTwitterIcon as IconTwitter, MessagesIcon as IconDiscussion, BugIcon as IconShowError } from 'vue-tabler-icons'
+import { useI18n } from 'vue-i18n'
+import { ComputedRef } from 'vue'
+import type { Component } from 'vue'
+import { ActionType } from './components/error/types'
+import UiButton from './components/base/uiButton.vue'
+import { ButtonImportance, ButtonTheme } from './components/base/types/button'
 import ActionBar from '~~/components/error/errorActionBar.vue'
 import { useSettings } from '~~/stores/settings'
 
-const actionType = {
-  RECOMMEND: 'recommended',
-  PRIMARY: 'primary',
-  SECONDARY: 'secondary',
-  HIDE: 'disabled'
+const { t } = useI18n()
+const route = useRoute()
+const settingsStore = useSettings()
+
+enum ErrorType {
+  Crash = 'crash',
+  NotFound = 'notfound',
+  Other = 'other'
+}
+
+enum Action {
+  Reload = 'reload',
+  Reset = 'reset',
+  Home = 'home',
+  GithubIssue = 'githubIssue',
+  GithubDiscussion = 'githubDiscussion',
+  Twitter = 'twitter'
 }
 
 /** Action button presets */
-const actions = {
+const actions: Record<ErrorType, Record<Action, ActionType>> = {
   crash: {
-    reload: actionType.RECOMMEND,
-    reset: actionType.PRIMARY,
-    home: actionType.PRIMARY,
-    githubIssue: actionType.SECONDARY,
-    githubDiscussion: actionType.SECONDARY,
-    twitter: actionType.SECONDARY
+    reload: ActionType.RECOMMEND,
+    reset: ActionType.PRIMARY,
+    home: ActionType.PRIMARY,
+    githubIssue: ActionType.SECONDARY,
+    githubDiscussion: ActionType.SECONDARY,
+    twitter: ActionType.SECONDARY
   },
 
   notfound: {
-    home: actionType.RECOMMEND,
-    githubDiscussion: actionType.SECONDARY,
-    twitter: actionType.SECONDARY
+    home: ActionType.RECOMMEND,
+    githubDiscussion: ActionType.SECONDARY,
+    twitter: ActionType.SECONDARY,
+    githubIssue: ActionType.HIDE,
+    reload: ActionType.HIDE,
+    reset: ActionType.HIDE
   },
 
   other: {
-    reload: actionType.RECOMMEND,
-    home: actionType.PRIMARY,
-    reset: actionType.PRIMARY,
-    githubIssue: actionType.SECONDARY,
-    githubDiscussion: actionType.SECONDARY,
-    twitter: actionType.SECONDARY
+    reload: ActionType.RECOMMEND,
+    home: ActionType.PRIMARY,
+    reset: ActionType.PRIMARY,
+    githubIssue: ActionType.SECONDARY,
+    githubDiscussion: ActionType.SECONDARY,
+    twitter: ActionType.SECONDARY
   }
 }
 
-export default {
-  name: 'ErrorPage',
-  components: {
-    // Error reason icons
-    IconCrash: MoodSadIcon,
-    IconLost: RoadSignIcon,
-    IconOtherError: MoodConfuzedIcon,
-
-    // Show error icon
-    IconShowError: BugIcon,
-
-    // Action icons
-    IconReset: RefreshAlertIcon,
-    IconReload: RefreshIcon,
-    IconHome: HomeIcon,
-    IconGithub: BrandGithubIcon,
-    IconDiscussion: MessagesIcon,
-    IconTwitter: BrandTwitterIcon,
-
-    ActionButton,
-    ActionBar
-  },
-  props: {
-    error: {
-      type: Object,
-      default: null
-    }
-  },
-  data () {
-    return {
-      showError: false
-    }
-  },
-
-  head () {
-    return {
-      title: this.errorHeading.title
-    }
-  },
-
-  computed: {
-    /** Determines what type of error happened */
-    errorType () {
-      if (this.error.statusCode >= 500) { return 'crash' }
-      if (this.error.statusCode === 404) { return 'notfound' }
-      return 'other'
-    },
-
-    /** The title and icon to show on the error page.
-     * For example on a 404 error it would show "Looks like you're lost",
-     * but on an app error (eg. "crash" because of a store error) it would show
-     * "Oops, the app crashed". Can return the icon as well.
-     */
-    errorHeading () {
-      let icon = 'IconOtherError'
-
-      if (this.errorType === 'crash') {
-        icon = 'IconCrash'
-      } else if (this.errorType === 'notfound') {
-        icon = 'IconLost'
-      }
+const props = defineProps({
+  error: {
+    type: Object,
+    default: null
+  }
+})
+
+const state = reactive({
+  showError: false
+})
+
+/** Determines what type of error happened */
+const currentErrorType: ComputedRef<ErrorType> = computed(() => {
+  if (Number.parseInt(props.error.statusCode) >= 500) { return ErrorType.Crash }
+  if (Number.parseInt(props.error.statusCode) === 404) { return ErrorType.NotFound }
+  return ErrorType.Other
+})
+
+const Icons: Record<ErrorType, Component> = {
+  crash: IconCrash,
+  notfound: IconLost,
+  other: IconOtherError
+}
 
-      return {
-        title: this.$t('errorpage.title.' + this.errorType),
-        icon
-      }
-    },
-
-    /** Returns actions to show or recommend based on the error.
-     * For example if it's a 404 error, go to home or the
-     * discussion button is recommended but the reset button is hidden.
-     */
-    recommendedActions () {
-      return actions[this.errorType]
-    },
-
-    fullError () {
-      return Object.assign({}, this.error, { route: this.$route })
-    }
-  },
+const errorHeading = computed(() => t('errorpage.title.' + currentErrorType.value))
+
+/** The title and icon to show on the error page.
+ * For example on a 404 error it would show "Looks like you're lost",
+ * but on an app error (eg. "crash" because of a store error) it would show
+ * "Oops, the app crashed". Can return the icon as well.
+ */
+useHead({
+  title: errorHeading.value
+})
+
+/** Returns actions to show or recommend based on the error.
+ * For example if it's a 404 error, go to home or the
+ * discussion button is recommended but the reset button is hidden.
+ */
+const recommendedActions = computed(() => {
+  return actions[currentErrorType.value]
+})
+
+const fullError = computed(() => {
+  return Object.assign({}, props.error, { route })
+})
+
+/// Ask settings to reset and navigate back to the home page
+const actionReset = () => {
+  settingsStore.setReset(true)
+  location.assign('/')
+}
 
-  methods: {
-    ...mapActions(useSettings, ['setReset']),
+/// Reload the current page
+const actionReload = () => {
+  location.reload()
+}
 
-    getRowAndState (action) {
-      let row = 'hidden'
-      let state = 'disabled'
+interface ButtonStyleMapping {
+  theme: ButtonTheme,
+  importance: ButtonImportance
+}
 
-      if (this.recommendedActions[action] && this.recommendedActions[action] === actionType.RECOMMEND) {
-        state = 'recommended'
-        row = 'recommended'
+const actionTypeToButtonStyle = (action: ActionType): ButtonStyleMapping => {
+  switch (action) {
+    case ActionType.RECOMMEND:
+      return {
+        theme: ButtonTheme.Primary,
+        importance: ButtonImportance.Filled
       }
-
-      if (this.recommendedActions[action] && [actionType.PRIMARY, actionType.SECONDARY].includes(this.recommendedActions[action])) {
-        state = 'default'
-        row = this.recommendedActions[action]
+    case ActionType.PRIMARY:
+      return {
+        theme: ButtonTheme.Primary,
+        importance: ButtonImportance.Outline
       }
-
-      if (['githubIssue', 'githubDiscussion'].includes(action)) {
-        if (!this.showError) {
-          state = 'disabled'
-        }
+    case ActionType.SECONDARY:
+      return {
+        theme: ButtonTheme.Secondary,
+        importance: ButtonImportance.Outline
       }
-
+    default: {
       return {
-        'data-row': row,
-        state
+        theme: ButtonTheme.Neutral,
+        importance: ButtonImportance.Outline
       }
-    },
-
-    /// Ask settings to reset and navigate back to the home page
-    actionReset () {
-      this.setReset(true)
-      location.assign('/')
-    },
-
-    /// Reload the current page
-    actionReload () {
-      location.reload()
     }
   }
 }
 </script>
 
+<template>
+  <div class="flex flex-col items-center justify-center w-screen min-h-screen p-6 text-surface-ondark bg-surface-dark dark">
+    <div>
+      <component :is="Icons[currentErrorType]" size="128" stroke-width="1.25" />
+    </div>
+    <h1 class="mt-2 text-5xl font-bold tracking-tighter text-center uppercase" v-text="errorHeading" />
+
+    <!-- Error description -->
+    <div class="max-w-screen-lg mt-8 border-2 border-gray-300 rounded-lg">
+      <transition name="showerror-transition" mode="out-in">
+        <div v-if="!state.showError" class="flex flex-row items-center p-4 space-x-4 text-surface-ondark transition bg-surface-darkvariant cursor-pointer" role="button" @click="state.showError = true">
+          <IconShowError size="42" />
+          <div>
+            <div class="font-bold" v-text="$t('errorpage.showError.main')" />
+            <div v-text="$t('errorpage.showError.sub')" />
+          </div>
+        </div>
+        <div v-else-if="state.showError" class="p-4 overflow-y-scroll max-h-56 max-w-full break-before-all">
+          <pre v-text="fullError" />
+        </div>
+      </transition>
+    </div>
+
+    <!-- Recommended actions -->
+    <ActionBar class="mt-8">
+      <UiButton :data-row="recommendedActions.reset" v-bind="actionTypeToButtonStyle(recommendedActions.reset)" @click="actionReset">
+        <IconReset class="mr-1" />
+        <div v-text="$t('errorpage.action.reset')" />
+      </UiButton>
+      <UiButton :data-row="recommendedActions.reload" v-bind="actionTypeToButtonStyle(recommendedActions.reload)" @click="actionReload">
+        <IconReload class="mr-1" />
+        <div v-text="$t('errorpage.action.reload')" />
+      </UiButton>
+      <UiButton link :data-row="recommendedActions.home" v-bind="actionTypeToButtonStyle(recommendedActions.home)" href="/">
+        <IconHome class="mr-1" />
+        <div v-text="$t('errorpage.action.home')" />
+      </UiButton>
+      <UiButton link :data-row="recommendedActions.githubIssue" v-bind="actionTypeToButtonStyle(recommendedActions.githubIssue)" href="https://github.com/Hanziness/AnotherPomodoro/issues?utm_source=AnotherPomodor&utm_medium=web&utm_content=error">
+        <IconGithub class="mr-1" />
+        <div v-text="$t('errorpage.action.githubIssue')" />
+      </UiButton>
+      <UiButton link :data-row="recommendedActions.githubDiscussion" v-bind="actionTypeToButtonStyle(recommendedActions.githubDiscussion)" href="https://github.com/Hanziness/AnotherPomodoro/discussions?utm_source=AnotherPomodor&utm_medium=web&utm_content=error">
+        <IconDiscussion class="mr-1" />
+        <div v-text="$t('errorpage.action.githubDiscussion')" />
+      </UiButton>
+      <UiButton link :data-row="recommendedActions.twitter" v-bind="actionTypeToButtonStyle(recommendedActions.home)" href="https://twitter.com/AnotherPomodoro?utm_source=AnotherPomodor&utm_medium=web&utm_content=error">
+        <IconTwitter class="mr-1" />
+        <div v-text="$t('errorpage.action.twitter')" />
+      </UiButton>
+    </ActionBar>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .showerror-transition-enter-active {
   @apply transition-all duration-700;
diff --git a/i18n/en.json b/i18n/en.json
index 586503c..b2cd8f5 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -1,184 +1,13 @@
 {
-  "index": {
-    "app_description": "Free Pomodoro timer right in your browser",
-    "alt": {
-      "img": {
-        "screenshot": "Screenshot of a timer running in FocusTide",
-        "icon": "The app's icon"
-      },
-      "links": {
-        "source": "View on GitHub",
-        "support": "Buy the author a coffee",
-        "share": {
-          "twitter": "Follow the app on Twitter",
-          "facebook": "Share the app on Facebook",
-          "reddit": "Share the app on Reddit"
-        }
-      }
-    },
-    "launch": "Launch",
-    "cta": {
-      "quickstart": "Quickstart",
-      "or": "or",
-      "configure": "Setup wizard"
-    },
-    "features": [
-      {
-        "title": "Focused, clean interface",
-        "description": "Just your timer, the essential controls and a bunch of customizations"
-      },
-      {
-        "title": "Nothing to install",
-        "description": "Runs in your browser, entirely offline after launch"
-      },
-      {
-        "title": "Free & open-source",
-        "description": "No hidden trackers, everyone can view and contribute to the code"
-      }
-    ],
-    "section_whatitdoes": {
-      "title": "What does it do?",
-      "subtitle": {
-        "main": "{appname} helps you keep track of your time.",
-        "sub": "Just work or take a break when it says so."
-      },
-      "cards": [
-        {
-          "title": "Work",
-          "description": "Time to get things done",
-          "duration": "25 minutes"
-        },
-        {
-          "title": "Short pause",
-          "description": "Watch a video, read an article, drink a coffee",
-          "duration": "5-15 minutes"
-        },
-        {
-          "title": "Long pause",
-          "description": "Take a nap or go for a walk",
-          "duration": "15 minutes"
-        }
-      ]
-    },
-    "faq": {
-      "title": "FAQ",
-      "hint": "Hint",
-      "accordion": {
-        "change_timers": {
-          "q": "Can I change those timers?",
-          "a": "Absolutely! You can change the work, pause and long pause timers to whatever you want! You can also change how frequent long pauses are!"
-        },
-        "will_it_help": {
-          "q": "Will this app help me?",
-          "a": "That depends on you. This app tries hard to create a motivating environment with its clean design and flexibility, but it's up to you whether you follow the schedule it gives you.",
-          "hint": "If you realize you can't work 25 minutes straight or a break of 5 minutes is too short, adjust them to something more comfortable. Don't give up, follow a more relaxed schedule and progressively go stricter."
-        },
-        "data_collection": {
-          "q": "Does it collect any data?",
-          "a": "Nope! The app runs only in your browser, no data is being collected or sent anywhere!"
-        },
-        "remember_settings": {
-          "q": "How will it remember my settings then?",
-          "a": "It relies on your browser to do that. If you clear your browser data, the app's settings will revert to their defaults, too.",
-          "hint": "If you want to keep your settings, don't use the app in private browsing (incognito mode)."
-        },
-        "need_to_know": {
-          "q": "So what do I need to know to use this app?",
-          "a": "Absolutely nothing. If you don't want to delve into the settings, just start the timer and listen for the audio chime when it finishes. Once it's done, start the next timer when you're ready. No knowledge is necessary to use this timer, just pay attention to the time left!"
-        },
-        "timer_style": {
-          "q": "Which timer style should I use?",
-          "a": "That depends on how obscure you want the timer to be. Traditional looks like \"12:34\" (seconds-precision), approximate looks like \"13 minutes\" and percentage looks like \"50%\"."
-        }
-      }
-    },
-    "section_features": {
-      "title": "Feature list",
-      "list": {
-        "customization": "Customization",
-        "notifications": "Audio & Notifications",
-        "flexible": "Flexible",
-        "pwa": "Offline",
-        "opensource": "Open-source",
-        "notrackers": "No trackers",
-        "noads": "No ads & pop-ups",
-        "clean": "Clean design",
-        "adaptiveticking": "Adaptive ticking",
-        "localization": "Multiple languages",
-        "darkmode": "Dark mode",
-        "more": "... and more to come"
-      }
-    },
-    "support": {
-      "title": "Support this project",
-      "subtitle": {
-        "main": "FocusTide is being developed as a side project with no compensation in mind.",
-        "action": "If you feel that this is a project worth supporting, please do so."
-      },
-      "credits": "Made with ❤ by Imre Gera"
+  "support": {
+    "source": "View on GitHub",
+    "support": "Buy the author a coffee",
+    "share": {
+      "twitter": "Follow the app on Twitter",
+      "facebook": "Share the app on Facebook",
+      "reddit": "Share the app on Reddit"
     }
   },
-  "setup": {
-    "head": "Setup",
-    "title": "Let's get you started",
-    "startButton": "Let's go",
-    "steps": {
-      "language": {
-        "title": "Language"
-      },
-      "preset": {
-        "title": "Application preset",
-        "description": "These presets enable certain functions in the app so that you can use it the way you feel comfortable."
-      },
-      "timerpreset": {
-        "title": "Timer length",
-        "description": "Choose a timer preset that you'd like to work with."
-      },
-      "timerstyle": {
-        "title": "Timer display",
-        "description": "FocusTide supports three timer styles ranging from seconds-precision to showing only a percentage."
-      },
-      "permissions": {
-        "title": "Permissions",
-        "description": "The app can play a sound and send a notification when a timer expires."
-      },
-      "theme": {
-        "title": "Theme",
-        "description": "Control how the app looks."
-      },
-      "tip": {
-        "title": "Tip",
-        "description": "You'll find all the settings by clicking on the cog icon in the top right corner."
-      }
-    },
-    "presets": {
-      "_values": {
-        "minimalist": "Minimalist",
-        "default": "Default",
-        "hardcore": "Full-fledged"
-      },
-      "_valueDescription": {
-        "minimalist": "No distracting items, just a timer in the middle.",
-        "default": "The starter settings. Recommended for first time users.",
-        "hardcore": "Every feature is enabled so you can have everything in front of you."
-      }
-    },
-    "permissions": {
-      "audio": "Audio",
-      "notifications": "Notifications"
-    },
-    "theme": {
-      "_values": {
-        "light": "Default",
-        "dark": "Dark"
-      },
-      "_valueDescription": {
-        "light": "Full of friendly colours",
-        "dark": "Less bright, just as productive"
-      }
-    },
-    "preview": "preview"
-  },
   "section": {
     "work": "Work",
     "shortpause": "Break",
@@ -190,6 +19,10 @@
     "stop": "Reset timer",
     "advance": "Go to next section"
   },
+  "appbar": {
+    "settings": "Open settings",
+    "todo": "Open task list"
+  },
   "timer": {
     "approximate": {
       "hours": "hour | hours",
diff --git a/layouts/timer.vue b/layouts/timer.vue
index edd2dbe..d46832d 100644
--- a/layouts/timer.vue
+++ b/layouts/timer.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts"> // eslint-disable-line vue/multi-word-component-names
+import { useI18n } from 'vue-i18n'
 import SettingsPanel from '@/components/settings/settingsPanel.vue'
 import TodoList from '~~/components/todoList/todoList.vue'
 import { useOpenPanels } from '~~/stores/openpanels'
@@ -8,6 +9,14 @@ import { useSettings } from '~~/stores/settings'
 const openPanels = useOpenPanels()
 const settingsStore = useSettings()
 const scheduleStore = useSchedule()
+
+const { locale } = useI18n()
+
+useHead(() => {
+  return {
+    htmlAttrs: { lang: locale }
+  }
+})
 </script>
 
 <template>
diff --git a/public/assets/img/screenshots/720p/Timer_Default_2x.png b/public/assets/img/screenshots/720p/Timer_Default_2x.png
deleted file mode 100644
index 9aa22e2..0000000
Binary files a/public/assets/img/screenshots/720p/Timer_Default_2x.png and /dev/null differ
diff --git a/tailwind.config.js b/tailwind.config.js
index 3098eb8..82ffbfa 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,7 +3,9 @@ module.exports = {
     './components/**/*.{vue,js}',
     './layouts/**/*.vue',
     './pages/**/*.vue',
-    './plugins/**/*.{js,ts}'
+    './plugins/**/*.{js,ts}',
+    './error.vue',
+    './app.vue'
   ],
   darkMode: 'class',
   theme: {