diff --git a/Pulsar/Features/FileHandlerService.cs b/Pulsar/Features/FileHandlerService.cs
index 2d70e84..436d92d 100644
--- a/Pulsar/Features/FileHandlerService.cs
+++ b/Pulsar/Features/FileHandlerService.cs
@@ -89,6 +89,6 @@ public class FileHandlerService(
         }
             
         logger.LogInformation("Handling file {FileName} with Type {Type}", fileName, handler.GetType().ToString());
-        await handler.HandleFile(path);
+        Task.Run(() => handler.HandleFile(path));
     }
 }
\ No newline at end of file
diff --git a/Pulsar/Features/Journal/JournalService.cs b/Pulsar/Features/Journal/JournalService.cs
index e6d165d..bb9d22c 100644
--- a/Pulsar/Features/Journal/JournalService.cs
+++ b/Pulsar/Features/Journal/JournalService.cs
@@ -9,28 +9,42 @@ public class JournalService
 (
     ILogger<JournalService> logger,
     IOptions<PulsarConfiguration> options,
-    IEventHubContext hub
+    IEventHubContext hub,
+    PulsarContext context
 ) : IJournalService
 {
     public string FileName => FileHandlerService.JournalLogFileName;
     
-    public async Task HandleFile(string filePath)
+    public Task HandleFile(string filePath) => HandleFile(filePath, CancellationToken.None);
+    public async Task HandleFile(string filePath, CancellationToken token)
     {
         if (!FileHelper.ValidateFile(filePath))
         {
             return;
         }
 
-        var file = File.Open(filePath, FileMode.Open, FileAccess.Read, FileShare.ReadWrite);
-        var journals = await JsonSerializer.DeserializeAsync<List<JournalBase>>(file);
+        var file = await File.ReadAllLinesAsync(filePath, Encoding.UTF8, token);
+        var journals = file.Select(line => JsonSerializer.Deserialize<JournalBase>(line)).ToList();
 
-        if (journals == null)
+        
+        var newJournals = new List<JournalBase>();
+        var notBefore = DateTimeOffset.UtcNow.Subtract(TimeSpan.FromHours(6));
+        foreach (var journal in journals)
         {
-            logger.LogWarning("Failed to deserialize status file {FilePath}", filePath);
-            return;
+            if (context.Journals.Any(j => j.Timestamp == journal.Timestamp && j.Event == journal.Event))
+            {
+                continue;
+            }
+
+            context.Journals.Add(journal);
+            
+            if (journal.Timestamp > notBefore)
+            {
+                newJournals.Add(journal);
+            }
         }
 
-        await hub.Clients.All.JournalUpdated(journals);
+        await hub.Clients.All.JournalUpdated(newJournals);
     }
 
     public async Task<List<JournalBase>> Get()
diff --git a/Pulsar/PulsarContext.cs b/Pulsar/PulsarContext.cs
index e2e250f..74787a2 100644
--- a/Pulsar/PulsarContext.cs
+++ b/Pulsar/PulsarContext.cs
@@ -1,8 +1,25 @@
+using Microsoft.Data.Sqlite;
 using Microsoft.EntityFrameworkCore;
+using Observatory.Framework.Files.Journal;
 
 /// <summary>
 /// An in-memory database context for Pulsar.
 /// </summary>
 public class PulsarContext : DbContext
 {
+    public SqliteConnection Connection { get; private set;  }
+    
+    public DbSet<JournalBase> Journals { get; set; }
+    
+    protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
+    {
+        Connection = new SqliteConnection("Data Source=:memory:");
+        optionsBuilder.UseSqlite(Connection);
+    }
+
+    public override void Dispose()
+    {
+        Connection.Dispose();
+        base.Dispose();
+    }
 }
\ No newline at end of file
diff --git a/Pulsar/WebApp/src/lib/Fuel.svelte b/Pulsar/WebApp/src/lib/Fuel.svelte
new file mode 100644
index 0000000..9da6223
--- /dev/null
+++ b/Pulsar/WebApp/src/lib/Fuel.svelte
@@ -0,0 +1,2 @@
+
+<!-- show a horizontal line representing current amount of fuel vs max (default is 32) -->
diff --git a/Pulsar/WebApp/src/lib/JournalLog.svelte b/Pulsar/WebApp/src/lib/JournalLog.svelte
new file mode 100644
index 0000000..d8c19fd
--- /dev/null
+++ b/Pulsar/WebApp/src/lib/JournalLog.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import connection from "./stores/Connection.store";
+
+  let value = $state('');
+
+
+$connection.on("JournalUpdated", (journals) => {
+    console.log(journals);
+    value += `${JSON.stringify(journals)}\n`;
+});
+
+</script>
+
+<h1>Journals:</h1>
+
+<textarea bind:value ></textarea>
+
diff --git a/Pulsar/WebApp/src/lib/MissionStack.svelte b/Pulsar/WebApp/src/lib/MissionStack.svelte
index 58997ea..10e26aa 100644
--- a/Pulsar/WebApp/src/lib/MissionStack.svelte
+++ b/Pulsar/WebApp/src/lib/MissionStack.svelte
@@ -8,7 +8,7 @@
         return response.json();
     };
 
