diff --git a/.gitignore b/.gitignore
index 9f860c6..8ee54e8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,4 +28,3 @@ coverage
 *.sw?
 
 *.tsbuildinfo
-*~
diff --git a/CHANGELOG.md b/CHANGELOG.md
index db28db8..a7907dd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,38 +7,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
-## 0.1.11 - 2025-10-06
-### Changed
-- update source code info for about page
-
-## 0.1.10 - 2024-06-09
-### Changed
-- Fix URL bug when refreshing weather radar.
-
-## 0.1.9 - 2024-06-09
-### Changed
-- Warning notification should not butt up against forecast panel.
-- Add timestamp param to bust cache when refreshing radar images.
-
-## 0.1.8 - 2024-06-09
-### Added
-- Add link to national radar map (live image).
-- Add refresh buttons to weather data pages.
-### Changed
-- Convert all view components to use Composition API.
-
-## 0.1.7 - 2024-06-08
-### Added
-- Add basic support for active weather alerts.
-
-## 0.1.6 - 2024-06-08
-### Changed
-- Add proper About page.
-
-## 0.1.5 - 2024-06-08
-### Changed
-- Tighten up the forecast period panels a bit.
-
 ## 0.1.4 - 2024-06-08
 ### Changed
 - Fix horizontal scroll for main forecast panel.
diff --git a/package-lock.json b/package-lock.json
index 8dc30e3..61bad3c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "myweather",
-  "version": "0.1.11",
+  "version": "0.1.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "myweather",
-      "version": "0.1.11",
+      "version": "0.1.4",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^6.5.2",
         "@fortawesome/free-solid-svg-icons": "^6.5.2",
diff --git a/package.json b/package.json
index 46a5d15..ea0e9b9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "myweather",
-  "version": "0.1.11",
+  "version": "0.1.4",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/src/App.vue b/src/App.vue
index 0acaf8c..92618c4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,28 +3,21 @@ import { RouterLink, RouterView } from 'vue-router'
 </script>
 
 <template>
-  <div class="page-wrapper">
-    <header>
-      <router-link to="/">
-        <img src="/nwslogo.gif" width="38" height="38" />
-        <h5 class="is-size-5 has-text-weight-bold">Weather</h5>
-      </router-link>
-    </header>
+  <header>
+    <router-link to="/">
+      <img src="/nwslogo.gif" width="38" height="38" />
+      <h5 class="is-size-5 has-text-weight-bold">Weather</h5>
+    </router-link>
 
-    <div style="padding: 0.5rem;">
-      <router-view v-slot="{Component}">
-        <keep-alive>
-          <component :is="Component" />
-        </keep-alive>
-      </router-view>
-    </div>
+  </header>
+
+  <div style="padding: 0.5rem;">
+    <router-view v-slot="{Component}">
+      <keep-alive>
+        <component :is="Component" />
+      </keep-alive>
+    </router-view>
   </div>
-
-  <footer class="footer">
-    <div class="content">
-      <router-link to="/about">About this app</router-link>
-    </div>
-  </footer>
 </template>
 
 <style scoped>
diff --git a/src/appsettings.js b/src/appsettings.js
deleted file mode 100644
index 21c80c7..0000000
--- a/src/appsettings.js
+++ /dev/null
@@ -1,10 +0,0 @@
-
-import packageData from '../package.json'
-
-const appsettings = {
-    appTitle: packageData.name,
-    appVersion: packageData.version,
-    appDependencies: packageData.dependencies,
-}
-
-export default appsettings
diff --git a/src/assets/main.scss b/src/assets/main.scss
index 3e608e2..17c1cb8 100644
--- a/src/assets/main.scss
+++ b/src/assets/main.scss
@@ -1,15 +1 @@
 @import './custom.scss';
-
-
-/* nb. these are here to force footer to bottom of screen */
-
-html, body {
-    height: 100%;
-}
-
-#app {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-}
diff --git a/src/router/index.js b/src/router/index.js
index 7430367..464d998 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,7 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 import WeatherView from '../views/WeatherView.vue'
-import AlertsView from '../views/AlertsView.vue'
 import HourlyView from '../views/HourlyView.vue'
 import EditListView from '../views/EditListView.vue'
 
