diff --git a/svelte-ui/src/App.svelte b/svelte-ui/src/App.svelte
index 2e6e64e..c9cb85c 100644
--- a/svelte-ui/src/App.svelte
+++ b/svelte-ui/src/App.svelte
@@ -69,7 +69,6 @@
 	main {
 		text-align: left;
 		max-width: 99.5%;
-		width: 920px;
 		margin: 1em auto;
 		padding-bottom: 4em;
 	}
diff --git a/svelte-ui/src/clients/stufflog.ts b/svelte-ui/src/clients/stufflog.ts
index bdd96c5..5f868e8 100644
--- a/svelte-ui/src/clients/stufflog.ts
+++ b/svelte-ui/src/clients/stufflog.ts
@@ -232,7 +232,6 @@ export class StufflogClient {
       req.body = data;
     }
 
-    console.warn("AUTH SKIPPED, remember to change back in prod!")
     req.headers["Authorization"] = await getJwt();
 
     const res = await fetch(fullPath, req);
diff --git a/svelte-ui/src/components/Composition.svelte b/svelte-ui/src/components/Composition.svelte
new file mode 100644
index 0000000..3a58b90
--- /dev/null
+++ b/svelte-ui/src/components/Composition.svelte
@@ -0,0 +1,84 @@
+<script lang="ts">
+  import type { GoalCompositionMode } from "../models/goal";
+  import type { LogResult } from "../models/log";
+import type { TaskResult } from "../models/task";
+
+  interface CompositionItem {
+    link: string
+    amount: number
+    name: string
+  }
+
+  export let logs: LogResult[] = [];
+  export let mode: GoalCompositionMode = "item";
+
+  let list: CompositionItem[] = [];
+
+  $: {
+    const map: {[k: string]: CompositionItem} = {}
+  
+    if (mode === "item") {
+      for (const log of logs) {
+        const item = log.item;
+        if (!map[item.name]) {
+          map[item.name] = {name: item.name, amount: log.itemAmount, link: `/items#${item.id}`};
+        } else {
+          map[item.name].amount += log.itemAmount;
+        }
+
+        if (log.secondaryItem) {
+          const item = log.secondaryItem;
+          if (!map[item.name]) {
+            map[item.name] = {name: item.name, amount: log.secondaryItemAmount, link: `/items#${item.id}`};
+          } else {
+            map[item.name].amount += log.secondaryItemAmount;
+          }
+        }
+      }
+    } else {
+      for (const log of logs) {
+        const task = log.task;
+
+        const amount = log.secondaryItem ? log.secondaryItemAmount + log.itemAmount : log.itemAmount;
+
+        if (!map[task.name]) {
+          map[task.name] = {name: task.name, amount, link: `/questlog#${task.projectId}`};
+        } else {
+          map[task.name].amount += amount;
+        }
+      }
+    }
+  
+    list = Object.keys(map).sort((a, b) => map[b].amount - map[a].amount).map(k => map[k]);
+  }
+</script>
+
+<div class="composition">
+  {#each list as item (item.name)}
+    <div class="item">
+      <span class="amount">{item.amount}x&nbsp;</span>
+      <a href={item.link}>{item.name}</a>
+    </div>
+  {/each}
+</div>
+
+<style>
+  div.composition {
+    padding: 0.25em 0ch;
+    color: #555;
+    font-size: 0.75em;
+  }
+
+  div.item {
+    padding: 0.125em 0.5ch;
+    display: inline-block;
+  }
+
+  span.amount {
+    color: #777;
+  }
+
+  a {
+    color: inherit;
+  }
+</style>
\ No newline at end of file
diff --git a/svelte-ui/src/components/GoalEntry.svelte b/svelte-ui/src/components/GoalEntry.svelte
index a5ae6d5..6432a87 100644
--- a/svelte-ui/src/components/GoalEntry.svelte
+++ b/svelte-ui/src/components/GoalEntry.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { GoalResult } from "../models/goal";
   import type { ModalData } from "../stores/modal";
+import Composition from "./Composition.svelte";
   import EveryMinute from "./EveryMinute.svelte";
   import Option from "./Option.svelte";
   import OptionRow from "./OptionRow.svelte";
@@ -34,6 +35,7 @@ import TimeProgress from "./TimeProgress.svelte";
     <Progress count={goal.completedAmount} target={goal.amount} />
     <TimeProgress startTime={goal.startTime} endTime={goal.endTime} />
   </div>
+  <Composition logs={goal.logs} mode={goal.compositionMode} />
 </ParentEntry>
 
 <style>
diff --git a/svelte-ui/src/components/Menu.svelte b/svelte-ui/src/components/Menu.svelte
index ac0a000..fc983dd 100644
--- a/svelte-ui/src/components/Menu.svelte
+++ b/svelte-ui/src/components/Menu.svelte
@@ -10,8 +10,6 @@
     }, 0);
   }
 
