diff --git a/src/App.vue b/src/App.vue
index f9a70a1..6e2cf92 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,103 +13,15 @@ import { storeToRefs } from 'pinia'
 import NetworkConnectionState from './components/NetworkConnectionState.vue'
 import serializer from '@/stores/serializer'
 import { generateUniqueId } from '@/utils/ids'
+import { useEventsStore } from './stores/events'
 
-const alerts = ref([])
-const id = ref(0)
+const eventsStore = useEventsStore()
 const requestsStore = useRequestsStore()
 const { loadingRecent, loadingRequestStates } = storeToRefs(requestsStore)
+const { events } = storeToRefs(eventsStore)
 const codexApi = inject('codexApi')
 const ethProvider = inject('ethProvider')
 
-function addAlert(type, event, state) {
-  alerts.value.push({
-    id: event + '123456' + (1234567890 + ++id.value),
-    type,
-    event,
-    blockNumber: 123456,
-    requestId: '0x1a93c8ea68a45dadc599f38858b3fdcb3c442aea0f6180c20e3f08614c251041',
-    state
-  })
-}
-
-function addSlotAlert(type, event, state) {
-  alerts.value.push({
-    id: event + '123456' + (1234567890 + ++id.value),
-    type,
-    event,
-    blockNumber: 123456,
-    requestId: '0x0d08d8fa3df9d79f1c57a34ebc6a8050ae91fca2c0d6f7191470cbbf38a048bd',
-    slotIdx: 1,
-    state
-  })
-}
-
-function onStorageRequested(blockNumber, requestId, state) {
-  alerts.value.push({
-    type: 'info',
-    event: 'StorageRequested',
-    blockNumber,
-    requestId,
-    state
-  })
-}
-function onRequestFulfilled(blockNumber, requestId) {
-  alerts.value.push({
-    type: 'success',
-    event: 'RequestStarted',
-    blockNumber,
-    requestId,
-    state: 'Fulfilled'
-  })
-}
-function onRequestCancelled(blockNumber, requestId) {
-  alerts.value.push({
-    type: 'danger',
-    event: 'RequestCancelled',
-    blockNumber,
-    requestId,
-    state: 'Cancelled'
-  })
-}
-function onRequestFailed(blockNumber, requestId) {
-  alerts.value.push({
-    type: 'danger',
-    event: 'RequestFailed',
-    blockNumber,
-    requestId,
-    state: 'Failed'
-  })
-}
-function onRequestFinished(blockNumber, requestId) {
-  alerts.value.push({
-    type: 'info',
-    event: 'RequestFinished',
-    blockNumber,
-    requestId,
-    state: 'Finished'
-  })
-}
-function onSlotFreed(blockNumber, requestId, slotIdx) {
-  alerts.value.push({
-    type: 'warning',
-    event: 'SlotFreed',
-    blockNumber,
-    requestId,
-    slotIdx,
-    state: 'Freed'
-  })
-}
-function onSlotFilled(blockNumber, requestId, slotIdx) {
-  alerts.value.push({
-    type: 'info',
-    event: 'SlotFilled',
-    blockNumber,
-    requestId,
-    slotIdx,
-    state: 'Filled'
-  })
-}
-
 window.name = generateUniqueId()
 
 onMounted(() => {
@@ -117,16 +29,7 @@ onMounted(() => {
   initDismisses()
   requestsStore.refetchRequestStates()
   requestsStore.fetchPastRequests()
-
-  requestsStore.listenForNewEvents(
-    onStorageRequested,
-    onRequestFulfilled,
-    onRequestCancelled,
-    onRequestFailed,
-    onRequestFinished,
-    onSlotFreed,
-    onSlotFilled
-  )
+  eventsStore.listenForNewEvents()
 
   window.addEventListener('storage', handleStorageEvent)
 })
@@ -186,7 +89,7 @@ onUnmounted(() => {
       <AppNav />
     </header>
     <main class="grow flex flex-col mx-auto max-w-screen-xl w-full p-4">
-      <ContractEventAlerts v-model="alerts"></ContractEventAlerts>
+      <ContractEventAlerts v-model="events"></ContractEventAlerts>
       <NavBreadcrumb class="mb-4"></NavBreadcrumb>
       <RouterView />
     </main>
@@ -219,7 +122,10 @@ onUnmounted(() => {
   </div>
 </template>
 
-<style scoped>
+<style>
+body {
+  @apply bg-white dark:bg-gray-900;
+}
 header,
 footer,
 main {
diff --git a/src/components/AppNav.vue b/src/components/AppNav.vue
index f49bd8a..fc24b52 100644
--- a/src/components/AppNav.vue
+++ b/src/components/AppNav.vue
@@ -40,7 +40,9 @@ onMounted(() => {
     (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
   ) {
     themeToggleLightIcon.classList.remove('hidden')
+    document.documentElement.classList.add('dark')
   } else {
+    document.documentElement.classList.remove('dark')
     themeToggleDarkIcon.classList.remove('hidden')
   }
 
@@ -51,25 +53,12 @@ onMounted(() => {
     themeToggleDarkIcon.classList.toggle('hidden')
     themeToggleLightIcon.classList.toggle('hidden')
 
-    // if set via local storage previously
-    if (localStorage.getItem('color-theme')) {
-      if (localStorage.getItem('color-theme') === 'light') {
-        document.documentElement.classList.add('dark')
-        localStorage.setItem('color-theme', 'dark')
-      } else {
-        document.documentElement.classList.remove('dark')
-        localStorage.setItem('color-theme', 'light')
-      }
-
-      // if NOT set via local storage previously
+    if (document.documentElement.classList.contains('dark')) {
+      document.documentElement.classList.remove('dark')
+      localStorage.setItem('color-theme', 'light')
     } else {
-      if (document.documentElement.classList.contains('dark')) {
-        document.documentElement.classList.remove('dark')
-        localStorage.setItem('color-theme', 'light')
-      } else {
-        document.documentElement.classList.add('dark')
-        localStorage.setItem('color-theme', 'dark')
-      }
+      document.documentElement.classList.add('dark')
+      localStorage.setItem('color-theme', 'dark')
     }
   })
 })
@@ -77,7 +66,7 @@ onMounted(() => {
 
 <template>
   <nav class="mx-auto max-w-screen-xl flex flex-wrap items-center justify-between">
-    <RouterLink to="/" class="flex items-center relative rtl:space-x-reverse">
+    <RouterLink to="/" class="logo flex items-center relative rtl:space-x-reverse">
       <img src="../assets/logo.svg" class="h-8 hidden dark:inline" alt="Codex Logo" />
       <img src="../assets/logo-black.svg" class="h-8 inline dark:hidden" alt="Codex Logo" />
       <span class="self-center ml-3 text-2xl font-semibold whitespace-nowrap dark:text-white"
@@ -163,6 +152,7 @@ onMounted(() => {
             <RouterLink
               to="/moderate"
               class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group"
+              @click="drawer.hide()"
             >
               <svg
                 class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -186,6 +176,7 @@ onMounted(() => {
               href="https://github.com/codex-storage/ethcc-demo"
               target="_blank"
               class="flex text-left items-center text-gray-900 p-2 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group"
+              @click="drawer.hide()"
             >
               <svg
                 class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -257,7 +248,7 @@ onMounted(() => {
 </template>
 
 <style scoped>
-nav a.router-link-exact-active {
+nav a.router-link-exact-active:not(.logo) {
   @apply dark:bg-gray-700;
 }
 </style>