diff --git a/.changeset/tall-humans-fold.md b/.changeset/tall-humans-fold.md
new file mode 100644
index 00000000..5e9c86f1
--- /dev/null
+++ b/.changeset/tall-humans-fold.md
@@ -0,0 +1,5 @@
+---
+'@ldn-viz/ui': minor
+---
+
+CHANGED - provide a default light theme for tabs
diff --git a/packages/ui/src/lib/tabs/TabLabel.svelte b/packages/ui/src/lib/tabs/TabLabel.svelte
index a8b5f4aa..8dad76bf 100644
--- a/packages/ui/src/lib/tabs/TabLabel.svelte
+++ b/packages/ui/src/lib/tabs/TabLabel.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { getContext } from 'svelte';
-	import type { Writable } from 'svelte/types/runtime/store';
+	import type { Writable } from 'svelte/store';
 	import { classNames } from '../utils/classNames';
 
 	export let tabId: string;
@@ -23,9 +23,9 @@
 	role="tab"
 	class={classNames(
 		tabId === $selectedValue
-			? 'bg-core-blue-600 cursor-default'
-			: 'bg-core-grey-600 hover:bg-core-grey-500 cursor-pointer',
-		'text-white text-base py-2 px-4 flex items-center select-none '
+			? 'bg-core-blue-600 cursor-default text-white'
+			: 'bg-core-grey-100 hover:bg-core-grey-200 text-core-grey-800 dark:bg-core-grey-600 dark:hover:bg-core-grey-500 dark:text-white cursor-pointer',
+		'text-base py-2 px-4 flex items-center select-none '
 	)}
 >
 	<slot />
diff --git a/packages/ui/src/lib/tabs/TabList.svelte b/packages/ui/src/lib/tabs/TabList.svelte
index fe5ff2f2..5cf71a91 100644
--- a/packages/ui/src/lib/tabs/TabList.svelte
+++ b/packages/ui/src/lib/tabs/TabList.svelte
@@ -11,7 +11,7 @@
 </script>
 
 <div
-	class="flex bg-core-grey-800 border-b-4 border-b-core-blue-600 w-full pt-5 px-4 pb-0 space-x-0.5 items-end"
+	class="flex bg-white dark:bg-core-grey-800 border-b-4 border-b-core-blue-600 w-full pt-5 px-4 pb-0 space-x-0.5 items-end"
 >
 	<slot />
 </div>