diff --git a/components/events/DateFilterGraph.vue b/components/events/DateFilterGraph.vue
new file mode 100644
index 0000000..6554218
--- /dev/null
+++ b/components/events/DateFilterGraph.vue
@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import DatePicker from "primevue/datepicker";
+import Toolbar from "primevue/toolbar";
+import FloatLabel from "primevue/floatlabel";
+import { useToast } from "primevue/usetoast";
+import type { EventLogResponse } from "~/services/Api";
+
+const props = defineProps({
+  eventCount: Number,
+});
+
+const toast = useToast();
+
+const loading = ref<boolean>(false);
+
+const startDate = ref<Date>();
+const endDate = ref<Date>();
+
+const emit = defineEmits(["showRequestedEvents"]);
+
+function formatDate(date: Date | null): string | null {
+  if (!date) {
+    return null;
+  } else {
+    return date.toISOString().slice(0, 16); // cut off unnecessary stuff
+  }
+}
+
+async function requestEvents() {
+  loading.value = true;
+  const eventResp = await useNuxtApp()
+    .$hubApi("/events", {
+      method: "GET",
+      query: {
+        ...(startDate.value && { start_date: formatDate(startDate.value) }), // the ... checks before adding to query
+        ...(endDate.value && { end_date: formatDate(endDate.value) }),
+      },
+    })
+    .catch(() => {
+      toast.add({
+        severity: "error",
+        summary: "Event Fetch Failed",
+        detail: "Unable to fetch events from database",
+        life: 5000,
+      });
+      return null;
+    });
+  loading.value = false;
+  if (eventResp) {
+    emit("showRequestedEvents", eventResp as EventLogResponse);
+  }
+}
+</script>
+
+<template>
+  <div class="custom-filter-header">
+    <Toolbar>
+      <template #start>
+        <div class="custom-filter-header-start">
+          <h2 class="font-bold">Event Viewer</h2>
+        </div>
+      </template>
+      <template #center>
+        <div class="custom-filter-header-center">
+          <div class="custom-filter-date-container">
+            <div class="custom-filter-startdate-form">
+              <FloatLabel class="w-full" variant="on">
+                <DatePicker
+                  inputId="startdate_label"
+                  v-model="startDate"
+                  :invalid="startDate && endDate && endDate < startDate"
+                  showIcon
+                  showTime
+                  hourFormat="24"
+                  showClear
+                  iconDisplay="input"
+                />
+                <label for="startdate_label">Start Date</label>
+              </FloatLabel>
+            </div>
+            <div class="custom-filter-date-separator">
+              <span>-</span>
+            </div>
+            <div class="custom-filter-enddate-form">
+              <FloatLabel class="w-full" variant="on">
+                <DatePicker
+                  inputId="enddate_label"
+                  v-model="endDate"
+                  :invalid="startDate && endDate && endDate < startDate"
+                  showIcon
+                  showTime
+                  hourFormat="24"
+                  showClear
+                  iconDisplay="input"
+                />
+                <label for="enddate_label">End Date</label>
+              </FloatLabel>
+            </div>
+            <div class="custom-date-filter-submit-btn">
+              <Button
+                label="Apply"
+                :loading="loading"
+                :disabled="startDate && endDate && endDate < startDate"
+                @click="requestEvents()"
+              />
+            </div>
+          </div>
+        </div>
+      </template>
+      <template #end>
+        <div class="custom-filter-header-end">
+          <span
+            v-if="eventCount !== 1"
+            v-tooltip.left="'Total number of events currently shown'"
+          >
+            <b> {{ props.eventCount }} events </b>
+          </span>
+          <span
+            v-else
+            v-tooltip.left="'Total number of events currently shown'"
+          >
+            <b> {{ props.eventCount }} event </b>
+          </span>
+        </div>
+      </template>
+    </Toolbar>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.custom-filter-header-start h2 {
+  margin-block-start: 0.5em;
+  margin-block-end: 0.5em;
+}
+
+.custom-filter-date-container {
+  display: flex;
+  align-items: center;
+}
+
+.custom-filter-date-separator {
+  margin: 0 1rem 0 1rem; // Left and right
+  font-weight: bold;
+  font-size: 1.25rem;
+}
+
+.custom-date-filter-submit-btn {
+  margin-left: 1rem;
+}
+</style>
diff --git a/components/events/EventViewer.vue b/components/events/EventViewer.vue
new file mode 100644
index 0000000..0c0d262
--- /dev/null
+++ b/components/events/EventViewer.vue
@@ -0,0 +1,363 @@
+<script setup lang="ts">
+import { getEvents } from "~/composables/useAPIFetch";
+import { FilterMatchMode, FilterService } from "@primevue/core/api";
+import SearchBar from "~/components/table/SearchBar.vue";
+import {
+  EventLogLevelTag,
+  EventServiceTag,
+  type EventTag
+} from "~/types/eventTag";
+import TagFilterSidePanel from "~/components/events/TagFilterSidePanel.vue";
+import type { EventLog, EventLogResponse } from "~/services/Api";
+import DateFilterGraph from "~/components/events/DateFilterGraph.vue";
+import type { DataTableFilterEvent } from "primevue";
+
+const events = ref<EventLog[]>([]);
+const eventCount = ref<number>(0);
+const filteredEventCount = ref<number>(0); // Track filtered count separately since its temporary
+
+const appliedFilters = ref<EventTag[]>([]);
+
+const logLevelColorMap = new Map([
+  [EventLogLevelTag.Error, "#ef4444"],
+  [EventLogLevelTag.Warning, "#eab308"],
+  [EventLogLevelTag.Info, "#3b82f6"]
+]);
+const logLevelDistributions = ref(
+  Array.from(logLevelColorMap, ([label, color]) => ({
+    label,
+    color,
+    value: 0
+  }))
+);
+
+const filters = ref();
+
+const dateTimeFormat = new Intl.DateTimeFormat(undefined, {
+  dateStyle: "short",
+  timeStyle: "long"
+});
+
+const { data: response, status } = await getEvents();
+
+function parseData() {
+  if (status.value === "success" && response.value) {
+    events.value = response.value.data;
+    eventCount.value = response.value.meta.count;
+    updateLogLevelCounts();
+  }
+}
+
+onMounted(() => {
+  parseData();
+});
+
+function updateLogLevelCounts() {
+  // Reset counts
+  logLevelDistributions.value.forEach((dist) => (dist.value = 0));
+
+  // Count occurrences
+  if (events.value) {
+    events.value.forEach((event) => {
+      const tags = event.attributes?.tags || [];
+
+      logLevelDistributions.value.forEach((dist) => {
+        if (tags.includes(dist.label)) {
+          dist.value++;
+        }
+      });
+    });
+  }
+}
+
+function formatTag(tagName: EventTag) {
+  const isService = Object.values(EventServiceTag).includes(tagName);
+  const isLogLevel = Object.values(EventLogLevelTag).includes(tagName);
+  if (isService) {
+    return { background: "#14b8a6", color: "#ffffff" };
+  } else if (isLogLevel) {
+    return { background: getLogLevelColor([tagName]), color: "#ffffff" };
+  } else {
+    return { background: "#8b5cf6", color: "#ffffff" };
+  }
+}
+
+function formatEventName(eventName: string): string {
+  const eventChunks = eventName.toUpperCase().split(".");
+  return eventChunks.join("-");
+}
+
+function formatTimestamp(timestamp: string): string {
+  const date = new Date(timestamp + "Z"); // Python does not return timestamp with standard "Z"
+  const formattedDateTime = dateTimeFormat.format(date);
+  const [dateString, timeString] = formattedDateTime.split(", ");
+
+  return `${dateString}<br><b>${timeString}</b>`;
+}
+
+function getLogLevelColor(tags: string[]): string | undefined {
+  if (tags && tags.length > 0) {
+    // Check for log level tags and go in order of severity
+    for (const tag of [
+      EventLogLevelTag.Error,
+      EventLogLevelTag.Warning,
+      EventLogLevelTag.Info
+    ]) {
+      if (tags.includes(tag)) {
+        return logLevelColorMap.get(tag);
+      }
+    }
+  }
+  return "transparent";
+}
+
+// Table filters
+FilterService.register("tagsContainsAny", (value, filter) => {
+  if (!filter || filter.length === 0) {
+    return true;
+  }
+
+  if (!value || value.length === 0) {
+    return false;
+  }
+
+  // Check if any element in the filter array exists in the value array
+  return filter.some((filterItem: EventTag) => value.includes(filterItem));
+});
+
+const defaultFilters = {
+  global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+  "attributes.tags": { value: null, matchMode: "tagsContainsAny" }
+};
+
+filters.value = defaultFilters;
+
+const updateFilters = (filterText: string) => {
+  filters.value.global.value = filterText;
+};
+
+function clearAllFilters() {
+  const clearedFilters = {};
+  for (const filterKey in defaultFilters) {
+    clearedFilters[filterKey] = {
+      ...defaultFilters[filterKey]
+    };
+    clearedFilters[filterKey].value = null;
+  }
+  filters.value = clearedFilters;
+  appliedFilters.value = [];
+}
+
+function handleRemoveFilterTag(tag: EventTag) {
+  appliedFilters.value = appliedFilters.value.filter(
+    (filter) => filter !== tag
+  );
+}
+
+function handleShowRequestEvents(requestedEvents: EventLogResponse) {
+  events.value = requestedEvents.data;
+  eventCount.value = requestedEvents.meta.count;
+  updateLogLevelCounts();
+}
+
+function handleFilter(event: DataTableFilterEvent) {
+  filteredEventCount.value = event.filteredValue
+    ? event.filteredValue.length
+    : 0;
+}
+
+watch(
+  appliedFilters,
+  (newFilters) => {
+    if (newFilters.length > 0) {
+      filters.value["attributes.tags"].value = newFilters;
+    } else {
+      filters.value["attributes.tags"].value = null;
+    }
+  },
+  { deep: true }
+);
+</script>
+
+<template>
+  <div class="event-viewer-container">
+    <Card class="content-card event-viewer-card">
+      <template #content>
+        <div class="event-viewer-filter-panel-box">
+          <DateFilterGraph
+            :eventCount="filteredEventCount || eventCount"
+            @showRequestedEvents="handleShowRequestEvents"
+          />
+        </div>
+        <div class="log-distribution-meter">
+          <MeterGroup :value="logLevelDistributions" :max="events.length" />
+        </div>
+        <div class="table-header-row">
+          <div class="table-header-row-filter-chips-container">
+            <div class="table-header-row-filter-chips-container-counter">
+              <span
+              ><b>FILTERS: ({{ appliedFilters.length }})</b></span
+              >
+            </div>
+            <div class="table-header-row-filter-chips flex flex-wrap gap-2">
+              <Chip
+                v-for="appliedFilter in appliedFilters"
+                :key="appliedFilter"
+                :value="appliedFilter"
+                :label="appliedFilter"
+                removable
+                @remove="handleRemoveFilterTag(appliedFilter)"
+              />
+            </div>
+          </div>
+          <div class="table-header-row-searchbar">
+            <SearchBar
+              :searchTerm="defaultFilters.global.value"
+              @clearFilters="clearAllFilters"
+              @updateSearch="updateFilters"
+            />
+          </div>
+        </div>
+        <div class="event-viewer-components">
+          <div class="event-viewer-component-filter-panel">
+            <TagFilterSidePanel
+              v-model="appliedFilters"
+              @clearTagFilter="
+                () => {
+                  appliedFilters = [];
+                }
+              "
+            />
+          </div>
+          <div class="event-viewer-component-event-table">
+            <DataTable
+              v-model:filters="filters"
+              @filter="handleFilter"
+              :globalFilterFields="['event_name', 'service_name', 'body']"
+              :rows="10"
+              :rowsPerPageOptions="[10, 20, 50]"
+              :value="events"
+              dataKey="id"
+              filterDisplay="menu"
+              stripedRows
+              showGridlines
+              resizableColumns
+              columnResizeMode="fit"
+              paginator
+              tableStyle="min-width: 50rem"
+              class="rounded-table"
+            >
+              <template #empty> No events found.</template>
+              <Column
+                field="timestamp"
+                :sortable="true"
+                dataType="date"
+                header="DateTime"
+                style="width: 15em"
+              >
+                <template #body="{ data }">
+                  <div
+                    class="event-entry-datetime"
+                    :style="{
+                      borderLeft: `4px solid ${getLogLevelColor(data.attributes.tags)}`,
+                      paddingLeft: '0.75rem',
+                    }"
+                  >
+                    <span v-html="formatTimestamp(data.timestamp)" />
+                  </div>
+                </template>
+              </Column>
+              <Column header="Event">
+                <template #body="{ data }">
+                  <div class="event-entry-cell">
+                    <div class="event-entry-title">
+                      <div class="event-entry-title-name">
+                        {{ formatEventName(data.event_name) }}
+                      </div>
+                      <div
+                        class="event-entry-title-tags"
+                        v-if="
+                          data.attributes.tags &&
+                          data.attributes.tags.length > 0
+                        "
+                      >
+                        <Tag
+                          v-for="(tag, index) in data.attributes.tags"
+                          :key="index"
+                          :severity="'success'"
+                          :value="tag"
+                          :style="formatTag(tag)"
+                        />
+                      </div>
+                    </div>
+                    <div class="event-entry-cell-body">
+                      <span>
+                        {{ data.body }}
+                      </span>
+                    </div>
+                  </div>
+                </template>
+              </Column>
+            </DataTable>
+          </div>
+        </div>
+      </template>
+    </Card>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.event-viewer-components {
+  display: flex;
+  gap: 1rem;
+}
+
+.log-distribution-meter {
+  margin-top: 1rem;
+}
+
+.event-viewer-component-event-table {
+  flex: 1;
+}
+
+.table-header-row-filter-chips-container {
+  display: flex;
+  align-items: center;
+}
+
+.table-header-row-filter-chips-container-counter {
+  margin-right: 0.5rem;
+}
+
+.event-entry-datetime {
+  transition: border-color 0.2s ease;
+}
+
+.event-entry-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 0.5rem;
+}
+
+.event-entry-title-name {
+  flex: 1; // Takes up available space
+  min-width: 0; // Allows text truncation if needed
+  font-weight: bold;
+}
+
+.event-entry-title-tags {
+  display: flex;
+  gap: 0.5rem;
+  flex-shrink: 0; // Prevents tags from shrinking
+}
+
+.event-table-event-column-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 0.5rem;
+}
+</style>
diff --git a/components/events/TagFilterSidePanel.vue b/components/events/TagFilterSidePanel.vue
new file mode 100644
index 0000000..294a42c
--- /dev/null
+++ b/components/events/TagFilterSidePanel.vue
@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import {
+  EventLogLevelTag,
+  EventServiceTag,
+  type EventTag,
+} from "~/types/eventTag";
+import Panel from "primevue/panel";
+import PanelMenu from "primevue/panelmenu";
+
+const modelValue = defineModel<EventTag[]>({ default: [] });
+const emit = defineEmits(["clearTagFilter"]);
+
+const serviceTags = Object.values(EventServiceTag);
+const logLevelTags = Object.values(EventLogLevelTag);
+const tagFilterMenuItems = ref([
+  {
+    label: "Services",
+    icon: "pi pi-file",
+    items: serviceTags.map((tag: EventServiceTag) => ({ label: tag })),
+  },
+  {
+    label: "Log Level",
+    icon: "pi pi-cloud",
+    items: logLevelTags.map((tag: EventLogLevelTag) => ({ label: tag })),
+  },
+]);
+
+function returnChevron(isActive: boolean) {
+  return isActive ? "pi pi-chevron-down" : "pi pi-chevron-right";
+}
+
+function clearFilters() {
+  emit("clearTagFilter");
+}
+</script>
+
+<template>
+  <div class="event-viewer-filter-container">
+    <Panel toggleable>
+      <template #header>
+        <div class="event-viewer-filter-panel-header">
+          <div
+            class="event-viewer-filter-panel-header-title event-viewer-filter-panel-header-component"
+          >
+            <span>
+              <b>Tag Filters</b>
+            </span>
+          </div>
+          <div
+            class="event-viewer-filter-panel-header-clear-btn event-viewer-filter-panel-header-component"
+          >
+            <Button
+              icon="pi pi-filter-slash"
+              @click="clearFilters()"
+              size="small"
+              variant="text"
+              severity="contrast"
+              v-tooltip.top="'Clear the tag filters'"
+              rounded
+            />
+          </div>
+        </div>
+      </template>
+      <div class="flex justify-center event-viewer-panel-content">
+        <PanelMenu :model="tagFilterMenuItems" class="w-full md:w-80" multiple>
+          <template #item="{ item, active, hasSubmenu }">
+            <div
+              v-if="!hasSubmenu"
+              class="event-viewer-filter-container-filter-item"
+            >
+              <Checkbox
+                v-model="modelValue"
+                size="small"
+                :inputId="`loglevel-${item.label}`"
+                :value="item.label"
+              />
+              <label
+                :for="`loglevel-${item.label}`"
+                class="event-viewer-filter-container-filter-item-label"
+                >{{ item.label }}</label
+              >
+            </div>
+            <div v-else class="event-viewer-filter-container-filter-category">
+              <i
+                :class="returnChevron(active)"
+                class="p-panelmenu-submenu-icon"
+              />
+              <span class="p-panelmenu-header-label">{{ item.label }}</span>
+            </div>
+          </template>
+        </PanelMenu>
+      </div>
+    </Panel>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.event-viewer-filter-panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+:deep(.p-panel-content-container .p-panel-content) {
+  padding: 0;
+  border-start-end-radius: 0;
+  border-start-start-radius: 0;
+}
+
+:deep(.p-panelmenu-panel) {
+  border-start-end-radius: 0;
+  border-start-start-radius: 0;
+}
+
+.event-viewer-filter-panel-header-component {
+  margin-right: 0.8rem;
+}
+
+.event-viewer-filter-container-filter-item {
+  margin-bottom: 0.5rem;
+  display: flex;
+  padding: 0.2rem;
+  align-items: center;
+}
+
+.event-viewer-filter-container-filter-item-label {
+  margin-left: 0.5em;
+}
+
+.event-viewer-filter-container-filter-category {
+  display: flex;
+  gap: var(--p-panelmenu-item-padding);
+  padding: var(--p-panelmenu-item-padding);
+  align-items: center;
+}
+</style>
diff --git a/components/header/MenuHeader.vue b/components/header/MenuHeader.vue
index 470abe7..149e004 100644
--- a/components/header/MenuHeader.vue
+++ b/components/header/MenuHeader.vue
@@ -22,6 +22,11 @@ const items = ref([
     icon: "pi pi-lightbulb",
     route: "/analyses",
   },
+  {
+    label: "Events",
+    icon: "pi pi-list",
+    route: "/events",
+  },
   {
     label: "Data Stores",
     icon: "pi pi-warehouse",
diff --git a/composables/useAPIFetch.ts b/composables/useAPIFetch.ts
index 0cd2e7e..13fc9c4 100644
--- a/composables/useAPIFetch.ts
+++ b/composables/useAPIFetch.ts
@@ -1,10 +1,11 @@
 import type {
   AnalysisNode,
-  BodyCreateRouteToDatastoreKongProjectPost,
   DeleteProject,
   DetailedAnalysis,
+  EventLogResponse,
   LinkDataStoreProject,
   ListConsumers,
+  ListRoutes,
   ListServices,
   Project,
   ProjectNode,
@@ -23,6 +24,14 @@ export function useAPIFetch<T>(
   });
 }
 
+// Event endpoints
+export function getEvents(opts?) {
+  return useAPIFetch<EventLogResponse>("/events", {
+    ...opts,
+    method: "GET",
+  });
+}
+
 // Hub endpoints
 export function getProjectNodes(opts?) {
   return useAPIFetch<ProjectNode[]>("/project-nodes", {
@@ -91,10 +100,7 @@ export function deleteDataStore(dataStoreName: string, opts?) {
   });
 }
 
-export function createProject(
-  routeProps: BodyCreateRouteToDatastoreKongProjectPost,
-  opts?,
-) {
+export function createProject(routeProps: ListRoutes, opts?) {
   return useAPIFetch<{ data: LinkDataStoreProject }>(`/kong/project`, {
     ...opts,
     method: "POST",
diff --git a/package.json b/package.json
index f58c6ec..b22ef1c 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "version": "0.3.2",
   "license": "Apache-2.0",
   "description": "User interface for the FLAME Node software.",
-  "packageManager": "pnpm@10.17.1",
+  "packageManager": "pnpm@10.28.2",
   "type": "module",
   "scripts": {
     "start": "nuxt start",
@@ -29,6 +29,7 @@
     "@sidebase/nuxt-auth": "1.1.0",
     "@types/uuid": "^9.0.8",
     "@vueuse/core": "^11.3.0",
+    "chart.js": "^4.5.1",
     "globals": "^15.15.0",
     "next-auth": "~4.21.1",
     "nuxt": "^3.19.3",
diff --git a/pages/events.vue b/pages/events.vue
new file mode 100644
index 0000000..817ea91
--- /dev/null
+++ b/pages/events.vue
@@ -0,0 +1,9 @@
+<script setup>
+import EventViewer from "~/components/events/EventViewer.vue";
+</script>
+
+<template>
+  <EventViewer />
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 51a769d..e058b23 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -40,6 +40,9 @@ importers:
       '@vueuse/core':
         specifier: ^11.3.0
         version: 11.3.0(vue@3.5.22(typescript@5.9.3))
+      chart.js:
+        specifier: ^4.5.1
+        version: 4.5.1
       globals:
         specifier: ^15.15.0
         version: 15.15.0
@@ -609,6 +612,9 @@ packages:
     engines: {node: '>= 12'}
     deprecated: Please upgrade to v15 or higher. All reported bugs in this version are fixed in newer releases, dependencies have been updated, and security has been improved.
 
+  '@kurkle/color@0.3.4':
+    resolution: {integrity: sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==}
+
   '@kwsites/file-exists@1.1.1':
     resolution: {integrity: sha512-m9/5YGR18lIwxSFDwfE3oA7bWuq9kdau6ugN4H2rJeyhFQZcG9AgSHkQtSD15a8WvTgfz9aikZMrKPHvbpqFiw==}
 
@@ -2046,6 +2052,10 @@ packages:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
 
+  chart.js@4.5.1:
+    resolution: {integrity: sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==}
+    engines: {pnpm: '>=8'}
+
   check-error@2.1.1:
     resolution: {integrity: sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==}
     engines: {node: '>= 16'}
@@ -5827,6 +5837,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@kurkle/color@0.3.4': {}
+
   '@kwsites/file-exists@1.1.1':
     dependencies:
       debug: 4.4.3
@@ -7507,6 +7519,10 @@ snapshots:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
 
+  chart.js@4.5.1:
+    dependencies:
+      '@kurkle/color': 0.3.4
+
   check-error@2.1.1: {}
 
   chokidar@3.6.0:
diff --git a/server/routes/flame/api/auth/[...].ts b/server/routes/flame/api/auth/[...].ts
index 42b7958..278cf1c 100644
--- a/server/routes/flame/api/auth/[...].ts
+++ b/server/routes/flame/api/auth/[...].ts
@@ -137,6 +137,36 @@ async function refreshAccessToken(token: any) {
 
 export default NuxtAuthHandler({
   secret: useRuntimeConfig().authSecret,
+  events: {
+    async signIn({ account }) {
+      // After successful sign in
+      const hubAdapterApi = process.env.NUXT_PUBLIC_HUB_ADAPTER_URL;
+      if (!hubAdapterApi || !account?.access_token) return;
+      const signOutEndpoint = `${hubAdapterApi.replace(/\/$/, "")}/events/signin`;
+      try {
+        await fetch(signOutEndpoint, {
+          headers: { Authorization: `Bearer ${account.access_token}` },
+          method: "POST",
+        });
+      } catch (error) {
+        console.error("Failed to log sign-in event:", error);
+      }
+    },
+    async signOut({ token }) {
+      // After successful sign out
+      const hubAdapterApi = process.env.NUXT_PUBLIC_HUB_ADAPTER_URL;
+      if (!hubAdapterApi || !token?.access_token) return;
+      const signOutEndpoint = `${hubAdapterApi.replace(/\/$/, "")}/events/signout`;
+      try {
+        await fetch(signOutEndpoint, {
+          headers: { Authorization: `Bearer ${token.access_token}` },
+          method: "POST",
+        });
+      } catch (error) {
+        console.error("Failed to log sign-out event:", error);
+      }
+    },
+  },
   callbacks: {
     /* on session retrieval */
     async session({ session, token }) {
diff --git a/test/components/header/MenuHeader.spec.ts b/test/components/header/MenuHeader.spec.ts
index b9bdbe7..7ada4f1 100644
--- a/test/components/header/MenuHeader.spec.ts
+++ b/test/components/header/MenuHeader.spec.ts
@@ -8,7 +8,13 @@ describe("MenuHeader.vue", () => {
 
   async function menuHeaderChecks(authenticated: boolean) {
     const status = authenticated ? "authenticated" : "unauthenticated";
-    const menuTitles = ["Home", "Projects", "Analyses", "Data Stores"];
+    const menuTitles = [
+      "Home",
+      "Projects",
+      "Analyses",
+      "Events",
+      "Data Stores",
+    ];
 
     vi.stubGlobal("useAuth", () => ({
       status: ref(status),
diff --git a/types/eventTag.ts b/types/eventTag.ts
new file mode 100644
index 0000000..4267ca5
--- /dev/null
+++ b/types/eventTag.ts
@@ -0,0 +1,21 @@
+export const EventServiceTag = {
+  Hub: "Hub",
+  HubAdapter: "Hub Adapter",
+  PodOrchestrator: "Pod Orchestrator",
+  Storage: "Storage",
+  Kong: "Kong",
+  Authentication: "Authentication",
+  Autostart: "Autostart",
+};
+
+export const EventLogLevelTag = {
+  Info: "Info",
+  Warning: "Warning",
+  Error: "Error",
+};
+
+export type EventServiceTag =
+  (typeof EventServiceTag)[keyof typeof EventServiceTag];
+export type EventLogLevelTag =
+  (typeof EventLogLevelTag)[keyof typeof EventLogLevelTag];
+export type EventTag = EventServiceTag | EventLogLevelTag;