diff --git a/CHANGELOG.md b/CHANGELOG.md
index a9522e2..b73e19f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,10 @@
+## Unreleased
+
+### New
+* Pre-fill time played into new playevent, also tracks time since last playevent
+* Improve light theme and fix light/dark theme switcher
+* Fix purchase form logic
+
 ## 1.6.0 / 2025-01-15 23:13+01:00
 
 ### New
diff --git a/Dockerfile b/Dockerfile
index f727609..b3ad1cb 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -19,6 +19,8 @@ RUN apt-get update && apt-get upgrade -y \
   && apt-get install --no-install-recommends -y \
     bash \
     curl \
+    nodejs \
+    npm \
   && curl -sSL 'https://install.python-poetry.org' | python - \
   && poetry --version \
   && apt-get purge -y --auto-remove -o APT::AutoRemove::RecommendsImportant=false \
@@ -33,6 +35,12 @@ RUN chown -R timetracker:timetracker /home/timetracker/app
 COPY entrypoint.sh /
 RUN chmod +x /entrypoint.sh
 
+USER timetracker
+
+# Install Node.js dependencies and build Svelte app
+RUN npm install
+RUN npm run build
+
 RUN --mount=type=cache,target="$POETRY_CACHE_DIR" \
     echo "$PROD" \
     && poetry version \
diff --git a/Makefile b/Makefile
index 069514e..8c3a00e 100644
--- a/Makefile
+++ b/Makefile
@@ -4,6 +4,7 @@ initialize: npm css migrate sethookdir loadplatforms
 
 HTMLFILES := $(shell find games/templates -type f)
 PYTHON_VERSION = 3.12
+.PHONY: build frontend-dev frontend-build
 
 npm:
 	npm install
@@ -24,13 +25,26 @@ init:
 	poetry install
 	npm install
 
+# Run Django, Tailwind, and Vite development servers concurrently
 dev:
 	@npx concurrently \
-		--names "Django,Tailwind" \
-		--prefix-colors "blue,green" \
-		"poetry run python -Wa manage.py runserver" \
-		"npx tailwindcss -i ./common/input.css -o ./games/static/base.css --watch"
+		--names "Django,Tailwind,Vite" \
+		--prefix-colors "blue,green,yellow" \
+		"uv run python -Wa manage.py runserver" \
+		"npx tailwindcss -i ./common/input.css -o ./games/static/base.css --watch" \
+		"npm run dev"
 
+# Only start the Vite development server
+frontend-dev:
+	npm run dev
+
+# Build frontend assets for production
+build: frontend-build collectstatic
+
+# Only build frontend assets
+frontend-build:
+	@echo "Building frontend assets with Vite..."
+	npm run build
 
 caddy:
 	caddy run --watch
diff --git a/common/input.css b/common/input.css
index 9499c59..78ab8e1 100644
--- a/common/input.css
+++ b/common/input.css
@@ -53,11 +53,11 @@
 }
 
 .responsive-table tr:nth-child(even) {
-  @apply bg-slate-800
+  @apply bg-indigo-100 dark:bg-slate-800
 }
 
 .responsive-table tbody tr:nth-child(odd) {
-  @apply bg-slate-900
+  @apply bg-indigo-200 dark:bg-slate-900
 }
 
 .responsive-table thead th {
diff --git a/frontend/components/CrownIcon.svelte b/frontend/components/CrownIcon.svelte
new file mode 100644
index 0000000..5ddb6ab
--- /dev/null
+++ b/frontend/components/CrownIcon.svelte
@@ -0,0 +1,6 @@
+<script>
+  export let mastered;
+</script>
+{#if mastered}
+  👑
+{/if}
diff --git a/frontend/main.js b/frontend/main.js
new file mode 100644
index 0000000..60282b1
--- /dev/null
+++ b/frontend/main.js
@@ -0,0 +1,13 @@
+import CrownIcon from './components/CrownIcon.svelte';
+
+// Expose a function to mount the CrownIcon component globally
+// This allows Django templates to easily initialize Svelte components.
+window.mountCrownIcon = (selector, props) => {
+  const target = document.querySelector(selector);
+  if (target) {
+    new CrownIcon({
+      target: target,
+      props: props,
+    });
+  }
+};
diff --git a/games/static/base.css b/games/static/base.css
index bdb24db..1724da8 100644
--- a/games/static/base.css
+++ b/games/static/base.css
@@ -2268,6 +2268,11 @@ input:checked + .toggle-bg {
   color: rgb(107 114 128 / var(--tw-text-opacity, 1));
 }
 
+.text-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
+}
+
 .text-gray-700 {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity, 1));
