diff --git a/packages/app/src/context/local.tsx b/packages/app/src/context/local.tsx
index 804bb067..b512ef47 100644
--- a/packages/app/src/context/local.tsx
+++ b/packages/app/src/context/local.tsx
@@ -124,11 +124,12 @@ function init() {
       return store.node[store.active]
     })
     const opened = createMemo(() => store.opened.map((x) => store.node[x]))
-    const changes = createMemo(() => new Set(sync.data.changes.map((f) => f.path)))
+    const changeset = createMemo(() => new Set(sync.data.changes.map((f) => f.path)))
+    const changes = createMemo(() => Array.from(changeset()).sort((a, b) => a.localeCompare(b)))
     const status = (path: string) => sync.data.changes.find((f) => f.path === path)
 
     const changed = (path: string) => {
-      const set = changes()
+      const set = changeset()
       if (set.has(path)) return true
       for (const p of set) {
         if (p.startsWith(path ? path + "/" : "")) return true
diff --git a/packages/app/src/pages/index.tsx b/packages/app/src/pages/index.tsx
index 8cb560d8..6890522e 100644
--- a/packages/app/src/pages/index.tsx
+++ b/packages/app/src/pages/index.tsx
@@ -259,9 +259,12 @@ export default function Page() {
             <FileTree path="" onFileClick={handleFileClick} />
           </Tabs.Content>
           <Tabs.Content value="changes" class="grow min-h-0 py-2 bg-background">
-            <div class="text-xs text-text-muted">
+            <Show
+              when={local.file.changes().length}
+              fallback={<div class="px-2 text-xs text-text-muted">No changes yet</div>}
+            >
               <ul class="">
-                <For each={[...local.file.changes()]}>
+                <For each={local.file.changes()}>
                   {(path) => (
                     <li>
                       <button
@@ -278,7 +281,7 @@ export default function Page() {
                   )}
                 </For>
               </ul>
-            </div>
+            </Show>
           </Tabs.Content>
         </Tabs>
       </div>