diff --git a/src/main.ts b/src/main.ts
index fb46ea6..337ebfc 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,3 +1,3 @@
 import 'unfonts.css';
 
-import './ui/app-index';
+import './ui/app-index.js';
diff --git a/src/signal/color.context.ts b/src/signal/color.context.ts
index 8517099..07f87c7 100644
--- a/src/signal/color.context.ts
+++ b/src/signal/color.context.ts
@@ -13,16 +13,16 @@ const lightness = params.get('l');
 export type HSLColor = {hue: string; saturation: string; lightness: string};
 export const colorContext = new ContextSignal<HSLColor>('color');
 
-colorContext.setValue({
+colorContext.value = {
   hue: hue ?? json.get('HTB.HUE', '0'),
   saturation: saturation ?? json.get('HTB.SATURATION', '0'),
   lightness: lightness ?? json.get('HTB.LIGHTNESS', '0'),
-});
+};
 
 colorContext.subscribe(
   debounce((color: HSLColor) => {
     const hex = chroma.hsl(Number(color.hue), Number(color.saturation) / 100, Number(color.lightness) / 100).hex('rgb');
-    themeContext.setValue(hex);
+    themeContext.value = hex;
 
     json.set('HTB.HUE', color.hue);
     json.set('HTB.SATURATION', color.saturation);
diff --git a/src/signal/theme.context.ts b/src/signal/theme.context.ts
index b7daf53..d25aadd 100644
--- a/src/signal/theme.context.ts
+++ b/src/signal/theme.context.ts
@@ -12,5 +12,5 @@ themeContext.subscribe((sourceColor) => {
     document.documentElement.style.setProperty(key, color);
   }
 
-  paletteContext.setValue(themeFromSourceColor(argbFromHex(sourceColor)));
+  paletteContext.value = themeFromSourceColor(argbFromHex(sourceColor));
 });
diff --git a/src/ui/components/footer.ts b/src/ui/components/footer.ts
index 36fd72f..0f43070 100644
--- a/src/ui/components/footer.ts
+++ b/src/ui/components/footer.ts
@@ -10,19 +10,19 @@ import {paletteContext} from '../../signal/palette.context.js';
 const colorPickerChange = debounce((event: InputEvent) => {
   const target = event.target as HTMLInputElement;
 
-  const color = colorContext.getValue();
+  const color = colorContext.value;
 
-  colorContext.setValue({
+  colorContext.value = {
     hue: '0',
     lightness: '0',
     saturation: '0',
     ...color,
     [target.name]: target.value.toString(),
-  });
+  };
 }, 1000 / 60);
 
 export function footer() {
-  const color = colorContext.getValue();
+  const color = colorContext.value;
 
   return html`
     <footer class="fixed bottom-0 inset-x-0 bg-surfaceContainer translucent flex flex-col p-4">
diff --git a/src/ui/components/header.ts b/src/ui/components/header.ts
index 63c0d1e..3e28404 100644
--- a/src/ui/components/header.ts
+++ b/src/ui/components/header.ts
@@ -59,7 +59,7 @@ export function header() {
             events: {
               click: async (event) => {
                 const target = event.target as HTMLElement;
-                const color = colorContext.getValue();
+                const color = colorContext.value;
 
                 if (!color) return;
 
@@ -86,7 +86,7 @@ export function header() {
                 const target = event.target as HTMLElement;
                 const download = () =>
                   new Promise<void>((resolve) => {
-                    const fileName = 'h' + Math.ceil(Hct.fromInt(argbFromHex(themeContext.getValue() ?? '#000')).hue) + '.css';
+                    const fileName = 'h' + Math.ceil(Hct.fromInt(argbFromHex(themeContext.value ?? '#000')).hue) + '.css';
 
                     const a = document.createElement('a'); // Create "a" element
                     const blob = new Blob([':root{', document.documentElement.getAttribute('style') ?? '', '}'], {
diff --git a/src/ui/router.ts b/src/ui/router.ts
index cd60dd5..f018113 100644
--- a/src/ui/router.ts
+++ b/src/ui/router.ts
@@ -55,8 +55,8 @@ export function resolveRouterPath(unresolvedPath?: string) {
 }
 
 export const debouncedRender = debounce(() => {
-  routerContext.setValue(router.render());
-  titleContext.setValue(router.context.title);
+  routerContext.value = router.render();
+  titleContext.value = router.context.title;
 }, 1000 / 60);
 
 router.addEventListener('route-changed', debouncedRender);