diff --git a/frontend/src/components/AreaAction.vue b/frontend/src/components/AreaAction.vue
index 330db90..3b4f65b 100644
--- a/frontend/src/components/AreaAction.vue
+++ b/frontend/src/components/AreaAction.vue
@@ -1,43 +1,32 @@
 <script setup lang="ts">
-type syncAsyncFunction = () => void | Promise<void>;
-interface AreaActionProps {
-  onLeftTap?: syncAsyncFunction;
-  onMiddleTap?: syncAsyncFunction;
-  onRightTap?: syncAsyncFunction;
-}
+const emit = defineEmits<{
+  onLeftTap: [];
+  onMiddleTap: [];
+  onRightTap: [];
+}>();
 
-const props = defineProps<AreaActionProps>();
-
-const slideLeft = ref(false);
-const slideRight = ref(false);
 const delay = 500;
 
 const handleClick = (event: MouseEvent) => {
   const screenWidth = window.innerWidth;
   const clickPosition = event.clientX;
 
-  if (clickPosition < screenWidth / 4 && props.onLeftTap) {
-    slideLeft.value = true;
+  if (clickPosition < screenWidth / 4) {
     setTimeout(() => {
-      props.onLeftTap!();
+      emit("onLeftTap");
     }, delay);
     return;
   }
 
-  if (clickPosition > (3 * screenWidth) / 4 && props.onRightTap) {
-    slideRight.value = true;
+  if (clickPosition > (3 * screenWidth) / 4) {
     setTimeout(() => {
-      props.onRightTap!();
+      emit("onRightTap");
     }, delay);
 
     return;
   }
 
-  if (!props.onMiddleTap) {
-    return;
-  }
-
-  props.onMiddleTap();
+  emit("onMiddleTap");
 };
 </script>
 
diff --git a/frontend/src/components/ErrorPopup.vue b/frontend/src/components/ErrorPopup.vue
index 2f0cee2..5a5b543 100644
--- a/frontend/src/components/ErrorPopup.vue
+++ b/frontend/src/components/ErrorPopup.vue
@@ -24,7 +24,8 @@ const closeModal = () => {
 
 watch(
   () => props.open,
-  () => (isOpen.value = props.open)
+  () => (isOpen.value = props.open),
+  { immediate: true }
 );
 </script>
 
@@ -44,7 +45,7 @@ watch(
       </TransitionChild>
 
       <div
-        class="fixed inset-28 flex min-h-full items-center justify-center overflow-y-auto p-4 text-center"
+        class="fixed inset-6 flex min-h-full items-center justify-center overflow-y-auto p-4 text-center md:inset-28"
       >
         <TransitionChild
           as="template"
diff --git a/frontend/src/components/HomeView.vue b/frontend/src/components/HomeView.vue
index 0f36bd6..a80ecac 100644
--- a/frontend/src/components/HomeView.vue
+++ b/frontend/src/components/HomeView.vue
@@ -1,9 +1,5 @@
 <script setup lang="ts">
-import {
-  TrainsResponseEntity,
-  AppConstants,
-} from "@wmata-train-tracker/shared";
-import MinSizeWarning from "./MinSizeWarning.vue";
+import { TrainsResponseEntity } from "@wmata-train-tracker/shared";
 import AreaAction from "./AreaAction.vue";
 import SublineText from "./SublineText.vue";
 import TrainArrivalBoard from "./TrainArrivalBoard.vue";
@@ -29,33 +25,31 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <MinSizeWarning :min-width="AppConstants.minScreenSize" class="trains">
-    <AreaAction
-      :on-left-tap="() => emit('onLeftTap')"
-      :on-middle-tap="() => emit('onMiddleTap')"
-      :on-right-tap="() => emit('onRightTap')"
-    >
-      <div v-if="trainData" class="flex h-screen flex-col justify-between">
-        <TrainArrivalBoard class="trains" :trains="trainData.trains" />
-        <div class="mb-2 flex flex-row items-center gap-4">
-          <SublineText
-            class="trains mr-auto w-1/2 truncate text-4xl text-gray-700"
-          >
-            {{ selectedStationName }}
-          </SublineText>
-          <IncidentNotification
-            v-if="hasIncidents"
-            @on-see-incidents="() => emit('onSeeIncidents')"
-          />
-          <LastUpdated
-            class="trains"
-            :last-updated="new Date(trainData.lastUpdated)"
-          />
-        </div>
+  <AreaAction
+    @on-left-tap="() => emit('onLeftTap')"
+    @on-middle-tap="() => emit('onMiddleTap')"
+    @on-right-tap="() => emit('onRightTap')"
+  >
+    <div v-if="trainData" class="flex h-screen flex-col justify-between">
+      <TrainArrivalBoard class="trains" :trains="trainData.trains" />
+      <div class="mb-2 flex flex-row items-center gap-4">
+        <SublineText
+          class="trains mr-auto w-1/2 truncate text-2xl text-gray-700 md:text-4xl"
+        >
+          {{ selectedStationName }}
+        </SublineText>
+        <IncidentNotification
+          v-if="hasIncidents"
+          @on-see-incidents="() => emit('onSeeIncidents')"
+        />
+        <LastUpdated
+          class="trains"
+          :last-updated="new Date(trainData.lastUpdated)"
+        />
       </div>
-      <LoadingIndicator :show="isRefreshing" />
-    </AreaAction>
-  </MinSizeWarning>
+    </div>
+    <LoadingIndicator :show="isRefreshing" />
+  </AreaAction>
 </template>
 
 <style scoped>
diff --git a/frontend/src/components/LastUpdated.vue b/frontend/src/components/LastUpdated.vue
index 4fab01b..8a7e551 100644
--- a/frontend/src/components/LastUpdated.vue
+++ b/frontend/src/components/LastUpdated.vue
@@ -16,7 +16,7 @@ const lastUpdatedLocale = computed(() =>
 </script>
 
 <template>
-  <SublineText class="text-4xl text-gray-700"
+  <SublineText class="text-2xl text-gray-700 md:text-4xl"
     >Updated: {{ lastUpdatedLocale }}</SublineText
   >
 </template>
diff --git a/frontend/src/components/LoadingIndicator.vue b/frontend/src/components/LoadingIndicator.vue
index 07df5cd..ed5816a 100644
--- a/frontend/src/components/LoadingIndicator.vue
+++ b/frontend/src/components/LoadingIndicator.vue
@@ -2,6 +2,7 @@
 interface LoadingProps {
   show: boolean;
 }
+
 const minLoadingTimeInMs = 1000;
 const props = defineProps<LoadingProps>();
 const show = ref(false);
diff --git a/frontend/src/components/MinSizeWarning.vue b/frontend/src/components/MinSizeWarning.vue
deleted file mode 100644
index ee69bbd..0000000
--- a/frontend/src/components/MinSizeWarning.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<script setup lang="ts">
-import { useResizeObserver } from "@vueuse/core";
-
-interface MinSizeWarningProps {
-  minWidth: number;
-}
-
-const props = defineProps<MinSizeWarningProps>();
-
-const element = ref<HTMLDivElement | null>(null);
-const isTooSmall = ref(false);
-
-useResizeObserver(element, () => {
-  const width = element.value?.clientWidth ?? 0;
-  if (!width) {
-    return;
-  }
-
-  isTooSmall.value = width < props.minWidth;
-});
-</script>
-
-<template>
-  <div ref="element">
-    <div
-      v-if="isTooSmall"
-      class="m-8 flex flex-col items-center justify-center text-3xl text-amber-400"
-    >
-      <p class="text-red-600">This application works best on wider screens</p>
-      <p>Try rotating your device or using a larger screen</p>
-    </div>
-    <slot v-else></slot>
-  </div>
-</template>
diff --git a/frontend/src/components/SublineText.vue b/frontend/src/components/SublineText.vue
index e676505..6f1115d 100644
--- a/frontend/src/components/SublineText.vue
+++ b/frontend/src/components/SublineText.vue
@@ -1,3 +1,3 @@
 <template>
-  <p class="text-4xl text-gray-700"><slot></slot></p>
+  <p class="text-gray-700"><slot></slot></p>
 </template>
diff --git a/frontend/src/components/TextCarousel.vue b/frontend/src/components/TextCarousel.vue
index a154d58..bcac990 100644
--- a/frontend/src/components/TextCarousel.vue
+++ b/frontend/src/components/TextCarousel.vue
@@ -52,7 +52,7 @@ const emit = defineEmits<{
     <p
       v-for="(slide, index) of slides"
       :key="index"
-      class="slide flex w-screen items-center justify-center text-center text-5xl leading-[1.7ch] text-red-600"
+      class="slide flex w-screen items-center justify-center text-center text-2xl leading-[1.7ch] text-red-600 md:text-5xl"
       :style="{ transform: `translateX(-${activeIndex * 100}%)` }"
     >
       {{ slide }}
diff --git a/frontend/src/components/TrainArrivalBoard.vue b/frontend/src/components/TrainArrivalBoard.vue
index eff9432..ea87977 100644
--- a/frontend/src/components/TrainArrivalBoard.vue
+++ b/frontend/src/components/TrainArrivalBoard.vue
@@ -14,7 +14,7 @@ defineProps<TrainArrivalBoardProps>();
 </script>
 
 <template>
-  <div ref="parent" class="bg-black text-8xl">
+  <div ref="parent" class="bg-black text-4xl md:text-8xl">
     <div class="mb-2 grid grid-cols-8 text-red-600">
       <p class="col-span-1">LN</p>
       <p class="col-span-2">CAR</p>
diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts
index 48564d0..5b4680b 100644
--- a/frontend/src/components/index.ts
+++ b/frontend/src/components/index.ts
@@ -6,7 +6,6 @@ import IncidentsNotification from "./IncidentNotification.vue";
 import IncidentsView from "./IncidentsView.vue";
 import LastUpdate from "./LastUpdated.vue";
 import LoadingIndicator from "./LoadingIndicator.vue";
-import MinSizeWarning from "./MinSizeWarning.vue";
 import ScrollableStationList from "./ScrollableStationList.vue";
 import SublineText from "./SublineText.vue";
 import TextCarousel from "./TextCarousel.vue";
@@ -21,7 +20,6 @@ export {
   IncidentsView,
   LastUpdate,
   LoadingIndicator,
-  MinSizeWarning,
   ScrollableStationList,
   SublineText,
   TextCarousel,
diff --git a/frontend/src/composables/typed-router.ts b/frontend/src/composables/typed-router.ts
index a818093..f4b3e4d 100644
--- a/frontend/src/composables/typed-router.ts
+++ b/frontend/src/composables/typed-router.ts
@@ -1,8 +1,5 @@
 import { useRouter } from "vue-router";
-import { Route } from "@/constants/constants";
-
-type RouteKeys = keyof typeof Route;
-type RouteValues = (typeof Route)[RouteKeys];
+import { RouteValues } from "@wmata-train-tracker/shared";
 
 /**
  * A utility function that wraps the Vue Router's `useRouter` hook and provides type safety
diff --git a/frontend/src/constants/constants.ts b/frontend/src/constants/constants.ts
index f41c766..e824e06 100644
--- a/frontend/src/constants/constants.ts
+++ b/frontend/src/constants/constants.ts
@@ -8,9 +8,3 @@ export const RuntimeErrorEvent = {
   trains: "trains_error",
   incidents: "incidents_error",
 } as const;
-
-export const Route = {
-  Index: "/",
-  Stations: "/stations",
-  Incidents: "/incidents",
-} as const;
diff --git a/frontend/src/pages/IncidentsPage.vue b/frontend/src/pages/IncidentsPage.vue
index ff0cf18..81fa6c6 100644
--- a/frontend/src/pages/IncidentsPage.vue
+++ b/frontend/src/pages/IncidentsPage.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { GetIncidents } from "@wails/go/app/App";
-import { IncidentsResponseEntity } from "@wmata-train-tracker/shared";
+import { IncidentsResponseEntity, Route } from "@wmata-train-tracker/shared";
 import IncidentsView from "@/components/IncidentsView.vue";
 import { useQuery } from "@/composables/query";
 import { useTypedRouter } from "@/composables/typed-router";
-import { Route } from "@/constants/constants";
 
 const router = useTypedRouter();
 
diff --git a/frontend/src/pages/IndexPage.vue b/frontend/src/pages/IndexPage.vue
index 8625b6b..c4bd153 100644
--- a/frontend/src/pages/IndexPage.vue
+++ b/frontend/src/pages/IndexPage.vue
@@ -4,11 +4,12 @@ import {
   IncidentsResponseEntity,
   StationEntity,
   TrainsResponseEntity,
+  Route,
 } from "@wmata-train-tracker/shared";
 import HomeView from "@/components/HomeView.vue";
 import ErrorPopup from "@/components/ErrorPopup.vue";
 import { useQuery } from "@/composables/query";
-import { Route, RuntimeEvent, RuntimeErrorEvent } from "@/constants/constants";
+import { RuntimeEvent, RuntimeErrorEvent } from "@/constants/constants";
 import { useTypedRouter } from "@/composables/typed-router";
 import { useRuntime } from "@/composables/runtime";
 
diff --git a/frontend/src/pages/StationsPage.vue b/frontend/src/pages/StationsPage.vue
index 8fdd3b6..a2a46a3 100644
--- a/frontend/src/pages/StationsPage.vue
+++ b/frontend/src/pages/StationsPage.vue
@@ -2,6 +2,7 @@
 import {
   StationEntity,
   StationsResponseEntity,
+  Route,
 } from "@wmata-train-tracker/shared";
 import ScrollableStationList from "@/components/ScrollableStationList.vue";
 import { useQuery } from "@/composables/query";
@@ -13,7 +14,6 @@ import {
   SetCurrentStationPage,
 } from "@wails/go/app/App";
 import { useTypedRouter } from "@/composables/typed-router";
-import { Route } from "@/constants/constants";
 import ErrorPopup from "@/components/ErrorPopup.vue";
 
 const router = useTypedRouter();
diff --git a/frontend/src/routes/router.ts b/frontend/src/routes/router.ts
index 54d1758..b9dd389 100644
--- a/frontend/src/routes/router.ts
+++ b/frontend/src/routes/router.ts
@@ -1,8 +1,8 @@
 import { RouteRecordRaw, createRouter, createWebHashHistory } from "vue-router";
+import { Route } from "@wmata-train-tracker/shared";
 import IndexPage from "@/pages/IndexPage.vue";
 import StationsPage from "@/pages/StationsPage.vue";
 import IncidentsPage from "@/pages/IncidentsPage.vue";
-import { Route } from "@/constants/constants";
 
 const routes: RouteRecordRaw[] = [
   { path: Route.Index, component: IndexPage },
diff --git a/frontend/wailsjs/runtime/package.json b/frontend/wailsjs/runtime/package.json
old mode 100755
new mode 100644
diff --git a/frontend/wailsjs/runtime/runtime.d.ts b/frontend/wailsjs/runtime/runtime.d.ts
old mode 100755
new mode 100644
diff --git a/frontend/wailsjs/runtime/runtime.js b/frontend/wailsjs/runtime/runtime.js
old mode 100755
new mode 100644
diff --git a/nuxt/composables/use_mounted_interval.composable.ts b/nuxt/composables/use_mounted_interval.composable.ts
index c0da792..61efbed 100644
--- a/nuxt/composables/use_mounted_interval.composable.ts
+++ b/nuxt/composables/use_mounted_interval.composable.ts
@@ -9,7 +9,7 @@ export const useMountedInterval = (
   callback: () => void | Promise<void>,
   delay: number
 ) => {
-  const refreshInterval = ref<NodeJS.Timer>();
+  const refreshInterval = ref<NodeJS.Timeout>();
 
   onMounted(() => {
     refreshInterval.value = setInterval(callback, delay);
diff --git a/nuxt/pages/incidents.vue b/nuxt/pages/incidents.vue
index 8fc38f8..42d310b 100644
--- a/nuxt/pages/incidents.vue
+++ b/nuxt/pages/incidents.vue
@@ -1,19 +1,25 @@
 <script setup lang="ts">
-import { useTrainStore } from "~/stores/train.store";
 import { IncidentsView } from "@wmata-train-tracker/frontend";
+import { Route } from "@wmata-train-tracker/shared";
+import { useTrainStore } from "~/stores/train.store";
 
 const trainStore = useTrainStore();
 const { incidents } = toRefs(trainStore);
 
 const onSlideEnd = () => {
   trainStore.clearIncidents();
-  navigateTo("/", { replace: true });
+  navigateTo(Route.Index, { replace: true });
 };
 
-onMounted(() => {
-  if (trainStore.incidents.length === 0) {
-    navigateTo("/", { replace: true });
-  }
+definePageMeta({
+  middleware: [
+    function () {
+      const trainStore = useTrainStore();
+      if (trainStore.incidents.length === 0) {
+        return navigateTo(Route.Index, { replace: true });
+      }
+    },
+  ],
 });
 </script>
 
diff --git a/nuxt/pages/index.vue b/nuxt/pages/index.vue
index 028688a..3be7691 100644
--- a/nuxt/pages/index.vue
+++ b/nuxt/pages/index.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { ErrorPopup, HomeView } from "@wmata-train-tracker/frontend";
+import { Route, RouteValues } from "@wmata-train-tracker/shared";
 import { useGetTrains } from "~/composables/use_train.composable";
 import { useTrainStore } from "~/stores/train.store";
-import { route } from "~/types/route.type";
 
 const runtimeConfig = useRuntimeConfig();
 const router = useRouter();
@@ -32,13 +32,13 @@ const hasIncidents = computed(
     false
 );
 
-const routeOnAreaTap = async (route: route) => {
+const routeOnAreaTap = async (route: RouteValues) => {
   await router.push(route);
 };
 
 const onSeeIncidents = () => {
   if (hasIncidents.value) {
-    navigateTo("/incidents");
+    navigateTo(Route.Incidents);
   }
 };
 
@@ -82,17 +82,19 @@ watch(station, () => {
 
 <template>
   <div>
-    <HomeView
-      v-if="trainData"
-      :train-data="trainData"
-      :selected-station-name="trainStore.selectedStation?.name"
-      :has-incidents="hasIncidents"
-      :is-refreshing="trainIsRefreshing"
-      @on-left-tap="() => routeOnAreaTap('stations')"
-      @on-middle-tap="onMiddleTapped"
-      @on-right-tap="() => routeOnAreaTap('incidents')"
-      @on-see-incidents="onSeeIncidents"
-    />
+    <ClientOnly>
+      <HomeView
+        v-if="trainData"
+        :train-data="trainData"
+        :selected-station-name="trainStore.selectedStation?.name"
+        :has-incidents="hasIncidents"
+        :is-refreshing="trainIsRefreshing"
+        @on-left-tap="() => routeOnAreaTap(Route.Stations)"
+        @on-middle-tap="onMiddleTapped"
+        @on-right-tap="() => routeOnAreaTap(Route.Incidents)"
+        @on-see-incidents="onSeeIncidents"
+      />
+    </ClientOnly>
     <ErrorPopup
       :open="(!trainIsRefreshing && !trainData) || Boolean(trainError?.message)"
       @on-close="refreshTrains"
diff --git a/nuxt/pages/stations.vue b/nuxt/pages/stations.vue
index f164877..df91d46 100644
--- a/nuxt/pages/stations.vue
+++ b/nuxt/pages/stations.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { StationEntity } from "@wmata-train-tracker/shared";
+import { ScrollableStationList } from "@wmata-train-tracker/frontend";
+import { StationEntity, Route } from "@wmata-train-tracker/shared";
 import { useGetStations } from "~/composables/use_train.composable";
 import { useTrainStore } from "~/stores/train.store";
-import { ScrollableStationList } from "@wmata-train-tracker/frontend";
 
 const stationStore = useTrainStore();
 const { selectedStation, currentPage } = toRefs(stationStore);
@@ -13,7 +13,7 @@ const router = useRouter();
 const onStationClicked = (station: StationEntity) => {
   stationStore.setSelectedStation(station);
   router.push({
-    path: "/",
+    path: Route.Index,
     query: { stationId: selectedStation.value?.code },
   });
 };
@@ -32,7 +32,7 @@ const onSetPage = (page: number) => {
       :current-page="currentPage"
       @on-set-page="onSetPage"
       @station-clicked="onStationClicked"
-      @back-clicked="router.push('/')"
+      @back-clicked="router.push(Route.Index)"
     />
     <ErrorPopup
       :open="(!pending && !data) || Boolean(error?.message)"
diff --git a/nuxt/plugins/components.ts b/nuxt/plugins/components.ts
index bef17bd..4e7c1e6 100644
--- a/nuxt/plugins/components.ts
+++ b/nuxt/plugins/components.ts
@@ -7,7 +7,6 @@ import {
   IncidentsView,
   LastUpdate,
   LoadingIndicator,
-  MinSizeWarning,
   ScrollableStationList,
   SublineText,
   TextCarousel,
@@ -23,7 +22,6 @@ export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.component("IncidentsView", IncidentsView);
   nuxtApp.vueApp.component("LastUpdate", LastUpdate);
   nuxtApp.vueApp.component("LoadingIndicator", LoadingIndicator);
-  nuxtApp.vueApp.component("MinSizeWarning", MinSizeWarning);
   nuxtApp.vueApp.component("ScrollableStationList", ScrollableStationList);
   nuxtApp.vueApp.component("SublineText", SublineText);
   nuxtApp.vueApp.component("TextCarousel", TextCarousel);
diff --git a/nuxt/tailwind.config.js b/nuxt/tailwind.config.js
new file mode 100644
index 0000000..cc671d2
--- /dev/null
+++ b/nuxt/tailwind.config.js
@@ -0,0 +1,15 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./components/**/*.{js,vue,ts}",
+    "./layouts/**/*.vue",
+    "./pages/**/*.vue",
+    "./plugins/**/*.{js,ts}",
+    "./app.vue",
+    "./error.vue",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
diff --git a/nuxt/types/route.type.ts b/nuxt/types/route.type.ts
deleted file mode 100644
index 074baac..0000000
--- a/nuxt/types/route.type.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type route = "incidents" | "stations" | "/";
diff --git a/shared/src/constants/app.constants.ts b/shared/src/constants/app.constants.ts
index 68285b3..891a356 100644
--- a/shared/src/constants/app.constants.ts
+++ b/shared/src/constants/app.constants.ts
@@ -2,11 +2,6 @@
  * This class contains all the constants used in the application.
  */
 export default class AppConstants {
-  /**
-   * The minimum screen size for the application.
-   */
-  public static readonly minScreenSize = 684;
-
   /**
    * The minimum size for the station buttons.
    */
diff --git a/shared/src/constants/index.ts b/shared/src/constants/index.ts
index 5b596d6..df2c50c 100644
--- a/shared/src/constants/index.ts
+++ b/shared/src/constants/index.ts
@@ -1,3 +1,4 @@
 import AppConstants from "./app.constants";
+import { Route, type RouteValues } from "./routes.constants";
 
-export { AppConstants };
+export { AppConstants, Route, RouteValues };
diff --git a/shared/src/constants/routes.constants.ts b/shared/src/constants/routes.constants.ts
new file mode 100644
index 0000000..d0952d6
--- /dev/null
+++ b/shared/src/constants/routes.constants.ts
@@ -0,0 +1,8 @@
+export const Route = {
+  Index: "/",
+  Stations: "/stations",
+  Incidents: "/incidents",
+} as const;
+
+type RouteKeys = keyof typeof Route;
+export type RouteValues = (typeof Route)[RouteKeys];