diff --git a/package.json b/package.json
index cf00920..4ed00ea 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "build-only": "vite build",
     "type-check": "vue-tsc --build",
     "format": "prettier --write --experimental-cli src/",
-    "fetch-wasm": "curl -L -o src/assets/core.wasm https://github.com/git-calendar/core/releases/download/v0.1.5/core.wasm",
+    "fetch-wasm": "curl -L -o src/assets/core.wasm https://github.com/git-calendar/core/releases/download/v0.1.6/core.wasm",
     "fetch-wasm-latest": "curl -L -o src/assets/core.wasm https://github.com/git-calendar/core/releases/latest/download/core.wasm"
   },
   "dependencies": {
diff --git a/src/App.vue b/src/App.vue
index 1c1afc8..0114d31 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,9 +5,10 @@ import { onBeforeMount, ref } from 'vue';
 import AlertModal from '@/components/modals/AlertModal.vue';
 import { createCalendarOnce } from '@/utils';
 import { syncAllWrapper } from '@/services/gitSync';
-import { settings } from './services/settings';
-import { useAlertModal } from './composables/modals/useAlertModal';
-import { notifyEventsChanged } from './composables/useEventsRefresh';
+import { settings } from '@/services/settings';
+import { useAlertModal } from '@/composables/modals/useAlertModal';
+import { notifyEventsChanged } from '@/composables/useEventsRefresh';
+import { loadCalendars } from '@/services/calendarCache';
 
 const { alert } = useAlertModal();
 
@@ -29,6 +30,8 @@ onBeforeMount(async () => {
     await CalendarCore.loadCalendars(); // load local first, they might change after with network pull
     sync();
 
+    await loadCalendars();
+
     coreReady.value = true;
   } catch (err) {
     alert(String(err));
diff --git a/src/assets/locales/cs.json b/src/assets/locales/cs.json
index f202942..aa697ac 100644
--- a/src/assets/locales/cs.json
+++ b/src/assets/locales/cs.json
@@ -23,6 +23,7 @@
     "to": "Do",
     "entireDay": "Celý den",
     "calendar": "Kalendář",
+    "tag": "Štítek",
     "repeat": {
       "repeat": "Opakování",
       "end": "Konec",
@@ -41,7 +42,13 @@
     "username": "Uživatelské jméno",
     "password": "Heslo/Token",
     "encrypted": "Šifrování",
-    "decryptionKey": "Šifrovací heslo"
+    "encryptionKey": "Šifrovací heslo",
+    "readonly": "Pouze čtení"
+  },
+  "tag": {
+    "name": "Jméno",
+    "color": "Barva",
+    "notag": "Bez štítku"
   },
   "views": {
     "4days": "4 dny",
@@ -85,5 +92,15 @@
   "message": {
     "confirmCalendarDelete": "Chcete opravdu smazat celý kalenář?",
     "errorRemoteUrlEndDotGit": "Remote URL musí končit \".git\"."
+  },
+  "colors": {
+    "blue": "Modrá",
+    "green": "Zelená",
+    "red": "Červená",
+    "purple": "Fialová",
+    "yellow": "Žlutá",
+    "orange": "Oranžová",
+    "pink": "Růžová",
+    "gray": "Šedá"
   }
 }
diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index d2350c1..3d6ea86 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -23,6 +23,7 @@
     "to": "Till",
     "entireDay": "Entire day",
     "calendar": "Calendar",
+    "tag": "Tag",
     "repeat": {
       "repeat": "Repeat",
       "end": "End",
@@ -41,7 +42,13 @@
     "username": "Username",
     "password": "Password/Token",
     "encrypted": "Encrypted",
-    "decryptionKey": "Encryption key/password"
+    "encryptionKey": "Encryption key/password",
+    "readonly": "Read-only"
+  },
+  "tag": {
+    "name": "Name",
+    "color": "Color",
+    "notag": "Untagged"
   },
   "views": {
     "4days": "4 days",
@@ -85,5 +92,15 @@
   "message": {
     "confirmCalendarDelete": "Do you really want to delete the whole calendar?",
     "errorRemoteUrlEndDotGit": "Remote URL must end with \".git\"."
+  },
+  "colors": {
+    "blue": "Blue",
+    "green": "Green",
+    "red": "Red",
+    "purple": "Purple",
+    "yellow": "Yellow",
+    "orange": "Orange",
+    "pink": "Pink",
+    "gray": "Gray"
   }
 }
diff --git a/src/assets/locales/git.json b/src/assets/locales/git.json
index 92933e0..63d8048 100644
--- a/src/assets/locales/git.json
+++ b/src/assets/locales/git.json
@@ -19,5 +19,15 @@
     "compiling": "Building...",
     "starting": "Running...",
     "done": "Ready!"
+  },
+  "colors": {
+    "blue": "Commit Blue",
+    "green": "Addition Green (+)",
+    "red": "Deletion Red (-)",
+    "purple": "Merged Purple",
+    "yellow": "Stash Yellow",
+    "orange": "Rebase Orange",
+    "pink": "Fetch Pink",
+    "gray": "Docs Gray"
   }
 }
diff --git a/src/assets/styles.css b/src/assets/styles.css
index a773a18..293fb6a 100644
--- a/src/assets/styles.css
+++ b/src/assets/styles.css
@@ -120,7 +120,6 @@ input[type='checkbox'] {
   width: 1rem;
   height: 1rem;
   padding: 0;
-  margin-bottom: 2px;
   vertical-align: middle;
   cursor: pointer;
 }
@@ -130,7 +129,7 @@ input[type='checkbox']::before {
   position: absolute;
   inset: 0;
   border-radius: var(--small-border-radius);
-  background-color: var(--btn-bg-color);
+  background-color: var(--sidebar-btn-bg-color);
 }
 
 input[type='checkbox']:checked::before {
@@ -182,6 +181,33 @@ input.red,
       resize: vertical;
       min-height: 2rem;
     }
+
+    fieldset {
+      display: contents;
+      border: 0;
+      padding: 0;
+      margin: 0;
+
+      &:disabled label,
+      &:disabled .dates > span,
+      &:disabled > #git-credentials {
+        opacity: 0.5;
+      }
+
+      &:disabled select {
+        opacity: 1; /* it was dimmed 2 times idk */
+      }
+    }
+
+    label:has(select) {
+      display: flex;
+      align-items: center;
+      gap: 0.8rem;
+
+      select {
+        flex: 1 1 auto;
+      }
+    }
   }
 
   .bottom-btns {
@@ -189,6 +215,15 @@ input.red,
 
     display: flex;
     gap: 1rem;
+
+    .delete-btn {
+      border: 1px solid var(--git-color);
+      background-color: var(--btn-red-bg-color);
+
+      &:hover:not(:focus):not(:disabled) {
+        background-color: var(--btn-red-bg-color-hover);
+      }
+    }
   }
 
   @media (max-width: 768px) {
diff --git a/src/assets/themes.css b/src/assets/themes.css
index 825a41a..02105d3 100644
--- a/src/assets/themes.css
+++ b/src/assets/themes.css
@@ -7,10 +7,11 @@
 [data-theme='dark'] {
   --bg-color: #1a1a1a;
   --text-color: #c1c1c1;
+  --text-color-harder: #d9d9d9;
   --text-color-hard: #fff;
 
   --btn-bg-color: #2b2b2b;
-  --btn-bg-color-hover: color-mix(in srgb, var(--btn-bg-color), white 3%);
+  --btn-bg-color-hover: color-mix(in srgb, var(--btn-bg-color), white 5%);
   --btn-bg-color-checked: color-mix(in srgb, var(--btn-bg-color), white 10%);
   --btn-red-bg-color: color-mix(in srgb, var(--git-color), black 50%);
   --btn-red-bg-color-hover: color-mix(in srgb, var(--git-color), black 40%);
@@ -19,14 +20,41 @@
   --git-bg-color: color-mix(in srgb, var(--git-color-real), black 30%);
 
   --sidebar-color: #242424;
+  --sidebar-btn-bg-color: #333;
+  --sidebar-btn-bg-hover-color: color-mix(in srgb, var(--sidebar-btn-bg-color), white 5%);
   --sidebar-hover-color: color-mix(in srgb, transparent, white 10%);
 
   --grid-color: #262626;
+
+  /* old:
+  --event-color-blue: #6495ed;
+  --event-color-green: #2ea043;
+  --event-color-red: #ee3a49;
+  --event-color-purple: #8250df;
+  --event-color-yellow: #d9a520;
+  --event-color-orange: #f66a0a;
+  --event-color-pink: #e84393;
+  --event-color-teal: #009688;
+  --event-color-gray: #9d9c9d;*/
+
+  --event-color-blue: #00579f;
+  --event-color-green: #0d7b00;
+  --event-color-red: #af0800;
+  --event-color-purple: #7a218f;
+  --event-color-yellow: #fdc700;
+  --event-color-orange: #e85d04;
+  --event-color-pink: #ff5ba1;
+  --event-color-teal: #00a8ad;
+  --event-color-gray: #777777;
+  --event-color-brown: #755020;
+
+  --event-color-git: #f03c2e;
 }
 
 [data-theme='light'] {
   --bg-color: #f2f2f2;
-  --text-color: #101010;
+  --text-color: #1a1a1a;
+  --text-color-harder: #101010;
   --text-color-hard: #000;
 
   --btn-bg-color: #d5d5d5;
@@ -39,6 +67,7 @@
   --git-bg-color: color-mix(in srgb, var(--git-color-real), white 10%);
 
   --sidebar-color: #eaeaea;
+  --sidebar-btn-bg-color: #ddd;
   --sidebar-hover-color: color-mix(in srgb, transparent, black 10%);
 
   --grid-color: #d1d1d1;
diff --git a/src/colors.ts b/src/colors.ts
new file mode 100644
index 0000000..f600e98
--- /dev/null
+++ b/src/colors.ts
@@ -0,0 +1,30 @@
+import { settings } from './services/settings';
+
+export const colorsList = [
+  'blue',
+  'green',
+  'red',
+  'purple',
+  'yellow',
+  'orange',
+  'pink',
+  'teal',
+  'brown',
+  'gray',
+] as const;
+
+export type ColorId = (typeof colorsList)[number];
+
+// Just returns the CSS variable name
+export function getEventColorCSSVariable(colorId: ColorId): string {
+  return `var(--event-color-${colorId})`;
+}
+
+export function getColorI18nKey(id: ColorId): string {
+  return `colors.${id}`;
+}
+
+export function toColorId(color?: string): ColorId {
+  if (colorsList.includes(color as ColorId)) return color as ColorId;
+  else return settings.value.defaultEventColor;
+}
diff --git a/src/components/CalendarList.vue b/src/components/CalendarList.vue
index 1188eb9..d929d2a 100644
--- a/src/components/CalendarList.vue
+++ b/src/components/CalendarList.vue
@@ -1,34 +1,35 @@
 <script setup lang="ts">
-import { CalendarCore } from '@/wasm/core-wrapper';
 import { FiPlus, FiEdit2 } from 'vue-icons-plus/fi';
-import { ref, watch } from 'vue';
+import { ref } from 'vue';
 import { useCalendarModal } from '@/composables/modals/useCalendarModal';
-import type { Calendar } from '@/types/core';
-import { eventsRevision } from '@/composables/useEventsRefresh';
+import { useTagModal } from '@/composables/modals/useTagModal';
+import { cachedCalendars, getTag } from '@/services/calendarCache';
+import { getEventColorCSSVariable, toColorId } from '@/colors';
 
 const calendarModal = useCalendarModal();
-const calendars = ref<Calendar[]>([]);
+const tagModal = useTagModal();
 const hidden = ref(new Map<string, boolean>());
 
-function toggle(cal: Calendar) {
-  hidden.value.set(cal.name, !(hidden.value.get(cal.name) ?? false));
+function getCalId(calName: string): string {
+  return `cal_${calName}`;
 }
 
-function checkboxName(calName: string): string {
-  return `cal-${calName.toLowerCase()}`;
+function getTagId(calName: string, tagName: string): string {
+  return `tag_${calName}_${tagName}`;
 }
 
-async function updateData() {
-  calendars.value = await CalendarCore.listCalendars();
+function toggleVisibility(id: string) {
+  hidden.value.set(id, !(hidden.value.get(id) ?? false));
 }
 
-watch(
-  eventsRevision, // TODO: separate calendar signal?
-  () => {
-    void updateData();
-  },
-  { immediate: true },
-);
+function isVisible(id: string): boolean {
+  return !(hidden.value.get(id) ?? false);
+}
+
+function getTagColor(calName: string, tagId?: string) {
+  const tag = getTag(calName, tagId ?? '');
+  return getEventColorCSSVariable(toColorId(tag?.color));
+}
 </script>
 
 <template>
@@ -39,20 +40,49 @@ watch(
         <FiPlus />
       </button>
     </div>
-    <div v-for="cal in calendars" :key="cal.name" class="calendar">
-      <label class="cal-label">
-        <input
-          type="checkbox"
-          :id="checkboxName(cal.name)"
-          :name="checkboxName(cal.name)"
-          :checked="!(hidden.get(cal.name) ?? false)"
-          @change="toggle(cal)"
-        />
-        <span class="cal-name">{{ cal.name }}</span>
-      </label>
-      <button @click="calendarModal.open(cal.name)">
-        <FiEdit2 />
-      </button>
+
+    <div class="calendar-list">
+      <div v-for="cal in cachedCalendars" :key="cal.name" class="calendar-wrap">
+        <div class="calendar">
+          <label>
+            <input
+              type="checkbox"
+              :id="getCalId(cal.name)"
+              :name="getCalId(cal.name)"
+              :checked="isVisible(cal.name)"
+              @change="toggleVisibility(cal.name)"
+            />
+            <span class="name">{{ cal.name }}</span>
+          </label>
+
+          <button class="edit-btn" @click="calendarModal.open(cal.name)">
+            <FiEdit2 />
+          </button>
+        </div>
+
+        <div v-if="isVisible(cal.name)" class="tags-list">
+          <div class="tag" v-for="tag in cal.tags" :key="tag.name">
+            <label>
+              <input
+                type="checkbox"
+                :id="getTagId(cal.name, tag.name)"
+                :name="getTagId(cal.name, tag.name)"
+                :checked="isVisible(getTagId(cal.name, tag.name))"
+                @change="toggleVisibility(getTagId(cal.name, tag.name))"
+                :style="{ '--tag-color': getTagColor(cal.name, tag.id) }"
+              />
+              <span class="tag-name">{{ tag.name }}</span>
+            </label>
+
+            <button class="edit-btn" @click="tagModal.open(cal.name, tag)">
+              <FiEdit2 />
+            </button>
+          </div>
+          <div class="tag new" @click="tagModal.open(cal.name)">
+            <FiPlus />
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -60,27 +90,46 @@ watch(
 <style scoped>
 .calendars {
   width: 100%;
-
   display: flex;
   flex-direction: column;
-  gap: 0.3rem;
+  gap: 0.4rem;
+  min-height: 0;
+}
+.calendar-list {
+  --fade-size: 2rem;
+
+  height: 100%;
+  min-height: 0;
+  padding-bottom: var(--fade-size); /* leaves space at the bottom so that the shadow isnt always visible */
+
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  /* hide scrollbar: firefox */
+  scrollbar-width: none;
+  /* hide scrollbar: old edge/IE */
+  -ms-overflow-style: none;
+  /* hide scrollbar: chrome, safari, edge */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* fade out bottom content */
+  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--fade-size)), transparent 100%);
+  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--fade-size)), transparent 100%);
 }
 
 .top-bar {
   display: flex;
   align-items: center;
-  justify-content: center;
-
-  position: relative;
+  padding-left: 0.4rem;
+  justify-content: space-between;
 
   .title {
-    justify-self: center;
     font-weight: bold;
   }
 
   .create-new {
-    position: absolute;
-    right: 0;
     width: 1.8rem;
     height: 1.8rem;
     display: flex;
@@ -95,40 +144,109 @@ watch(
   }
 }
 
-.calendar {
+.calendar-wrap {
   display: flex;
-  height: 2rem;
-  padding: 0.3rem;
+  flex-direction: column;
+  gap: 0.1rem;
+
+  .calendar {
+    height: 2rem;
+    padding-right: 0.25rem;
+
+    label {
+      display: flex;
+      align-items: center;
+      gap: 0.7rem;
+      cursor: pointer;
+      user-select: none;
+      flex-grow: 1;
+      padding: 0.3rem;
+    }
 
+    .name {
+      font-weight: 500;
+    }
+  }
+}
+
+.calendar,
+.tag {
+  display: flex;
+  align-items: center;
   border-radius: var(--small-border-radius);
 
   &:hover {
     background-color: var(--sidebar-hover-color);
+
+    /* reveal the edit button on row hover */
+    .edit-btn {
+      opacity: 1;
+      pointer-events: auto;
+    }
   }
+}
 
-  > button {
-    height: 100%;
-    aspect-ratio: 1/1;
-    padding: 0.25rem;
-    margin-left: auto;
-    background-color: var(--sidebar-bg-color);
+.edit-btn {
+  height: 76%;
+  aspect-ratio: 1/1;
+  padding: 0.25rem;
+  background-color: transparent;
+  border-radius: var(--small-border-radius);
+  cursor: pointer;
 
-    &:hover:not(:disabled) {
-      background-color: color-mix(in srgb, var(--sidebar-color), white 20%);
-    }
+  /* hidden by default until hovered */
+  opacity: 0;
+  pointer-events: none;
+
+  &:hover:not(:disabled) {
+    background-color: color-mix(in srgb, var(--sidebar-color), white 20%);
   }
 }
 
-.cal-label {
+.tags-list {
   display: flex;
-  align-items: center;
-  gap: 0.7rem;
+  flex-direction: column;
+  gap: 0.1rem;
+  padding-left: 1.8rem;
+
+  .tag {
+    padding-right: 0.25rem;
+    height: 1.7rem;
+
+    label,
+    &.new {
+      display: flex;
+      padding: 0.25rem 0.4rem;
+      align-items: center;
+      gap: 0.5rem;
+      border-radius: var(--small-border-radius);
+      cursor: pointer;
+      user-select: none;
+      flex-grow: 1;
+
+      input[type='checkbox']:checked::before {
+        background-color: var(--tag-color);
+      }
+    }
 
-  cursor: pointer;
-  user-select: none;
+    .name {
+      font-size: 0.9em;
+      opacity: 0.85;
+    }
+
+    .edit-btn {
+      padding: 0.15rem;
+    }
+  }
 }
 
-.cal-name {
-  font-weight: 500;
+.tag.new {
+  width: max-content;
+
+  svg {
+    transform: scale(1.3);
+    width: 1rem;
+    height: 1rem;
+  }
 }
 </style>
diff --git a/src/components/ColorPicker.vue b/src/components/ColorPicker.vue
new file mode 100644
index 0000000..be991af
--- /dev/null
+++ b/src/components/ColorPicker.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { colorsList, getColorI18nKey, getEventColorCSSVariable } from '@/colors';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+// helper to get the real hex from CSS variable
+const getColorHex = (colorId: string) => {
+  return getComputedStyle(document.documentElement).getPropertyValue(`--event-color-${colorId}`).trim() || ''; // fallback
+};
+</script>
+
+<template>
+  <div class="color-picker-grid">
+    <button
+      v-for="colorId in colorsList"
+      :key="colorId"
+      class="color-item"
+      :style="{
+        backgroundColor: `${getEventColorCSSVariable(colorId)}26` /* 15% opacity for bg */,
+        borderLeft: `4px solid ${getEventColorCSSVariable(colorId)}`,
+        color: getEventColorCSSVariable(colorId),
+      }"
+    >
+      <span class="color-name">{{ t(getColorI18nKey(colorId)) }}</span>
+      <span class="color-hex">{{ getColorHex(colorId) }}</span>
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.color-picker-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-width: 300px;
+}
+
+.color-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  border: none;
+  cursor: pointer;
+  font-family: sans-serif;
+  font-weight: 500;
+  text-align: left;
+}
+
+.color-hex {
+  font-family: monospace;
+  font-size: 0.85em;
+  opacity: 0.7;
+}
+</style>
diff --git a/src/components/MonthSideMap.vue b/src/components/MonthSideMap.vue
index 1bb3a37..04ec96f 100644
--- a/src/components/MonthSideMap.vue
+++ b/src/components/MonthSideMap.vue
@@ -241,6 +241,10 @@ const hoverInterval = computed(() => {
     font-weight: 900;
     position: relative;
 
+    &:not(.in-range) {
+      color: var(--git-color);
+    }
+
     /* the dot */
     &::after {
       content: '';
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index 30c302f..bf1bf92 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -34,6 +34,7 @@ async function syncAndReload() {
       </template>
     </template>
 
+    <hr style="margin-top: auto" />
     <div id="links">
       <router-link to="/settings">
         <FiSettings />
@@ -57,19 +58,30 @@ aside {
   display: flex;
   flex-direction: column;
   align-items: center;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  min-height: 0;
 
   padding: 0.5rem;
 
   background-color: var(--sidebar-color);
+
+  button {
+    background-color: var(--sidebar-btn-bg-color);
+
+    &:hover:not(:focus):not(:disabled) {
+      background-color: var(--sidebar-btn-bg-hover-color);
+    }
+  }
 }
 
 #links {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-
-  position: absolute;
-  bottom: 0.8rem;
+  padding: 0.3rem;
 
   > * {
     display: flex;
@@ -92,7 +104,7 @@ hr {
   width: 98%;
   border: 0.5px solid white;
   opacity: 0.2;
-  margin: 0.5rem 0 0.8rem 0;
+  margin: 0.5rem 0;
 }
 
 #top-btns {
diff --git a/src/components/modals/CalendarModal.vue b/src/components/modals/CalendarModal.vue
index 7f62f57..ea28527 100644
--- a/src/components/modals/CalendarModal.vue
+++ b/src/components/modals/CalendarModal.vue
@@ -7,7 +7,7 @@ import type { Calendar } from '@/types/core';
 import { useAlertModal } from '@/composables/modals/useAlertModal';
 import { useI18n } from 'vue-i18n';
 import { syncAllWrapper } from '@/services/gitSync';
-import { notifyEventsChanged } from '@/composables/useEventsRefresh';
+import { refreshCalendars } from '@/services/calendarCache';
 
 const { t } = useI18n();
 const thisModal = useCalendarModal();
@@ -22,11 +22,12 @@ const howOptions = ['Init', 'Clone'];
 const form = reactive({
   how: 'Init',
   name: '',
-  url: '',
+  remoteURL: '',
   username: '',
   password: '',
   encrypted: false,
-  decryptionKey: '',
+  encryptionKey: '',
+  readonly: false,
 });
 const errors = reactive({
   missingName: false,
@@ -58,11 +59,12 @@ function updateFormFromCalendar(calendar: Calendar) {
   form.how = '';
   form.name = calendar.name ?? '';
   form.encrypted = calendar.encrypted;
-  form.decryptionKey = ''; // secret
+  form.encryptionKey = ''; // secret
+  form.readonly = calendar.readonly;
 
   if (calendar.remoteUrl) {
     const remoteUrl = authFromUrl(calendar.remoteUrl);
-    form.url = remoteUrl.url;
+    form.remoteURL = remoteUrl.url;
     form.username = remoteUrl.username;
     form.password = remoteUrl.password;
   }
@@ -84,7 +86,7 @@ async function saveCalendar(e: Event) {
     }
     await CalendarCore.loadCalendars();
 
-    notifyEventsChanged();
+    refreshCalendars();
     thisModal.close();
   } catch (err) {
     alert(String(err));
@@ -94,20 +96,25 @@ async function saveCalendar(e: Event) {
 }
 
 async function createCalendar() {
-  console.log('creating calendar', form.name, form.url);
+  console.log('creating calendar', form.name, form.remoteURL);
 
   switch (form.how) {
     case 'Init':
-      const name = form.name.trim();
-      await CalendarCore.createCalendar(name, form.encrypted ? form.decryptionKey : '');
-      if (form.url !== '')
-        await CalendarCore.updateRemote(name, urlWithAuth(form.url.trim(), form.username, form.password));
+      await CalendarCore.createCalendar(form.name.trim(), form.encrypted ? form.encryptionKey : '');
+      if (form.remoteURL !== '') {
+        await CalendarCore.updateRemote(
+          form.name.trim(),
+          urlWithAuth(form.remoteURL.trim(), form.username, form.password),
+          form.readonly,
+        );
+      }
       break;
 
     case 'Clone':
       await CalendarCore.cloneCalendar(
-        urlWithAuth(form.url.trim(), form.username, form.password),
-        form.encrypted ? form.decryptionKey : '',
+        urlWithAuth(form.remoteURL.trim(), form.username, form.password),
+        form.encrypted ? form.encryptionKey : '',
+        form.readonly,
       );
       break;
   }
@@ -127,11 +134,11 @@ async function updateCalendar() {
     calendarName = form.name;
   }
 
-  const rawUrl = form.url.trim();
+  const rawUrl = form.remoteURL.trim();
   if (rawUrl !== '') {
     const newRemoteUrl = urlWithAuth(rawUrl, form.username, form.password);
-    if (calendar.remoteUrl !== newRemoteUrl) {
-      await CalendarCore.updateRemote(calendarName, newRemoteUrl);
+    if (calendar.remoteUrl !== newRemoteUrl || originalCalendar.value?.readonly !== form.readonly) {
+      await CalendarCore.updateRemote(calendarName, newRemoteUrl, form.readonly);
       await syncAllWrapper(); // merge/pull or whatever
     }
   }
@@ -151,7 +158,7 @@ async function deleteCal() {
     await CalendarCore.removeCalendar(originalCalendar.value.name);
     await CalendarCore.loadCalendars();
 
-    notifyEventsChanged();
+    refreshCalendars();
     thisModal.close();
   } catch (err) {
     alert(String(err));
@@ -172,19 +179,19 @@ function validate(): boolean {
     return false;
   }
 
-  form.url = form.url.trim();
-  if (needsURL && form.url === '') {
+  form.remoteURL = form.remoteURL.trim();
+  if (needsURL && form.remoteURL === '') {
     errors.badURL = true;
     return false;
   }
 
-  if (form.url !== '') {
-    if (!isValidUrl(form.url)) {
+  if (form.remoteURL !== '') {
+    if (!isValidUrl(form.remoteURL)) {
       errors.badURL = true;
       return false;
     }
 
-    if (!form.url.endsWith('.git')) {
+    if (!form.remoteURL.endsWith('.git')) {
       errors.badURL = true;
       alert(t('message.errorRemoteUrlEndDotGit'));
       return false;
@@ -206,11 +213,12 @@ function isValidUrl(value: string): boolean {
 function resetForm() {
   form.how = howOptions[0];
   form.name = '';
-  form.url = '';
+  form.remoteURL = '';
   form.username = '';
   form.password = '';
   form.encrypted = false;
-  form.decryptionKey = '';
+  form.encryptionKey = '';
+  form.readonly = false;
 
   resetErrors();
 }
@@ -289,7 +297,7 @@ onMounted(() => {
           name="url"
           :placeholder="`Remote URL ${form.how == 'Init' ? '(' + $t('optionalText') + ')' : ''}`"
           autocomplete="none"
-          v-model="form.url"
+          v-model="form.remoteURL"
           :class="{ red: errors.badURL }"
           @input="errors.badURL = false"
         />
@@ -314,20 +322,25 @@ onMounted(() => {
           </div>
         </div>
 
+        <label v-if="form.how === 'Clone' || (form.how === '' && form.remoteURL !== '')">
+          {{ $t('calendar.readonly') }}
+          <input type="checkbox" name="readonly" v-model="form.readonly" />
+        </label>
+
         <div id="encryption" v-if="thisModal.isNew.value">
           <!-- TODO: re-encrypt option for existing calendars -->
           <label>
             {{ $t('calendar.encrypted') }}
-            <input type="checkbox" v-model="form.encrypted" />
+            <input type="checkbox" name="encrypted" v-model="form.encrypted" />
           </label>
 
           <input
             v-if="form.encrypted"
             type="password"
-            name="decryption-key"
-            :placeholder="$t('calendar.decryptionKey')"
+            name="encryption-key"
+            :placeholder="$t('calendar.encryptionKey')"
             autocomplete="current-password"
-            v-model="form.decryptionKey"
+            v-model="form.encryptionKey"
           />
         </div>
 
@@ -364,24 +377,4 @@ onMounted(() => {
     }
   }
 }
-
-fieldset {
-  display: contents;
-  border: 0;
-  padding: 0;
-  margin: 0;
-
-  &:disabled > #git-credentials {
-    opacity: 0.5;
-  }
-}
-
-.delete-btn {
-  border: 1px solid var(--git-color);
-  background-color: var(--btn-red-bg-color);
-
-  &:hover:not(:focus):not(:disabled) {
-    background-color: var(--btn-red-bg-color-hover);
-  }
-}
 </style>
diff --git a/src/components/modals/EventModal.vue b/src/components/modals/EventModal.vue
index 0b16ec0..ad3e2fc 100644
--- a/src/components/modals/EventModal.vue
+++ b/src/components/modals/EventModal.vue
@@ -10,6 +10,7 @@ import { useAlertModal } from '@/composables/modals/useAlertModal';
 import { syncAllWrapper } from '@/services/gitSync';
 import cloneDeep from 'lodash-es/cloneDeep';
 import { notifyEventsChanged } from '@/composables/useEventsRefresh';
+import { cachedCalendars, getDefaultCalendar, loadCalendars } from '@/services/calendarCache';
 
 const repeatEndOptions = [
   { value: 'on', label: 'On' },
@@ -42,6 +43,7 @@ const form = reactive({
   toTime: '',
   calendar: '',
   entireDay: false,
+  tagId: '',
 
   repeatFreq: Freq.Invalid,
   repeatEnd: 'after',
@@ -49,31 +51,16 @@ const form = reactive({
   repeatEndAfter: 5,
 });
 const errors = reactive({
-  missingName: false,
+  missingTitle: false,
   badToDate: false,
   badFromDate: false,
   badUntilDate: false,
 });
 
-const calendarNames = ref<string[]>([]);
-const calendarNamesLoaded = ref(false);
-
-void loadCalendarNames();
-
-async function loadCalendarNames() {
-  try {
-    calendarNames.value = (await CalendarCore.listCalendars()).map((cal) => cal.name);
-  } catch (err) {
-    alert(String(err));
-  } finally {
-    calendarNamesLoaded.value = true;
-  }
-}
-
-let originalEvent: CalendarEvent | undefined = undefined;
+let originalEvent: CalendarEvent | undefined;
 watch(
-  [() => thisModal.event.value, calendarNames],
-  ([newEvent]) => {
+  () => thisModal.event.value,
+  (newEvent) => {
     if (!newEvent) {
       originalEvent = undefined;
       return;
@@ -83,16 +70,13 @@ watch(
     const eventForForm = cloneDeep(originalEvent);
 
     if (eventForForm.calendar === '') {
-      if (!calendarNamesLoaded.value) return;
-      console.log(calendarNames.value);
-      // calendar unset -> choose one
-      originalEvent.calendar = eventForForm.calendar = calendarNames.value.includes('default')
-        ? 'default'
-        : (calendarNames.value.at(0) ?? '');
+      const defaultCal = getDefaultCalendar();
+      originalEvent.calendar = eventForForm.calendar = defaultCal?.name ?? '';
     }
+
     updateFormFromEvent(originalEvent);
   },
-  { immediate: true }, // fire right onMounted, not wait till first change
+  { immediate: true },
 );
 
 function updateFormFromEvent(event: CalendarEvent | undefined) {
@@ -129,6 +113,7 @@ function updateFormFromEvent(event: CalendarEvent | undefined) {
   }
 
   form.calendar = event.calendar;
+  form.tagId = event.tagId ?? '';
 }
 
 function reconstructEvent(): CalendarEvent {
@@ -138,7 +123,7 @@ function reconstructEvent(): CalendarEvent {
     location: form.location,
     description: form.description,
     calendar: form.calendar,
-    tag: originalEvent!.tag, // TODO
+    tagId: form.tagId === '' ? undefined : form.tagId,
     from: form.entireDay
       ? DateTime.fromISO(`${form.fromDate}T00:00`, { zone: originalEvent?.from.zone })
       : DateTime.fromISO(`${form.fromDate}T${form.fromTime}`, { zone: originalEvent?.from.zone }),
@@ -267,7 +252,7 @@ async function deleteRepeatingEvent(strategy: UpdateStrategy) {
 
 function validate(event: CalendarEvent): boolean {
   if (event.title == '') {
-    errors.missingName = true;
+    errors.missingTitle = true;
     return false;
   }
 
@@ -299,13 +284,19 @@ function validate(event: CalendarEvent): boolean {
   return true; // ok
 }
 
-const nameInputField = useTemplateRef('name-input-field');
+const titleInputField = useTemplateRef('title-input-field');
 onMounted(async () => {
-  nameInputField.value?.focus(); // focus name field
-});
+  titleInputField.value?.focus(); // focus title field
+
+  await loadCalendars();
+
+  if (form.calendar === '') {
+    const calendar = getDefaultCalendar();
 
-// const exampleTags = ref(['School', 'Work', 'Birthday']); // TODO
-// const selectedTags = ref<string[]>([]);
+    form.calendar = calendar?.name ?? '';
+    form.tagId = calendar?.tags[0]?.id ?? '';
+  }
+});
 </script>
 
 <template>
@@ -318,9 +309,9 @@ onMounted(async () => {
           :placeholder="$t('event.title')"
           autocomplete="none"
           v-model="form.title"
-          ref="name-input-field"
-          :class="{ red: errors.missingName }"
-          @input="errors.missingName = false"
+          ref="title-input-field"
+          :class="{ red: errors.missingTitle }"
+          @input="errors.missingTitle = false"
         />
 
         <div class="dates">
@@ -385,8 +376,22 @@ onMounted(async () => {
         <label>
           {{ $t('event.calendar') }}:
           <select name="calendar" v-model="form.calendar">
-            <option v-for="calendarName in calendarNames" :value="calendarName" :key="calendarName">
-              {{ calendarName }}
+            <option v-for="calendar in cachedCalendars" :value="calendar.name" :key="calendar.name">
+              {{ calendar.name }}
+            </option>
+          </select>
+        </label>
+
+        <label>
+          {{ $t('event.tag') }}:
+          <select name="tag" id="tag" v-model="form.tagId">
+            <option value="">{{ $t('tag.notag') }}</option>
+            <option
+              v-for="tag in cachedCalendars.find((cal) => cal.name == form.calendar)?.tags ?? []"
+              :key="tag.id"
+              :value="tag.id"
+            >
+              {{ tag.name }}
             </option>
           </select>
         </label>
@@ -399,16 +404,6 @@ onMounted(async () => {
           v-model="form.location"
         />
 
-        <!--
-        TODO tags
-        <div>
-            <label v-for="tagName in exampleTags" :key="tagName">
-            <input type="checkbox" name="idk" :value="tagName" v-model="selectedTags" />
-            {{ tagName }}
-            </label>
-        </div>
-        -->
-
         <textarea name="description" rows="3" :placeholder="$t('event.description')" v-model="form.description" />
 
         <div class="bottom-btns">
@@ -440,16 +435,6 @@ label:has(select[name='end']) {
   }
 }
 
-label:has(select) {
-  display: flex;
-  align-items: center;
-  gap: 0.8rem;
-
-  select {
-    flex: 1 1 auto;
-  }
-}
-
 .dates {
   display: grid;
   grid-template-columns: auto 1fr;
@@ -467,31 +452,6 @@ label:has(select) {
   gap: 0.7rem;
 }
 
-.delete-btn {
-  border: 1px solid var(--git-color);
-  background-color: var(--btn-red-bg-color);
-
-  &:hover:not(:focus):not(:disabled) {
-    background-color: var(--btn-red-bg-color-hover);
-  }
-}
-
-fieldset {
-  display: contents;
-  border: 0;
-  padding: 0;
-  margin: 0;
-
-  &:disabled label,
-  &:disabled .dates > span {
-    opacity: 0.5;
-  }
-
-  &:disabled select {
-    opacity: 1; /* it was dimmed 2 times idk */
-  }
-}
-
 @media (max-width: 450px) {
   label:has(select[name='end']) {
     margin-left: 1.5rem;
diff --git a/src/components/modals/TagModal.vue b/src/components/modals/TagModal.vue
new file mode 100644
index 0000000..639cf8e
--- /dev/null
+++ b/src/components/modals/TagModal.vue
@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import { colorsList, getColorI18nKey } from '@/colors';
+import { useAlertModal } from '@/composables/modals/useAlertModal';
+import { useTagModal } from '@/composables/modals/useTagModal';
+import { refreshCalendars } from '@/services/calendarCache';
+import { syncAllWrapper } from '@/services/gitSync';
+import type { Tag } from '@/types/core';
+import { CalendarCore } from '@/wasm/core-wrapper';
+import { cloneDeep } from 'lodash-es';
+import { ref, reactive, computed, watch, onMounted, useTemplateRef } from 'vue';
+
+const thisModal = useTagModal();
+const { alert } = useAlertModal();
+
+const isSaving = ref(false);
+const isDeleting = ref(false);
+const isLocked = computed(() => isSaving.value || isDeleting.value);
+
+const form = reactive({
+  name: '',
+  color: '',
+});
+const errors = reactive({
+  missingName: false,
+  missingColor: false,
+});
+
+watch(
+  () => thisModal.tag.value,
+  (newTag) => {
+    if (!newTag) {
+      return;
+    }
+    const tagForForm = cloneDeep(newTag);
+    updateFormFromTag(tagForForm);
+  },
+  { immediate: true },
+);
+
+const isNew = computed(() => {
+  return thisModal.tag.value?.id === undefined;
+});
+
+function updateFormFromTag(tag: Tag | undefined) {
+  if (!tag) return;
+
+  form.name = tag.name;
+  form.color = tag.color ?? '';
+}
+
+function reconstructTag(): Tag {
+  const tag: Tag = {
+    id: thisModal.tag.value?.id,
+    name: form.name,
+    color: form.color,
+  };
+  return tag;
+}
+
+async function saveTag() {
+  const tag = reconstructTag();
+  if (!validate(tag)) return;
+  if (!thisModal.calendarName.value) {
+    alert('Something went wrong...');
+    console.error('Calendar name was not set?!');
+    return;
+  }
+
+  isSaving.value = true;
+  try {
+    if (isNew.value) {
+      await CalendarCore.createTag(thisModal.calendarName.value, tag);
+    } else {
+      await CalendarCore.updateTag(thisModal.calendarName.value, tag);
+    }
+    void syncAllWrapper();
+    refreshCalendars();
+    thisModal.close();
+  } catch (err) {
+    alert(String(err));
+  } finally {
+    isSaving.value = false;
+  }
+}
+
+async function deleteTag() {
+  const tag = reconstructTag();
+  if (!tag.id) {
+    alert('Something went wrong...');
+    console.error('Tag has no ID?!');
+    return;
+  }
+  if (!thisModal.calendarName.value) {
+    alert('Something went wrong...');
+    console.error('Calendar name was not set?!');
+    return;
+  }
+
+  isDeleting.value = true;
+  try {
+    await CalendarCore.removeTag(thisModal.calendarName.value, tag.id);
+    void syncAllWrapper();
+    refreshCalendars();
+    thisModal.close();
+  } catch (err) {
+    alert(String(err));
+  } finally {
+    isDeleting.value = false;
+  }
+}
+
+function validate(tag: Tag): boolean {
+  if (tag.name == '') {
+    errors.missingName = true;
+    return false;
+  }
+
+  if (tag.color == '') {
+    errors.missingColor = true;
+    return false;
+  }
+
+  return true; // ok
+}
+
+const nameInputField = useTemplateRef('name-input-field');
+onMounted(async () => {
+  nameInputField.value?.focus(); // focus name field
+});
+</script>
+
+<template>
+  <div id="tag-modal" class="modal">
+    <form @submit.prevent="saveTag" :aria-busy="isLocked">
+      <fieldset :disabled="isLocked">
+        <input
+          type="text"
+          name="name"
+          :placeholder="$t('tag.name')"
+          autocomplete="none"
+          v-model="form.name"
+          ref="name-input-field"
+          :class="{ red: errors.missingName }"
+          @input="errors.missingName = false"
+        />
+
+        <!-- TODO: prettier color picker -->
+        <label>
+          {{ $t('tag.color') }}:
+          <select name="color" id="color" v-model="form.color">
+            <option v-for="color in colorsList" :key="color" :value="color">
+              {{ $t(getColorI18nKey(color)) }}
+            </option>
+          </select>
+        </label>
+
+        <div class="bottom-btns">
+          <button type="submit">
+            {{ isSaving ? $t('savingBtn') : $t('saveBtn') }}
+          </button>
+          <button type="button" @click="thisModal.close">{{ $t('closeBtn') }}</button>
+          <button v-if="!thisModal.isNew.value" type="button" @click="deleteTag" class="delete-btn">
+            {{ isDeleting ? $t('deletingBtn') : $t('deleteBtn') }}
+          </button>
+        </div>
+      </fieldset>
+    </form>
+  </div>
+</template>
+
+<style scoped>
+#tag-modal {
+  > form {
+    min-width: 20rem;
+    width: auto;
+  }
+}
+</style>
diff --git a/src/components/timeline/BaseEvent.vue b/src/components/timeline/BaseEvent.vue
index e835880..e78a744 100644
--- a/src/components/timeline/BaseEvent.vue
+++ b/src/components/timeline/BaseEvent.vue
@@ -1,25 +1,33 @@
 <script setup lang="ts">
+import { getEventColorCSSVariable, toColorId } from '@/colors';
+import { settings } from '@/services/settings';
 import { computed } from 'vue';
 
-interface Props {
-  topStyle: string;
-  heightStyle: string;
-  title: string;
-  subtitle: string;
-  color?: string;
-  temporary?: boolean;
-}
+const props = withDefaults(
+  defineProps<{
+    topStyle: string;
+    heightStyle: string;
+    title: string;
+    subtitle: string;
+    color?: string;
+    temporary?: boolean;
+  }>(),
+  {
+    color: settings.value.defaultEventColor,
+    temporary: false,
+  },
+);
 
-const props = withDefaults(defineProps<Props>(), {
-  color: '#6495ed',
-  temporary: false,
-});
+const dynamicStyles = computed(() => {
+  let color = getEventColorCSSVariable(toColorId(props.color));
+  if (props.temporary) color = 'var(--event-color-git)';
 
-const dynamicStyles = computed(() => ({
-  top: `calc(${props.topStyle} + 1.5px)`, // few pixel space between touching events
-  height: `calc(${props.heightStyle} - 2px)`,
-  '--event-color': props.color,
-}));
+  return {
+    top: `calc(${props.topStyle} + 1.5px)`,
+    height: `calc(${props.heightStyle} - 2px)`,
+    '--event-color': color,
+  };
+});
 </script>
 
 <template>
@@ -67,7 +75,7 @@ const dynamicStyles = computed(() => ({
   background-size: 3px 100%;
   background-repeat: repeat-y;
 
-  background-color: color-mix(in srgb, var(--event-color), transparent 85%); /* light */
+  background-color: color-mix(in srgb, var(--event-color), transparent 80%); /* light */
 }
 
 /* hover only for non-temporary events */
diff --git a/src/components/timeline/DayTimeline.vue b/src/components/timeline/DayTimeline.vue
index 642ddd6..e28d6b3 100644
--- a/src/components/timeline/DayTimeline.vue
+++ b/src/components/timeline/DayTimeline.vue
@@ -308,6 +308,7 @@ const { drag, placeholderTop, placeholderHeight, placeholderSubtitle, dragStart
         :title="$t('event.new')"
         :subtitle="placeholderSubtitle"
         :temporary="true"
+        :color="'git-real'"
       />
 
       <TimelineEvent
diff --git a/src/components/timeline/TimelineEvent.vue b/src/components/timeline/TimelineEvent.vue
index d30d836..0e7054d 100644
--- a/src/components/timeline/TimelineEvent.vue
+++ b/src/components/timeline/TimelineEvent.vue
@@ -3,6 +3,7 @@ import type { CalendarEvent } from '@/types/core';
 import BaseEvent from '@/components/timeline/BaseEvent.vue';
 import { numberOfHours, timeRangeFormat } from '@/utils';
 import { settings } from '@/services/settings';
+import { getTag } from '@/services/calendarCache';
 
 interface Props {
   event: CalendarEvent;
@@ -37,6 +38,7 @@ function getEventStylePos(e: CalendarEvent) {
     :height-style="getEventStylePos(event).height"
     :title="event.title"
     :subtitle="timeRangeFormat(event.from, event.to)"
+    :color="getTag(event.calendar, event.tagId ?? '')?.color"
   />
 </template>
 
diff --git a/src/components/timeline/XDaysView.vue b/src/components/timeline/XDaysView.vue
index 8fa61b2..94f286f 100644
--- a/src/components/timeline/XDaysView.vue
+++ b/src/components/timeline/XDaysView.vue
@@ -71,6 +71,7 @@ async function updateData() {
   const resultTimeline: CalendarEvent[][] = Array.from({ length: props.numOfDays }, () => []);
   const resultWholeDay: CalendarEvent[] = [];
   const events = await CalendarCore.getEvents(startDate.value, startDate.value.plus({ day: props.numOfDays }));
+  console.log('Client got events:', events);
 
   for (const event of events) {
     if (isWholeDay(event) || event.from.day != event.to.day) {
diff --git a/src/composables/modals/useEventModal.ts b/src/composables/modals/useEventModal.ts
index 1021854..d3febd1 100644
--- a/src/composables/modals/useEventModal.ts
+++ b/src/composables/modals/useEventModal.ts
@@ -22,7 +22,7 @@ export function useEventModal() {
           from: DateTime.now(),
           to: DateTime.now().plus({ hour: 2 }),
           calendar: '',
-          tag: '',
+          tagId: '',
         };
       }
 
diff --git a/src/composables/modals/useTagModal.ts b/src/composables/modals/useTagModal.ts
new file mode 100644
index 0000000..788419a
--- /dev/null
+++ b/src/composables/modals/useTagModal.ts
@@ -0,0 +1,36 @@
+import { ref, shallowRef, readonly, computed } from 'vue';
+import type { Tag } from '@/types/core';
+
+const isOpen = ref(false);
+const editingTag = shallowRef<Tag | undefined>(undefined);
+const editingTagCalendarName = shallowRef<string | undefined>(undefined); // ughhh idk this feels stupid
+
+export function useTagModal() {
+  return {
+    isOpen: readonly(isOpen),
+    tag: readonly(editingTag),
+    calendarName: readonly(editingTagCalendarName),
+    isNew: computed(() => editingTag.value && editingTag.value.id === undefined),
+
+    open(calendar: string, tag?: Tag) {
+      if (tag) {
+        editingTag.value = tag;
+        editingTagCalendarName.value = calendar;
+      } else {
+        editingTag.value = {
+          name: '',
+          color: 'blue',
+        };
+        editingTagCalendarName.value = calendar;
+      }
+
+      isOpen.value = true;
+    },
+
+    close() {
+      isOpen.value = false;
+      editingTag.value = undefined;
+      editingTagCalendarName.value = undefined;
+    },
+  };
+}
diff --git a/src/composables/useDraggingEvent.ts b/src/composables/useDraggingEvent.ts
index 00b2bbb..e4c785f 100644
--- a/src/composables/useDraggingEvent.ts
+++ b/src/composables/useDraggingEvent.ts
@@ -122,7 +122,7 @@ export function useDraggingEvent(timelineRef: Ref<HTMLElement | null>, date: Ref
       from: startTime,
       to: endTime,
       calendar: '',
-      tag: '',
+      tagId: '',
     };
     eventModal.open(event);
 
diff --git a/src/composables/useKeyboard.ts b/src/composables/useKeyboard.ts
index 51c3116..ed653b3 100644
--- a/src/composables/useKeyboard.ts
+++ b/src/composables/useKeyboard.ts
@@ -6,8 +6,12 @@ import { DateTime } from 'luxon';
 import { useEventModal } from '@/composables/modals/useEventModal';
 import { useCalendarModal } from '@/composables/modals/useCalendarModal';
 import { useStrategyModal } from '@/composables/modals/useStrategyModal';
+import { useTagModal } from './modals/useTagModal';
 
+const calendarModal = useCalendarModal();
+const tagModal = useTagModal();
 const eventModal = useEventModal();
+const strategyModal = useStrategyModal();
 
 export function useKeyboard() {
   function inputNeededElsewhere(): boolean {
@@ -22,7 +26,7 @@ export function useKeyboard() {
     onKeyStroke('n', (e) => {
       if (inputNeededElsewhere()) return;
       e.preventDefault();
-      eventModal.open();
+      if (!tagModal.isOpen.value && !calendarModal.isOpen.value) eventModal.open();
     });
 
     // T -> go to today
@@ -75,12 +79,10 @@ export function useKeyboard() {
     onKeyStroke('Escape', (e) => {
       e.preventDefault();
 
-      const calendarModal = useCalendarModal();
-      const eventModal = useEventModal();
-      const strategyModal = useStrategyModal();
-
       if (calendarModal.isOpen.value) {
         calendarModal.close();
+      } else if (tagModal.isOpen.value) {
+        tagModal.close();
       } else if (eventModal.isOpen.value && !strategyModal.isOpen.value) {
         eventModal.close();
       } else if (eventModal.isOpen.value && strategyModal.isOpen.value) {
diff --git a/src/router.ts b/src/router.ts
index 0071be7..a0e4e1e 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -1,10 +1,11 @@
 import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router';
 import CalendarView from '@/views/CalendarView.vue';
 import SettingsView from '@/views/SettingsView.vue';
+import FileExplorer from '@/views/FileExplorer.vue';
 import { DateTime } from 'luxon';
 
 import { getWeekAlignedRedirect } from '@/utils';
-import { settings } from './services/settings';
+import { settings } from '@/services/settings';
 
 const isGitHubPages = import.meta.env.VITE_GITHUB_PAGES == 'true'; // needs to have VITE_ prefix
 
@@ -14,10 +15,11 @@ const router = createRouter({
   routes: [
     {
       name: 'calendar',
-      path: '/:view(month|week|4days)/:year(\\d+)/:month(\\d+)/:day(\\d*)', // for example: /m/2026/3 -> shows March 2026
+      path: '/:view(month|week|4days)/:year(\\d+)/:month(\\d+)/:day(\\d*)', // for example: /month/2026/3 -> shows March 2026
       component: CalendarView,
     },
     { path: '/settings', component: SettingsView },
+    { path: '/files', component: FileExplorer },
     {
       path: '/:pathMatch(.*)*', // anything
       redirect: () => {
diff --git a/src/services/calendarCache.ts b/src/services/calendarCache.ts
new file mode 100644
index 0000000..9c39038
--- /dev/null
+++ b/src/services/calendarCache.ts
@@ -0,0 +1,63 @@
+import { computed, readonly, shallowRef } from 'vue';
+
+import type { Calendar, Tag } from '@/types/core';
+import { CalendarCore } from '@/wasm/core-wrapper';
+
+const calendars = shallowRef<Calendar[]>([]);
+const loaded = shallowRef(false);
+
+let loading: Promise<void> | null = null;
+
+const calendarMap = computed(() => {
+  const map = new Map<string, Calendar>();
+
+  for (const calendar of calendars.value) {
+    map.set(calendar.name, calendar);
+  }
+
+  return map;
+});
+
+export const cachedCalendars = readonly(calendars);
+export const calendarsLoaded = readonly(loaded);
+
+export async function loadCalendars(): Promise<void> {
+  if (loaded.value) {
+    return;
+  }
+
+  if (!loading) {
+    loading = CalendarCore.listCalendars()
+      .then((items) => {
+        calendars.value = items;
+        loaded.value = true;
+      })
+      .finally(() => {
+        loading = null;
+      });
+  }
+
+  return loading;
+}
+
+export async function refreshCalendars(): Promise<void> {
+  loaded.value = false;
+  await loadCalendars();
+}
+
+export function clearCalendarCache(): void {
+  calendars.value = [];
+  loaded.value = false;
+}
+
+export function getCalendar(calendarName: string): Calendar | undefined {
+  return calendarMap.value.get(calendarName);
+}
+
+export function getDefaultCalendar(): Calendar | undefined {
+  return calendarMap.value.get('default') ?? calendars.value[0];
+}
+
+export function getTag(calendarName: string, tagId: string): Tag | undefined {
+  return getCalendar(calendarName)?.tags?.find((tag) => tag.id === tagId);
+}
diff --git a/src/services/settings.ts b/src/services/settings.ts
index 28fe6cc..d82541e 100644
--- a/src/services/settings.ts
+++ b/src/services/settings.ts
@@ -2,6 +2,7 @@ import { useStorage } from '@vueuse/core';
 import { watch } from 'vue';
 import { CALENDAR_VIEWS, LANGUAGES, THEMES } from '@/constants.ts';
 import { type HourNumbers, type WeekdayNumbers, Settings as LuxonSettings } from 'luxon';
+import { type ColorId } from '@/colors';
 
 export type CalendarView = (typeof CALENDAR_VIEWS)[number];
 
@@ -18,6 +19,7 @@ type UserSettings = {
   dayViewStartHour: HourNumbers;
   dayViewEndHour: HourNumbers;
   dragPrecisionMinutes: number;
+  defaultEventColor: ColorId;
   corsProxyURL: string;
 };
 
@@ -33,6 +35,7 @@ export const settings = useStorage<UserSettings>(
     dayViewStartHour: 6,
     dayViewEndHour: 0,
     dragPrecisionMinutes: 30,
+    defaultEventColor: 'gray',
     corsProxyURL: 'https://cors-proxy.firu.dev',
   },
   localStorage,
diff --git a/src/types/core.ts b/src/types/core.ts
index 8c63ec9..a250179 100644
--- a/src/types/core.ts
+++ b/src/types/core.ts
@@ -8,7 +8,7 @@ export interface CalendarEvent {
   from: DateTime;
   to: DateTime;
   calendar: string;
-  tag: string;
+  tagId?: string;
   parentId?: string;
   repeat?: Repetition;
 }
@@ -21,16 +21,30 @@ export interface Repetition {
   exceptions: readonly string[];
 }
 
+export interface Calendar {
+  name: string;
+  tags: Tag[];
+  remoteUrl: string;
+  encrypted: boolean;
+  readonly: boolean;
+}
+
+export interface Tag {
+  id?: string;
+  name: string;
+  color: string;
+}
+
 // Interface showing all the methods of CalendarCore.
 // The response types are all made async (Promise<T>) using Asyncify type.
 export interface CalendarApi {
   createCalendar(name: string, password: string): void;
-  cloneCalendar(url: string, password: string): void;
+  cloneCalendar(url: string, password: string, readonly: boolean): void;
   removeCalendar(name: string): void;
   renameCalendar(oldName: string, newName: string): void;
   listCalendars(): Calendar[];
   loadCalendars(): void;
-  updateRemote(calendar: string, remoteUrl: string): void;
+  updateRemote(calendar: string, remoteUrl: string, readonly: boolean): void;
 
   createEvent(event: CalendarEvent): CalendarEvent;
   updateEvent(event: CalendarEvent): CalendarEvent;
@@ -40,6 +54,10 @@ export interface CalendarApi {
   getEvent(id: string): CalendarEvent;
   getEvents(from: DateTime, to: DateTime): CalendarEvent[];
 
+  createTag(calendar: string, tag: Tag): Tag;
+  updateTag(calendar: string, tag: Tag): Tag;
+  removeTag(calendar: string, id: string): void;
+
   setCorsProxy(url: string): void;
   syncAll(): void;
   exportZip(calendar: string): ArrayBuffer;
@@ -58,15 +76,3 @@ export enum UpdateStrategy {
   Following,
   All,
 }
-
-export interface Calendar {
-  name: string;
-  tags: Tag[];
-  encrypted: boolean;
-  remoteUrl: string;
-}
-
-export interface Tag {
-  name: string;
-  color: string;
-}
diff --git a/src/views/CalendarView.vue b/src/views/CalendarView.vue
index d8ca411..43d06dc 100644
--- a/src/views/CalendarView.vue
+++ b/src/views/CalendarView.vue
@@ -15,10 +15,13 @@ import { useEventModal } from '@/composables/modals/useEventModal';
 import { useSidebar } from '@/composables/useSidebar';
 import { CALENDAR_VIEWS } from '@/constants';
 import { settings, type CalendarView } from '@/services/settings';
+import TagModal from '@/components/modals/TagModal.vue';
+import { useTagModal } from '@/composables/modals/useTagModal';
 
 useKeyboard();
 const calendarModal = useCalendarModal();
 const eventModal = useEventModal();
+const tagModal = useTagModal();
 const route = useRoute();
 const sidebar = useSidebar();
 
@@ -43,7 +46,7 @@ const views = {
 </script>
 
 <template>
-  <div id="calendar-view">
+  <main id="calendar-view">
     <SideBar :hidden="!sidebar.isOpen.value">
       <MonthSideMap />
       <CalendarList ref="calendars-list" />
@@ -53,8 +56,9 @@ const views = {
     <component :is="views[activeView][0]" :num-of-days="views[activeView][1]" ref="calendar-view" />
 
     <EventModal v-if="eventModal.isOpen.value" />
+    <TagModal v-if="tagModal.isOpen.value" />
     <CalendarModal v-if="calendarModal.isOpen.value" />
-  </div>
+  </main>
   <span id="alpha">Alpha version</span>
 </template>
 
diff --git a/src/views/FileExplorer.vue b/src/views/FileExplorer.vue
new file mode 100644
index 0000000..548b89f
--- /dev/null
+++ b/src/views/FileExplorer.vue
@@ -0,0 +1,799 @@
+<script setup lang="ts">
+// VIBE-CODED!!!!
+
+import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watch, type Ref, type ShallowRef } from 'vue';
+
+const DATABASE_NAME: string = 'git-calendar-data';
+const INFO_STORE: string = 'info';
+const CONTENT_STORE: string = 'content';
+const PREVIEW_LIMIT: number = 2 * 1024 * 1024;
+const ITEM_HEIGHT: number = 30; // must match CSS .tree-row { height: 30px }
+const OVERSCAN: number = 5;
+
+interface Metadata {
+  name?: unknown;
+  size?: unknown;
+  mode?: unknown;
+}
+
+interface FileEntry {
+  path: string;
+  name: string;
+  size: number | null;
+  directory: boolean;
+}
+
+interface TreeNode {
+  path: string;
+  name: string;
+  size: number | null;
+  directory: boolean;
+  entry: FileEntry | null;
+  children: TreeNode[];
+}
+
+interface VisibleTreeNode extends TreeNode {
+  depth: number;
+}
+
+interface VirtualSlice {
+  nodes: VisibleTreeNode[];
+  offsetY: number;
+  totalHeight: number;
+}
+
+type PreviewState = 'idle' | 'loading' | 'empty' | 'text' | 'binary' | 'error';
+
+// shallowRef: these are always replaced wholesale, never mutated in place,
+// so deep reactivity tracking is wasted work.
+const tree: ShallowRef<TreeNode[]> = shallowRef<TreeNode[]>([]);
+const expanded: ShallowRef<Set<string>> = shallowRef<Set<string>>(new Set<string>());
+const selectedFile: ShallowRef<FileEntry | null> = shallowRef<FileEntry | null>(null);
+
+const preview: Ref<string> = ref<string>('');
+const previewError: Ref<string> = ref<string>('');
+const previewState: Ref<PreviewState> = ref<PreviewState>('idle');
+const loading: Ref<boolean> = ref<boolean>(false);
+const error: Ref<string> = ref<string>('');
+
+// Virtual scroll state
+const treeRef = ref<HTMLElement | null>(null);
+const treeScrollTop = ref<number>(0);
+const treeClientHeight = ref<number>(600); // reasonable default before ResizeObserver fires
+
+const visibleNodes = computed<VisibleTreeNode[]>(function getVisibleNodes(): VisibleTreeNode[] {
+  const result: VisibleTreeNode[] = [];
+  appendVisibleNodes(tree.value, 0, result);
+  return result;
+});
+
+// Only render the rows actually on screen plus an overscan buffer above/below.
+const virtualSlice = computed<VirtualSlice>(function getVirtualSlice(): VirtualSlice {
+  const nodes = visibleNodes.value;
+  const total = nodes.length;
+  const start = Math.max(0, Math.floor(treeScrollTop.value / ITEM_HEIGHT) - OVERSCAN);
+  const end = Math.min(total, Math.ceil((treeScrollTop.value + treeClientHeight.value) / ITEM_HEIGHT) + OVERSCAN);
+  return {
+    nodes: nodes.slice(start, end),
+    offsetY: start * ITEM_HEIGHT,
+    totalHeight: total * ITEM_HEIGHT,
+  };
+});
+
+// Track the tree panel's height so virtual scroll knows the viewport size.
+watch(
+  treeRef,
+  function watchTree(el: HTMLElement | null, _prev: HTMLElement | null, onCleanup: (fn: () => void) => void): void {
+    if (el === null) return;
+    treeClientHeight.value = el.clientHeight;
+    const observer = new ResizeObserver(function onResize(entries: ResizeObserverEntry[]): void {
+      treeClientHeight.value = entries[0]?.contentRect.height ?? el.clientHeight;
+    });
+    observer.observe(el);
+    onCleanup(function cleanup(): void {
+      observer.disconnect();
+    });
+  },
+);
+
+let database: IDBDatabase | null = null;
+let previewRequest: number = 0;
+
+onMounted(loadDatabase);
+onBeforeUnmount(closeDatabase);
+
+function handleTreeScroll(event: Event): void {
+  treeScrollTop.value = (event.target as HTMLElement).scrollTop;
+}
+
+async function loadDatabase(): Promise<void> {
+  loading.value = true;
+  error.value = '';
+  tree.value = [];
+  expanded.value = new Set<string>();
+  clearPreview();
+  closeDatabase();
+
+  try {
+    const openedDatabase: IDBDatabase = await requestResult<IDBDatabase>(indexedDB.open(DATABASE_NAME));
+
+    validateStores(openedDatabase);
+    database = openedDatabase;
+
+    const entries: FileEntry[] = await readFiles(openedDatabase);
+    const nextTree: TreeNode[] = buildTree(entries);
+
+    tree.value = nextTree;
+    expanded.value = new Set<string>(
+      nextTree
+        .filter(function isDirectoryNode(node: TreeNode): boolean {
+          return node.directory;
+        })
+        .map(function getPath(node: TreeNode): string {
+          return node.path;
+        }),
+    );
+  } catch (cause: unknown) {
+    closeDatabase();
+    error.value = getErrorMessage(cause);
+  } finally {
+    loading.value = false;
+  }
+}
+
+function validateStores(currentDatabase: IDBDatabase): void {
+  if (!currentDatabase.objectStoreNames.contains(INFO_STORE)) {
+    currentDatabase.close();
+    throw new Error(`Missing IndexedDB store "${INFO_STORE}".`);
+  }
+
+  if (!currentDatabase.objectStoreNames.contains(CONTENT_STORE)) {
+    currentDatabase.close();
+    throw new Error(`Missing IndexedDB store "${CONTENT_STORE}".`);
+  }
+}
+
+async function readFiles(currentDatabase: IDBDatabase): Promise<FileEntry[]> {
+  const transaction: IDBTransaction = currentDatabase.transaction(INFO_STORE, 'readonly');
+  const store: IDBObjectStore = transaction.objectStore(INFO_STORE);
+  const keysPromise: Promise<IDBValidKey[]> = requestResult<IDBValidKey[]>(store.getAllKeys());
+  const valuesPromise: Promise<unknown[]> = requestResult<unknown[]>(store.getAll());
+  const keys: IDBValidKey[] = await keysPromise;
+  const values: unknown[] = await valuesPromise;
+  const result: FileEntry[] = [];
+
+  for (let index: number = 0; index < keys.length; index += 1) {
+    const key: IDBValidKey | undefined = keys[index];
+
+    if (typeof key === 'string') {
+      result.push(createFileEntry(key, values[index]));
+    }
+  }
+
+  return result;
+}
+
+function createFileEntry(path: string, value: unknown): FileEntry {
+  const metadata: Metadata = parseMetadata(value);
+  const mode: number | null = readNumber(metadata.mode);
+
+  return {
+    path,
+    name: readString(metadata.name) ?? getFileName(path),
+    size: readNumber(metadata.size),
+    directory: isDirectory(mode) || /[\\/]$/.test(path),
+  };
+}
+
+function buildTree(entries: FileEntry[]): TreeNode[] {
+  const roots: TreeNode[] = [];
+  const nodes: Map<string, TreeNode> = new Map<string, TreeNode>();
+
+  for (const entry of entries) {
+    const parts: string[] = normalizePath(entry.path).split('/').filter(Boolean);
+
+    if (parts.length === 0) {
+      continue;
+    }
+
+    let children: TreeNode[] = roots;
+    let currentPath: string = '';
+
+    for (let index: number = 0; index < parts.length; index += 1) {
+      const part: string = parts[index] ?? '';
+      const last: boolean = index === parts.length - 1;
+      currentPath = currentPath === '' ? part : `${currentPath}/${part}`;
+
+      let node: TreeNode | undefined = nodes.get(currentPath);
+
+      if (node === undefined) {
+        node = {
+          path: currentPath,
+          name: last ? entry.name : part,
+          size: last ? entry.size : null,
+          directory: !last || entry.directory,
+          entry: last && !entry.directory ? entry : null,
+          children: [],
+        };
+
+        nodes.set(currentPath, node);
+        children.push(node);
+      } else if (last) {
+        node.name = entry.name;
+        node.size = entry.size;
+        node.directory = entry.directory;
+        node.entry = entry.directory ? null : entry;
+      }
+
+      children = node.children;
+    }
+  }
+
+  finalizeTree(roots);
+  return roots;
+}
+
+function finalizeTree(nodes: TreeNode[]): void {
+  for (const node of nodes) {
+    finalizeTree(node.children);
+
+    if (node.children.length > 0) {
+      node.directory = true;
+      node.entry = null;
+      node.size = null;
+    }
+  }
+
+  nodes.sort(compareTreeNodes);
+}
+
+function compareTreeNodes(left: TreeNode, right: TreeNode): number {
+  if (left.directory !== right.directory) {
+    return left.directory ? -1 : 1;
+  }
+
+  return left.name.localeCompare(right.name, undefined, { numeric: true });
+}
+
+function appendVisibleNodes(nodes: TreeNode[], depth: number, result: VisibleTreeNode[]): void {
+  for (const node of nodes) {
+    result.push({ ...node, depth });
+
+    if (node.directory && expanded.value.has(node.path)) {
+      appendVisibleNodes(node.children, depth + 1, result);
+    }
+  }
+}
+
+function activateNode(node: VisibleTreeNode): void {
+  if (node.directory) {
+    toggleDirectory(node.path);
+    return;
+  }
+
+  if (node.entry !== null) {
+    openFile(node.entry);
+  }
+}
+
+function toggleDirectory(path: string): void {
+  const nextExpanded: Set<string> = new Set<string>(expanded.value);
+
+  if (nextExpanded.has(path)) {
+    nextExpanded.delete(path);
+  } else {
+    nextExpanded.add(path);
+  }
+
+  expanded.value = nextExpanded;
+}
+
+function isExpanded(path: string): boolean {
+  return expanded.value.has(path);
+}
+
+function openFile(file: FileEntry): void {
+  selectedFile.value = file;
+  void loadPreview(file);
+}
+
+async function loadPreview(file: FileEntry): Promise<void> {
+  const currentDatabase: IDBDatabase | null = database;
+  const requestID: number = ++previewRequest;
+
+  preview.value = '';
+  previewError.value = '';
+  previewState.value = 'loading';
+
+  if (currentDatabase === null) {
+    previewState.value = 'error';
+    previewError.value = 'Database is not open.';
+    return;
+  }
+
+  try {
+    const transaction: IDBTransaction = currentDatabase.transaction(CONTENT_STORE, 'readonly');
+    const store: IDBObjectStore = transaction.objectStore(CONTENT_STORE);
+    const storedValue: unknown = await requestResult<unknown>(store.get(file.path));
+    const bytes: Uint8Array = await readBytes(storedValue);
+
+    if (requestID !== previewRequest) {
+      return;
+    }
+
+    if (bytes.byteLength === 0) {
+      previewState.value = 'empty';
+      return;
+    }
+
+    if (isBinary(bytes)) {
+      previewState.value = 'binary';
+      return;
+    }
+
+    preview.value = decodePreview(file.path, bytes);
+    previewState.value = 'text';
+  } catch (cause: unknown) {
+    if (requestID !== previewRequest) {
+      return;
+    }
+
+    previewState.value = 'error';
+    previewError.value = getErrorMessage(cause);
+  }
+}
+
+async function readBytes(value: unknown): Promise<Uint8Array> {
+  if (value === undefined || value === null) {
+    return new Uint8Array();
+  }
+
+  if (value instanceof Uint8Array) {
+    return value;
+  }
+
+  if (value instanceof ArrayBuffer) {
+    return new Uint8Array(value);
+  }
+
+  if (ArrayBuffer.isView(value)) {
+    return new Uint8Array(value.buffer, value.byteOffset, value.byteLength);
+  }
+
+  if (value instanceof Blob) {
+    return new Uint8Array(await value.arrayBuffer());
+  }
+
+  throw new Error('Unsupported file content type.');
+}
+
+function isBinary(bytes: Uint8Array): boolean {
+  const sample: Uint8Array = bytes.subarray(0, 16 * 1024);
+  let controlBytes: number = 0;
+
+  for (const byte of sample) {
+    if (byte === 0) {
+      return true;
+    }
+
+    if (byte < 32 && byte !== 9 && byte !== 10 && byte !== 13) {
+      controlBytes += 1;
+    }
+  }
+
+  return controlBytes / sample.byteLength > 0.02;
+}
+
+function decodePreview(path: string, bytes: Uint8Array): string {
+  const visibleBytes: Uint8Array = bytes.subarray(0, PREVIEW_LIMIT);
+  const text: string = new TextDecoder().decode(visibleBytes);
+  const complete: boolean = visibleBytes.byteLength === bytes.byteLength;
+
+  if (complete && path.toLowerCase().endsWith('.json')) {
+    try {
+      const value: unknown = JSON.parse(text) as unknown;
+      return JSON.stringify(value, null, 2) ?? text;
+    } catch {
+      return text;
+    }
+  }
+
+  return complete ? text : `${text}\n\n… preview truncated …`;
+}
+
+function parseMetadata(value: unknown): Metadata {
+  if (typeof value === 'string') {
+    try {
+      return parseMetadata(JSON.parse(value) as unknown);
+    } catch {
+      return {};
+    }
+  }
+
+  if (!isRecord(value)) {
+    return {};
+  }
+
+  return {
+    name: value.name,
+    size: value.size,
+    mode: value.mode,
+  };
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+function readString(value: unknown): string | null {
+  return typeof value === 'string' ? value : null;
+}
+
+function readNumber(value: unknown): number | null {
+  return typeof value === 'number' && Number.isFinite(value) ? value : null;
+}
+
+function normalizePath(path: string): string {
+  return path.replace(/\\/g, '/').replace(/^\/+|\/+$/g, '');
+}
+
+function getFileName(path: string): string {
+  const parts: string[] = normalizePath(path).split('/');
+  return parts[parts.length - 1] ?? path;
+}
+
+function isDirectory(mode: number | null): boolean {
+  if (mode === null) {
+    return false;
+  }
+
+  const unsignedMode: number = mode >>> 0;
+  return (unsignedMode & 0x80000000) !== 0 || (unsignedMode & 0o170000) === 0o040000;
+}
+
+function requestResult<T>(request: IDBRequest<T>): Promise<T> {
+  return new Promise<T>(function createPromise(resolve, reject): void {
+    request.onsuccess = handleSuccess;
+    request.onerror = handleError;
+
+    function handleSuccess(): void {
+      resolve(request.result);
+    }
+
+    function handleError(): void {
+      reject(request.error ?? new Error('IndexedDB request failed.'));
+    }
+  });
+}
+
+function clearPreview(): void {
+  previewRequest += 1;
+  selectedFile.value = null;
+  preview.value = '';
+  previewError.value = '';
+  previewState.value = 'idle';
+}
+
+function closeDatabase(): void {
+  database?.close();
+  database = null;
+}
+
+function formatBytes(bytes: number | null): string {
+  if (bytes === null) {
+    return '';
+  }
+
+  if (bytes < 1024) {
+    return `${bytes} B`;
+  }
+
+  return `${(bytes / 1024).toFixed(1)} KiB`;
+}
+
+function getErrorMessage(cause: unknown): string {
+  return cause instanceof Error ? cause.message : String(cause);
+}
+</script>
+
+<template>
+  <main class="explorer" :aria-busy="loading">
+    <header class="toolbar">
+      <div>
+        <strong>IndexedDB files</strong>
+        <span>{{ DATABASE_NAME }}</span>
+      </div>
+
+      <button type="button" :disabled="loading" @click="loadDatabase">
+        {{ loading ? 'Loading…' : 'Reload' }}
+      </button>
+    </header>
+
+    <p v-if="error" class="status error" role="alert">{{ error }}</p>
+
+    <div v-else class="panes">
+      <!--
+        ref + @scroll.passive: track scroll position for virtual windowing.
+        .passive tells the browser it can scroll immediately without waiting
+        for the handler to return, which removes jank from scroll events.
+      -->
+      <aside class="tree" aria-label="File tree" ref="treeRef" @scroll.passive="handleTreeScroll">
+        <p v-if="loading" class="status">Loading files…</p>
+        <p v-else-if="tree.length === 0" class="status">No files found.</p>
+
+        <!--
+          Virtual scroll: the outer div is a full-height spacer that creates
+          the correct scrollable area. The inner div translates to the start
+          of the visible window and only contains the rendered rows.
+        -->
+        <div v-else role="tree" class="tree-virtual" :style="{ height: `${virtualSlice.totalHeight}px` }">
+          <div class="tree-viewport" :style="{ transform: `translateY(${virtualSlice.offsetY}px)` }">
+            <button
+              v-for="node in virtualSlice.nodes"
+              :key="node.path"
+              type="button"
+              role="treeitem"
+              class="tree-row"
+              :class="{
+                selected: node.entry !== null && selectedFile !== null && node.entry.path === selectedFile.path,
+              }"
+              :style="{ paddingLeft: `${10 + node.depth * 18}px` }"
+              :aria-level="node.depth + 1"
+              :aria-expanded="node.directory ? isExpanded(node.path) : undefined"
+              :aria-selected="node.entry !== null && selectedFile !== null && node.entry.path === selectedFile.path"
+              :title="node.path"
+              @click="activateNode(node)"
+            >
+              <span class="caret" aria-hidden="true">
+                {{ node.directory ? (isExpanded(node.path) ? '▾' : '▸') : '' }}
+              </span>
+              <span aria-hidden="true">{{ node.directory ? '📁' : '📄' }}</span>
+              <span class="name">{{ node.name }}</span>
+              <span v-if="!node.directory" class="size">{{ formatBytes(node.size) }}</span>
+            </button>
+          </div>
+        </div>
+      </aside>
+
+      <section class="preview" aria-labelledby="preview-title">
+        <header class="preview-header">
+          <h2 id="preview-title">{{ selectedFile?.name ?? 'Preview' }}</h2>
+          <code v-if="selectedFile !== null" :title="selectedFile.path">{{ selectedFile.path }}</code>
+        </header>
+
+        <div class="preview-body">
+          <p v-if="selectedFile === null" class="status">Select a file from the tree.</p>
+          <p v-else-if="previewState === 'loading'" class="status">Loading preview…</p>
+          <p v-else-if="previewState === 'empty'" class="status">Empty file.</p>
+          <p v-else-if="previewState === 'binary'" class="status">Binary file. Preview skipped.</p>
+          <p v-else-if="previewState === 'error'" class="status error" role="alert">{{ previewError }}</p>
+          <pre v-else-if="previewState === 'text'">{{ preview }}</pre>
+        </div>
+      </section>
+    </div>
+  </main>
+</template>
+
+<style scoped>
+.explorer,
+.explorer * {
+  box-sizing: border-box;
+}
+
+.explorer {
+  display: flex;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  flex-direction: column;
+  color: var(--text-color);
+  background: var(--bg-color);
+  font:
+    14px/1.4 system-ui,
+    sans-serif;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px;
+  background: var(--sidebar-color);
+  border-bottom: 1px solid var(--grid-color);
+}
+
+.toolbar div {
+  min-width: 0;
+}
+
+.toolbar strong,
+.toolbar span,
+.preview-header code {
+  display: block;
+}
+
+.toolbar strong,
+.preview-header h2,
+pre {
+  color: var(--text-color-hard);
+}
+
+.toolbar span,
+.preview-header code,
+.size,
+.status {
+  color: var(--text-color);
+}
+
+.toolbar span,
+.preview-header code,
+.size {
+  font-size: 12px;
+}
+
+button {
+  color: inherit;
+  font: inherit;
+}
+
+.toolbar button {
+  margin-left: auto;
+  padding: 5px 10px;
+  background: var(--btn-bg-color);
+  border: 1px solid var(--grid-color);
+  border-radius: var(--small-border-radius);
+  cursor: pointer;
+}
+
+.toolbar button:hover:not(:disabled) {
+  background: var(--btn-bg-color-hover);
+}
+
+button:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+
+button:focus-visible {
+  outline: 1px solid var(--git-color);
+  outline-offset: -1px;
+}
+
+.panes {
+  display: flex;
+  min-height: 0;
+  flex: 1;
+}
+
+.tree {
+  overflow: auto;
+  flex: 0 0 30rem;
+  padding: 6px 0;
+  background: var(--sidebar-color);
+  border-right: 1px solid var(--grid-color);
+  /*
+    contain: content tells the browser that nothing inside this element
+    affects layout outside it. During resize, the browser can skip
+    propagating layout recalculations up through the flex tree.
+  */
+  contain: content;
+}
+
+/* Virtual scroll spacer — creates the full scrollable height */
+.tree-virtual {
+  position: relative;
+}
+
+/* Virtual scroll window — holds only the rendered rows, shifted by translateY */
+.tree-viewport {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+.tree-row {
+  display: flex;
+  width: 100%;
+  height: 30px;
+  align-items: center;
+  gap: 6px;
+  padding-right: 8px;
+  overflow: hidden;
+  color: var(--text-color);
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  text-align: left;
+}
+
+.tree-row:hover {
+  background: var(--sidebar-hover-color);
+}
+
+.tree-row.selected {
+  color: var(--text-color-hard);
+  background: var(--btn-bg-color-checked);
+}
+
+.caret {
+  width: 12px;
+  flex: 0 0 12px;
+  text-align: center;
+}
+
+.name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.size {
+  margin-left: auto;
+  white-space: nowrap;
+}
+
+.preview {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
+  background: var(--bg-color);
+}
+
+.preview-header {
+  min-width: 0;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--grid-color);
+}
+
+.preview-header h2 {
+  margin: 0;
+  font-size: 14px;
+}
+
+.preview-header code {
+  overflow: hidden;
+  margin-top: 2px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.preview-body {
+  min-height: 0;
+  overflow: auto;
+  flex: 1;
+  padding: 12px;
+  /*
+    Same as .tree: contain: content prevents the pre's min-width: max-content
+    from triggering a full-page layout recalculation on every resize frame.
+    This is the primary fix for resize lag.
+  */
+  contain: content;
+}
+
+pre {
+  min-width: max-content;
+  margin: 0;
+  font:
+    13px/1.5 ui-monospace,
+    SFMono-Regular,
+    Consolas,
+    monospace;
+  white-space: pre;
+}
+
+.status {
+  margin: 0;
+  padding: 12px;
+}
+
+.preview-body > .status {
+  padding: 0;
+}
+
+.error {
+  color: var(--git-color);
+}
+</style>
diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue
index e434dd4..9b57333 100644
--- a/src/views/SettingsView.vue
+++ b/src/views/SettingsView.vue
@@ -5,6 +5,7 @@ import { DRAG_PRECISIONS, LANGUAGES, THEMES } from '@/constants.ts';
 import { CalendarCore } from '@/wasm/core-wrapper';
 import { useAlertModal } from '@/composables/modals/useAlertModal';
 import { settings } from '@/services/settings';
+import { colorsList, getColorI18nKey } from '@/colors';
 
 const { dayNameLong } = useTranslation();
 const { alert } = useAlertModal();
@@ -84,6 +85,16 @@ function formatHour(hour: number): string {
       </select>
     </label>
 
+    <!-- TODO: prettier color picker -->
+    <label>
+      {{ $t('tag.color') }}:
+      <select name="color" id="color" v-model="settings.defaultEventColor">
+        <option v-for="color in colorsList" :key="color" :value="color">
+          {{ $t(getColorI18nKey(color)) }}
+        </option>
+      </select>
+    </label>
+
     <label>
       CORS Proxy:
       <input