diff --git a/src/lib/components/ToggleTheme.svelte b/src/lib/components/ToggleTheme.svelte
new file mode 100644
index 0000000..ec79e97
--- /dev/null
+++ b/src/lib/components/ToggleTheme.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	// Reactive variable to store the current theme
+	let theme = 'forest'; // default theme
+
+	// On component mount, check for saved theme in local storage
+	import { onMount } from 'svelte';
+
+	onMount(() => {
+		theme = localStorage.getItem('theme') || 'forest';
+		updateTheme();
+	});
+
+	// Function to toggle theme
+	function toggleTheme() {
+		theme = theme === 'forest' ? 'light' : 'forest';
+		localStorage.setItem('theme', theme);
+		updateTheme();
+	}
+
+	// Function to update the theme on the body element
+	function updateTheme() {
+		document.body.setAttribute('data-theme', theme);
+	}
+</script>
+
+<button on:click={toggleTheme}>Toggle Theme</button>
diff --git a/src/routes/(app)/poetry/+page.svelte b/src/routes/(app)/poetry/+page.svelte
index bb520c5..6dc8d16 100644
--- a/src/routes/(app)/poetry/+page.svelte
+++ b/src/routes/(app)/poetry/+page.svelte
@@ -62,7 +62,7 @@
 			{#each posts as post}
 				<li class="py-4">
 					<h3 class="pb-1">
-						<a class="link-primary" href={post.path}>
+						<a class="link-primary" href={`/poetry/${post.filename}`}>
 							{post.meta.title}
 						</a>
 					</h3>
diff --git a/src/routes/(app)/thoughts/+page.svelte b/src/routes/(app)/thoughts/+page.svelte
index 2acef32..d164b2b 100644
--- a/src/routes/(app)/thoughts/+page.svelte
+++ b/src/routes/(app)/thoughts/+page.svelte
@@ -62,7 +62,7 @@
 			{#each posts as post}
 				<li class="py-4">
 					<h3 class="pb-1">
-						<a class="link-primary" href={post.path}>
+						<a class="link-primary" href={`/thoughts/${post.filename}`}>
 							{post.meta.title}
 						</a>
 					</h3>