diff --git a/frontend/src/components/DataTable.vue b/frontend/src/components/DataTable.vue
index b7495de6..c114eebe 100644
--- a/frontend/src/components/DataTable.vue
+++ b/frontend/src/components/DataTable.vue
@@ -31,42 +31,42 @@
           </tr>
         </thead>
         <tbody>
-          <tr v-for="datum in paginatedDataList" :key="datum">
+          <tr v-for="(datum, i) in paginatedDataList" :key="i">
             <td v-if="allowMultiSelect">
               <input type="checkbox" @change="(evt) => onFieldSelect(evt, datum)" />
             </td>
             <td v-for="(fieldData, fieldKey) in datum" :key="fieldKey" :class="`column-${fieldKey}`">
-              <span v-if="fieldData.type === tableDataType.text">
+              <span v-if="fieldData.type === TableDataType.Text">
                 {{ fieldData.value }}
               </span>
-              <span v-else-if="fieldData.type === tableDataType.code" class="flex items-center gap-4">
+              <span v-else-if="fieldData.type === TableDataType.Code" class="flex items-center gap-4">
                 <code>{{ fieldData.value }}</code>
-                <text-button class="btn-copy" :copy="fieldData.value" :title="t('label.copy')" />
+                <text-button class="btn-copy" :copy="String(fieldData.value)" :title="t('label.copy')" />
               </span>
-              <span v-else-if="fieldData.type === tableDataType.bool">
+              <span v-else-if="fieldData.type === TableDataType.Bool">
                 <span v-if="fieldData.value">Yes</span>
                 <span v-else>No</span>
               </span>
-              <span v-else-if="fieldData.type === tableDataType.link">
+              <span v-else-if="fieldData.type === TableDataType.Link">
                 <a :href="fieldData.link" target="_blank">{{ fieldData.value }}</a>
               </span>
-              <span v-else-if="fieldData.type === tableDataType.button">
+              <span v-else-if="fieldData.type === TableDataType.Button">
                 <primary-button
-                  v-if="fieldData.buttonType === tableDataButtonType.primary"
+                  v-if="fieldData.buttonType === TableDataButtonType.Primary"
                   :disabled="fieldData.disabled"
                   @click="emit('fieldClick', fieldKey, datum)"
                 >
                   {{ fieldData.value }}
                 </primary-button>
                 <secondary-button
-                  v-else-if="fieldData.buttonType === tableDataButtonType.secondary"
+                  v-else-if="fieldData.buttonType === TableDataButtonType.Secondary"
                   :disabled="fieldData.disabled"
                   @click="emit('fieldClick', fieldKey, datum)"
                 >
                   {{ fieldData.value }}
                 </secondary-button>
                 <caution-button
-                  v-else-if="fieldData.buttonType === tableDataButtonType.caution"
+                  v-else-if="fieldData.buttonType === TableDataButtonType.Caution"
                   :disabled="fieldData.disabled"
                   @click="emit('fieldClick', fieldKey, datum)"
                 >
@@ -98,41 +98,31 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 /**
  * Data Table
- * @typedef {{type: tableDataType, value: string, link?: string, buttonType?: tableDataButtonType }} DataField
- * @typedef {{name: string, key: string}} DataColumn
- * @typedef {{name: string, key: string}} FilterOption
- * @typedef {{name: string, options: Array<FilterOption>, fn: function}} Filter
- *
- * @param allowMultiSelect {boolean} - Displays checkboxes next to each row, and emits the `fieldSelect` event with a list of currently selected rows
- * @param dataName {string} - The name for the object being represented on the table
- * @param columns {Array<DataColumn>} - List of columns to be displayed (these don't filter data, filter that yourself!)
- * @param dataList {Array<DataField>} - List of data to be displayed
- * @param filters {Array<Filter>} - List of filters to be displayed
- * @param loading {boolean} - Displays a loading spinner
  */
-import ListPagination from '@/elements/ListPagination.vue';
 import { useI18n } from 'vue-i18n';
-import {
-  computed, ref, toRefs,
-} from 'vue';
-import { tableDataButtonType, tableDataType } from '@/definitions';
+import { computed, ref, toRefs } from 'vue';
+import { TableDataButtonType, TableDataType } from '@/definitions';
+import { TableDataRow, TableDataColumn, TableFilter, HTMLInputElementEvent } from '@/models';
+import ListPagination from '@/elements/ListPagination.vue';
 import PrimaryButton from '@/elements/PrimaryButton.vue';
 import SecondaryButton from '@/elements/SecondaryButton.vue';
 import CautionButton from '@/elements/CautionButton.vue';
 import TextButton from '@/elements/TextButton.vue';
 import LoadingSpinner from '@/elements/LoadingSpinner.vue';
 
