diff --git a/svelte-ui/src/components/Composition.svelte b/svelte-ui/src/components/Composition.svelte
index a4cc039..97a19d1 100644
--- a/svelte-ui/src/components/Composition.svelte
+++ b/svelte-ui/src/components/Composition.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { Link } from "svelte-routing";
+
   import type { GoalCompositionMode } from "../models/goal";
   import type { LogResult } from "../models/log";
 
@@ -60,7 +62,7 @@
         const amount = calculateAmount(log, unweighted);
 
         if (!map[project.id]) {
-          map[project.id] = {name: project.name, amount, link: `/questlog#${project.id}`};
+          map[project.id] = {name: project.name, amount, link: `/questlog/${project.groupId}/${project.id}`};
         } else {
           map[project.id].amount += amount;
         }
@@ -72,7 +74,7 @@
         const amount = calculateAmount(log, unweighted);
 
         if (!map[task.id]) {
-          map[task.id] = {name: task.name, amount, link: `/questlog#${task.projectId}`};
+          map[task.id] = {name: task.name, amount, link: `/questlog/${task.project.groupId}/${task.projectId}`};
         } else {
           map[task.id].amount += amount;
         }
@@ -87,7 +89,7 @@
   {#each list as item}
     <div class="item">
       <span class="amount">{item.amount}x&nbsp;</span>
-      <a href={item.link}>{item.name}</a>
+      <Link to={item.link}>{item.name}</Link>
     </div>
   {/each}
 </div>
@@ -108,7 +110,7 @@
     color: #777;
   }
 
