diff --git a/assets/_events.css b/assets/_colors.css
similarity index 96%
rename from assets/_events.css
rename to assets/_colors.css
index 2be27ff..63afdf5 100644
--- a/assets/_events.css
+++ b/assets/_colors.css
@@ -9,7 +9,7 @@
   --event-amber-background: var(--color-amber-500);
 
   --event-yellow-foreground: var(--color-slate-900);
-  --event-yellow-background: var(--color-yellow-600);
+  --event-yellow-background: var(--color-yellow-500);
 
   --event-lime-foreground: var(--color-slate-900);
   --event-lime-background: var(--color-lime-500);
@@ -54,7 +54,7 @@
   --event-black-background: var(--color-stone-500);
 
   --event-white-foreground: var(--color-slate-900);
-  --event-white-background: var(--color-yellow-200);
+  --event-white-background: var(--color-lime-100);
 }
 
 @theme inline {
@@ -206,6 +206,23 @@
   background-color: color-mix(in srgb, var(--bg-color) 50%, var(--color-background));
 }
 
+.bgc {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+
+.bgc::before {
+  content: "";
+  display: inline-block;
+  width: .75rem;
+  aspect-ratio: 1;
+  margin-right: 0.5em;
+  border-radius: .25rem;
+  background-color: var(--bg-color);
+  border: 1px solid transparent;
+}
+
 .element-red {
   --fg-color: var(--color-event-red-foreground);
   --bg-color: var(--color-event-red-background);
diff --git a/assets/main.css b/assets/main.css
index b922f76..85bc613 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -3,8 +3,8 @@
 @config '../tailwind.config.js';
 
 @import "./theme.css" layer(theme);
-@import "./_events.css" layer(theme);
-@import "./_events.css" layer(utilities);
+@import "./_colors.css" layer(theme);
+@import "./_colors.css" layer(utilities);
 
 /*
   The default border color has changed to `currentcolor` in Tailwind CSS v4,
@@ -29,81 +29,6 @@ body {
   background-color: var(--color-background);
 }
 
-.bgc {
-  display: flex;
-  align-items: center;
-  flex-wrap: nowrap;
-}
-
-.bgc::before {
-  content: "";
-  display: inline-block;
-  width: .75rem;
-  aspect-ratio: 1;
-  margin-right: 0.5em;
-  border-radius: .25rem;
-  background-color: red;
-  border: 1px solid transparent;
-}
-
-.bgc-red::before {
-  @apply bg-red-500;
-}
-.bgc-orange::before {
-  @apply bg-orange-500;
-}
-.bgc-amber::before {
-  @apply bg-amber-500;
-}
-.bgc-yellow::before {
-  @apply bg-yellow-500;
-}
-.bgc-lime::before {
-  @apply bg-lime-500;
-}
-.bgc-green::before {
-  @apply bg-green-500;
-}
-.bgc-emerald::before {
-  @apply bg-emerald-600;
-}
-.bgc-teal::before {
-  @apply bg-teal-600;
-}
-.bgc-cyan::before {
-  @apply bg-cyan-600;
-}
-.bgc-sky::before {
-  @apply bg-sky-600;
-}
-.bgc-blue::before {
-  @apply bg-blue-600;
-}
-.bgc-indigo::before {
-  @apply bg-indigo-600;
-}
-.bgc-violet::before {
-  @apply bg-violet-600;
-}
-.bgc-purple::before {
-  @apply bg-purple-600;
-}
-.bgc-fuchsia::before {
-  @apply bg-fuchsia-600;
-}
-.bgc-pink::before {
-  @apply bg-pink-600;
-}
-.bgc-rose::before {
-  @apply bg-rose-600;
-}
-.bgc-black::before {
-  @apply bg-black dark:border-[1px] dark:border-slate-300;
-}
-.bgc-white::before {
-  @apply bg-white border-[1px] border-slate-700;
-}
-
 .fade-enter-active,
 .fade-leave-active {
   transition: all .5s ease;
diff --git a/components/calendar/category/TableRow.vue b/components/calendar/category/TableRow.vue
index cc6f764..2ab81fa 100644
--- a/components/calendar/category/TableRow.vue
+++ b/components/calendar/category/TableRow.vue
@@ -139,7 +139,7 @@ function handleQueryDelete() {
           >
             <span
               class="bgc"
-              :class="cn(`bgc-${category.color}`)"
+              :class="cn(`element-${category.color}`)"
             >
               {{ $t(`ui.colors.${category.color}`) }}
             </span>
diff --git a/components/global/input/Color.vue b/components/global/input/Color.vue
index 529feb0..e069698 100644
--- a/components/global/input/Color.vue
+++ b/components/global/input/Color.vue
@@ -17,7 +17,7 @@ const model = defineModel<RPGColor>({ default: "white" });
       <UiSelectValue
         :placeholder="$t('ui.colors.selectOne')"
         class="bgc"
-        :class="cn(`bgc-${model}`)"
+        :class="cn(`element-${model}`)"
       />
     </UiSelectTrigger>
     <UiSelectContent :position>
@@ -29,7 +29,7 @@ const model = defineModel<RPGColor>({ default: "white" });
           class="bgc"
           :class="
             cn(
-              `bgc-${color}`,
+              `element-${color}`,
             )
           "
         >
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index b6d8ff5..df1efc9 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,4 +1,6 @@
 onlyBuiltDependencies:
+  - '@parcel/watcher'
   - esbuild
+  - sharp
   - vue-demi
   - workerd