-const props = defineProps({
-  allowMultiSelect: Boolean,
-  dataName: String,
-  dataList: Array,
-  columns: Array,
-  filters: Array,
-  loading: Boolean,
-});
+// component properties
+interface Props {
+  allowMultiSelect: boolean, // Displays checkboxes next to each row, and emits the `fieldSelect` event with a list of currently selected rows
+  dataName: string, // The name for the object being represented on the table
+  columns: TableDataColumn[], // List of columns to be displayed (these don't filter data, filter that yourself!)
+  dataList: TableDataRow[], // List of data to be displayed
+  filters: TableFilter[], // List of filters to be displayed
+  loading: boolean, // Displays a loading spinner
+};
+const props = defineProps<Props>();
 
 const {
   dataList, columns, dataName, allowMultiSelect, loading,
@@ -144,14 +134,13 @@ const emit = defineEmits(['fieldSelect', 'fieldClick']);
 // pagination
 const pageSize = 10;
 const currentPage = ref(0);
-const updatePage = (index) => {
+const updatePage = (index: number) => {
   currentPage.value = index;
 };
 
 const columnSpan = computed(() => (columns.value.length + (allowMultiSelect.value ? 1 : 0)));
-const selectedFields = ref([]);
-
-const mutableDataList = ref(null);
+const selectedRows = ref<TableDataRow[]>([]);
+const mutableDataList = ref<TableDataRow[]>(null);
 
 /**
  * Returns either a filtered data list, or the original all nice and paginated
@@ -177,22 +166,22 @@ const totalDataLength = computed(() => {
   return 0;
 });
 
-const onFieldSelect = (evt, fieldData) => {
-  const isChecked = evt?.target?.checked;
+const onFieldSelect = (evt: Event, row: TableDataRow) => {
+  const isChecked = (evt as HTMLInputElementEvent)?.target?.checked;
 
   if (isChecked) {
-    selectedFields.value.push(fieldData);
+    selectedRows.value.push(row);
   } else {
-    const index = selectedFields.value.indexOf(fieldData);
+    const index = selectedRows.value.indexOf(row);
     if (index !== -1) {
-      selectedFields.value.splice(index, 1);
+      selectedRows.value.splice(index, 1);
     }
   }
-  emit('fieldSelect', selectedFields.value);
+  emit('fieldSelect', selectedRows.value);
 };
 
-const onColumnFilter = (evt, filter) => {
-  mutableDataList.value = filter.fn(evt.target.value, dataList.value);
+const onColumnFilter = (evt: Event, filter: TableFilter) => {
+  mutableDataList.value = filter.fn((evt as HTMLInputElementEvent).target.value, dataList.value);
   if (mutableDataList.value === dataList.value) {
     mutableDataList.value = null;
   }
diff --git a/frontend/src/definitions.ts b/frontend/src/definitions.ts
index 0904f1df..0ef27c19 100644
--- a/frontend/src/definitions.ts
+++ b/frontend/src/definitions.ts
@@ -255,32 +255,28 @@ export const qalendarSlotDurations = {
 
 /**
  * Used as the session storage key for the location the user wanted to go to before logging in.
- * @type {string}
  */
 export const loginRedirectKey = 'loginRedirect';
 
 /**
  * Data types for table row items
- * @enum
- * @readonly
  */
-export const tableDataType = {
-  text: 1,
-  link: 2,
-  button: 3,
-  code: 4,
-  bool: 5,
-};
+export enum TableDataType {
+  Text = 1,
+  Link = 2,
+  Button = 3,
+  Code = 4,
+  Bool = 5,
+}
 
 /**
- * @enum
- * @readonly
+ * Button types for table data fields
  */
-export const tableDataButtonType = {
-  primary: 1,
-  secondary: 2,
-  caution: 3,
-};
+export enum TableDataButtonType {
+  Primary = 1,
+  Secondary = 2,
+  Caution = 3,
+}
 
 /**
  * First Time User Experience Steps
@@ -347,8 +343,8 @@ export default {
   scheduleCreationState,
   SettingsSections,
   subscriberLevels,
-  tableDataButtonType,
-  tableDataType,
+  TableDataButtonType,
+  TableDataType,
   tooltipPosition,
   WaitingListAction,
 };
diff --git a/frontend/src/elements/ListPagination.vue b/frontend/src/elements/ListPagination.vue
index 48774d2b..92f5e833 100644
--- a/frontend/src/elements/ListPagination.vue
+++ b/frontend/src/elements/ListPagination.vue
@@ -31,22 +31,22 @@ const next = () => {
     emit('update', currentPage.value);
   }
 };
-const goto = (index) => {
+const goto = (index: number) => {
   currentPage.value = index;
   emit('update', currentPage.value);
 };
 
-const isVisibleInnerPage = (p) => (currentPage.value === 0 && p === 3)
+const isVisibleInnerPage = (p: number) => (currentPage.value === 0 && p === 3)
     || ((currentPage.value === 0 || currentPage.value === 1) && p === 4)
     || (p > currentPage.value - 1 && p < currentPage.value + 3)
     || ((currentPage.value === pageCount.value - 1 || currentPage.value === pageCount.value - 2) && p === pageCount.value - 3)
     || (currentPage.value === pageCount.value - 1 && p === pageCount.value - 2)
     || p === pageCount.value;
 
-const showPageItem = (p) => pageCount.value < 6 || p === 1 || p === 2 || isVisibleInnerPage(p) || p === pageCount.value - 1;
-const showFirstEllipsis = (p) => pageCount.value >= 6 && currentPage.value > 2 && p === 2;
-const showPageItemLink = (p) => pageCount.value < 6 || p === 1 || isVisibleInnerPage(p);
-const showLastEllipsis = (p) => pageCount.value >= 6 && currentPage.value < pageCount.value - 3 && p === pageCount.value - 1;
+const showPageItem = (p: number) => pageCount.value < 6 || p === 1 || p === 2 || isVisibleInnerPage(p) || p === pageCount.value - 1;
+const showFirstEllipsis = (p: number) => pageCount.value >= 6 && currentPage.value > 2 && p === 2;
+const showPageItemLink = (p: number) => pageCount.value < 6 || p === 1 || isVisibleInnerPage(p);
+const showLastEllipsis = (p: number) => pageCount.value >= 6 && currentPage.value < pageCount.value - 3 && p === pageCount.value - 1;
 </script>
 
 <template>
diff --git a/frontend/src/models.ts b/frontend/src/models.ts
index 37c211ec..652c8239 100644
--- a/frontend/src/models.ts
+++ b/frontend/src/models.ts
@@ -1,6 +1,13 @@
 import { Dayjs } from 'dayjs';
 import { UseFetchReturn } from '@vueuse/core';
-import { InviteStatus, WaitingListAction, EventLocationType, CalendarProviders } from './definitions';
+import {
+  InviteStatus,
+  WaitingListAction,
+  EventLocationType,
+  CalendarProviders,
+  TableDataButtonType,
+  TableDataType,
+} from './definitions';
 
 export type Attendee = {
   id?: number;
@@ -252,12 +259,16 @@ export type Token = {
   access_token: string;
   token_type: string;
 };
+export type AuthUrl = {
+  url: string;
+};
 
 // Types and aliases used for our custom createFetch API calls and return types
+export type AuthUrlResponse = UseFetchReturn<AuthUrl|Exception>;
 export type AppointmentListResponse = UseFetchReturn<Appointment[]>;
 export type AppointmentResponse = UseFetchReturn<Appointment>;
 export type AvailabilitySlotResponse = UseFetchReturn<SlotAttendee>;
-export type BooleanResponse = UseFetchReturn<boolean>;
+export type BooleanResponse = UseFetchReturn<boolean|Exception>;
 export type BlobResponse = UseFetchReturn<Blob>;
 export type CalendarResponse = UseFetchReturn<Calendar|Exception>;
 export type CalendarListResponse = UseFetchReturn<Calendar[]>;
@@ -277,6 +288,31 @@ export type TokenResponse = UseFetchReturn<Token>;
 export type WaitingListResponse = UseFetchReturn<WaitingListEntry[]|Exception>;
 export type WaitingListActionResponse = UseFetchReturn<WaitingListStatus>;
 
+// Table types
+export type TableDataField = {
+  type: TableDataType;
+  value: string|number|boolean;
+  link?: string;
+  buttonType?: TableDataButtonType;
+  disabled?: boolean;
+};
+export type TableDataRow = {
+  [key:string]: TableDataField
+};
+export type TableDataColumn = {
+  name: string;
+  key: string;
+};
+export type TableFilterOption = {
+  name: string;
+  key: string;
+};
+export type TableFilter = {
+  name: string;
+  options: TableFilterOption[];
+  fn: (value: string, list: TableDataRow[]) => TableDataRow[];
+};
+
 // Utility types
 export type Time<T> = {
   start: T;
@@ -299,3 +335,7 @@ export type HTMLElementEvent = Event & {
   target: HTMLElement;
   currentTarget: HTMLElement;
 };
+export type HTMLInputElementEvent = Event & {
+  target: HTMLInputElement;
+  currentTarget: HTMLInputElement;
+};
diff --git a/frontend/src/stores/user-store.ts b/frontend/src/stores/user-store.ts
index b5460ed8..448d2911 100644
--- a/frontend/src/stores/user-store.ts
+++ b/frontend/src/stores/user-store.ts
@@ -84,7 +84,7 @@ export const useUserStore = defineStore('user', () => {
     const { data: userData, error } = await fetch('me').put(inputData).json();
     if (!error.value) {
       // update user in store
-      await updateProfile(userData.value);
+      updateProfile(userData.value);
       await updateSignedUrl(fetch);
 
       return { error: false };
diff --git a/frontend/src/views/LoginView.vue b/frontend/src/views/LoginView.vue
index 0a2ea184..a88583cf 100644
--- a/frontend/src/views/LoginView.vue
+++ b/frontend/src/views/LoginView.vue
@@ -1,126 +1,30 @@
-<template>
-  <!-- page title area -->
-  <div class="flex-center runded flex h-screen w-full bg-gray-100 dark:bg-gray-600">
-    <div class="my-auto flex w-full flex-col items-center justify-center gap-2 rounded-md bg-white px-4 py-12 shadow-lg dark:bg-gray-700 md:w-1/2 md:max-w-lg">
-      <img class="mb-2 w-full max-w-32" src="/appointment_logo.svg" alt="Appointment Logo"/>
-      <div class="text-center text-4xl font-light">{{ t('app.title') }}</div>
-      <alert-box v-if="loginError" @close="closeError" class="mt-4">
-        {{ loginError }}
-      </alert-box>
-      <div class="flex w-full flex-col items-center justify-center px-4" v-if="showConfirmEmailScreen">
-        <div class="my-8 grid w-full gap-8">
-          <h2 class="text-xl">{{ t('waitingList.signUpHeading') }}</h2>
-          <p>{{ t('waitingList.signUpInfo') }}</p>
-          <p>{{ t('waitingList.signUpCheckYourEmail') }}</p>
-        </div>
-        <primary-button
-          :label="t('label.back')"
-          class="btn-back"
-          @click="goHome"
-          :title="t('label.back')"
-          :disabled="isLoading"
-        />
-      </div>
-      <div class="flex w-full flex-col items-center justify-center px-4" v-else>
-        <div class="my-8 grid w-full gap-8">
-          <label class="flex flex-col items-center pl-4">
-          <span class="w-full">
-            {{ t('label.email') }}
-          </span>
-            <input
-              v-model="email"
-              type="email"
-              class="mr-6 w-full rounded-md"
-              :class="{'mr-4': isFxaAuth}"
-              @keydown.enter="isFxaAuth ? login() : null"
-            />
-          </label>
-          <label class="flex flex-col items-center pl-4" v-if="showInviteFlow">
-          <span class="w-full">
-          {{ t('label.inviteCode') }}
-          </span>
-            <input
-              v-model="inviteCode"
-              type="text"
-              class="mr-6 w-full rounded-md"
-              :class="{'mr-4': isFxaAuth}"
-              @keydown.enter="isFxaAuth ? login() : null"
-            />
-          </label>
-          <div v-if="isFxaAuth && (!showInviteFlow || inviteCode.length > 0)" class="text-center text-sm">{{ t('text.login.continueToFxa') }}</div>
-          <label v-if="isPasswordAuth" class="flex flex-col items-center pl-4">
-            <span class="w-full">{{ t('label.password') }}</span>
-            <input
-              v-model="password"
-              type="password"
-              class="mr-6 w-full rounded-md"
-              @keyup.enter="login"
-            />
-          </label>
-        </div>
-        <primary-button
-          v-if="showInviteFlow && inviteCode.length > 0"
-          :label="t('label.signUpWithInviteCode')"
-          class="btn-login-with-invite-code"
-          @click="login"
-          :title="t('label.signUpWithInviteCode')"
-          :disabled="isLoading"
-        />
-        <primary-button
-          v-else-if="showInviteFlow"
-          :label="t('label.addToWaitingList')"
-          class="btn-add-to-waiting-list"
-          @click="signUp"
-          :title="t('label.addToWaitingList')"
-          :disabled="isLoading"
-        />
-        <primary-button
-          v-else-if="!isFxaAuth"
-          :label="t('label.logIn')"
-          class="btn-login"
-          @click="login"
-          :title="t('label.logIn')"
-          :disabled="isLoading"
-        />
-        <primary-button
-          v-else
-          :label="t('label.continue')"
-          class="btn-continue"
-          @click="login"
-          :title="t('label.continue')"
-          :disabled="isLoading"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
+<script setup lang="ts">
 import { inject, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useUserStore } from '@/stores/user-store';
-import PrimaryButton from '@/elements/PrimaryButton';
-import AlertBox from '@/elements/AlertBox';
-import { dayjsKey } from "@/keys";
+import { dayjsKey, callKey, isPasswordAuthKey, isFxaAuthKey } from "@/keys";
+import { BooleanResponse, AuthUrlResponse, Exception, AuthUrl, Error } from "@/models";
+import PrimaryButton from '@/elements/PrimaryButton.vue';
+import AlertBox from '@/elements/AlertBox.vue';
 
 // component constants
 const user = useUserStore();
 
 // component constants
 const { t } = useI18n();
-const call = inject('call');
+const call = inject(callKey);
 const dj = inject(dayjsKey);
 const router = useRouter();
-const isPasswordAuth = inject('isPasswordAuth');
-const isFxaAuth = inject('isFxaAuth');
+const isPasswordAuth = inject(isPasswordAuthKey);
+const isFxaAuth = inject(isFxaAuthKey);
 const showInviteFlow = ref(false);
 const isLoading = ref(false);
 
 // form input and error
 const email = ref('');
 const password = ref('');
-const loginError = ref(null);
+const loginError = ref<string>(null);
 const inviteCode = ref('');
 const showConfirmEmailScreen = ref(false);
 
@@ -135,7 +39,7 @@ const goHome = () => {
 const signUp = async () => {
   isLoading.value = true;
   loginError.value = '';
-  const { data } = await call('waiting-list/join').post({
+  const { data }: BooleanResponse = await call('waiting-list/join').post({
     email: email.value,
   }).json();
 
@@ -159,13 +63,13 @@ const login = async () => {
   // If they come here the first time we check if they're allowed to login
   // If they come here a second time after not being allowed it's because they have an invite code.
   if (!showInviteFlow.value) {
-    const { data: canLogin, error } = await call('can-login').post({
+    const { data: canLogin, error }: BooleanResponse = await call('can-login').post({
       email: email.value,
     }).json();
 
     if (error?.value) {
       // Bleh
-      loginError.value = canLogin?.value?.detail[0]?.msg;
+      loginError.value = (canLogin?.value as Exception)?.detail[0]?.msg;
       isLoading.value = false;
       return;
     }
@@ -187,22 +91,23 @@ const login = async () => {
       params.append('invite_code', inviteCode.value);
     }
 
-    const { error, data } = await call(`fxa_login?${params}`).get().json();
-    const { url } = data.value;
+    const { error, data }: AuthUrlResponse = await call(`fxa_login?${params}`).get().json();
 
     if (error.value) {
-      loginError.value = data.value?.detail;
+      loginError.value = (data.value as Exception)?.detail[0]?.msg;
       isLoading.value = false;
       return;
     }
 
-    window.location = url;
+    const { url } = data.value as AuthUrl;
+
+    window.location.href = url;
     return;
   }
 
-  const { error } = await user.login(call, email.value, password.value);
+  const { error }: Error = await user.login(call, email.value, password.value);
   if (error) {
-    loginError.value = error;
+    loginError.value = error as string;
     isLoading.value = false;
     return;
   }
@@ -210,3 +115,100 @@ const login = async () => {
   await router.push('/calendar');
 };
 </script>
+
+<template>
+  <!-- page title area -->
+  <div class="flex-center runded flex h-screen w-full bg-gray-100 dark:bg-gray-600">
+    <div class="my-auto flex w-full flex-col items-center justify-center gap-2 rounded-md bg-white px-4 py-12 shadow-lg dark:bg-gray-700 md:w-1/2 md:max-w-lg">
+      <img class="mb-2 w-full max-w-32" src="/appointment_logo.svg" alt="Appointment Logo"/>
+      <div class="text-center text-4xl font-light">{{ t('app.title') }}</div>
+      <alert-box v-if="loginError" @close="closeError" class="mt-4">
+        {{ loginError }}
+      </alert-box>
+      <div class="flex w-full flex-col items-center justify-center px-4" v-if="showConfirmEmailScreen">
+        <div class="my-8 grid w-full gap-8">
+          <h2 class="text-xl">{{ t('waitingList.signUpHeading') }}</h2>
+          <p>{{ t('waitingList.signUpInfo') }}</p>
+          <p>{{ t('waitingList.signUpCheckYourEmail') }}</p>
+        </div>
+        <primary-button
+          :label="t('label.back')"
+          class="btn-back"
+          @click="goHome"
+          :title="t('label.back')"
+          :disabled="isLoading"
+        />
+      </div>
+      <div class="flex w-full flex-col items-center justify-center px-4" v-else>
+        <div class="my-8 grid w-full gap-8">
+          <label class="flex flex-col items-center pl-4">
+          <span class="w-full">
+            {{ t('label.email') }}
+          </span>
+            <input
+              v-model="email"
+              type="email"
+              class="mr-6 w-full rounded-md"
+              :class="{'mr-4': isFxaAuth}"
+              @keydown.enter="isFxaAuth ? login() : null"
+            />
+          </label>
+          <label class="flex flex-col items-center pl-4" v-if="showInviteFlow">
+          <span class="w-full">
+          {{ t('label.inviteCode') }}
+          </span>
+            <input
+              v-model="inviteCode"
+              type="text"
+              class="mr-6 w-full rounded-md"
+              :class="{'mr-4': isFxaAuth}"
+              @keydown.enter="isFxaAuth ? login() : null"
+            />
+          </label>
+          <div v-if="isFxaAuth && (!showInviteFlow || inviteCode.length > 0)" class="text-center text-sm">{{ t('text.login.continueToFxa') }}</div>
+          <label v-if="isPasswordAuth" class="flex flex-col items-center pl-4">
+            <span class="w-full">{{ t('label.password') }}</span>
+            <input
+              v-model="password"
+              type="password"
+              class="mr-6 w-full rounded-md"
+              @keyup.enter="login"
+            />
+          </label>
+        </div>
+        <primary-button
+          v-if="showInviteFlow && inviteCode.length > 0"
+          :label="t('label.signUpWithInviteCode')"
+          class="btn-login-with-invite-code"
+          @click="login"
+          :title="t('label.signUpWithInviteCode')"
+          :disabled="isLoading"
+        />
+        <primary-button
+          v-else-if="showInviteFlow"
+          :label="t('label.addToWaitingList')"
+          class="btn-add-to-waiting-list"
+          @click="signUp"
+          :title="t('label.addToWaitingList')"
+          :disabled="isLoading"
+        />
+        <primary-button
+          v-else-if="!isFxaAuth"
+          :label="t('label.logIn')"
+          class="btn-login"
+          @click="login"
+          :title="t('label.logIn')"
+          :disabled="isLoading"
+        />
+        <primary-button
+          v-else
+          :label="t('label.continue')"
+          class="btn-continue"
+          @click="login"
+          :title="t('label.continue')"
+          :disabled="isLoading"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/views/PostLoginView.vue b/frontend/src/views/PostLoginView.vue
index ed1b7e19..ad166236 100644
--- a/frontend/src/views/PostLoginView.vue
+++ b/frontend/src/views/PostLoginView.vue
@@ -1,14 +1,9 @@
-<template>
-  <div>
-    <!-- Intentionally left blank -->
-  </div>
-</template>
-
-<script setup>
+<script setup lang="ts">
 import { inject, computed, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { useUserStore } from '@/stores/user-store.ts';
+import { useUserStore } from '@/stores/user-store';
 import { loginRedirectKey } from '@/definitions';
+import { callKey } from '@/keys';
 
 const route = useRoute();
 const router = useRouter();
@@ -17,7 +12,7 @@ const router = useRouter();
 const user = useUserStore();
 
 // component constants
-const call = inject('call');
+const call = inject(callKey);
 
 const isFxaAuth = computed(() => import.meta.env?.VITE_AUTH_SCHEME === 'fxa');
 
@@ -33,7 +28,13 @@ onMounted(async () => {
     return;
   }
 
-  await user.login(call, route.params.token, null);
+  await user.login(call, route.params.token as string, null);
   await router.push(redirectTo ?? '/calendar');
 });
 </script>
+
+<template>
+  <div>
+    <!-- Intentionally left blank -->
+  </div>
+</template>
diff --git a/frontend/src/views/admin/InviteCodePanelView.vue b/frontend/src/views/admin/InviteCodePanelView.vue
index d042eb5b..eeb8fa0f 100644
--- a/frontend/src/views/admin/InviteCodePanelView.vue
+++ b/frontend/src/views/admin/InviteCodePanelView.vue
@@ -3,10 +3,10 @@ import {
   computed, inject, onMounted, ref,
 } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { AlertSchemes, tableDataButtonType, tableDataType } from '@/definitions';
+import { AlertSchemes, TableDataButtonType, TableDataType } from '@/definitions';
 import { useRouter } from 'vue-router';
 import { IconSend } from '@tabler/icons-vue';
-import { Invite, InviteListResponse, BooleanResponse, Exception } from "@/models";
+import { Invite, InviteListResponse, BooleanResponse, Exception, TableDataRow, TableDataColumn, TableFilter } from "@/models";
 import { InviteStatus } from "@/definitions";
 import { dayjsKey, callKey } from "@/keys";
 import DataTable from '@/components/DataTable.vue';
@@ -30,32 +30,32 @@ const pageNotification = ref('');
 
 const filteredInvites = computed(() => invites.value.map((invite) => ({
   code: {
-    type: tableDataType.code,
+    type: TableDataType.Code,
     value: invite.code,
   },
   status: {
-    type: tableDataType.text,
+    type: TableDataType.Text,
     value: invite.status === InviteStatus.Active ? 'Available' : 'Revoked',
   },
   subscriber_id: {
-    type: tableDataType.text,
+    type: TableDataType.Text,
     value: invite.subscriber_id ?? 'Unused',
   },
   timeCreated: {
-    type: tableDataType.text,
+    type: TableDataType.Text,
     value: dj(invite.time_created).format('ll LTS'),
   },
   timeUpdated: {
-    type: tableDataType.text,
+    type: TableDataType.Text,
     value: dj(invite.time_updated).format('ll LTS'),
   },
   revoke: {
-    type: tableDataType.button,
-    buttonType: tableDataButtonType.secondary,
+    type: TableDataType.Button,
+    buttonType: TableDataButtonType.Secondary,
     value: 'Revoke',
     disabled: invite.subscriber_id || invite.status === InviteStatus.Revoked,
   },
-})));
+} as TableDataRow)));
 const columns = [
   {
     key: 'code',
@@ -81,7 +81,7 @@ const columns = [
     key: 'revoke',
     name: '',
   },
-];
+] as TableDataColumn[];
 const filters = [
   {
     name: 'Invite Status',
@@ -105,12 +105,8 @@ const filters = [
     ],
     /**
      * Callback function, filter the list by selectedKey and return it back to the table
-     * TODO: Add types when DataTable.vue is typed
-     * @param selectedKey
-     * @param mutableDataList
-     * @returns {*}
      */
-    fn: (selectedKey, mutableDataList) => {
+    fn: (selectedKey: string, mutableDataList: TableDataRow[]) => {
       switch (selectedKey) {
         case 'all':
           return null;
@@ -138,7 +134,7 @@ const filters = [
       return null;
     },
   },
-];
+] as TableFilter[];
 
 /**
  * Retrieve list of all existing invites
diff --git a/frontend/src/views/admin/SubscriberPanelView.vue b/frontend/src/views/admin/SubscriberPanelView.vue
index 76acf2e5..6abd03e0 100644
--- a/frontend/src/views/admin/SubscriberPanelView.vue
+++ b/frontend/src/views/admin/SubscriberPanelView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { AlertSchemes, tableDataButtonType, tableDataType } from '@/definitions';
+import { AlertSchemes, TableDataButtonType, TableDataType } from '@/definitions';
 import {
   computed, inject, onMounted, ref,
 } from 'vue';
@@ -7,7 +7,7 @@ import { IconSend } from '@tabler/icons-vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useUserStore } from '@/stores/user-store';
-import { Subscriber, SubscriberListResponse, BooleanResponse, Exception } from "@/models";
+import { Subscriber, SubscriberListResponse, BooleanResponse, Exception, TableDataRow, TableDataColumn, TableFilter } from "@/models";
 import { dayjsKey, callKey } from "@/keys";
 import AdminNav from '@/elements/admin/AdminNav.vue';
 import AlertBox from '@/elements/AlertBox.vue';
@@ -32,40 +32,40 @@ const pageNotification = ref('');
 
 const filteredSubscribers = computed(() => subscribers.value.map((subscriber) => ({
   id: {
-    type: tableDataType.text,
+    type: TableDataType.Text,
     value: subscriber.id,
   },
   username: {
-    type: tableDataType.text,
+    type: TableDataType.Text,
     value: subscriber.username,
   },
   email: {
-    type: tableDataType.text,
+    type: TableDataType.Text,
     value: subscriber.email,
   },
   timeCreated: {
-    type: tableDataType.text,
+    type: TableDataType.Text,
     value: dj(subscriber.time_created).format('ll LTS'),
   },
   timeDeleted: {
-    type: tableDataType.text,
+    type: TableDataType.Text,
     value: subscriber.time_deleted ? dj(subscriber.time_deleted).format('ll LTS') : '',
   },
   timezone: {
-    type: tableDataType.text,
+    type: TableDataType.Text,
     value: subscriber.timezone ?? 'Unset',
   },
   wasInvited: {
-    type: tableDataType.bool,
+    type: TableDataType.Bool,
     value: Boolean(subscriber.invite),
   },
   disable: {
-    type: tableDataType.button,
-    buttonType: subscriber.time_deleted ? tableDataButtonType.primary : tableDataButtonType.caution,
+    type: TableDataType.Button,
+    buttonType: subscriber.time_deleted ? TableDataButtonType.Primary : TableDataButtonType.Caution,
     value: subscriber.time_deleted ? 'Enable' : 'Disable',
     disabled: !subscriber.time_deleted && subscriber.email === user.data.email,
   },
-})));
+} as TableDataRow)));
 const columns = [
   {
     key: 'id',
@@ -99,7 +99,7 @@ const columns = [
     key: 'disable',
     name: '',
   },
-];
+] as TableDataColumn[];
 const filters = [
   {
     name: 'Was Invited',
@@ -119,19 +119,15 @@ const filters = [
     ],
     /**
      * Callback function, filter the list by selectedKey and return it back to the table
-     * TODO: Add types when DataTable.vue is typed
-     * @param selectedKey
-     * @param mutableDataList
-     * @returns {*}
      */
-    fn: (selectedKey, mutableDataList) => {
+    fn: (selectedKey: string, mutableDataList: TableDataRow[]) => {
       if (selectedKey === 'all') {
         return mutableDataList;
       }
       return mutableDataList.filter((data) => data.wasInvited.value?.toString().toLowerCase() === selectedKey);
     },
   },
-];
+] as TableFilter[];
 
 /**
  * Retrieve list of all existing subscribers
diff --git a/frontend/src/views/admin/WaitingListPanelView.vue b/frontend/src/views/admin/WaitingListPanelView.vue
index df14c152..f3bcbfd9 100644
--- a/frontend/src/views/admin/WaitingListPanelView.vue
+++ b/frontend/src/views/admin/WaitingListPanelView.vue
@@ -3,9 +3,9 @@ import {
   computed, inject, onMounted, ref,
 } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { AlertSchemes, tableDataType } from '@/definitions';
+import { AlertSchemes, TableDataType } from '@/definitions';
 import { useRouter } from 'vue-router';
-import { WaitingListEntry, WaitingListResponse, BooleanResponse, Exception } from "@/models";
+import { WaitingListEntry, WaitingListResponse, BooleanResponse, TableDataRow, TableDataColumn, TableFilter } from "@/models";
 import { dayjsKey, callKey } from "@/keys";
 import DataTable from '@/components/DataTable.vue';
 import LoadingSpinner from '@/elements/LoadingSpinner.vue';
@@ -26,30 +26,30 @@ const pageNotification = ref('');
 
 const filteredUsers = computed(() => waitingListUsers.value.map((user) => ({
   id: {
-    type: tableDataType.text,
+    type: TableDataType.Text,
     value: user.id,
   },
   email: {
-    type: tableDataType.text,
+    type: TableDataType.Text,
     value: user.email,
   },
   email_verified: {
-    type: tableDataType.text,
+    type: TableDataType.Text,
     value: user.email_verified ? 'Verified' : 'Not Verified',
   },
   invite_id: {
-    type: tableDataType.text,
+    type: TableDataType.Text,
     value: user.invite_id ?? 'Awaiting Access',
   },
   timeCreated: {
-    type: tableDataType.text,
+    type: TableDataType.Text,
     value: dj(user.time_created).format('ll LTS'),
   },
   timeUpdated: {
-    type: tableDataType.text,
+    type: TableDataType.Text,
     value: dj(user.time_updated).format('ll LTS'),
   },
-})));
+} as TableDataRow)));
 const columns = [
   {
     key: 'id',
@@ -75,7 +75,7 @@ const columns = [
     key: 'updatedAt',
     name: 'Time Updated',
   },
-];
+] as TableDataColumn[];
 const filters = [
   {
     name: 'Invite Status',
@@ -95,12 +95,8 @@ const filters = [
     ],
     /**
      * Callback function, filter the list by selectedKey and return it back to the table
-     * TODO: Add types when DataTable.vue is typed
-     * @param selectedKey
-     * @param mutableDataList
-     * @returns {*}
      */
-    fn: (selectedKey, mutableDataList) => {
+    fn: (selectedKey: string, mutableDataList: TableDataRow[]) => {
       switch (selectedKey) {
         case 'all':
           return null;
@@ -132,12 +128,8 @@ const filters = [
     ],
     /**
      * Callback function, filter the list by selectedKey and return it back to the table
-     * TODO: Add types when DataTable.vue is typed
-     * @param selectedKey
-     * @param mutableDataList
-     * @returns {*}
      */
-    fn: (selectedKey, mutableDataList) => {
+    fn: (selectedKey: string, mutableDataList: TableDataRow[]) => {
       switch (selectedKey) {
         case 'all':
           return null;
@@ -151,7 +143,7 @@ const filters = [
       return null;
     },
   },
-];
+] as TableFilter[];
 
 /**
  * Retrieve waiting list entries