@@ -2288,11 +2293,6 @@ input:checked + .toggle-bg {
   color: rgb(203 213 225 / var(--tw-text-opacity, 1));
 }
 
-.text-slate-400 {
-  --tw-text-opacity: 1;
-  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
-}
-
 .text-slate-500 {
   --tw-text-opacity: 1;
   color: rgb(100 116 139 / var(--tw-text-opacity, 1));
@@ -2491,11 +2491,21 @@ input:checked + .toggle-bg {
 }
 
 .responsive-table tr:nth-child(even) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 237 255 / var(--tw-bg-opacity, 1));
+}
+
+.responsive-table tr:nth-child(even):is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
 }
 
 .responsive-table tbody tr:nth-child(odd) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(205 219 254 / var(--tw-bg-opacity, 1));
+}
+
+.responsive-table tbody tr:nth-child(odd):is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
 }
@@ -3081,6 +3091,11 @@ div [type="submit"] {
   color: rgb(75 85 99 / var(--tw-text-opacity, 1));
 }
 
+.dark\:text-slate-300:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
+}
+
 .dark\:text-slate-400:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(148 163 184 / var(--tw-text-opacity, 1));
diff --git a/games/static/js/add_purchase.js b/games/static/js/add_purchase.js
index 46497cd..720be9b 100644
--- a/games/static/js/add_purchase.js
+++ b/games/static/js/add_purchase.js
@@ -25,18 +25,7 @@ function setupElementHandlers() {
 
 document.addEventListener("DOMContentLoaded", setupElementHandlers);
 document.addEventListener("htmx:afterSwap", setupElementHandlers);
-getEl("#id_type").onchange = () => {
+getEl("#id_type").addEventListener("change", () => {
   setupElementHandlers();
-};
-
-document.body.addEventListener("htmx:beforeRequest", function (event) {
-  // Assuming 'Purchase1' is the element that triggers the HTMX request
-  if (event.target.id === "id_games") {
-    var idEditionValue = document.getElementById("id_games").value;
-
-    // Condition to check - replace this with your actual logic
-    if (idEditionValue != "") {
-      event.preventDefault(); // This cancels the HTMX request
-    }
-  }
-});
+}
+);
diff --git a/games/static/js/utils.js b/games/static/js/utils.js
index 5fc119f..ee74ecc 100644
--- a/games/static/js/utils.js
+++ b/games/static/js/utils.js
@@ -43,6 +43,7 @@ function syncSelectInputUntilChanged(syncData, parentSelector = document) {
         const targetElement = document.querySelector(syncItem.target);
 
         if (targetElement && valueToSync !== null) {
+          console.log(`Changing value of ${syncItem.target} to ${valueToSync}`)
           targetElement[syncItem.target_value] = valueToSync;
         }
       }
@@ -184,13 +185,17 @@ function disableElementsWhenValueNotEqual(
 function disableElementsWhenTrue(targetSelect, targetValue, elementList) {
   return conditionalElementHandler([
     () => {
+      console.log(`${disableElementsWhenTrue.name}: triggered on ${targetSelect}`)
+      console.log(`Value of ${targetSelect} is ${targetValue}: ${getEl(targetSelect).value == targetValue}`)
       return getEl(targetSelect).value == targetValue;
     },
     elementList,
     (el) => {
+      console.log(`${disableElementsWhenTrue.name}: disabling ${el.id}`)
       el.disabled = "disabled";
     },
     (el) => {
+      console.log(`${disableElementsWhenTrue.name}: enabling ${el.id}`)
       el.disabled = "";
     },
   ]);
diff --git a/games/templates/cotton/icon/arrowdown.html b/games/templates/cotton/icon/arrowdown.html
new file mode 100644
index 0000000..26ede59
--- /dev/null
+++ b/games/templates/cotton/icon/arrowdown.html
@@ -0,0 +1,3 @@
+<svg class="dark:text-white w-3" viewBox="5 8 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                                </svg>
\ No newline at end of file
diff --git a/games/templates/cotton/icon/play.html b/games/templates/cotton/icon/play.html
index 7f4bdc9..e51f307 100644
--- a/games/templates/cotton/icon/play.html
+++ b/games/templates/cotton/icon/play.html
@@ -2,7 +2,7 @@
      x="0px"
      y="0px"
      viewBox="0 0 48 48"
-     class="text-black dark:text-white w-4 h-4">
+     class="w-4 h-4">
     <path fill="currentColor" d="M 11.396484 4.1113281 C 9.1042001 4.2020187 7 6.0721788 7 8.5917969 L 7 39.408203 C 7 42.767694 10.742758 44.971891 13.681641 43.34375 L 41.490234 27.935547 C 44.513674 26.260259 44.513674 21.739741 41.490234 20.064453 L 13.681641 4.65625 C 12.94692 4.2492148 12.160579 4.0810979 11.396484 4.1113281 z M 11.431641 7.0664062 C 11.690234 7.0652962 11.961284 7.1323321 12.226562 7.2792969 L 40.037109 22.6875 C 41.13567 23.296212 41.13567 24.703788 40.037109 25.3125 L 12.226562 40.720703 C 11.165446 41.308562 10 40.620712 10 39.408203 L 10 8.5917969 C 10 7.9855423 10.290709 7.5116121 10.714844 7.2617188 C 10.926911 7.136772 11.173048 7.0675163 11.431641 7.0664062 z">
     </path>
 </svg>
diff --git a/games/templates/cotton/layouts/base.html b/games/templates/cotton/layouts/base.html
index b438e6a..d39b35d 100644
--- a/games/templates/cotton/layouts/base.html
+++ b/games/templates/cotton/layouts/base.html
@@ -39,46 +39,59 @@
             <span class="fixed left-2 bottom-2 text-xs text-slate-300 dark:text-slate-600">{% version %} ({% version_date %})</span>
         </div>
         {{ scripts }}
-        <script>
-            var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
-            var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
-
-        // Change the icons inside the button based on previous settings
-            if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-                themeToggleLightIcon.classList.remove('hidden');
-            } else {
-                themeToggleDarkIcon.classList.remove('hidden');
-            }
-
-            var themeToggleBtn = document.getElementById('theme-toggle');
-
-            themeToggleBtn.addEventListener('click', function () {
-
-            // toggle icons inside button
-                themeToggleDarkIcon.classList.toggle('hidden');
-                themeToggleLightIcon.classList.toggle('hidden');
-
-            // if set via local storage previously
-                if (localStorage.getItem('color-theme')) {
-                    if (localStorage.getItem('color-theme') === 'light') {
-                        document.documentElement.classList.add('dark');
-                        localStorage.setItem('color-theme', 'dark');
-                    } else {
-                        document.documentElement.classList.remove('dark');
-                        localStorage.setItem('color-theme', 'light');
-                    }
-
-                // if NOT set via local storage previously
-                } else {
-                    if (document.documentElement.classList.contains('dark')) {
-                        document.documentElement.classList.remove('dark');
-                        localStorage.setItem('color-theme', 'light');
-                    } else {
-                        document.documentElement.classList.add('dark');
-                        localStorage.setItem('color-theme', 'dark');
-                    }
+        <script type="module">
+            document.addEventListener('DOMContentLoaded', () => {
+                if (window.mountCrownIcon) {
+                    window.mountCrownIcon('#crown-icon-mount-point', {
+                        mastered: {{ game.mastered|yesno:"true,false" }}
+                    });
                 }
 
+                // Theme toggle logic
+                const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
+                const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
+                const themeToggleBtn = document.getElementById('theme-toggle');
+
+                // Ensure all elements are found before proceeding
+                if (themeToggleDarkIcon && themeToggleLightIcon && themeToggleBtn) {
+                    // Initial state of icons based on current theme
+                    // The FOUC script in <head> already set document.documentElement.classList.add/remove('dark')
+                    // So we just need to set the icon visibility based on that.
+                    if (document.documentElement.classList.contains('dark')) {
+                        themeToggleLightIcon.classList.remove('hidden');
+                        themeToggleDarkIcon.classList.add('hidden');
+                    } else {
+                        themeToggleDarkIcon.classList.remove('hidden');
+                        themeToggleLightIcon.classList.add('hidden');
+                    }
+
+                    themeToggleBtn.addEventListener('click', function () {
+                        // toggle icons inside button
+                        themeToggleDarkIcon.classList.toggle('hidden');
+                        themeToggleLightIcon.classList.toggle('hidden');
+
+                        // if set via local storage previously
+                        if (localStorage.getItem('color-theme')) {
+                            if (localStorage.getItem('color-theme') === 'light') {
+                                document.documentElement.classList.add('dark');
+                                localStorage.setItem('color-theme', 'dark');
+                            } else { // current theme is dark, switch to light
+                                document.documentElement.classList.remove('dark');
+                                localStorage.setItem('color-theme', 'light');
+                            }
+
+                        // if NOT set via local storage previously
+                        } else { // no theme in local storage, use system preference
+                            if (document.documentElement.classList.contains('dark')) { // currently dark, switch to light
+                                document.documentElement.classList.remove('dark');
+                                localStorage.setItem('color-theme', 'light');
+                            } else { // currently light, switch to dark
+                                document.documentElement.classList.add('dark');
+                                localStorage.setItem('color-theme', 'dark');
+                            }
+                        }
+                    });
+                }
             });
         </script>
     </body>
diff --git a/games/templates/navbar.html b/games/templates/navbar.html
index 552e3b0..128df2e 100644
--- a/games/templates/navbar.html
+++ b/games/templates/navbar.html
@@ -26,9 +26,19 @@
         </button>
         <div class="hidden w-full md:block md:w-auto" id="navbar-dropdown">
             <ul class="items-center flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
-                <li class="text-white flex flex-col items-center text-xs">
-                    <span class="flex uppercase gap-1">Today<span class="text-gray-400">·</span>Last 7 days</span>
-                    <span class="flex items-center gap-1">{{ today_played }}<span class="text-gray-400">·</span>{{ last_7_played }}</span>
+                <li class="flex items-center">
+                    <button id="theme-toggle" type="button" class="p-2 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm">
+                        <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M3.32031 11.6835C3.32031 16.6541 7.34975 20.6835 12.3203 20.6835C16.1075 20.6835 19.3483 18.3443 20.6768 15.032C19.6402 15.4486 18.5059 15.6834 17.3203 15.6834C12.3497 15.6834 8.32031 11.654 8.32031 6.68342C8.32031 5.50338 8.55165 4.36259 8.96453 3.32996C5.65605 4.66028 3.32031 7.89912 3.32031 11.6835Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                        </svg>
+                        <svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M12 3V4M12 20V21M4 12H3M6.31412 6.31412L5.5 5.5M17.6859 6.31412L18.5 5.5M6.31412 17.69L5.5 18.5001M17.6859 17.69L18.5 18.5001M21 12H20M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                        </svg>
+                    </button>
+                </li>
+                <li class="dark:text-white flex flex-col items-center text-xs">
+                    <span class="flex uppercase gap-1">Today<span class="dark:text-gray-400">·</span>Last 7 days</span>
+                    <span class="flex items-center gap-1">{{ today_played }}<span class="dark:text-gray-400">·</span>{{ last_7_played }}</span>
                 </li>
                 <li>
                     <a href="#"
diff --git a/games/templates/partials/gamestatus_selector.html b/games/templates/partials/gamestatus_selector.html
index 31abf7c..fd115ea 100644
--- a/games/templates/partials/gamestatus_selector.html
+++ b/games/templates/partials/gamestatus_selector.html
@@ -23,16 +23,14 @@
      }"
 >
     <div class="inline-flex rounded-md shadow-xs" role="group" @click.outside="open = false">
-        <button type="button" @click="open = !open" class="relative px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white align-middle">
+        <button type="button" @click="open = !open" class="relative px-4 py-2 text-sm font-medium bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white align-middle">
             <span class="flex flex-row gap-4 justify-between items-center">
                 {% for status_value, status_label in game_statuses %}
                     <template x-if="status == '{{ status_value }}'">
-                        <c-gamestatus display="flex" status="{{ status_value }}" class="text-slate-300">{{ status_label }}</c-gamestatus>
+                        <c-gamestatus display="flex" status="{{ status_value }}">{{ status_label }}</c-gamestatus>
                     </template>
                 {% endfor %}
-                <svg class="text-white w-3" viewBox="5 8 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                </svg>
+                <c-icon.arrowdown />
             </span>
             <div class="absolute top-[105%] left-0 w-full whitespace-nowrap z-10 text-sm font-medium bg-gray-800/20 backdrop-blur-lg rounded-md rounded-t-none border border-gray-200 dark:border-gray-700" x-show="open" style="display: none;">
                 <ul class="[&_li:first-of-type_a]:rounded-none [&_li:last-of-type_a]:rounded-t-none">
diff --git a/games/templates/partials/history.html b/games/templates/partials/history.html
index a2c44a1..0350862 100644
--- a/games/templates/partials/history.html
+++ b/games/templates/partials/history.html
@@ -1,6 +1,6 @@
 <ul class="list-disc list-inside">
     {% for change in statuschanges %}
     <li class="text-slate-500">
-        {% if change.timestamp %}{{ change.timestamp | date:"d/m/Y H:i" }}: Changed{% else %}At some point changed{% endif %} status from <c-gamestatus :status="change.old_status" class="text-white">{{ change.get_old_status_display }}</c-gamestatus> to <c-gamestatus :status="change.new_status" class="text-white">{{ change.get_new_status_display }}</c-gamestatus> (<a href="{% url 'edit_statuschange' change.id %}">Edit</a>, <a href="{% url 'delete_statuschange' change.id %}">Delete</a>)</li>
+        {% if change.timestamp %}{{ change.timestamp | date:"d/m/Y H:i" }}: Changed{% else %}At some point changed{% endif %} status from <c-gamestatus :status="change.old_status">{{ change.get_old_status_display }}</c-gamestatus> to <c-gamestatus :status="change.new_status">{{ change.get_new_status_display }}</c-gamestatus> (<a href="{% url 'edit_statuschange' change.id %}">Edit</a>, <a href="{% url 'delete_statuschange' change.id %}">Delete</a>)</li>
     {% endfor %}
 </ul>
\ No newline at end of file
diff --git a/games/templates/view_game.html b/games/templates/view_game.html
index 4274152..7666567 100644
--- a/games/templates/view_game.html
+++ b/games/templates/view_game.html
@@ -52,16 +52,16 @@
                 {{ playrange }}
                 </c-popover>
             </div>
-            <div class="flex flex-col mb-6 text-slate-400 gap-y-4">
+            <div class="flex flex-col mb-6 text-gray-600 dark:text-slate-400 gap-y-4">
                 <div class="flex gap-2 items-center">
                     <span class="uppercase">Original year</span>
-                    <span class="text-slate-300">{{ game.original_year_released }}</span>
+                    <span class="text-black dark:text-slate-300">{{ game.original_year_released }}</span>
                 </div>
                 <div class="flex gap-2 items-center"
                 >
                     <span class="uppercase">Status</span>
                     {% include "partials/gamestatus_selector.html" %}
-                    {% if game.mastered %}👑{% endif %}
+                    <div id="crown-icon-mount-point"></div>
                 </div>
                 <div class="flex gap-2 items-center"
                      x-data="{ open: false }"
@@ -74,9 +74,7 @@
                         </button>
                         </a>
                         <button type="button" x-on:click="open = !open" @click.outside="open = false" class="relative px-4 py-2 text-sm font-medium text-gray-900 bg-white border-e border-b border-t border-gray-200 rounded-e-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white align-middle">
-                            <svg class="text-white w-3" viewBox="5 8 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                                </svg>
+                            <c-icon.arrowdown />
                             <div
                                 class="absolute top-[100%] -left-[1px] w-auto whitespace-nowrap z-10 text-sm font-medium bg-gray-800/20 backdrop-blur-lg rounded-md rounded-tl-none border border-gray-200 dark:border-gray-700"
                                 x-show="open"
@@ -110,7 +108,7 @@
   
                 <div class="flex gap-2 items-center">
                     <span class="uppercase">Platform</span>
-                    <span class="text-slate-300">{{ game.platform }}</span>
+                    <span class="text-black dark:text-slate-300">{{ game.platform }}</span>
                 </div>
             </div>
             <div class="inline-flex rounded-md shadow-sm mb-3" role="group">
@@ -163,4 +161,22 @@
                 return document.getElementById('session-count').textContent.match("[0-9]+");
             }
     </script>
+
+    {% if debug %} {# Assuming 'debug' context variable is passed from Django view #}
+    <script type="module" src="http://localhost:5173/@vite/client"></script>
+    <script type="module" src="http://localhost:5173/frontend/main.js"></script>
+    {% else %}
+    {# For production, you would use Django's staticfiles to serve the built assets #}
+    {# <script type="module" src="{% static 'dist/main.js' %}"></script> #}
+    {# <link rel="stylesheet" href="{% static 'dist/main.css' %}"> #}
+    {% endif %}
+    <script type="module">
+        document.addEventListener('DOMContentLoaded', () => {
+            if (window.mountCrownIcon) {
+                window.mountCrownIcon('#crown-icon-mount-point', {
+                    mastered: {{ game.mastered|yesno:"true,false" }}
+                });
+            }
+        });
+    </script>
     </c-layouts.base>
diff --git a/games/views/playevent.py b/games/views/playevent.py
index 579fbae..b16f65b 100644
--- a/games/views/playevent.py
+++ b/games/views/playevent.py
@@ -1,4 +1,5 @@
 import logging
+from datetime import datetime, timedelta
 from typing import Any, Callable, TypedDict
 
 from django.contrib.auth.decorators import login_required
@@ -11,9 +12,9 @@ from django.template.loader import render_to_string
 from django.urls import reverse
 
 from common.components import A, Button, Icon
-from common.time import dateformat, local_strftime
+from common.time import dateformat, format_duration, local_strftime
 from games.forms import PlayEventForm
-from games.models import Game, PlayEvent
+from games.models import Game, PlayEvent, Session
 
 logger = logging.getLogger("games")
 
@@ -83,6 +84,39 @@ def create_playevent_tabledata(
     }
 
 
+def _get_formatted_playtime_for_game_sessions_in_range(
+    game: Game,
+    start_timestamp: datetime | None = None,
+    end_timestamp: datetime | None = None,
+) -> str:
+    """
+    Calculates and formats the total playtime for a game's sessions
+    between specified start and end timestamps. If timestamps are not provided,
+    it uses the earliest and latest session start times for the game.
+    Returns "0h 00m" if no sessions exist for the game or if the range is invalid.
+    """
+    sessions_queryset = game.sessions.all()
+
+    if not sessions_queryset.exists():
+        return "0h 00m"
+
+    actual_start_ts = (
+        start_timestamp
+        if start_timestamp is not None
+        else sessions_queryset.earliest("timestamp_start").timestamp_start
+    )
+    actual_end_ts = (
+        end_timestamp
+        if end_timestamp is not None
+        else sessions_queryset.latest("timestamp_start").timestamp_start
+    )
+
+    sessions_in_range = sessions_queryset.filter(
+        timestamp_start__gte=actual_start_ts, timestamp_start__lte=actual_end_ts
+    )
+    return format_duration(sessions_in_range.total_duration_unformatted(), "%Hh %mm")
+
+
 @login_required
 def list_playevents(request: HttpRequest) -> HttpResponse:
     page_number = request.GET.get("page", 1)
@@ -115,8 +149,45 @@ def add_playevent(request: HttpRequest, game_id: int = 0) -> HttpResponse:
         # coming from add_playevent_for_game url path
         game = get_object_or_404(Game, id=game_id)
         initial["game"] = game
-        initial["started"] = game.sessions.earliest().timestamp_start
-        initial["ended"] = game.sessions.latest().timestamp_start
+        try:
+            # First, try to get the latest session. If no sessions, then no playtime.
+            latest_session = game.sessions.latest("timestamp_start")
+            latest_session_ts = latest_session.timestamp_start
+
+            # Now, determine the start date for the new playevent.
+            # This will be either the day after the last playevent ended, or the earliest session.
+            try:
+                latest_playevent = game.playevents.latest("ended")
+                # Start date for the new PlayEvent form
+                new_playevent_form_start_date = latest_playevent.ended + timedelta(
+                    days=1
+                )
+                initial["started"] = new_playevent_form_start_date
+
+                # Start timestamp for playtime calculation
+                playtime_calc_start_ts = datetime.combine(
+                    new_playevent_form_start_date, datetime.min.time()
+                )
+
+            except PlayEvent.DoesNotExist:
+                # No previous playevents, so the new playevent starts from the earliest session.
+                earliest_session_ts = game.sessions.earliest(
+                    "timestamp_start"
+                ).timestamp_start
+                initial["started"] = earliest_session_ts.date()
+                playtime_calc_start_ts = earliest_session_ts
+
+            # The end date for the new PlayEvent form and playtime calculation is the latest session's start date.
+            initial["ended"] = latest_session_ts.date()
+            playtime_calc_end_ts = latest_session_ts
+
+            initial["note"] = _get_formatted_playtime_for_game_sessions_in_range(
+                game, playtime_calc_start_ts, playtime_calc_end_ts
+            )
+        except Session.DoesNotExist:
+            initial["started"] = None
+            initial["ended"] = None
+            initial["note"] = "0h 00m"
     form = PlayEventForm(request.POST or None, initial=initial)
     if form.is_valid():
         form.save()
diff --git a/games/views/purchase.py b/games/views/purchase.py
index ab5baac..87699a8 100644
--- a/games/views/purchase.py
+++ b/games/views/purchase.py
@@ -140,7 +140,7 @@ def add_purchase(request: HttpRequest, game_id: int = 0) -> HttpResponse:
 
     context["form"] = form
     context["title"] = "Add New Purchase"
-    # context["script_name"] = "add_purchase.js"
+    context["script_name"] = "add_purchase.js"
     return render(request, "add_purchase.html", context)
 
 
@@ -156,7 +156,7 @@ def edit_purchase(request: HttpRequest, purchase_id: int) -> HttpResponse:
     context["title"] = "Edit Purchase"
     context["form"] = form
     context["purchase_id"] = str(purchase_id)
-    # context["script_name"] = "add_purchase.js"
+    context["script_name"] = "add_purchase.js"
     return render(request, "add_purchase.html", context)
 
 
@@ -208,7 +208,12 @@ def related_purchase_by_game(request: HttpRequest) -> HttpResponse:
     if isinstance(games, int) or isinstance(games, str):
         games = [games]
     form = PurchaseForm()
-    form.fields["related_purchase"].queryset = Purchase.objects.filter(
-        games__in=games, type=Purchase.GAME
-    ).order_by("games__sort_name")
+    qs = Purchase.objects.filter(games__in=games, type=Purchase.GAME).order_by(
+        "games__sort_name"
+    )
+
+    form.fields["related_purchase"].queryset = qs
+    first_option = qs.first()
+    if first_option:
+        form.fields["related_purchase"].initial = first_option.id
     return render(request, "partials/related_purchase_field.html", {"form": form})
diff --git a/package.json b/package.json
index da578c9..5855669 100644
--- a/package.json
+++ b/package.json
@@ -1,10 +1,21 @@
 {
+  "name": "timetracker-frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.13",
     "concurrently": "^8.2.2",
     "npm-check-updates": "^16.14.20",
-    "tailwindcss": "^3.4.14"
+    "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "svelte": "^4.2.8",
+    "tailwindcss": "^3.4.14",
+    "vite": "^5.0.8"
   },
   "dependencies": {
     "flowbite": "^2.4.1"
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..3c32785
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,29 @@
+import { defineConfig } from 'vite';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [svelte()],
+  // The root is the project root where vite.config.js and package.json are
+  root: path.resolve(__dirname),
+  // Svelte source code is expected in the 'frontend' subdirectory
+  build: {
+    outDir: 'static/dist', // Output to a 'static/dist' folder within the project root
+    emptyOutDir: true, // Clear the output directory before building
+    manifest: true, // Generate manifest.json for Django to read asset paths
+    rollupOptions: {
+      input: {
+        main: 'frontend/main.js', // Entry point for your Svelte app, relative to the 'root'
+      },
+    },
+  },
+  server: {
+    port: 5173, // Default Vite dev server port
+    strictPort: true,
+    hmr: { port: 5173 }, // Ensure HMR also uses the correct port
+    cors: { // Configure CORS for the Vite development server
+      origin: '*', // Allow requests from any origin during development
+      methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
+    },
+  },
+});