-    const query = useQuery("journal", getData, { staleTime: Infinity });
+    const query = useQuery("journal", getData, { staleTime: Number.POSITIVE_INFINITY });
 </script>
 
 <h1>Mission Stack</h1>
@@ -26,7 +26,7 @@
         {/if}
     {/each}
 {/if}
-
+                        
 <style>
     table {
         table-layout: fixed;
diff --git a/Pulsar/WebApp/src/lib/Ship.svelte b/Pulsar/WebApp/src/lib/Ship.svelte
index 7390d35..d327328 100644
--- a/Pulsar/WebApp/src/lib/Ship.svelte
+++ b/Pulsar/WebApp/src/lib/Ship.svelte
@@ -10,7 +10,7 @@
         return response.json();
     };
 
-    const query = useQuery("modulesinfo", getData, { staleTime: Infinity });
+    const query = useQuery("modulesinfo", getData, { staleTime: Number.POSITIVE_INFINITY });
 </script>
 
 <h1>Ship</h1>
diff --git a/Pulsar/WebApp/src/lib/Status.svelte b/Pulsar/WebApp/src/lib/Status.svelte
index 4f33e63..a37a20b 100644
--- a/Pulsar/WebApp/src/lib/Status.svelte
+++ b/Pulsar/WebApp/src/lib/Status.svelte
@@ -1,86 +1,44 @@
 <script lang="ts">
-    import * as signalR from "@microsoft/signalr"
-    import {onMount} from "svelte";
-    import { useQueryClient } from "@sveltestack/svelte-query";
-    let x: string | null = $state(null);
-    let textarea = $state("");
+    import { onMount } from "svelte";
+    import { statusStore } from "./stores/Status.store";
+    import connection from "./stores/Connection.store";
 
