diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index f6fb717..2d911f9 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -98,7 +98,7 @@
         "resizable": true,
         "title": "BufPiv",
         "hiddenTitle": true,
-        "width": 800,
+        "width": 1200,
         "titleBarStyle": "Overlay",
         "fileDropEnabled": false
       }
diff --git a/src/app/app.component.html b/src/app/app.component.html
index cfd467d..ffdb999 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -47,6 +47,7 @@
     <app-editor
       [selectedMessage]="selectedMessage()!"
       [showRaw]="previewOpen()"
+      [selectedFile]="selectedFile()"
     ></app-editor>
     }
   </mat-sidenav-content>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 377ead7..f02ef30 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -15,7 +15,6 @@ import {
 } from './file-tree/file-tree.component';
 import { ProtoMessage } from './model/proto-message.model';
 import { ProtoDefinitionSelectorComponent } from './proto-definition-selector/proto-definition-selector.component';
-import { readTextFile } from '@tauri-apps/api/fs';
 const mobileBreakpoints = [Breakpoints.Handset, Breakpoints.TabletPortrait];
 
 @Component({
@@ -37,7 +36,7 @@ const mobileBreakpoints = [Breakpoints.Handset, Breakpoints.TabletPortrait];
   ],
 })
 export class AppComponent {
-  protected selectedFileContents = signal<string | undefined>(undefined);
+  protected selectedFile = signal<string | undefined>(undefined);
   protected selectedMessage = signal<ProtoMessage | undefined>(undefined);
   protected rightSideOpen = signal(true);
   protected leftSideOpen = signal(true);
@@ -60,7 +59,7 @@ export class AppComponent {
 
   protected async fileSelected(file: FileOrFolder) {
     try {
-      this.selectedFileContents.set(await readTextFile(file.path));
+      this.selectedFile.set(file.path);
     } catch (err) {
       console.error(err);
       alert(
diff --git a/src/app/editor/editor.component.ts b/src/app/editor/editor.component.ts
index b803dbb..455a326 100644
--- a/src/app/editor/editor.component.ts
+++ b/src/app/editor/editor.component.ts
@@ -3,18 +3,18 @@ import {
   Component,
   ElementRef,
   SecurityContext,
-  computed,
   effect,
   input,
   signal,
   viewChild,
 } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { DomSanitizer } from '@angular/platform-browser';
+import { readTextFile } from '@tauri-apps/api/fs';
 import hljs from 'highlight.js/lib/core';
 import { ProtoMessage } from '../model/proto-message.model';
 import { ProtoFieldComponent } from './proto-field/proto-field.component';
-import { DomSanitizer } from '@angular/platform-browser';
-import { MatButtonModule } from '@angular/material/button';
-import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-editor',
@@ -24,8 +24,7 @@ import { MatSnackBar } from '@angular/material/snack-bar';
   styleUrl: './editor.component.scss',
 })
 export class EditorComponent {
-  // TODO: This needs to be reworked so we have a local property and implement some kind of auto-save
-  fileContents = input<string>();
+  selectedFile = input<string>();
   selectedMessage = input.required<ProtoMessage>();
 
   showRaw = input<boolean>(true);
@@ -63,6 +62,28 @@ export class EditorComponent {
       },
       { allowSignalWrites: true }
     );
+
+    effect(async () => {
+      const selectedFile = this.selectedFile();
+      console.log('selected file' + selectedFile);
+      if (selectedFile) {
+        const fileContents = await readTextFile(selectedFile);
+        try {
+          const parsed = JSON.parse(fileContents);
+          this.values.set(parsed);
+        } catch (err) {
+          console.error(
+            `Failed to parse contents of file ${selectedFile}`,
+            err
+          );
+          this.snackBar.open(
+            `Failed to parse contents of file ${selectedFile}, please check the file is correctly formatted`,
+            'Dismiss',
+            { duration: 5000 }
+          );
+        }
+      }
+    });
   }
 
   protected updateValue(key: string, value: any) {
diff --git a/src/app/file-tree/file-tree.component.html b/src/app/file-tree/file-tree.component.html
index 07c8ec5..de5fcd3 100644
--- a/src/app/file-tree/file-tree.component.html
+++ b/src/app/file-tree/file-tree.component.html
@@ -1,4 +1,6 @@
-<h2>@if(workspaceName()) {workspaceName()} @else { No Worspace Selected}</h2>
+<h2>
+  @if(workspaceName()) { {{ workspaceName() }} } @else { No Worspace Selected}
+</h2>
 @if(!selectedDirectory()) {
 <div>
   <button mat-button (click)="selectDirectory()" style="margin: auto">
diff --git a/src/app/proto-definition-selector/proto-definition-selector.component.ts b/src/app/proto-definition-selector/proto-definition-selector.component.ts
index 9168803..ff2f3ca 100644
--- a/src/app/proto-definition-selector/proto-definition-selector.component.ts
+++ b/src/app/proto-definition-selector/proto-definition-selector.component.ts
@@ -160,8 +160,10 @@ export class ProtoDefinitionSelectorComponent {
         return;
       }
       const parsed = JSON.parse(fileContents) as ProtoMessage[];
-      this.allProtoFiles.set(parsed);
-      this.selectedDefinition.set(parsed);
+      this.allProtoFiles.set(
+        parsed.sort((a, b) => a.name.localeCompare(b.name))
+      );
+      this.selectedDefinition.set(this.allProtoFiles());
       this.currentFiles.set([]);
       for (const message of parsed) {
         if (