-  a {
+  div.item :global(a) {
     color: inherit;
   }
 </style>
\ No newline at end of file
diff --git a/svelte-ui/src/components/QuestLog.svelte b/svelte-ui/src/components/QuestLog.svelte
index e734f98..a15bcdd 100644
--- a/svelte-ui/src/components/QuestLog.svelte
+++ b/svelte-ui/src/components/QuestLog.svelte
@@ -4,7 +4,6 @@
 
 <script lang="ts">
   import type { ProjectResult } from "../models/project";
-  import selectionStore from "../stores/selection";
   import ProjectEntry from "./ProjectEntry.svelte";
   import QlList from "./QLList.svelte";
   import Boi from "../components/Boi.svelte";
@@ -23,7 +22,7 @@
   let mdGroupEdit: ModalData = {name: "projectgroup.edit", projectGroup: {} as ProjectGroup};
   let mdGroupDelete: ModalData = {name: "projectgroup.delete", projectGroup: {} as ProjectGroup};
 
-  let projects: ProjectResult[] = [];
+  let visibleProjects: ProjectResult[] = [];
   let expiringProjects: ProjectResult[];
   let activeProjects: ProjectResult[];
   let inactiveProjects: ProjectResult[];
@@ -31,7 +30,7 @@
   let failedProjects: ProjectResult[];
   let onholdProjects: ProjectResult[];
   let ideaProjects: ProjectResult[];
-  let project: ProjectResult = null;
+  let selectedProject: ProjectResult = null;
   let selectedGroup: ProjectGroupResult | null = null;
 
   function sortProjects(a: ProjectResult, b: ProjectResult) {
@@ -49,24 +48,22 @@
   }
 
   $: selectedGroup = groups.find(g => g.id === groupId)
-  $: projects = selectedGroup?.projects || [];
+  $: visibleProjects = selectedGroup?.projects || [];
+  $: selectedProject = visibleProjects.find(p => p.id === projectId) || null;
 
   $: mdProjectAdd = { name: "project.add", groupId: groupId }
   $: mdGroupEdit = { name: "projectgroup.edit", projectGroup: selectedGroup }
   $: mdGroupDelete = { name: "projectgroup.delete", projectGroup: selectedGroup }
 
-  $: project = $selectionStore.hash.startsWith("P") ? projects.find(p => p.id === $selectionStore.hash) : null;
-  $: expiringProjects = projects.filter(p => p.active && p.endTime).sort((a,b) => Date.parse(a.endTime) - Date.parse(b.endTime));
-  $: activeProjects = projects.filter(p => p.active && !p.endTime).sort(sortProjects);
-  $: inactiveProjects = projects.filter(p => !p.active).sort(sortProjects);
+  $: expiringProjects = visibleProjects.filter(p => p.active && p.endTime).sort((a,b) => Date.parse(a.endTime) - Date.parse(b.endTime));
+  $: activeProjects = visibleProjects.filter(p => p.active && !p.endTime).sort(sortProjects);
+  $: inactiveProjects = visibleProjects.filter(p => !p.active).sort(sortProjects);
   $: completedProjects = inactiveProjects.filter(p => p.statusTag === "completed" || p.statusTag == null);
   $: failedProjects = inactiveProjects.filter(p => p.statusTag === "failed" || p.statusTag === "declined");
   $: onholdProjects = inactiveProjects.filter(p => p.statusTag === "on hold" || p.statusTag === "onhold").sort(sortProjects);
   $: ideaProjects = inactiveProjects.filter(p => p.statusTag === "to do" || p.statusTag === "idea").sort(sortProjects);
   $: backgroundProjects = inactiveProjects.filter(p => p.statusTag === "background").sort(sortProjects);
   $: progressProjects = inactiveProjects.filter(p => p.statusTag === "progress").sort(sortProjects);
-
-  $: project = selectedGroup?.projects.find(p => p.id === projectId) || null;
 </script>
 
 <ProjectGroupMenu selected={groupId} groups={groups} />
@@ -80,18 +77,18 @@
       </OptionRow>
     {/if}
     <Boi compacter open={mdProjectAdd}>Add Project</Boi>
-    <QlList selected={project?.id} label={selectedGroup?.categoryNames["deadlines"] || "Deadlines"} projects={expiringProjects} />
-    <QlList selected={project?.id} label={selectedGroup?.categoryNames["active"] || "Active"} projects={activeProjects} />
-    <QlList selected={project?.id} label={selectedGroup?.categoryNames["background"] || "Background"} projects={backgroundProjects} />
-    <QlList selected={project?.id} label={selectedGroup?.categoryNames["progress"] || "Progress"} projects={progressProjects} />
-    <QlList selected={project?.id} label={selectedGroup?.categoryNames["to do"] || "To Do"} projects={ideaProjects} />
-    <QlList selected={project?.id} label={selectedGroup?.categoryNames["on hold"] || "On Hold"} projects={onholdProjects} />
-    <QlList selected={project?.id} label={selectedGroup?.categoryNames["completed"] || "Completed"} projects={completedProjects} />
-    <QlList selected={project?.id} label={selectedGroup?.categoryNames["failed"] || "Failed"} projects={failedProjects} />
+    <QlList selected={selectedProject?.id} label={selectedGroup?.categoryNames["deadlines"] || "Deadlines"} projects={expiringProjects} />
+    <QlList selected={selectedProject?.id} label={selectedGroup?.categoryNames["active"] || "Active"} projects={activeProjects} />
+    <QlList selected={selectedProject?.id} label={selectedGroup?.categoryNames["background"] || "Background"} projects={backgroundProjects} />
+    <QlList selected={selectedProject?.id} label={selectedGroup?.categoryNames["progress"] || "Progress"} projects={progressProjects} />
+    <QlList selected={selectedProject?.id} label={selectedGroup?.categoryNames["to do"] || "To Do"} projects={ideaProjects} />
+    <QlList selected={selectedProject?.id} label={selectedGroup?.categoryNames["on hold"] || "On Hold"} projects={onholdProjects} />
+    <QlList selected={selectedProject?.id} label={selectedGroup?.categoryNames["completed"] || "Completed"} projects={completedProjects} />
+    <QlList selected={selectedProject?.id} label={selectedGroup?.categoryNames["failed"] || "Failed"} projects={failedProjects} />
   </div>
   <div class="body">
-    {#if project != null}
-      <ProjectEntry removeHook hideIcon project={project} showAllOptions />
+    {#if selectedProject != null}
+      <ProjectEntry removeHook hideIcon project={selectedProject} showAllOptions />
     {/if}
   </div>
 </div>