-    interface Welcome {
-        flags:       number;
-        flags2:      number;
-        pips:        number[];
-        guiFocus:    number;
-        fuel:        Fuel;
-        cargo:       number;
-        legalState:  string;
-        balance:     number;
-        destination: Destination;
-        timestamp:   Date;
-        event:       string;
-        FireGroup:   number;
-    }
-
-    interface Destination {
-        system: number;
-        body:   number;
-        name:   string;
-    }
-
-    interface Fuel {
-        fuelMain:      number;
-        fuelReservoir: number;
-    }
-
-    const queryClient = useQueryClient();
-
-    let status: Welcome | null = $state(null);
-
-    const connection = new signalR.HubConnectionBuilder()
-        .withUrl("http://localhost:5000/api/events")
-        .configureLogging(signalR.LogLevel.Information)
-        .build();
+    const x: string | null = $state(null);
 
     onMount(async () => {
-        connection.onclose(async () => {
-            console.log(
-                "Lost connection to Event Hub. Attempting to reconnect...",
-            );
-            await connection.start();
-        });
+        await $connection.start();
 
-        connection.on("StatusUpdated", (message) => {
-            status = message as Welcome;
-            console.log(status);
+        $connection.on("StatusUpdated", (message) => {
+            statusStore.update((s) => {
+                return { ...s, ...message };
+            });
+            console.log($statusStore);
         });
-
-        await connection.start();
     });
 
-    const getStatus = async () => {
-        const response = await fetch("http://localhost:5000/api/status/");
-        status = await response.json() as Welcome
-        textarea = status.event;
-    };
+
+
+
 </script>
 
 <h1>Status</h1>
 
-<button on:click={getStatus}> GetStatus </button>
 <br />
 
-<div>
-    {#if status}
-        <span>{status.event}</span>
-        <span>{status.pips.join(',')}</span>
-        <span>{status.destination.name}</span>
-        <span>{status.guiFocus}</span>
-        <span>{status.cargo}</span>
+<div>   
+    {#if $statusStore}
+        <span>{$statusStore.event}</span>
+        <span>{(($statusStore.fuel?.fuelMain ?? 0) / 32) * 100}%</span>
+        <span>{$statusStore?.pips?.join(',')}</span>        
+        <span>{$statusStore?.destination?.name}</span>
+        <span>{$statusStore.guiFocus}</span>
+        <span>{$statusStore.cargo}</span>   
     {:else}
         <span>No data :(</span>
     {/if}
 </div>
 
-<style>
+    <style>
     div {
         display: flex;
         flex-direction: column;
diff --git a/Pulsar/WebApp/src/lib/stores/Connection.store.ts b/Pulsar/WebApp/src/lib/stores/Connection.store.ts
new file mode 100644
index 0000000..f3f3f2e
--- /dev/null
+++ b/Pulsar/WebApp/src/lib/stores/Connection.store.ts
@@ -0,0 +1,100 @@
+import type {
+	StartStopNotifier,
+	Subscriber,
+	Unsubscriber,
+	Updater,
+	Writable,
+} from "svelte/store";
+import type { HubConnection } from "@microsoft/signalr";
+import {
+	HubConnectionBuilder,
+	HubConnectionState,
+	LogLevel,
+} from "@microsoft/signalr";
+
+type SignalRPayload = { name: string; data: unknown[] };
+type Invalidator<T> = (value?: T) => void;
+type SubscribeInvalidateTuple<T> = [Subscriber<T>, Invalidator<T>];
+type T = HubConnection;
+const noop = () => {};
+
+class ConnectionStore implements Writable<HubConnection> {
+	readonly hub: HubConnection;
+	readonly subscribers: Array<SubscribeInvalidateTuple<T>> = [];
+
+	public ready = false;
+	isLoading: Promise<void> | undefined;
+
+	private start: StartStopNotifier<HubConnection>;
+	private stop: Unsubscriber | undefined | null;
+
+	constructor(
+		value: HubConnection,
+		start: StartStopNotifier<HubConnection> = noop,
+	) {
+		this.hub = value;
+		this.start = start;
+		this.hub.onclose(async () => {
+			console.log("Lost connection to Event Hub. Attempting to reconnect...");
+			await this.hub.start();
+		});
+	}
+
+	public connect() {
+		if (this.hub.state !== HubConnectionState.Disconnected) return;
+		this.isLoading = this.hub.start();
+		this.isLoading
+			.then(() => {
+				this.ready = true;
+			})
+			.catch((e) => {
+				console.log(e);
+			});
+	}
+
+	public set(value: SignalRPayload | HubConnection): Promise<void> {
+		if ("name" in value) {
+			return this.hub.send(value.name, value.data);
+		}
+		return Promise.reject();
+	}
+
+	public update(updater: Updater<HubConnection>): void {
+		updater(this.hub);
+	}
+
+	public subscribe(
+		run: Subscriber<T>,
+		invalidate: Invalidator<T>,
+	): Unsubscriber {
+		const subscriber: SubscribeInvalidateTuple<T> = [run, invalidate];
+		this.subscribers.push(subscriber);
+
+		if (this.subscribers.length === 1) {
+			this.stop = this.start ? this.start(this.set, this.update) ?? noop : noop;
+		}
+
+		run(this.hub);
+
+		return () => {
+			const index = this.subscribers.indexOf(subscriber);
+			if (index !== -1) {
+				this.subscribers.splice(index, 1);
+			}
+			if (this.subscribers.length === 0) {
+				if (this.stop) this.stop();
+				this.stop = null;
+			}
+		};
+	}
+}
+
+const conn = new HubConnectionBuilder()
+	.withUrl("http://localhost:5000/api/events")
+	.configureLogging(LogLevel.Information)
+	.withAutomaticReconnect()
+	.build();
+
+export const connection = new ConnectionStore(conn);
+
+export default connection;
diff --git a/Pulsar/WebApp/src/lib/stores/Status.store.ts b/Pulsar/WebApp/src/lib/stores/Status.store.ts
new file mode 100644
index 0000000..01e0123
--- /dev/null
+++ b/Pulsar/WebApp/src/lib/stores/Status.store.ts
@@ -0,0 +1,5 @@
+
+import { writable } from "svelte/store";
+import type Status from "../../types/api/Status";
+
+export const statusStore = writable<Partial<Status>>({});
\ No newline at end of file
diff --git a/Pulsar/WebApp/src/routes/+layout.svelte b/Pulsar/WebApp/src/routes/+layout.svelte
index d67f483..4bf5207 100644
--- a/Pulsar/WebApp/src/routes/+layout.svelte
+++ b/Pulsar/WebApp/src/routes/+layout.svelte
@@ -1,4 +1,5 @@
 <script>
+  import Fuel from "$lib/Fuel.svelte";
     import {
         QueryClient,
         QueryClientProvider,
@@ -13,6 +14,7 @@
             <!--<li><a href="/settings">Settings</a></li>-->
         </ul>
     </nav>
+    <Fuel />
 </header>
 
 <QueryClientProvider client={queryClient}>
diff --git a/Pulsar/WebApp/src/routes/+page.svelte b/Pulsar/WebApp/src/routes/+page.svelte
index 574ff08..cdf5681 100644
--- a/Pulsar/WebApp/src/routes/+page.svelte
+++ b/Pulsar/WebApp/src/routes/+page.svelte
@@ -2,13 +2,17 @@
     import Status from "$lib/Status.svelte";
     import Ship from "$lib/Ship.svelte";
     import Debug from "$lib/Debug.svelte";
-    import MissionStack from "$lib/MissionStack.svelte";
+    import MissionStack from "$lib/MissionStack.svelte"; 
+    import JournalLog from "$lib/JournalLog.svelte";
 </script>
 
 <section>
     <div>
         <Status />
     </div>
+    <div>
+        <JournalLog />
+    </div>
     <div>
         <!-- <Ship /> -->
     </div>
diff --git a/Pulsar/WebApp/src/types/api/Destination.ts b/Pulsar/WebApp/src/types/api/Destination.ts
new file mode 100644
index 0000000..25d1725
--- /dev/null
+++ b/Pulsar/WebApp/src/types/api/Destination.ts
@@ -0,0 +1,7 @@
+
+export default interface Destination {
+    system: number;
+    body:   number;
+    name:   string;
+}
+
diff --git a/Pulsar/WebApp/src/types/api/Fuel.ts b/Pulsar/WebApp/src/types/api/Fuel.ts
new file mode 100644
index 0000000..b634b91
--- /dev/null
+++ b/Pulsar/WebApp/src/types/api/Fuel.ts
@@ -0,0 +1,5 @@
+
+export default interface Fuel {
+    fuelMain:      number;
+    fuelReservoir: number;
+}
\ No newline at end of file
diff --git a/Pulsar/WebApp/src/types/api/Status.ts b/Pulsar/WebApp/src/types/api/Status.ts
new file mode 100644
index 0000000..0735038
--- /dev/null
+++ b/Pulsar/WebApp/src/types/api/Status.ts
@@ -0,0 +1,17 @@
+import type Destination from "./Destination";
+import type Fuel from "./Fuel";
+
+export default interface Status {
+	flags: number;
+	flags2: number;
+	pips: number[];
+	guiFocus: number;
+	fuel: Fuel;
+	cargo: number;
+	legalState: string;
+	balance: number;
+	destination: Destination;
+	timestamp: Date;
+	event: string;
+	FireGroup: number;
+}