@@ -18,11 +17,6 @@ const router = createRouter({
         name: 'weather',
         component: WeatherView,
     },
-    {
-        path: '/alerts',
-        name: 'alerts',
-        component: AlertsView,
-    },
     {
         path: '/hourly',
         name: 'hourly',
diff --git a/src/stores/weather.js b/src/stores/weather.js
index f02e4a9..c8c91ab 100644
--- a/src/stores/weather.js
+++ b/src/stores/weather.js
@@ -10,7 +10,6 @@ const getDefaults = () => {
         coordinates,
         cityState,
         weather: null,
-        alerts: null,
         forecast: null,
         radarLatestURL: null,
         radarLoopURL: null,
@@ -26,26 +25,21 @@ export const useWeatherStore = defineStore('weather', {
 
     actions: {
 
-        clearWeather(keepCoordinates) {
-            if (!keepCoordinates) {
-                this.setCoordinates(null)
-                this.setCityState(null)
-            }
+        clearWeather() {
+            this.setCoordinates(null)
+            this.setCityState(null)
             this.setWeather(null)
             this.setForecast(null)
             this.radarLatestURL = null
             this.radarLoopURL = null
-            this.alerts = null
         },
 
         async getWeather() {
 
             if (!this.weather) {
-                let url
-                let response
 
-                url = `https://api.weather.gov/points/${this.coordinates}`
-                response = await fetch(url)
+                const url = `https://api.weather.gov/points/${this.coordinates}`
+                const response = await fetch(url)
                 const weather = await response.json()
                 if (weather.status == 404) {
                     throw new Error(`Data not found for ${this.coordinates}`)
@@ -63,65 +57,6 @@ export const useWeatherStore = defineStore('weather', {
                 this.radarLoopURL = `https://radar.weather.gov/ridge/standard/${station}_loop.gif`
 
                 this.setWeather(weather)
-
-                // fetch zone to get its official id
-                url = weather.properties.forecastZone
-                response = await fetch(url)
-                const zone = await response.json()
-
-                // fetch alerts for zone
-                url = `https://api.weather.gov/alerts/active/zone/${zone.properties.id}`
-                response = await fetch(url)
-                const zoneAlerts = await response.json()
-
-                // fetch county to get its official id
-                url = weather.properties.county
-                response = await fetch(url)
-                const county = await response.json()
-
-                // fetch alerts for county
-                url = `https://api.weather.gov/alerts/active/zone/${county.properties.id}`
-                response = await fetch(url)
-                const countyAlerts = await response.json()
-
-                const newAlerts = {}
-
-                // use latest timestamp from either zone or county
-                newAlerts.updated = zoneAlerts.updated
-                if (countyAlerts.updated > zoneAlerts.updated) {
-                    newAlerts.updated = countyAlerts.updated
-                }
-
-                // collect all alert "features" but de-duplicate them
-                newAlerts.features = {}
-                for (let feature of zoneAlerts.features) {
-                    newAlerts.features[feature.properties.id] = feature
-                }
-                for (let feature of countyAlerts.features) {
-                    newAlerts.features[feature.properties.id] = feature
-                }
-                newAlerts.features = Object.values(newAlerts.features)
-
-                // put "likely" before "possible" alerts
-                newAlerts.features.sort((a, b) => {
-
-                    if (a.properties.certainty == 'Likely' && b.properties.certainty != 'Likely') {
-                        return -1
-                    }
-                    if (a.properties.certainty != 'Likely' && b.properties.certainty == 'Likely') {
-                        return 1
-                    }
-
-                    // if (a.properties.certainty == b.properties.certainty) {
-                    //     return 0
-                    // }
-
-                    // TODO: what else should this do?
-                    return 0
-                })
-
-                // we have our final alerts
-                this.alerts = newAlerts
             }
 
             return this.weather
@@ -131,7 +66,7 @@ export const useWeatherStore = defineStore('weather', {
 
             if (!this.forecast) {
 
-                const weather = await this.getWeather()
+                const weather = await this.getWeather(this.coordinates)
 
                 const url = weather.properties.forecast
                 const response = await fetch(url)
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
index c1deb33..756ad2a 100644
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@@ -1,57 +1,15 @@
-<script setup>
-import appsettings from '../appsettings'
-</script>
-
 <template>
   <div class="about">
-    <h4 class="is-size-4">{{ appsettings.appTitle }} {{ appsettings.appVersion }}</h4>
-
-    <br />
-
-    <p class="block">
-      This app was built in rather a hurry, to replace my personal
-      usage of the original
-      <a href="https://mobile.weather.gov" target="_blank">
-        <span class="icon-text">
-          <o-icon icon="external-link" />
-          <span>mobile.weather.gov</span>
-        </span>
-      </a>
-      site which was being decommissioned.&nbsp;
-      (See also
-      <a href="https://www.weather.gov/media/notification/pdf_2023_24/scn24-51_mobile_decommissioning.pdf" target="_blank">
-        <span class="icon-text">
-          <o-icon icon="external-link" />
-          <span>this statement</span>
-        </span>
-      </a>.)
-    </p>
-
-    <p class="block">
-      Source code is available at
-      <a href="https://forgejo.wuttaproject.org/lance/myweather" target="_blank">
-        <span class="icon-text">
-          <o-icon icon="external-link" />
-          <span>https://forgejo.wuttaproject.org/lance/myweather</span>
-        </span>
-      </a>
-    </p>
-
-    <p class="block">
-      This app is primarily for personal use, but if you also find it useful and
-      have suggestions, email me at <a href="mailto:lance@edbob.org">lance@edbob.org</a>
-    </p>
-
-    <br />
-
-    <o-field label="Dependencies">
-      <ul>
-        <li v-for="(ver, pkg, i) in appsettings.appDependencies"
-            :key="pkg">
-          {{ pkg }} {{ ver }}
-        </li>
-      </ul>
-    </o-field>
-
+    <h1>This is an about page</h1>
   </div>
 </template>
+
+<style>
+@media (min-width: 1024px) {
+  .about {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+  }
+}
+</style>
diff --git a/src/views/AlertsView.vue b/src/views/AlertsView.vue
deleted file mode 100644
index dbafb32..0000000
--- a/src/views/AlertsView.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<script setup>
-import { ref, onActivated } from 'vue'
-import { useWeatherStore } from '../stores/weather'
-
-const weatherStore = useWeatherStore()
-
-const refreshing = ref(false)
-
-onActivated(() => {
-    refreshing.value = true
-    weatherStore.getWeather().then(() => {
-        refreshing.value = false
-    })
-})
-
-async function refreshAlerts() {
-    refreshing.value = true
-    weatherStore.clearWeather(true)
-    await weatherStore.getWeather()
-    refreshing.value = false
-}
-
-</script>
-
-<template>
-  <main>
-
-    <div class="block"
-         style="display: flex; align-items: center; justify-content: space-between;">
-      <o-button variant="primary"
-                icon-left="arrow-left"
-                @click="$router.push('/weather')">
-        Back
-      </o-button>
-      <o-button variant="primary"
-                icon-left="refresh"
-                @click="refreshAlerts()"
-                :disabled="refreshing">
-        {{ refreshing ? "Refreshing" : "Refresh" }}
-      </o-button>
-    </div>
-
-    <h5 class="is-size-5">{{ weatherStore.cityState }}</h5>
-    <h5 class="is-size-5">Alerts</h5>
-    <br />
-
-    <o-collapse v-for="feature in weatherStore.alerts?.features || []"
-                variant="warning"
-                :open="false">
-      <template #trigger>
-        <o-notification :variant="feature.properties.certainty == 'Likely' ? 'danger' : 'warning'"
-                        icon="plus"
-                        icon-size="small"
-                        style="cursor: pointer;">
-          {{ feature.properties.event }} ({{ feature.properties.severity }}, {{ feature.properties.certainty }})
-        </o-notification>
-      </template>
-      <div class="notification">
-        <h5 class="is-size-5 block">{{ feature.properties.headline }}</h5>
-        <p class="block" style="white-space: pre-wrap;">{{ feature.properties.description }}</p>
-      </div>
-    </o-collapse>
-
-  </main>
-</template>
diff --git a/src/views/EditListView.vue b/src/views/EditListView.vue
index fe38b22..fe588ee 100644
--- a/src/views/EditListView.vue
+++ b/src/views/EditListView.vue
@@ -1,12 +1,22 @@
 <script setup>
+import { mapStores } from 'pinia'
 import { useLocationStore } from '../stores/location'
+</script>
 
-const locationStore = useLocationStore()
+<script>
+export default {
 
-function deleteLocation(location) {
-    locationStore.removeLocation(location)
+    computed: {
+        ...mapStores(useLocationStore),
+    },
+
+    methods: {
+
+        deleteLocation(location) {
+            this.locationStore.removeLocation(location)
+        },
+    },
 }
-
 </script>
 
 <template>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 3f94f8b..5f26d36 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,107 +1,109 @@
 <script setup>
-import { ref } from 'vue'
-import { useRouter } from 'vue-router'
+import { mapStores } from 'pinia'
 import { useWeatherStore } from '../stores/weather'
 import { useLocationStore } from '../stores/location'
-import { useOruga } from '@oruga-ui/oruga-next'
+</script>
 
+<script>
+export default {
 
-const router = useRouter()
-const locationStore = useLocationStore()
-const weatherStore = useWeatherStore()
-const oruga = useOruga()
-
-const coordinates = ref(null)
-const coordinatesInput = ref()
-const loading = ref(false)
-const locationAccessBlocked = ref(false)
-
-
-function useCurrentLocation() {
-
-    if (locationAccessBlocked.value) {
-        alert("You must refresh the page first, then try again.")
-        return
-    }
-
-    navigator.geolocation.getCurrentPosition(loc => {
-        coordinates.value = `${loc.coords.latitude},${loc.coords.longitude}`
-        loadCoordinates()
-    }, error => {
-        if (error.code == 1) { // PERMISSION_DENIED
-            locationAccessBlocked.value = true
+    data() {
+        return {
+            coordinates: null,
+            loading: false,
+            locationAccessBlocked: false,
         }
-        alert(`error.code = ${error.code}\n\n${error.message}`)
-    })
+    },
+
+    computed: {
+        ...mapStores(useWeatherStore, useLocationStore),
+    },
+
+    methods: {
+
+        useCurrentLocation() {
+
+            if (this.locationAccessBlocked) {
+                alert("You must refresh the page first, then try again.")
+                return
+            }
+
+            navigator.geolocation.getCurrentPosition(loc => {
+                this.coordinates = `${loc.coords.latitude},${loc.coords.longitude}`
+                this.loadCoordinates()
+            }, error => {
+                if (error.code == 1) { // PERMISSION_DENIED
+                    this.locationAccessBlocked = true
+                }
+                alert(`error.code = ${error.code}\n\n${error.message}`)
+            })
+        },
+
+        editLocations() {
+            this.$router.push('/edit-list')
+        },
+
+        async loadCoordinates() {
+            if (!this.coordinates) {
+                this.$refs.coordinates.focus()
+                return
+            }
+
+            const parts = this.coordinates.split(/(?: +| *\, *)/)
+            const pattern = /^ *-?\d+(?:\.\d+)? *$/
+            if (parts.length != 2
+                || !parts[0].match(pattern)
+                || !parts[1].match(pattern)) {
+
+                this.$oruga.notification.open({
+                    variant: 'warning',
+                    message: "Coordinates are not valid.",
+                    position: 'bottom',
+                })
+                this.$refs.coordinates.focus()
+                return
+            }
+            this.coordinates = `${parts[0]},${parts[1]}`
+
+            this.loading = true
+            const url = `https://api.weather.gov/points/${this.coordinates}`
+            const response = await fetch(url)
+            const weather = await response.json()
+            this.loading = false
+            if (weather.status == 404) {
+                this.$oruga.notification.open({
+                    variant: 'warning',
+                    message: weather.title || "Data not found!",
+                    position: 'bottom',
+                })
+                return
+            }
+
+            let coords = weather.geometry.coordinates
+            coords = `${coords[1].toFixed(4)},${coords[0].toFixed(4)}`
+
+            const city = weather.properties.relativeLocation.properties.city
+            const state = weather.properties.relativeLocation.properties.state
+            const cityState = `${city}, ${state}`
+
+            this.locationStore.addLocation(coords, cityState)
+            this.weatherStore.setCoordinates(coords)
+            this.weatherStore.setCityState(cityState)
+            this.weatherStore.setWeather(weather)
+
+            // clear this so user sees empty input when they return
+            this.coordinates = null
+            this.$router.push('/weather')
+        },
+
+        showWeather(location) {
+            this.weatherStore.clearWeather()
+            this.weatherStore.setCoordinates(location.coordinates)
+            this.weatherStore.setCityState(location.cityState)
+            this.$router.push('/weather')
+        },
+    },
 }
-
-
-function editLocations() {
-    router.push('/edit-list')
-}
-
-
-async function loadCoordinates() {
-    if (!coordinates.value) {
-        coordinatesInput.value.focus()
-        return
-    }
-
-    const parts = coordinates.value.split(/(?: +| *\, *)/)
-    const pattern = /^ *-?\d+(?:\.\d+)? *$/
-    if (parts.length != 2
-        || !parts[0].match(pattern)
-        || !parts[1].match(pattern)) {
-
-        oruga.notification.open({
-            variant: 'warning',
-            message: "Coordinates are not valid.",
-            position: 'bottom',
-        })
-        coordinatesInput.value.focus()
-        return
-    }
-    coordinates.value = `${parts[0]},${parts[1]}`
-
-    loading.value = true
-    const url = `https://api.weather.gov/points/${coordinates.value}`
-    const response = await fetch(url)
-    const weather = await response.json()
-    loading.value = false
-    if (weather.status == 404) {
-        oruga.notification.open({
-            variant: 'warning',
-            message: weather.title || "Data not found!",
-            position: 'bottom',
-        })
-        return
-    }
-
-    let coords = weather.geometry.coordinates
-    coords = `${coords[1].toFixed(4)},${coords[0].toFixed(4)}`
-
-    const city = weather.properties.relativeLocation.properties.city
-    const state = weather.properties.relativeLocation.properties.state
-    const cityState = `${city}, ${state}`
-
-    locationStore.addLocation(coords, cityState)
-    weatherStore.setCoordinates(coords)
-    weatherStore.setCityState(cityState)
-    weatherStore.setWeather(weather)
-
-    // clear this so user sees empty input when they return
-    coordinates.value = null
-    router.push('/weather')
-}
-
-
-function showWeather(location) {
-    weatherStore.clearWeather()
-    weatherStore.setCoordinates(location.coordinates)
-    weatherStore.setCityState(location.cityState)
-    router.push('/weather')
-}
-
 </script>
 
 <template>
@@ -110,7 +112,7 @@ function showWeather(location) {
 
     <o-field grouped>
       <o-input v-model="coordinates"
-               ref="coordinatesInput"
+               ref="coordinates"
                placeholder="coordinates"
                clearable />
       <o-button variant="primary"
diff --git a/src/views/HourlyView.vue b/src/views/HourlyView.vue
index 88c95d5..8f15e6a 100644
--- a/src/views/HourlyView.vue
+++ b/src/views/HourlyView.vue
@@ -1,85 +1,76 @@
 <script setup>
-import { ref, onActivated } from 'vue'
+import { mapStores } from 'pinia'
 import { useWeatherStore } from '../stores/weather'
+</script>
 
+<script>
+export default {
 
-const weatherStore = useWeatherStore()
-
-const coordinates = ref(null)
-const chunks = ref([])
-const refreshing = ref(false)
-
-
-onActivated(() => {
-    if (coordinates.value != weatherStore.coordinates) {
-        refreshing.value = true
-        chunks.value = []
-        fetchHourly().then(() => {
-            refreshing.value = false
-        })
-    }
-})
-
-async function fetchHourly() {
-
-    const weather = await weatherStore.getWeather()
-    coordinates.value = weatherStore.coordinates
-
-    const url = weather.properties.forecastHourly
-    const response = await fetch(url)
-    const hourly = await response.json()
-
-    chunks.value = []
-    let chunk = null
-    for (let period of hourly.properties.periods.slice(0, 12)) {
-        const date = new Date(period.startTime).toLocaleDateString('en-US', {
-            dateStyle: 'full',
-        })
-        if (!chunk || chunk.date != date) {
-            chunk = {
-                date,
-                periods: [],
-            }
-            chunks.value.push(chunk)
+    data() {
+        return {
+            coordinates: null,
+            hourly: null,
+            chunks: [],
         }
-        chunk.periods.push(period)
-    }
+    },
+
+    computed: {
+        ...mapStores(useWeatherStore),
+    },
+
+    activated() {
+        if (this.coordinates != this.weatherStore.coordinates) {
+            this.hourly = null
+            this.chunks = []
+            this.fetchHourly()
+        }
+    },
+
+    methods: {
+
+        async fetchHourly() {
+
+            const weather = await this.weatherStore.getWeather()
+            this.coordinates = this.weatherStore.coordinates
+
+            const url = weather.properties.forecastHourly
+            const response = await fetch(url)
+            this.hourly = await response.json()
+
+            this.chunks = []
+            let chunk = null
+            for (let period of this.hourly.properties.periods.slice(0, 12)) {
+                const date = new Date(period.startTime).toLocaleDateString('en-US', {
+                    dateStyle: 'full',
+                })
+                if (!chunk || chunk.date != date) {
+                    chunk = {
+                        date,
+                        periods: [],
+                    }
+                    this.chunks.push(chunk)
+                }
+                chunk.periods.push(period)
+            }
+        },
+
+        renderTime(period) {
+            const date = new Date(period.startTime)
+            return date.toLocaleTimeString('en-US', {timeStyle: 'short'})
+        },
+    },
 }
-
-
-async function refreshHourly() {
-    refreshing.value = true
-    weatherStore.clearWeather(true)
-    chunks.value = []
-    await fetchHourly()
-    refreshing.value = false
-}
-
-
-function renderTime(period) {
-    const date = new Date(period.startTime)
-    return date.toLocaleTimeString('en-US', {timeStyle: 'short'})
-}
-
 </script>
 
 <template>
   <main>
 
-    <div class="block"
-         style="display: flex; align-items: center; justify-content: space-between;">
-      <o-button variant="primary"
-                icon-left="arrow-left"
-                @click="$router.push('/weather')">
-        Back
-      </o-button>
-      <o-button variant="primary"
-                icon-left="refresh"
-                @click="refreshHourly()"
-                :disabled="refreshing">
-        {{ refreshing ? "Refreshing" : "Refresh" }}
-      </o-button>
-    </div>
+    <o-button variant="primary"
+              size="small"
+              icon-left="arrow-left"
+              @click="$router.push('/weather')">
+      Back
+    </o-button>
 
     <h5 class="is-size-5">{{ weatherStore.cityState }}</h5>
     <br />
diff --git a/src/views/WeatherView.vue b/src/views/WeatherView.vue
index 54f5423..2d46308 100644
--- a/src/views/WeatherView.vue
+++ b/src/views/WeatherView.vue
@@ -1,99 +1,67 @@
 <script setup>
-import { ref, computed, onActivated } from 'vue'
-import { useRouter } from 'vue-router'
+import { mapStores } from 'pinia'
 import { useWeatherStore } from '../stores/weather'
 import { useLocationStore } from '../stores/location'
+</script>
 
+<script>
+export default {
 
-const router = useRouter()
-const locationStore = useLocationStore()
-const weatherStore = useWeatherStore()
+    data() {
+        return {
+            coordinates: null,
+        }
+    },
 
-const coordinates = ref(null)
-const refreshing = ref(false)
-const timestamp = ref(new Date().getTime())
+    computed: {
+        ...mapStores(useWeatherStore, useLocationStore),
 
+        panelHeadingTitle() {
+            if (!this.weatherStore.forecast) {
+                return "Forecast"
+            }
 
-const panelHeadingTitle = computed(() => {
-    if (!weatherStore.forecast) {
-        return "Forecast"
-    }
+            let generated = new Date(this.weatherStore.forecast.properties.generatedAt)
+            generated = generated.toLocaleTimeString('en-US', {timeStyle: 'short'})
+            return `Forecast @ ${generated}`
+        },
+    },
 
-    let generated = new Date(weatherStore.forecast.properties.generatedAt)
-    generated = generated.toLocaleTimeString('en-US', {timeStyle: 'short'})
-    return `Forecast @ ${generated}`
-})
+    activated() {
+        this.fetchWeather()
+    },
 
+    methods: {
 
-const radarLatestURL = computed(() => {
-    if (weatherStore.weather) {
-        return `${weatherStore.radarLatestURL}?t=${timestamp.value}`
-    }
-})
+        coordinatesUpdated(coordinates) {
+            this.weatherStore.clearWeather()
+            this.weatherStore.setCoordinates(coordinates)
+            this.fetchWeather()
+        },
 
+        async fetchWeather() {
 
-const radarLoopURL = computed(() => {
-    if (weatherStore.weather) {
-        return `${weatherStore.radarLoopURL}?t=${timestamp.value}`
-    }
-})
+            if (!this.weatherStore.coordinates) {
+                this.$router.push('/')
+                return
+            }
 
+            const forecast = await this.weatherStore.getForecast()
+            this.coordinates = this.weatherStore.coordinates
+        },
 
-onActivated(() => {
-
-    if (!weatherStore.coordinates) {
-        router.push('/')
-        return
-    }
-
-    refreshing.value = true
-    fetchWeather().then(() => {
-        refreshing.value = false
-    })
-})
-
-
-async function coordinatesUpdated(coords) {
-    refreshing.value = true
-    weatherStore.clearWeather()
-    weatherStore.setCoordinates(coords)
-    await fetchWeather()
-    refreshing.value = false
+        showHourly(period) {
+            this.$router.push('/hourly')
+        },
+    },
 }
-
-
-async function fetchWeather() {
-    await weatherStore.getForecast()
-    coordinates.value = weatherStore.coordinates
-}
-
-
-async function refreshWeather() {
-    refreshing.value = true
-    weatherStore.clearWeather(true)
-    timestamp.value = new Date().getTime()
-    await fetchWeather()
-    refreshing.value = false
-}
-
-
-function getShortForecast(period) {
-    return period.shortForecast.replace(/Showers And Thunderstorms/g, 'T-storms')
-}
-
-
-function showHourly(period) {
-    router.push('/hourly')
-}
-
 </script>
 
 <template>
   <main>
     <div style="display: flex; flex-direction: column;">
 
-      <div class="block"
-           style="display: flex; justify-content: space-between; align-items: center;">
+      <o-field>
         <o-select v-if="weatherStore.weather"
                   v-model="coordinates"
                   @update:model-value="coordinatesUpdated">
@@ -103,24 +71,7 @@ function showHourly(period) {
             {{ location.cityState }}
           </option>
         </o-select>
-        <o-button variant="primary"
-                  icon-left="refresh"
-                  @click="refreshWeather()"
-                  :disabled="refreshing">
-          {{ refreshing ? "Refreshing" : "Refresh" }}
-        </o-button>
-      </div>
-
-      <div v-if="weatherStore.alerts?.features?.length"
-           class="block">
-        <o-notification variant="warning"
-                        icon="warning"
-                        @click="$router.push('/alerts')"
-                        style="cursor: pointer;">
-          <p class="has-text-weight-bold">Watches In Effect</p>
-          <p>Updated {{ new Date(weatherStore.alerts.updated).toLocaleTimeString('en-US', {timeStyle: 'short'}) }}</p>
-        </o-notification>
-      </div>
+      </o-field>
 
       <nav class="panel weather-panel">
 
@@ -137,7 +88,6 @@ function showHourly(period) {
                  :key="period.number"
                  class="weather-period is-size-7 has-text-weight-bold"
                  :class="{daytime: period.isDaytime}"
-                 style="cursor: pointer;"
                  @click="showHourly(period)">
 
               <p>{{ period.name }}</p>
@@ -146,7 +96,7 @@ function showHourly(period) {
                 <img :src="period.icon" />
               </div>
 
-              <p>{{ getShortForecast(period) }}</p>
+              <p>{{ period.shortForecast }}</p>
 
               <p>
                 <span v-if="period.isDaytime">Hi</span>
@@ -166,23 +116,16 @@ function showHourly(period) {
       </nav>
 
       <nav class="panel weather-panel">
-        <div class="panel-heading"
-             style="display: flex; align-items: center; justify-content: space-between;">
-          <p>Radar</p>
-              <o-button tag="a"
-                        href="https://radar.weather.gov/ridge/standard/CONUS-LARGE_loop.gif"
-                        target="_blank"
-                        icon-left="external-link">
-                National Radar
-              </o-button>
-        </div>
+        <p class="panel-heading">
+          Radar
+        </p>
         <div class="panel-block">
           <div class="columns">
             <div class="column">
-              <img :src="radarLatestURL" />
+              <img :src="weatherStore.radarLatestURL" />
             </div>
             <div class="column">
-              <img :src="radarLoopURL" />
+              <img :src="weatherStore.radarLoopURL" />
             </div>
           </div>
         </div>
@@ -195,8 +138,7 @@ function showHourly(period) {
 <style scoped>
 
 .weather-period {
-    width: 100px;
-    flex-shrink: 0;
+    min-width: 100px;
     display: flex;
     flex-direction: column;
     align-items: center;
diff --git a/tasks.py b/tasks.py
index d6b57ab..a33596f 100644
--- a/tasks.py
+++ b/tasks.py
@@ -24,7 +24,7 @@ def release(c):
         version = js['version']
 
     # build the app, create zip archive
-    c.run("bash -lc 'nvm use lts/iron; npm run build'")
+    c.run('npm run build')
     os.chdir('dist')
     filename = f'myweather-{version}.zip'
     c.run(f'zip --recurse-paths {filename} *')