diff --git a/src/lib/components/CommandPalette.svelte b/src/lib/components/CommandPalette.svelte
index 69e787caf..502ed83f9 100644
--- a/src/lib/components/CommandPalette.svelte
+++ b/src/lib/components/CommandPalette.svelte
@@ -326,7 +326,7 @@
 						bind:this={palette}
 						in:fade={{ duration: 100 }}
 						out:fade={{ duration: 100 }}
-						class="mx-auto max-w-2xl transform divide-y divide-zinc-500 divide-opacity-20 overflow-hidden rounded-xl bg-zinc-900 shadow-2xl transition-all border border-zinc-700"
+						class="mx-auto max-w-2xl transform divide-y divide-zinc-500 divide-opacity-20 overflow-hidden rounded-xl border border-zinc-700 bg-zinc-900 shadow-2xl transition-all"
 						style="
 							height: auto;
 							max-height: 420px;
@@ -368,7 +368,7 @@
 								<ul id="commandMenu" class="text-sm text-zinc-400">
 									{#each menuItems as item}
 										{#if item.type == 'divider'}
-											<li class="border-t border-zinc-500 border-opacity-20 my-2" />
+											<li class="my-2 border-t border-zinc-500 border-opacity-20" />
 										{:else}
 											<!-- Active: "bg-zinc-800 text-white" -->
 											<li
@@ -403,7 +403,7 @@
 						in:fade={{ duration: 100 }}
 						out:fade={{ duration: 100 }}
 						bind:this={commitPalette}
-						class="mx-auto max-w-2xl transform overflow-hidden rounded-xl bg-zinc-900 shadow-2xl transition-all border border-zinc-700"
+						class="mx-auto max-w-2xl transform overflow-hidden rounded-xl border border-zinc-700 bg-zinc-900 shadow-2xl transition-all"
 						style="
 							border-width: 0.5px; 
 							border: 0.5px solid rgba(63, 63, 70, 0.50);
@@ -411,11 +411,11 @@
 							background-color: rgba(24, 24, 27, 0.6);
 							"
 					>
-						<div class="w-full border-b border-zinc-700 text-lg text-white mb-4 p-4">
+						<div class="mb-4 w-full border-b border-zinc-700 p-4 text-lg text-white">
 							Commit Your Changes
 						</div>
 						<div
-							class="relative transform overflow-hidden text-left transition-all sm:w-full sm:max-w-sm p-2 m-auto"
+							class="relative m-auto transform overflow-hidden p-2 text-left transition-all sm:w-full sm:max-w-sm"
 						>
 							{#if Object.entries(changedFiles).length > 0}
 								<div>
@@ -431,7 +431,7 @@
 													id="commit-message"
 													bind:this={commitMessageInput}
 													bind:value={commitMessage}
-													class="block w-full rounded-md p-4 border-0 text-zinc-200 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:py-1.5 sm:text-sm sm:leading-6"
+													class="block w-full rounded-md border-0 p-4 text-zinc-200 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:py-1.5 sm:text-sm sm:leading-6"
 												/>
 											</div>
 										</div>
@@ -445,7 +445,7 @@
 										>Commit Your Changes</button
 									>
 								</div>
-								<div class="text-zinc-200 mt-4 py-4">
+								<div class="mt-4 py-4 text-zinc-200">
 									<h3 class="text-base font-semibold text-zinc-200" id="modal-title">
 										Changed Files
 									</h3>
@@ -464,7 +464,7 @@
 									{/each}
 								</div>
 							{:else}
-								<div class="text-white mx-auto text-center">No changes to commit</div>
+								<div class="mx-auto text-center text-white">No changes to commit</div>
 							{/if}
 						</div>
 					</div>
diff --git a/src/lib/components/icons/ContactIcon.svelte b/src/lib/components/icons/ContactIcon.svelte
index bdba7d036..0853b5519 100644
--- a/src/lib/components/icons/ContactIcon.svelte
+++ b/src/lib/components/icons/ContactIcon.svelte
@@ -4,7 +4,7 @@
 	viewBox="0 0 24 24"
 	stroke-width="1.5"
 	stroke="currentColor"
-	class="w-6 h-6"
+	class="h-6 w-6"
 >
 	<path
 		stroke-linecap="round"
diff --git a/src/lib/components/icons/ProjectIcon.svelte b/src/lib/components/icons/ProjectIcon.svelte
index 6d20ec471..966e6fbc0 100644
--- a/src/lib/components/icons/ProjectIcon.svelte
+++ b/src/lib/components/icons/ProjectIcon.svelte
@@ -4,7 +4,7 @@
 	viewBox="0 0 24 24"
 	stroke-width="1.5"
 	stroke="currentColor"
-	class="w-6 h-6"
+	class="h-6 w-6"
 >
 	<path
 		stroke-linecap="round"
diff --git a/src/lib/components/search/RenderedSearchResult.svelte b/src/lib/components/search/RenderedSearchResult.svelte
index c99acb08b..de4afcbe7 100644
--- a/src/lib/components/search/RenderedSearchResult.svelte
+++ b/src/lib/components/search/RenderedSearchResult.svelte
@@ -12,7 +12,7 @@
 			<span class="flex-grow" />
 			<span>{formatDistanceToNow(processedResult.timestamp)} ago</span>
 		</p>
-		<div class="rounded-lg text-[#EBDBB2] bg-[#2F2F33] border border-zinc-700 drop-shadow-lg">
+		<div class="rounded-lg border border-zinc-700 bg-[#2F2F33] text-[#EBDBB2] drop-shadow-lg">
 			{#each processedResult.hunks as hunk, i}
 				{#if i > 0}
 					<div class="border-b border-[#52525B]" />
diff --git a/src/lib/current_project.ts b/src/lib/current_project.ts
index 10024dc0e..e415f67b6 100644
--- a/src/lib/current_project.ts
+++ b/src/lib/current_project.ts
@@ -1,4 +1,4 @@
 import { writable } from 'svelte/store';
 import type { Project } from '$lib/projects';
 
-export const currentProject = writable<Project|undefined>(undefined);
\ No newline at end of file
+export const currentProject = writable<Project | undefined>(undefined);
diff --git a/src/lib/paths.ts b/src/lib/paths.ts
index 217ebbbf9..a12f33869 100644
--- a/src/lib/paths.ts
+++ b/src/lib/paths.ts
@@ -1,12 +1,12 @@
 export function shortPath(path: string, max = 3) {
-  if (path.length < 30) {
-    return path;
-  }
-  const pathParts = path.split('/');
-  const file = pathParts.pop();
-  if (pathParts.length > 0) {
-    const pp = pathParts.map((p) => p.slice(0, max)).join('/');
-    return `${pp}/${file}`;
-  }
-  return file;
-}
\ No newline at end of file
+	if (path.length < 30) {
+		return path;
+	}
+	const pathParts = path.split('/');
+	const file = pathParts.pop();
+	if (pathParts.length > 0) {
+		const pp = pathParts.map((p) => p.slice(0, max)).join('/');
+		return `${pp}/${file}`;
+	}
+	return file;
+}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 981be2f7e..a1c44f872 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -188,17 +188,17 @@
 											</div>
 										</div>
 										<div
-											class="flex-grow-0 rounded-b-lg border-t border-zinc-600 bg-zinc-600 px-3 py-1 text-sm text-zinc-300"
+											class="flex-grow-0 rounded-b-lg border-t border-zinc-600 bg-zinc-600 px-3 py-1 font-mono text-sm text-zinc-300"
 										>
 											{#if project.api}
 												<div class="flex flex-row items-center space-x-2 ">
 													<div class="h-2 w-2 rounded-full bg-green-700" />
-													<div class="text-zinc-400">syncing</div>
+													<div class="text-zinc-400">Backed-up</div>
 												</div>
 											{:else}
 												<div class="flex flex-row items-center space-x-2 ">
 													<div class="h-2 w-2 rounded-full bg-gray-400" />
-													<div class="text-zinc-400">offline</div>
+													<div class="text-zinc-400">Offline</div>
 												</div>
 											{/if}
 										</div>
diff --git a/src/routes/projects/[projectId]/+layout.svelte b/src/routes/projects/[projectId]/+layout.svelte
index 84a46cc8e..5609a9194 100644
--- a/src/routes/projects/[projectId]/+layout.svelte
+++ b/src/routes/projects/[projectId]/+layout.svelte
@@ -126,7 +126,7 @@
 					</a>
 					<a target="_blank" rel="noreferrer" href={projectUrl($project)} class="flex">
 						<div class="leading-5">Open in GitButler Cloud</div>
-						<div class="icon h-5 w-5 ml-1">
+						<div class="icon ml-1 h-5 w-5">
 							<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
 								><path
 									fill="#52525B"
diff --git a/src/routes/projects/[projectId]/+layout.ts b/src/routes/projects/[projectId]/+layout.ts
index 257a7440d..7b06cbeea 100644
--- a/src/routes/projects/[projectId]/+layout.ts
+++ b/src/routes/projects/[projectId]/+layout.ts
@@ -7,6 +7,7 @@ import type { Status } from '$lib/statuses';
 import { asyncDerived } from '@square/svelte-store';
 import type { Delta } from '$lib/deltas';
 import { startOfDay } from 'date-fns';
+import type { Activity } from '$lib/sessions';
 
 export const prerender = false;
 export const load: LayoutLoad = async ({ parent, params }) => {
@@ -22,6 +23,18 @@ export const load: LayoutLoad = async ({ parent, params }) => {
 	const orderedSessions = derived(sessions, (sessions) => {
 		return sessions.slice().sort((a, b) => a.meta.startTimestampMs - b.meta.startTimestampMs);
 	});
+	const recentActivity = derived(sessions, (sessions) => {
+		const recentActivity: Activity[] = [];
+		sessions.forEach((session) => {
+			session.activity.forEach((activity) => {
+				recentActivity.push(activity);
+			});
+		});
+		const activitySorted = recentActivity.sort((a, b) => {
+			return b.timestampMs - a.timestampMs;
+		});
+		return activitySorted.slice(0, 20);
+	});
 
 	let dateSessions = readable<Record<number, UISession[]>>({});
 	if (!building) {
@@ -80,6 +93,7 @@ export const load: LayoutLoad = async ({ parent, params }) => {
 		projectId: params.projectId,
 		sessions: orderedSessions,
 		dateSessions: dateSessions,
-		filesStatus: filesStatus
+		filesStatus: filesStatus,
+		recentActivity: recentActivity
 	};
 };
diff --git a/src/routes/projects/[projectId]/+page.svelte b/src/routes/projects/[projectId]/+page.svelte
index 308e2daec..3f35e9a25 100644
--- a/src/routes/projects/[projectId]/+page.svelte
+++ b/src/routes/projects/[projectId]/+page.svelte
@@ -10,6 +10,7 @@
 	$: project = data.project;
 	$: dateSessions = data.dateSessions as Readable<Record<number, UISession[]>>;
 	$: filesStatus = data.filesStatus;
+	$: recentActivity = data.recentActivity as Readable<Activity[]>;
 
 	// convert a list of timestamps to a sparkline
 	function timestampsToSpark(tsArray: number[]) {
@@ -85,25 +86,6 @@
 			})
 			.slice(0, 3);
 	}
-
-	function recentActivity(dateSessions: Record<string, UISession[]>) {
-		let recentActivity: Activity[] = [];
-		if (dateSessions) {
-			Object.entries(dateSessions).forEach(([date, sessions]) => {
-				sessions.forEach((session: UISession) => {
-					if (session.session) {
-						session.session.activity.forEach((activity) => {
-							recentActivity.push(activity);
-						});
-					}
-				});
-			});
-		}
-		let activitySorted = recentActivity.sort((a, b) => {
-			return b.timestampMs - a.timestampMs;
-		});
-		return activitySorted.slice(0, 20);
-	}
 </script>
 
 <div class="project-section-component" style="height: calc(100vh - 118px); overflow: hidden;">
@@ -116,10 +98,10 @@
 				{$project?.title} <span class="ml-2 text-zinc-600">Project</span>
 			</h1>
 			<div class="mt-4">
-				<div class="recent-file-changes-container w-full h-full">
+				<div class="recent-file-changes-container h-full w-full">
 					<h2 class="mb-4 px-8 text-lg font-bold text-zinc-300">Recent File Changes</h2>
 					{#if $dateSessions === undefined}
-						<div class="p-8 text-zinc-400 text-center">Loading...</div>
+						<div class="p-8 text-center text-zinc-400">Loading...</div>
 					{:else}
 						<div
 							class="flex flex-col space-y-4 overflow-y-auto px-8 pb-8"
@@ -136,7 +118,7 @@
 										})}
 									</div>
 									<div
-										class="results-card rounded bg-[#2F2F33] border border-zinc-700 p-4 drop-shadow-lg"
+										class="results-card rounded border border-zinc-700 bg-[#2F2F33] p-4 drop-shadow-lg"
 									>
 										{#each Object.entries(fileSessions) as filetime}
 											<div class="flex flex-row justify-between">
@@ -162,9 +144,9 @@
 				<h2 class="mb-2 text-lg font-bold text-zinc-300">Work in Progress</h2>
 				{#if $filesStatus.length == 0}
 					<div
-						class="flex align-middle rounded border border-green-700 bg-green-900 p-4 text-green-400"
+						class="flex rounded border border-green-700 bg-green-900 p-4 align-middle text-green-400"
 					>
-						<div class="icon h-5 w-5 mr-2">
+						<div class="icon mr-2 h-5 w-5">
 							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
 								><path
 									fill="#4ADE80"
@@ -199,12 +181,12 @@
 				style="height: calc(100vh - 110px); overflow-y: auto;"
 			>
 				<h2 class="text-lg font-bold text-zinc-300">Recent Activity</h2>
-				{#each recentActivity($dateSessions) as activity}
+				{#each $recentActivity as activity}
 					<div
 						class="recent-activity-card mt-4 mb-1 rounded border border-zinc-700 text-zinc-400 drop-shadow-lg"
 					>
-						<div class="flex flex-col p-3 rounded bg-[#2F2F33]">
-							<div class="flex flex-row justify-between text-zinc-500 pb-2">
+						<div class="flex flex-col rounded bg-[#2F2F33] p-3">
+							<div class="flex flex-row justify-between pb-2 text-zinc-500">
 								<div class="">
 									{new Date(activity.timestampMs).toLocaleDateString('en-us', {
 										weekday: 'short',
diff --git a/src/routes/projects/[projectId]/timeline/+page.svelte b/src/routes/projects/[projectId]/timeline/+page.svelte
index a148392e7..310ff913a 100644
--- a/src/routes/projects/[projectId]/timeline/+page.svelte
+++ b/src/routes/projects/[projectId]/timeline/+page.svelte
@@ -154,7 +154,7 @@
 			<!-- Day -->
 			<div
 				id={dateMilliseconds}
-				class="session-day-component flex flex-col rounded-lg bg-[#2F2F33] border border-zinc-700"
+				class="session-day-component flex flex-col rounded-lg border border-zinc-700 bg-[#2F2F33]"
 				class:min-w-full={selection.dateMilliseconds == +dateMilliseconds}
 			>
 				<div