-  $: console.log($selectionStore);
-
   $: selected = {
     home: $selectionStore.path === "/",
     goals: $selectionStore.path.startsWith("/goals"),
diff --git a/svelte-ui/src/components/Progress.svelte b/svelte-ui/src/components/Progress.svelte
index 9f883b0..306a94a 100644
--- a/svelte-ui/src/components/Progress.svelte
+++ b/svelte-ui/src/components/Progress.svelte
@@ -78,10 +78,6 @@
       title = `${count} / ${target} (${percentage}%)`
     }
   }
-
-  $: {
-    console.log(ons, offs);
-  }
 </script>
 
 <div class="bar" title="{title}" class:thin class:thinner>
diff --git a/svelte-ui/src/components/ProjectEntry.svelte b/svelte-ui/src/components/ProjectEntry.svelte
index e1d6ab8..e3831f2 100644
--- a/svelte-ui/src/components/ProjectEntry.svelte
+++ b/svelte-ui/src/components/ProjectEntry.svelte
@@ -4,6 +4,7 @@ import type { TaskResult } from "../models/task";
   import type { ModalData } from "../stores/modal";
 import projectStore from "../stores/project";
 import taskStore from "../stores/tasks";
+import Composition from "./Composition.svelte";
   import Option from "./Option.svelte";
   import OptionRow from "./OptionRow.svelte";
   import ParentEntry from "./ParentEntry.svelte";
@@ -38,7 +39,7 @@ import taskStore from "../stores/tasks";
       <Option open={mdAddTask}>Add Task</Option>
       <Option open={mdProjectEdit}>Edit</Option>
       <Option open={mdProjectDelete}>Delete</Option>
-    </OptionRow>  
+    </OptionRow>
   {/if}
   {#each project.tasks as task (task.id)}
     {#if !hideInactive || task.active}
diff --git a/svelte-ui/src/components/TimeProgress.svelte b/svelte-ui/src/components/TimeProgress.svelte
index 548b431..7d17ec4 100644
--- a/svelte-ui/src/components/TimeProgress.svelte
+++ b/svelte-ui/src/components/TimeProgress.svelte
@@ -24,8 +24,6 @@
       }
     }
   }
-
-  $: console.log(startTime, endTime, msLength, msElapsed, msElapsed < msLength)
 </script>
 
 <EveryMinute bind:now={now} />
diff --git a/svelte-ui/src/models/goal.ts b/svelte-ui/src/models/goal.ts
index 8bfc25b..4d95115 100644
--- a/svelte-ui/src/models/goal.ts
+++ b/svelte-ui/src/models/goal.ts
@@ -2,6 +2,8 @@ import type Group from "./group";
 import type Item from "./item";
 import type { LogResult } from "./log";
 
+export type GoalCompositionMode = "task" | "item"
+
 export default interface Goal {
   id: string
   groupId: string
@@ -12,7 +14,7 @@ export default interface Goal {
   name: string
   description: string
   unweighted: boolean
-  compositionMode: string
+  compositionMode: GoalCompositionMode
 }
 
 export interface GoalFilter {
diff --git a/svelte-ui/src/pages/FrontPage.svelte b/svelte-ui/src/pages/FrontPage.svelte
index 1f97d7f..8a6fc22 100644
--- a/svelte-ui/src/pages/FrontPage.svelte
+++ b/svelte-ui/src/pages/FrontPage.svelte
@@ -93,10 +93,12 @@
   div.page {
     display: flex;
     flex-direction: row;
-    width: 100%;
+    max-width: 100%;
     padding: 0 1ch;
     margin: 0;
+    width: 1020px;
     box-sizing: border-box;
+		margin: 1em auto;
   }
   div.left, div.right {
     width: 50%;
diff --git a/svelte-ui/src/pages/QLPage.svelte b/svelte-ui/src/pages/QLPage.svelte
index 544e895..9190a46 100644
--- a/svelte-ui/src/pages/QLPage.svelte
+++ b/svelte-ui/src/pages/QLPage.svelte
@@ -26,7 +26,7 @@
     display: block;
     margin: auto;
     max-width: 100%;
-    width: 1600px;
+    width: 1020px;
     margin-top: 0;
     box-sizing: border-box;
   }