diff --git a/Dockerfile b/Dockerfile
index 91e52cb7..974635eb 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -5,6 +5,7 @@ COPY app/client/package*.json ./
 RUN npm install
 COPY app/client/ ./
 ENV PUBLIC_API_BASE_URL=/
+ENV PUBLIC_DEMO_MODE=false
 ENV NODE_ENV=production
 RUN npm run build
 
diff --git a/app/client/package.json b/app/client/package.json
index 54785b13..5fb3e570 100644
--- a/app/client/package.json
+++ b/app/client/package.json
@@ -34,6 +34,7 @@
 		"chart.js": "^4.5.0",
 		"dayjs": "^1.11.13",
 		"dot-env": "^0.0.1",
+		"svelte-loading-spinners": "^0.3.6",
 		"svelte5-chartjs": "^1.0.0"
 	}
 }
diff --git a/app/client/src/components/auth/PinInput.svelte b/app/client/src/components/auth/PinInput.svelte
index 6fdd6e93..c93a4d11 100644
--- a/app/client/src/components/auth/PinInput.svelte
+++ b/app/client/src/components/auth/PinInput.svelte
@@ -1,10 +1,8 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
-
 	let pin = Array(6).fill('');
 	let inputs: HTMLInputElement[] = [];
 
-	const dispatch = createEventDispatcher();
+	const { complete } = $props();
 
 	function handleInput(event: Event, index: number) {
 		const input = event.target as HTMLInputElement;
@@ -21,7 +19,7 @@
 		}
 
 		if (pin.every((digit) => digit !== '')) {
-			dispatch('complete', pin.join(''));
+			complete(pin.join(''));
 		}
 	}
 
@@ -34,18 +32,23 @@
 
 <div class="flex justify-center space-x-2">
 	{#each pin as _, i}
-								<input
+		<input
 			bind:this={inputs[i]}
 			type="tel"
 			inputmode="numeric"
 			pattern="[0-9]*"
 			maxlength="1"
-			class="h-10 w-10 rounded-md border-2 border-gray-300 bg-white text-center text-xl text-gray-900 focus:border-blue-500 focus:ring-blue-500 sm:h-12 sm:w-12 sm:text-2xl
-				dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 dark:focus:border-blue-400 dark:focus:ring-blue-400"
-			style="-webkit-text-security: disc;"
-			on:input={(e) => handleInput(e, i)}
-			on:keydown={(e) => handleKeydown(e, i)}
+			oninput={(e) => handleInput(e, i)}
+			onkeydown={(e) => handleKeydown(e, i)}
 			aria-label={`PIN digit ${i + 1}`}
 		/>
 	{/each}
 </div>
+
+<style>
+	@reference "../../styles/app.css";
+	input {
+		@apply h-10 w-10 rounded-md border-2 border-gray-300 bg-white text-center text-xl text-gray-900 focus:border-blue-500 focus:ring-blue-500 sm:h-12 sm:w-12 sm:text-2xl dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 dark:focus:border-blue-400 dark:focus:ring-blue-400;
+		-webkit-text-security: disc;
+	}
+</style>
diff --git a/app/client/src/components/chart/ChartCard.svelte b/app/client/src/components/chart/ChartCard.svelte
index 502e8b5a..ec75ab19 100644
--- a/app/client/src/components/chart/ChartCard.svelte
+++ b/app/client/src/components/chart/ChartCard.svelte
@@ -1,8 +1,5 @@
 <script lang="ts">
-	export let title: string;
-	export let chartData: any;
-	export let ChartComponent: any;
-	export let options: any = {};
+	const { title, chartData, options, ChartComponent } = $props();
 </script>
 
 <div
diff --git a/app/client/src/components/common/FormField.svelte b/app/client/src/components/common/FormField.svelte
index 419327c4..34b06ae6 100644
--- a/app/client/src/components/common/FormField.svelte
+++ b/app/client/src/components/common/FormField.svelte
@@ -1,14 +1,17 @@
 <script lang="ts">
-	export let id = '';
-	export let type: string = 'text';
-	export let placeholder: string = '';
-	export let value: any;
-	export let icon: any = null;
-	export let required: boolean = false;
-	export let ariaLabel: string = '';
-	export let disabled: boolean = false;
-	export let inputClass: string = '';
-	export let onInput: ((e: Event) => void) | undefined = undefined;
+	let {
+		id,
+		type = 'text',
+		placeholder = '',
+		value = $bindable(),
+		icon = null,
+		required = false,
+		ariaLabel = '',
+		disabled = false,
+		inputClass = '',
+		onInput = undefined
+	} = $props();
+	const Icon = icon;
 </script>
 
 <div class="mb-6">
@@ -22,14 +25,21 @@
 			{required}
 			aria-label={ariaLabel}
 			{disabled}
-			on:input={onInput}
+			oninput={onInput}
+			autocomplete="off"
+			step=".01"
 		/>
 		{#if icon}
-			<svelte:component
-				this={icon}
+			<Icon
 				class="absolute top-1/2 left-4 h-6 w-6 -translate-y-1/2 text-gray-400 dark:text-gray-500"
 				aria-hidden="true"
 			/>
 		{/if}
 	</div>
 </div>
+
+<style>
+	::-webkit-calendar-picker-indicator {
+		filter: contrast(0.2);
+	}
+</style>
diff --git a/app/client/src/components/common/FormSubmitButton.svelte b/app/client/src/components/common/FormSubmitButton.svelte
new file mode 100644
index 00000000..64d7607e
--- /dev/null
+++ b/app/client/src/components/common/FormSubmitButton.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Jumper } from 'svelte-loading-spinners';
+
+	const { text, loading } = $props();
+</script>
+
+<div class="flex justify-center">
+	{#if !loading}
+		<button
+			type="submit"
+			class="flex cursor-pointer gap-2 rounded-lg bg-blue-600 px-4 py-2 text-lg font-semibold text-white shadow-md dark:text-blue-200"
+			disabled={loading}
+			aria-busy={loading}
+		>
+			<span>{text}</span>
+		</button>
+	{:else}
+		<Jumper size="40" color="#155dfc" unit="px" duration="2s" />
+	{/if}
+</div>
diff --git a/app/client/src/components/common/ModalContainer.svelte b/app/client/src/components/common/ModalContainer.svelte
new file mode 100644
index 00000000..4cb6e68c
--- /dev/null
+++ b/app/client/src/components/common/ModalContainer.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { scale } from 'svelte/transition';
+
+	const { onclose, children, title, loading } = $props();
+</script>
+
+<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
+	<div
+		in:scale={{ duration: 500 }}
+		class="relative max-h-[90vh] w-full max-w-xl overflow-y-auto rounded-2xl bg-white p-10 shadow-2xl dark:bg-gray-800"
+	>
+		<button
+			type="button"
+			class="absolute top-6 right-6 rounded-full bg-gray-100 p-2 text-gray-400 transition hover:text-gray-700 dark:bg-gray-700 dark:text-gray-300 dark:hover:text-white"
+			onclick={() => onclose()}
+			aria-label="Close"
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-6 w-6"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M6 18L18 6M6 6l12 12"
+				/>
+			</svg>
+		</button>
+		<h2 class="mb-2 text-left text-3xl font-semibold text-gray-900 dark:text-gray-100">
+			{title}
+		</h2>
+		<div class="mb-8 border-b border-gray-200 dark:border-gray-700"></div>
+		{@render children()}
+	</div>
+</div>
diff --git a/app/client/src/components/common/TabContainer.svelte b/app/client/src/components/common/TabContainer.svelte
new file mode 100644
index 00000000..3aa4fe33
--- /dev/null
+++ b/app/client/src/components/common/TabContainer.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	const { title, children } = $props();
+</script>
+
+<div
+	class="rounded-lg bg-gray-50 p-4 dark:bg-gray-800"
+	role="tabpanel"
+	aria-labelledby="dashboard-tab"
+>
+	<h2 class="mb-6 text-2xl font-bold text-gray-900 dark:text-gray-100">
+		{title}
+	</h2>
+	{@render children()}
+</div>
diff --git a/app/client/src/components/common/ThemeToggle.svelte b/app/client/src/components/common/ThemeToggle.svelte
index 248227c0..0a77f26c 100644
--- a/app/client/src/components/common/ThemeToggle.svelte
+++ b/app/client/src/components/common/ThemeToggle.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
+	import { darkModeStore } from '$lib/stores/dark-mode';
 	import { Moon, Sun } from '@lucide/svelte';
 	let darkMode = $state(false);
 
@@ -7,19 +8,22 @@
 		const storedDark = localStorage.getItem('darkMode');
 		darkMode = storedDark === 'true';
 		document.documentElement.classList.toggle('dark', storedDark === 'true');
+		darkModeStore.set(storedDark === 'true');
 	}
+
 	function toggleDarkMode() {
 		darkMode = !darkMode;
 		document.documentElement.classList.toggle('dark', darkMode);
 		if (browser) {
 			localStorage.setItem('darkMode', darkMode ? 'true' : 'false');
 		}
+		darkModeStore.set(darkMode);
 	}
 </script>
 
 <button
 	type="button"
-	class="ml-auto flex items-center gap-2 rounded-full bg-gray-200 p-2 shadow transition-colors dark:bg-gray-700"
+	class="ml-auto flex items-center gap-2 rounded-full bg-gray-200 p-0.5 shadow transition-colors focus:bg-blue-600 dark:bg-gray-700"
 	onclick={toggleDarkMode}
 	aria-label="Toggle dark mode"
 >
@@ -27,20 +31,17 @@
 	<div class="relative flex items-center">
 		<!-- Switch background -->
 		<span
-			class="inline-block h-6 w-12 rounded-full transition-colors duration-300"
-			class:!bg-blue-500={darkMode}
-			class:!bg-gray-400={!darkMode}
-			style="background-color: {darkMode ? '#facc15' : '#d1d5db'}"
+			class="inline-block h-5 w-10 rounded-full bg-gray-400 transition-colors duration-300 dark:bg-gray-800"
 		></span>
 		<!-- Switch knob -->
 		<span
-			class="absolute top-0 left-0 flex h-6 w-6 items-center justify-center rounded-full bg-white shadow transition-transform duration-300"
-			style="transform: translateX({darkMode ? '24px' : '0px'});"
+			class="absolute top-0 left-0 flex h-5 w-5 items-center justify-center rounded-full bg-white shadow transition-transform duration-300 dark:bg-black"
+			style="transform: translateX({darkMode ? '20px' : '0px'});"
 		>
 			{#if darkMode}
-				<Moon class="h-4 w-4 text-yellow-600" />
+				<Moon class="h-3 w-3 text-white" />
 			{:else}
-				<Sun class="h-4 w-4 text-yellow-500" />
+				<Sun class="h-3 w-3 text-black" />
 			{/if}
 		</span>
 	</div>
diff --git a/app/client/src/components/fuel/FuelLogForm.svelte b/app/client/src/components/fuel/FuelLogForm.svelte
new file mode 100644
index 00000000..dc16bfe7
--- /dev/null
+++ b/app/client/src/components/fuel/FuelLogForm.svelte
@@ -0,0 +1,160 @@
+<script lang="ts">
+	import FormSubmitButton from '$components/common/FormSubmitButton.svelte';
+	import { env } from '$env/dynamic/public';
+	import { simulateNetworkDelay } from '$lib/utils/dev';
+	import { formatDate, getCurrencySymbol } from '$lib/utils/formatting';
+	import FormField from '../common/FormField.svelte';
+	import { Calendar1, Gauge, Fuel, FileText, BadgeDollarSign } from '@lucide/svelte';
+
+	let {
+		vehicleId,
+		logToEdit,
+		modalVisibility = $bindable(),
+		loading = false,
+		editMode = false,
+		callback
+	} = $props();
+
+	let refill = $state({
+		date: '',
+		odometer: '',
+		fuelAmount: '',
+		cost: '',
+		notes: ''
+	});
+
+	let status = $state<{
+		message: string | null;
+		type: 'ERROR' | 'SUCCESS' | null;
+	}>({
+		message: null,
+		type: null
+	});
+
+	async function persistLog() {
+		status.message = '';
+		if (!vehicleId) {
+			status.message = 'No vehicle selected.';
+			status.type = 'ERROR';
+			return;
+		}
+		if (!refill.date || !refill.odometer || !refill.fuelAmount || !refill.cost) {
+			status.message = 'Please fill in all required fields.';
+			status.type = 'ERROR';
+			return;
+		}
+		try {
+			if (loading) return; // Prevent multiple submissions
+			loading = true;
+			status.message = null;
+			status.type = null;
+			// await simulateNetworkDelay(2000); // Simulate network delay for development
+			const response = await fetch(
+				`${env.PUBLIC_API_BASE_URL || ''}/api/vehicles/${vehicleId}/fuel-logs/${editMode ? logToEdit.id : ''}`,
+				{
+					method: `${editMode ? 'PUT' : 'POST'}`,
+					headers: {
+						'Content-Type': 'application/json',
+						'X-User-PIN': localStorage.getItem('userPin') || ''
+					},
+					body: JSON.stringify({
+						date: refill.date,
+						odometer: parseFloat(refill.odometer),
+						fuelAmount: parseFloat(refill.fuelAmount),
+						cost: parseFloat(refill.cost),
+						notes: refill.notes
+					})
+				}
+			);
+			if (response.ok) {
+				status.message = 'Fuel refill logged successfully.';
+				status.type = 'SUCCESS';
+				Object.assign(refill, {
+					date: '',
+					odometer: '',
+					fuelAmount: '',
+					cost: '',
+					notes: ''
+				});
+			} else {
+				const data = await response.json();
+				status.message = data?.message || 'Failed to log fuel refill.';
+				status.type = 'ERROR';
+			}
+		} catch (err) {
+			status.message = 'Network error. Please try again.';
+			status.type = 'ERROR';
+		} finally {
+			loading = false;
+			if (status.type === 'SUCCESS') {
+				modalVisibility = false; // Close modal on success
+				callback(true);
+			}
+		}
+	}
+	$effect(() => {
+		Object.assign(refill, logToEdit);
+	});
+</script>
+
+<form class="space-y-6" onsubmit={persistLog} aria-labelledby="fuel-refill-form-title">
+	<FormField
+		id="date"
+		type="date"
+		placeholder="Date"
+		bind:value={refill.date}
+		icon={Calendar1}
+		required={true}
+		ariaLabel="Refill Date"
+	/>
+	<FormField
+		id="odometer"
+		type="number"
+		placeholder="Odometer Reading"
+		bind:value={refill.odometer}
+		icon={Gauge}
+		required={true}
+		ariaLabel="Odometer Reading"
+		inputClass="step-0.01"
+	/>
+	<FormField
+		id="fuelAmount"
+		type="number"
+		placeholder="Fuel Amount (Litres)"
+		bind:value={refill.fuelAmount}
+		icon={Fuel}
+		required={true}
+		ariaLabel="Fuel Amount"
+		inputClass="step-0.01"
+	/>
+	<FormField
+		id="cost"
+		type="number"
+		placeholder={`Cost ( ${getCurrencySymbol()} )`}
+		bind:value={refill.cost}
+		icon={BadgeDollarSign}
+		required={true}
+		ariaLabel="Fuel Cost"
+		inputClass="step-0.01"
+	/>
+	<FormField
+		id="notes"
+		type="text"
+		placeholder="Notes (optional)"
+		bind:value={refill.notes}
+		icon={FileText}
+		ariaLabel="Notes"
+	/>
+	<FormSubmitButton text={editMode ? 'Save Log' : 'Add Log'} {loading} />
+</form>
+{#if status.message}
+	<p
+		class={`mt-4 text-center text-sm ${status.type === 'ERROR' ? 'text-red-500 dark:text-red-400' : 'text-green-500 dark:text-green-400'}`}
+	>
+		{#if status.type === 'ERROR'}
+			<span class="font-semibold">Error:</span> {status.message}
+		{:else}
+			{status.message}
+		{/if}
+	</p>
+{/if}
diff --git a/app/client/src/components/fuel/FuelLogList.svelte b/app/client/src/components/fuel/FuelLogList.svelte
new file mode 100644
index 00000000..8209f7cf
--- /dev/null
+++ b/app/client/src/components/fuel/FuelLogList.svelte
@@ -0,0 +1,165 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { env } from '$env/dynamic/public';
+	import { Pencil, Trash2 } from '@lucide/svelte';
+	import {
+		formatCurrency,
+		formatDate,
+		formatVolume,
+		formatMileage,
+		formatDistance
+	} from '$lib/utils/formatting';
+
+	import { fuelLogModelStore } from '$lib/stores/fuel-log';
+
+	const { vehicleId } = $props();
+
+	interface FuelLog {
+		id: number;
+		date: string;
+		odometer: number;
+		fuelAmount: number;
+		cost: number;
+		notes?: string;
+		mileage?: number;
+	}
+
+	let fuelLogs: FuelLog[] = $state([]);
+	let loading = $state(true);
+	let error = $state('');
+
+	$effect(() => {
+		if (!vehicleId) {
+			error = 'Vehicle ID is required.';
+			loading = false;
+		} else {
+			fetchFuelLogs();
+		}
+	});
+
+	async function fetchFuelLogs() {
+		loading = true;
+		error = '';
+		try {
+			const response = await fetch(
+				`${env.PUBLIC_API_BASE_URL || ''}/api/vehicles/${vehicleId}/fuel-logs`,
+				{
+					headers: {
+						'X-User-PIN': localStorage.getItem('userPin') || ''
+					}
+				}
+			);
+			if (response.ok) {
+				fuelLogs = await response.json();
+			} else {
+				const data = await response.json();
+				error = data.message || 'Failed to fetch fuel logs.';
+			}
+		} catch (e) {
+			console.error('Failed to connect to the server.', e);
+			error = 'Failed to connect to the server.';
+		}
+		loading = false;
+	}
+
+	async function deleteFuelLog(logId: number) {
+		if (!confirm('Are you sure you want to delete this Fuel log?')) {
+			return;
+		}
+		try {
+			const response = await fetch(
+				`${env.PUBLIC_API_BASE_URL || ''}/api/vehicles/${vehicleId}/fuel-logs/${logId}`,
+				{
+					method: 'DELETE',
+					headers: {
+						'X-User-PIN': localStorage.getItem('userPin') || ''
+					}
+				}
+			);
+			if (response.ok) {
+				fuelLogs = fuelLogs.filter((log) => log.id !== logId);
+			} else {
+				const data = await response.json();
+				error = data.message || 'Failed to delete fuel log.';
+			}
+		} catch (e) {
+			console.error('Failed to connect to the server.', e);
+			error = 'Failed to connect to the server.';
+		}
+	}
+
+	onMount(() => {
+		fetchFuelLogs();
+	});
+</script>
+
+{#if loading}
+	<p>Loading fuel logs...</p>
+{:else if error}
+	<p class="text-red-500">Error: {error}</p>
+{:else if fuelLogs.length === 0}
+	<p>No fuel refill logs found for this vehicle.</p>
+{:else}
+	<div class="overflow-x-auto">
+		<table class="min-w-full overflow-hidden rounded-lg bg-white shadow dark:bg-gray-800">
+			<thead class="bg-gray-200 dark:bg-gray-700">
+				<tr>
+					<th class="px-4 py-2 text-left font-semibold text-gray-600 dark:text-gray-300">Date</th>
+					<th class="px-4 py-2 text-left font-semibold text-gray-600 dark:text-gray-300"
+						>Odometer</th
+					>
+					<th class="px-4 py-2 text-left font-semibold text-gray-600 dark:text-gray-300"
+						>Fuel Amount</th
+					>
+					<th class="px-4 py-2 text-left font-semibold text-gray-600 dark:text-gray-300">Cost</th>
+					<th class="px-4 py-2 text-left font-semibold text-gray-600 dark:text-gray-300">Mileage</th
+					>
+					<th class="px-4 py-2 text-left font-semibold text-gray-600 dark:text-gray-300">Notes</th>
+					<th class="px-4 py-2 text-left font-semibold text-gray-600 dark:text-gray-300">Actions</th
+					>
+				</tr>
+			</thead>
+			<tbody>
+				{#each fuelLogs as log (log.id)}
+					<tr class="border-b border-gray-200 last:border-b-0 dark:border-gray-700">
+						<td class="px-4 py-2 text-gray-800 dark:text-gray-200">{formatDate(log.date)}</td>
+						<td class="px-4 py-2 text-gray-800 dark:text-gray-200"
+							>{formatDistance(log.odometer)}</td
+						>
+						<td class="px-4 py-2 text-gray-800 dark:text-gray-200"
+							>{formatVolume(log.fuelAmount)}</td
+						>
+						<td class="px-4 py-2 text-gray-800 dark:text-gray-200">{formatCurrency(log.cost)}</td>
+						<td class="styled-text px-4 py-2 text-gray-800 dark:text-gray-200"
+							>{log.mileage ? formatMileage(log.mileage) : '-'}</td
+						>
+						<td class="px-4 py-2 text-gray-800 dark:text-gray-200">{log.notes || '-'}</td>
+						<td class="px-4 py-2 text-gray-800 dark:text-gray-200">
+							<button
+								class="rounded-full p-2 transition-colors hover:bg-gray-100 dark:hover:bg-gray-700"
+								onclick={() =>
+									fuelLogModelStore.show(vehicleId, log, true, (status: boolean) => {
+										if (status) {
+											fetchFuelLogs();
+										}
+									})}
+							>
+								<Pencil
+									class="h-5 w-5 text-gray-500 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400"
+								/>
+							</button>
+							<button
+								class="rounded-full p-2 transition-colors hover:bg-gray-100 dark:hover:bg-gray-700"
+								onclick={() => deleteFuelLog(log.id)}
+							>
+								<Trash2
+									class="h-5 w-5 text-gray-500 hover:text-red-600 dark:text-gray-300 dark:hover:text-red-400"
+								/>
+							</button>
+						</td>
+					</tr>
+				{/each}
+			</tbody>
+		</table>
+	</div>
+{/if}
diff --git a/app/client/src/components/fuel/FuelLogModal.svelte b/app/client/src/components/fuel/FuelLogModal.svelte
new file mode 100644
index 00000000..e41d1b71
--- /dev/null
+++ b/app/client/src/components/fuel/FuelLogModal.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import FuelLogForm from './FuelLogForm.svelte';
+	import ModalContainer from '../../components/common/ModalContainer.svelte';
+	import { fuelLogModelStore } from '$lib/stores/fuel-log';
+
+	let logToEdit = $state<any>(null);
+	let showModal = $state(false);
+	let editMode = $state(false);
+	let loading = $state(false);
+	let vehicleId = $state<string | undefined>(undefined);
+	let callback = $state<any>();
+
+	fuelLogModelStore.subscribe((data) => {
+		logToEdit = data.logToEdit;
+		showModal = data.show;
+		editMode = data.editMode;
+		vehicleId = data.vehicleId;
+		loading = false;
+		callback = data.callback;
+	});
+
+	function closeModal() {
+		fuelLogModelStore.hide();
+	}
+</script>
+
+{#if showModal}
+	<ModalContainer
+		onclose={() => closeModal()}
+		title={editMode ? 'Edit Fuel Log' : 'Log Fuel Refill'}
+		{loading}
+	>
+		<FuelLogForm
+			{vehicleId}
+			{logToEdit}
+			{editMode}
+			bind:modalVisibility={showModal}
+			{callback}
+			{loading}
+		/>
+	</ModalContainer>
+{/if}
diff --git a/app/client/src/components/fuel/FuelRefillForm.svelte b/app/client/src/components/fuel/FuelRefillForm.svelte
deleted file mode 100644
index 0443de0f..00000000
--- a/app/client/src/components/fuel/FuelRefillForm.svelte
+++ /dev/null
@@ -1,112 +0,0 @@
-<script lang="ts">
-	import { createEventDispatcher } from 'svelte';
-	import FuelRefillFormComponent from './FuelRefillFormComponent.svelte';
-	import { env } from '$env/dynamic/public';
-
-	const dispatch = createEventDispatcher();
-
-	export let vehicleId: number | null = null;
-	export let onSuccess: (() => void) | null = null;
-	export let showModal: boolean = false;
-	export let closeModal: (() => void) | null = null;
-
-	let refill = {
-		date: '',
-		odometer: '',
-		fuelAmount: '',
-		cost: '',
-		notes: ''
-	};
-
-	let loading = false;
-	let error = '';
-
-	function resetForm() {
-		refill = {
-			date: '',
-			odometer: '',
-			fuelAmount: '',
-			cost: '',
-			notes: ''
-		};
-	}
-
-	async function handleSubmit() {
-		error = '';
-		if (!vehicleId) {
-			error = 'No vehicle selected.';
-			return;
-		}
-		if (!refill.date || !refill.odometer || !refill.fuelAmount || !refill.cost) {
-			error = 'Please fill in all required fields.';
-			return;
-		}
-		loading = true;
-		try {
-			const response = await fetch(
-				`${env.PUBLIC_API_BASE_URL||""}/api/vehicles/${vehicleId}/fuel-logs`,
-				{
-					method: 'POST',
-					headers: {
-						'Content-Type': 'application/json',
-						'X-User-PIN': localStorage.getItem('userPin') || ''
-					},
-					body: JSON.stringify({
-						date: refill.date,
-						odometer: parseFloat(refill.odometer),
-						fuelAmount: parseFloat(refill.fuelAmount),
-						cost: parseFloat(refill.cost),
-						notes: refill.notes
-					})
-				}
-			);
-			if (response.ok) {
-				resetForm();
-				dispatch('success');
-				if (onSuccess) onSuccess();
-			} else {
-				const data = await response.json();
-				error = data?.message || 'Failed to log fuel refill.';
-			}
-		} catch (err) {
-			error = 'Network error. Please try again.';
-		} finally {
-			loading = false;
-		}
-	}
-</script>
-
-{#if showModal}
-	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
-		<div
-			class="animate-scale-up relative max-h-[90vh] w-full max-w-xl overflow-y-auto rounded-2xl bg-white p-10 shadow-2xl dark:bg-gray-800"
-		>
-			<button
-				type="button"
-				class="absolute top-6 right-6 rounded-full bg-gray-100 p-2 text-gray-400 transition hover:text-gray-700 dark:bg-gray-700 dark:text-gray-300 dark:hover:text-white"
-				on:click={closeModal}
-				aria-label="Close"
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-6 w-6"
-					fill="none"
-					viewBox="0 0 24 24"
-					stroke="currentColor"
-				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M6 18L18 6M6 6l12 12"
-					/>
-				</svg>
-			</button>
-			<h2 class="mb-2 text-center text-3xl font-extrabold text-gray-900 dark:text-gray-100">
-				Log Fuel Refill
-			</h2>
-			<div class="mb-8 border-b border-gray-200 dark:border-gray-700"></div>
-			<FuelRefillFormComponent bind:refill onSubmit={handleSubmit} bind:error bind:loading />
-		</div>
-	</div>
-{/if}
diff --git a/app/client/src/components/fuel/FuelRefillFormComponent.svelte b/app/client/src/components/fuel/FuelRefillFormComponent.svelte
deleted file mode 100644
index 2b45640c..00000000
--- a/app/client/src/components/fuel/FuelRefillFormComponent.svelte
+++ /dev/null
@@ -1,84 +0,0 @@
-<script lang="ts">
-	import { createEventDispatcher } from 'svelte';
-	import FormField from '../common/FormField.svelte';
-	import { Calendar1, Gauge, DollarSign, Fuel, FileText } from '@lucide/svelte';
-  import { config } from '../../lib/states/config';
-
-  $: formatCurrency = (amount: number) => `${$config.currency} ${amount.toLocaleString()}`
-
-	const dispatch = createEventDispatcher();
-
-	export let refill;
-	export let onSubmit;
-	export let error = '';
-	export let loading = false;
-</script>
-
-<form
-	class="space-y-6"
-	on:submit|preventDefault={onSubmit}
-	aria-labelledby="fuel-refill-form-title"
->
-	<FormField
-		id="date"
-		type="date"
-		placeholder="Date"
-		bind:value={refill.date}
-		icon={Calendar1}
-		required={true}
-		ariaLabel="Refill Date"
-	/>
-	<FormField
-		id="odometer"
-		type="number"
-		placeholder="Odometer Reading"
-		bind:value={refill.odometer}
-		icon={Gauge}
-		required={true}
-		ariaLabel="Odometer Reading"
-		inputClass="step-0.01"
-	/>
-	<FormField
-		id="fuelAmount"
-		type="number"
-		placeholder="Fuel Amount (liters)"
-		bind:value={refill.fuelAmount}
-		icon={Fuel}
-		required={true}
-		ariaLabel="Fuel Amount"
-		inputClass="step-0.01"
-	/>
-	<FormField
-		id="cost"
-		type="number"
-		placeholder={`Cost (in ${$config.currency})`}
-		bind:value={refill.cost}
-		icon={DollarSign}
-		required={true}
-		ariaLabel="Fuel Cost"
-		inputClass="step-0.01"
-	/>
-	<FormField
-		id="notes"
-		type="text"
-		placeholder="Notes (optional)"
-		bind:value={refill.notes}
-		icon={FileText}
-		ariaLabel="Notes"
-	/>
-	{#if error}
-		<div class="text-sm text-red-600 dark:text-red-400" role="alert">
-			{error}
-		</div>
-	{/if}
-	<div class="flex justify-center">
-		<button
-			type="submit"
-			class="flex cursor-pointer gap-2 rounded-lg border-2 bg-blue-600 px-3 py-1 text-lg font-semibold text-blue-600 shadow-md dark:text-blue-200"
-			disabled={loading}
-			aria-busy={loading}
-		>
-			{loading ? 'Logging...' : 'Log Refill'}
-		</button>
-	</div>
-</form>
diff --git a/app/client/src/components/fuel/FuelRefillList.svelte b/app/client/src/components/fuel/FuelRefillList.svelte
deleted file mode 100644
index aceaf1d8..00000000
--- a/app/client/src/components/fuel/FuelRefillList.svelte
+++ /dev/null
@@ -1,107 +0,0 @@
-<script lang="ts">
-	import { onMount } from 'svelte';
-	import { env } from '$env/dynamic/public';
-	import dayjs from 'dayjs';
-	import { configJson } from '../../lib/states/config';
-
-	$: formatDate = (date: string) => dayjs(date).format($configJson.dateFormat);
-	$: formatCurrency = (amount: number) => `${$configJson.currency} ${amount.toLocaleString()}`;
-
-	export let vehicleId: number;
-
-	interface FuelLog {
-		id: number;
-		date: string;
-		odometer: number;
-		fuelAmount: number;
-		cost: number;
-		notes?: string;
-		mileage?: number;
-	}
-
-	let fuelLogs: FuelLog[] = [];
-	let loading = true;
-	let error = '';
-
-	async function fetchFuelLogs() {
-		loading = true;
-		error = '';
-		try {
-			const response = await fetch(
-				`${env.PUBLIC_API_BASE_URL || ''}/api/vehicles/${vehicleId}/fuel-logs`,
-				{
-					headers: {
-						'X-User-PIN': localStorage.getItem('userPin') || ''
-					}
-				}
-			);
-			if (response.ok) {
-				fuelLogs = await response.json();
-			} else {
-				const data = await response.json();
-				error = data.message || 'Failed to fetch fuel logs.';
-			}
-		} catch (e) {
-			console.error('Failed to connect to the server.', e);
-			error = 'Failed to connect to the server.';
-		}
-		loading = false;
-	}
-
-	onMount(() => {
-		fetchFuelLogs();
-	});
-
-	// Reactively fetch logs when vehicleId changes
-	$: if (vehicleId) {
-		fetchFuelLogs();
-	}
-</script>
-
-<div class="container mx-auto p-4 text-gray-600 dark:text-gray-300">
-	<h2 class="mb-4 text-2xl font-bold">Fuel Refill History</h2>
-
-	{#if loading}
-		<p>Loading fuel logs...</p>
-	{:else if error}
-		<p class="text-red-500">Error: {error}</p>
-	{:else if fuelLogs.length === 0}
-		<p>No fuel refill logs found for this vehicle.</p>
-	{:else}
-		<div class="overflow-x-auto">
-			<table class="min-w-full overflow-hidden rounded-lg bg-white shadow dark:bg-gray-800">
-				<thead class="bg-gray-200 dark:bg-gray-700">
-					<tr>
-						<th class="px-4 py-2 text-left font-semibold text-gray-600 dark:text-gray-300">Date</th>
-						<th class="px-4 py-2 text-left font-semibold text-gray-600 dark:text-gray-300"
-							>Odometer</th
-						>
-						<th class="px-4 py-2 text-left font-semibold text-gray-600 dark:text-gray-300"
-							>Fuel Amount (L)</th
-						>
-						<th class="px-4 py-2 text-left font-semibold text-gray-600 dark:text-gray-300">Cost</th>
-						<th class="px-4 py-2 text-left font-semibold text-gray-600 dark:text-gray-300"
-							>Mileage (km/L)</th
-						>
-						<th class="px-4 py-2 text-left font-semibold text-gray-600 dark:text-gray-300">Notes</th
-						>
-					</tr>
-				</thead>
-				<tbody>
-					{#each fuelLogs as log (log.id)}
-						<tr class="border-b border-gray-200 last:border-b-0 dark:border-gray-700">
-							<td class="px-4 py-2 text-gray-800 dark:text-gray-200">{formatDate(log.date)}</td>
-							<td class="px-4 py-2 text-gray-800 dark:text-gray-200">{log.odometer} km</td>
-							<td class="px-4 py-2 text-gray-800 dark:text-gray-200">{log.fuelAmount} L</td>
-							<td class="px-4 py-2 text-gray-800 dark:text-gray-200">{formatCurrency(log.cost)}</td>
-							<td class="px-4 py-2 text-gray-800 dark:text-gray-200"
-								>{log.mileage ? log.mileage.toFixed(2) : 'N/A'}</td
-							>
-							<td class="px-4 py-2 text-gray-800 dark:text-gray-200">{log.notes || 'N/A'}</td>
-						</tr>
-					{/each}
-				</tbody>
-			</table>
-		</div>
-	{/if}
-</div>
diff --git a/app/client/src/components/insurance/InsuranceDetails.svelte b/app/client/src/components/insurance/InsuranceDetails.svelte
deleted file mode 100644
index 5891e44f..00000000
--- a/app/client/src/components/insurance/InsuranceDetails.svelte
+++ /dev/null
@@ -1,182 +0,0 @@
-<script lang="ts">
-	import { onMount } from 'svelte';
-	import { browser } from '$app/environment';
-	import { env } from '$env/dynamic/public';
-	import { Shield, Calendar, Hash, DollarSign, Pencil, Trash2 } from '@lucide/svelte';
-	import InsuranceForm from './InsuranceForm.svelte';
-	import { config } from '../../lib/states/config';
-	import dayjs from 'dayjs';
-
-	$: formatDate = (date: string) => dayjs(date).format($config.dateFormat);
-	$: formatCurrency = (amount: number) => `${$config.currency} ${amount.toLocaleString()}`;
-
-	export let vehicleId: number | null = null;
-
-	interface InsuranceDetails {
-		id: number;
-		provider: string;
-		policyNumber: string;
-		startDate: string;
-		endDate: string;
-		cost: number;
-	}
-
-	let insurance: InsuranceDetails | null = null;
-	let loading = false;
-	let error = '';
-	let showInsuranceFormModal = false;
-
-	async function fetchInsuranceDetails() {
-		if (!vehicleId) {
-			insurance = null;
-			return;
-		}
-		loading = true;
-		error = '';
-		try {
-			const response = await fetch(
-				`${env.PUBLIC_API_BASE_URL||""}/api/vehicles/${vehicleId}/insurance`,
-				{
-					headers: {
-						'X-User-PIN': browser ? localStorage.getItem('userPin') || '' : ''
-					}
-				}
-			);
-			if (response.ok) {
-				insurance = await response.json();
-			} else {
-				insurance = null;
-			}
-		} catch (err) {
-			error = 'Network error. Please try again.';
-		} finally {
-			loading = false;
-		}
-	}
-
-	async function handleDeleteInsurance() {
-		if (!insurance) return;
-		if (!confirm('Are you sure you want to delete these insurance details?')) {
-			return;
-		}
-		try {
-			const response = await fetch(
-				`${env.PUBLIC_API_BASE_URL||""}/api/vehicles/${vehicleId}/insurance`,
-				{
-					method: 'DELETE',
-					headers: {
-						'X-User-PIN': browser ? localStorage.getItem('userPin') || '' : ''
-					}
-				}
-			);
-			if (response.ok) {
-				insurance = null;
-				alert('Insurance details deleted successfully.');
-			} else {
-				const data = await response.json();
-				alert(data.message || 'Failed to delete insurance details.');
-			}
-		} catch (err) {
-			alert('Network error. Failed to delete insurance details.');
-		}
-	}
-
-	function handleEditInsurance() {
-		showInsuranceFormModal = true;
-	}
-
-	function handleAddInsurance() {
-		showInsuranceFormModal = true;
-	}
-
-	function closeInsuranceFormModal() {
-		showInsuranceFormModal = false;
-		fetchInsuranceDetails(); // Refresh details after form submission
-	}
-
-	// Refetch when vehicleId changes
-	$: if (vehicleId) {
-		fetchInsuranceDetails();
-	}
-
-	onMount(() => {
-		if (vehicleId) fetchInsuranceDetails();
-	});
-</script>
-
-<div class="mt-8 text-gray-600 dark:text-gray-300">
-	<h3 class="mb-4 text-lg font-semibold text-gray-900 dark:text-gray-100">Insurance Details</h3>
-	{#if loading}
-		<div class="text-gray-500 dark:text-gray-400">Loading insurance details...</div>
-	{:else if error}
-		<div class="text-red-600 dark:text-red-400" role="alert">{error}</div>
-	{:else if insurance}
-		<div
-			class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-800"
-		>
-			<div class="flex items-center justify-between">
-				<div class="flex items-center gap-2">
-					<Shield class="h-6 w-6 text-blue-500 dark:text-blue-400" />
-					<span class="text-xl font-bold text-gray-800 dark:text-gray-100"
-						>{insurance.provider}</span
-					>
-				</div>
-				<div class="flex gap-2">
-					<button
-						on:click={handleEditInsurance}
-						class="text-gray-500 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400"
-					>
-						<Pencil class="h-5 w-5" />
-					</button>
-					<button
-						on:click={handleDeleteInsurance}
-						class="text-gray-500 hover:text-red-600 dark:text-gray-300 dark:hover:text-red-400"
-					>
-						<Trash2 class="h-5 w-5" />
-					</button>
-				</div>
-			</div>
-			<div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2">
-				<div class="flex items-center gap-2">
-					<Hash class="h-5 w-5 text-gray-400 dark:text-gray-500" />
-					<span class="font-semibold">Policy Number:</span>
-					<span>{insurance.policyNumber}</span>
-				</div>
-				<div class="flex items-center gap-2">
-					<DollarSign class="h-5 w-5 text-gray-400 dark:text-gray-500" />
-					<span class="font-semibold">Cost:</span>
-					<span>{formatCurrency(insurance.cost)}</span>
-				</div>
-				<div class="flex items-center gap-2">
-					<Calendar class="h-5 w-5 text-gray-400 dark:text-gray-500" />
-					<span class="font-semibold">Start Date:</span>
-					<span>{formatDate(insurance.startDate)}</span>
-				</div>
-				<div class="flex items-center gap-2">
-					<Calendar class="h-5 w-5 text-gray-400 dark:text-gray-500" />
-					<span class="font-semibold">End Date:</span>
-					<span>{formatDate(insurance.endDate)}</span>
-				</div>
-			</div>
-		</div>
-	{:else}
-		<div class="text-center">
-			<p class="text-gray-500 dark:text-gray-400">No insurance details found for this vehicle.</p>
-			<button
-				on:click={handleAddInsurance}
-				class="mt-4 rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700"
-			>
-				Add Insurance
-			</button>
-		</div>
-	{/if}
-
-	{#if showInsuranceFormModal}
-		<InsuranceForm
-			{vehicleId}
-			showModal={showInsuranceFormModal}
-			closeModal={closeInsuranceFormModal}
-			initialData={insurance}
-		/>
-	{/if}
-</div>
diff --git a/app/client/src/components/insurance/InsuranceDetailsList.svelte b/app/client/src/components/insurance/InsuranceDetailsList.svelte
new file mode 100644
index 00000000..2fbbb1bc
--- /dev/null
+++ b/app/client/src/components/insurance/InsuranceDetailsList.svelte
@@ -0,0 +1,159 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { browser } from '$app/environment';
+	import { env } from '$env/dynamic/public';
+	import { Shield, Calendar, Hash, DollarSign, Pencil, Trash2 } from '@lucide/svelte';
+	import { formatCurrency, formatDate } from '$lib/utils/formatting';
+	import { insuranceModelStore } from '$lib/stores/insurance';
+
+	let { vehicleId } = $props();
+
+	interface Insurance {
+		id: string;
+		provider: string;
+		policyNumber: string;
+		startDate: string;
+		endDate: string;
+		cost: number;
+	}
+
+	let insurances: Insurance[] = $state([]);
+	let loading = $state(false);
+	let error = $state('');
+
+	$effect(() => {
+		if (!vehicleId) {
+			error = 'Vehicle ID is required.';
+			loading = false;
+		} else {
+			fetchInsuranceDetails();
+		}
+	});
+
+	async function fetchInsuranceDetails() {
+		if (!vehicleId) {
+			insurances = [];
+			return;
+		}
+		loading = true;
+		error = '';
+		try {
+			const response = await fetch(
+				`${env.PUBLIC_API_BASE_URL || ''}/api/vehicles/${vehicleId}/insurance`,
+				{
+					headers: {
+						'X-User-PIN': browser ? localStorage.getItem('userPin') || '' : ''
+					}
+				}
+			);
+			if (response.ok) {
+				insurances = await response.json();
+				console.log('Insurance : ', JSON.stringify(insurances));
+			} else {
+				error = 'Failed to fetch insurance data.';
+			}
+		} catch (err) {
+			error = 'Network error. Please try again.';
+		} finally {
+			loading = false;
+		}
+	}
+
+	async function deleteInsurance(insuranceId: string) {
+		if (!confirm('Are you sure you want to delete this maintenance log?')) {
+			return;
+		}
+		try {
+			const response = await fetch(
+				`${env.PUBLIC_API_BASE_URL || ''}/api/vehicles/${vehicleId}/insurance/${insuranceId}`,
+				{
+					method: 'DELETE',
+					headers: {
+						'X-User-PIN': browser ? localStorage.getItem('userPin') || '' : ''
+					}
+				}
+			);
+			if (response.ok) {
+				await fetchInsuranceDetails();
+			} else {
+				const data = await response.json();
+				alert(data.message || 'Failed to delete insurance details.');
+			}
+		} catch (err) {
+			alert('Network error. Failed to delete insurance details.');
+		}
+	}
+
+	onMount(() => {
+		fetchInsuranceDetails();
+	});
+</script>
+
+{#if loading}
+	<div class="text-gray-500 dark:text-gray-400">Loading insurance details...</div>
+{:else if error}
+	<div class="text-red-600 dark:text-red-400" role="alert">{error}</div>
+{:else if insurances.length === 0}
+	<div class="text-gray-500 dark:text-gray-400">No Insurance found for this vehicle.</div>
+{:else}
+	{#each insurances as ins (ins.id)}
+		<div
+			class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-800"
+		>
+			<div class="flex items-center justify-between">
+				<div class="flex items-center gap-2">
+					<Shield class="h-6 w-6 text-blue-500 dark:text-blue-400" />
+					<span class="text-xl font-bold text-gray-800 dark:text-gray-100">{ins.provider}</span>
+				</div>
+				<div class="flex gap-2">
+					<button
+						class="rounded-full p-2 transition-colors hover:bg-gray-100 dark:hover:bg-gray-700"
+						onclick={() => {
+							insuranceModelStore.show(vehicleId, ins, true, (status: boolean) => {
+								if (status) {
+									fetchInsuranceDetails();
+								}
+							});
+						}}
+					>
+						<Pencil
+							class="h-5 w-5 text-gray-500 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400"
+						/>
+					</button>
+					<button
+						class="rounded-full p-2 transition-colors hover:bg-gray-100 dark:hover:bg-gray-700"
+						onclick={() => {
+							deleteInsurance(ins.id);
+						}}
+					>
+						<Trash2
+							class="h-5 w-5 text-gray-500 hover:text-red-600 dark:text-gray-300 dark:hover:text-red-400"
+						/>
+					</button>
+				</div>
+			</div>
+			<div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2">
+				<div class="flex items-center gap-2 text-gray-900 dark:text-gray-100">
+					<Hash class="h-5 w-5" />
+					<span class="font-semibold">Policy Number:</span>
+					<span>{ins.policyNumber}</span>
+				</div>
+				<div class="flex items-center gap-2 text-gray-900 dark:text-gray-100">
+					<DollarSign class="h-5 w-5" />
+					<span class="font-semibold">Cost:</span>
+					<span>{formatCurrency(ins.cost)}</span>
+				</div>
+				<div class="flex items-center gap-2 text-gray-900 dark:text-gray-100">
+					<Calendar class="h-5 w-5 " />
+					<span class="font-semibold">Start Date:</span>
+					<span>{formatDate(ins.startDate)}</span>
+				</div>
+				<div class="flex items-center gap-2 text-gray-900 dark:text-gray-100">
+					<Calendar class="h-5 w-5 " />
+					<span class="font-semibold">End Date:</span>
+					<span>{formatDate(ins.endDate)}</span>
+				</div>
+			</div>
+		</div>
+	{/each}
+{/if}
diff --git a/app/client/src/components/insurance/InsuranceForm.svelte b/app/client/src/components/insurance/InsuranceForm.svelte
index c271f821..0d073d9d 100644
--- a/app/client/src/components/insurance/InsuranceForm.svelte
+++ b/app/client/src/components/insurance/InsuranceForm.svelte
@@ -1,51 +1,42 @@
 <script lang="ts">
-	import { createEventDispatcher, onMount } from 'svelte';
+	import FormField from '$components/common/FormField.svelte';
+	import FormSubmitButton from '$components/common/FormSubmitButton.svelte';
 	import { env } from '$env/dynamic/public';
-	import InsuranceFormComponent from './InsuranceFormComponent.svelte';
+	import { getCurrencySymbol } from '$lib/utils/formatting';
+	import { BadgeDollarSign, Building2, Calendar1, IdCard } from '@lucide/svelte';
 
-	export let vehicleId: number | null = null;
-	export let showModal: boolean = false;
-	export let closeModal: () => void;
-	export let initialData: {
-		id?: number;
-		provider: string;
-		policyNumber: string;
-		startDate: string;
-		endDate: string;
-		cost: number;
-	} | null = null;
+	let {
+		vehicleId,
+		entryToEdit = $bindable(),
+		modalVisibility = $bindable(),
+		editMode,
+		loading,
+		callback
+	} = $props();
 
-	let insurance = {
+	let insurance = $state({
 		provider: '',
 		policyNumber: '',
 		startDate: '',
 		endDate: '',
 		cost: null
-	};
-
-	let error = '';
-	let success = '';
+	});
 
-	const dispatch = createEventDispatcher();
+	let status = $state<{
+		message: string | null;
+		type: 'ERROR' | 'SUCCESS' | null;
+	}>({
+		message: null,
+		type: null
+	});
 
-	onMount(() => {
-		if (initialData) {
-			insurance = {
-				...initialData,
-				startDate: initialData.startDate
-					? new Date(initialData.startDate).toISOString().split('T')[0]
-					: '',
-				endDate: initialData.endDate
-					? new Date(initialData.endDate).toISOString().split('T')[0]
-					: ''
-			};
+	$effect(() => {
+		if (entryToEdit) {
+			Object.assign(insurance, entryToEdit);
 		}
 	});
 
-	async function saveInsurance() {
-		error = '';
-		success = '';
-
+	async function persistInsurance() {
 		if (
 			!insurance.provider ||
 			!insurance.policyNumber ||
@@ -53,17 +44,16 @@
 			!insurance.endDate ||
 			!insurance.cost
 		) {
-			error = 'All fields are required.';
+			status.message = 'Provider, Policy Number, Start Date, End Date, Cost are required.';
+			status.type = 'ERROR';
 			return;
 		}
 
-		const method = initialData && initialData.id ? 'PUT' : 'POST';
-
 		try {
 			const response = await fetch(
-				`${env.PUBLIC_API_BASE_URL||""}/api/vehicles/${vehicleId}/insurance`,
+				`${env.PUBLIC_API_BASE_URL || ''}/api/vehicles/${vehicleId}/insurance/${editMode ? entryToEdit.id : ''}`,
 				{
-					method,
+					method: `${editMode ? 'PUT' : 'POST'}`,
 					headers: {
 						'Content-Type': 'application/json',
 						'X-User-PIN': localStorage.getItem('userPin') || ''
@@ -73,34 +63,104 @@
 			);
 
 			if (response.ok) {
-				success = `Insurance details ${initialData ? 'updated' : 'added'} successfully!`;
-				dispatch('success');
-				closeModal();
+				status.message = `Insurance details ${editMode ? 'updated' : 'added'} successfully!`;
+				status.type = 'SUCCESS';
+				Object.assign(insurance, {
+					provider: '',
+					policyNumber: '',
+					startDate: '',
+					endDate: '',
+					cost: null
+				});
+				modalVisibility = false;
 			} else {
 				const data = await response.json();
-				error = data.message || 'Failed to save insurance details.';
+				status.message = data.message || 'Failed to save insurance details.';
+				status.type = 'ERROR';
 			}
 		} catch (e) {
-			error = 'Failed to connect to the server.';
+			status.message = 'Failed to connect to the server.';
+			status.type = 'ERROR';
+		}
+		loading = false;
+		if (status.type === 'SUCCESS') {
+			entryToEdit = null;
+			callback(true);
 		}
 	}
 </script>
 
-{#if showModal}
-	<div class="bg-opacity-50 fixed inset-0 z-50 flex items-center justify-center bg-black">
-		<div class="w-full max-w-lg rounded-lg bg-white p-8 shadow-2xl dark:bg-gray-800">
-			<h2 class="mb-6 text-2xl font-bold text-gray-900 dark:text-gray-100">
-				{initialData ? 'Edit' : 'Add'} Insurance Details
-			</h2>
+<form
+	onsubmit={(e) => {
+		persistInsurance();
+		e.preventDefault();
+	}}
+>
+	<FormField
+		id="provider"
+		type="text"
+		placeholder="Provider"
+		bind:value={insurance.provider}
+		icon={Building2}
+		required={true}
+		ariaLabel="Provider"
+	/>
+	<FormField
+		id="policy-number"
+		type="text"
+		placeholder="Policy Number"
+		bind:value={insurance.policyNumber}
+		icon={IdCard}
+		required={true}
+		ariaLabel="Policy Number"
+	/>
+	<FormField
+		id="start-date"
+		type="date"
+		placeholder="Start Date"
+		bind:value={insurance.startDate}
+		icon={Calendar1}
+		required={true}
+		ariaLabel="Start Date"
+	/>
+	<FormField
+		id="end-date"
+		type="date"
+		placeholder="End Date"
+		bind:value={insurance.endDate}
+		icon={Calendar1}
+		required={true}
+		ariaLabel="End Date"
+	/>
+	<FormField
+		id="cost"
+		type="number"
+		placeholder="Cost ( {getCurrencySymbol} )"
+		bind:value={insurance.cost}
+		icon={BadgeDollarSign}
+		required={true}
+		ariaLabel="Cost"
+	/>
+	<!-- <FormField
+		id="notes"
+		type="text"
+		placeholder="Notes"
+		bind:value={insurance.notes}
+		icon={Notebook}
+		required={false}
+		ariaLabel="Notes"
+	/> -->
+	<FormSubmitButton text={editMode ? 'Update Insurance' : 'Add Insurance'} {loading} />
+</form>
 
-			<InsuranceFormComponent
-				bind:insurance
-				onSubmit={saveInsurance}
-				bind:error
-				bind:success
-				editMode={!!initialData}
-				on:close={closeModal}
-			/>
-		</div>
-	</div>
+{#if status.message}
+	<p
+		class={`mt-4 text-center text-sm ${status.type === 'ERROR' ? 'text-red-500 dark:text-red-400' : 'text-green-500 dark:text-green-400'}`}
+	>
+		{#if status.type === 'ERROR'}
+			<span class="font-semibold">Error:</span> {status.message}
+		{:else}
+			{status.message}
+		{/if}
+	</p>
 {/if}
diff --git a/app/client/src/components/insurance/InsuranceFormComponent.svelte b/app/client/src/components/insurance/InsuranceFormComponent.svelte
index 41b1509e..e581b9bc 100644
--- a/app/client/src/components/insurance/InsuranceFormComponent.svelte
+++ b/app/client/src/components/insurance/InsuranceFormComponent.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
-  import { config } from '../../lib/states/config';
+	import { config } from '$lib/stores/config';
 
-  $: formatCurrency = (amount: number) => `${$config.currency} ${amount.toLocaleString()}`
+	$: formatCurrency = (amount: number) => `${$config.currency} ${amount.toLocaleString()}`;
 
 	const dispatch = createEventDispatcher();
 
 	export let insurance;
 	export let onSubmit;
 	export let error = '';
-	  export let success = '';
+	export let success = '';
 </script>
 
 <form on:submit|preventDefault={onSubmit}>
diff --git a/app/client/src/components/insurance/InsuranceModal.svelte b/app/client/src/components/insurance/InsuranceModal.svelte
new file mode 100644
index 00000000..35e4cf17
--- /dev/null
+++ b/app/client/src/components/insurance/InsuranceModal.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import ModalContainer from '$components/common/ModalContainer.svelte';
+	import { insuranceModelStore } from '$lib/stores/insurance';
+	import { puccModelStore } from '$lib/stores/pucc';
+	import InsuranceForm from './InsuranceForm.svelte';
+
+	let entryToEdit = $state<any>(null);
+	let showModal = $state(false);
+	let editMode = $state(false);
+	let loading = $state(false);
+	let vehicleId = $state<string | undefined>(undefined);
+	let callback = $state<any>();
+
+	insuranceModelStore.subscribe((data) => {
+		entryToEdit = data.entryToEdit;
+		showModal = data.show;
+		editMode = data.editMode;
+		vehicleId = data.vehicleId;
+		loading = false;
+		callback = data.callback;
+	});
+
+	function closeModal() {
+		insuranceModelStore.hide();
+	}
+</script>
+
+{#if showModal}
+	<ModalContainer
+		onclose={closeModal}
+		title={editMode ? 'Edit Insurance' : 'Add Insurance'}
+		{loading}
+	>
+		<InsuranceForm
+			bind:modalVisibility={showModal}
+			bind:entryToEdit
+			{editMode}
+			{vehicleId}
+			{callback}
+			{loading}
+		/>
+	</ModalContainer>
+{/if}
diff --git a/app/client/src/components/maintenance/MaintenanceLogForm.svelte b/app/client/src/components/maintenance/MaintenanceLogForm.svelte
index 1155a5db..b715da76 100644
--- a/app/client/src/components/maintenance/MaintenanceLogForm.svelte
+++ b/app/client/src/components/maintenance/MaintenanceLogForm.svelte
@@ -1,94 +1,152 @@
 <script lang="ts">
-	import { createEventDispatcher, onMount } from 'svelte';
-	import MaintenanceLogFormComponent from './MaintenanceLogFormComponent.svelte';
+	import FormField from '$components/common/FormField.svelte';
+	import FormSubmitButton from '$components/common/FormSubmitButton.svelte';
 	import { env } from '$env/dynamic/public';
+	import { getCurrencySymbol, getDistanceUnit } from '$lib/utils/formatting';
+	import { BadgeDollarSign, Calendar1, Gauge, Hammer, Notebook } from '@lucide/svelte';
 
-	export let vehicleId: number | null = null;
-	export let showModal: boolean = false;
-	export let closeModal: () => void;
-	export let initialData: {
-		id?: number;
-		date: string;
-		odometer: number;
-		service: string;
-		cost: number;
-		notes?: string;
-	} | null = null;
+	let {
+		vehicleId,
+		logToEdit = $bindable(),
+		modalVisibility = $bindable(),
+		editMode,
+		loading,
+		callback
+	} = $props();
 
-	let log = {
+	let log = $state({
 		date: '',
 		odometer: null,
 		service: '',
 		cost: null,
 		notes: ''
-	};
-
-	let error = '';
-	let success = '';
+	});
 
-	const dispatch = createEventDispatcher();
+	let status = $state<{
+		message: string | null;
+		type: 'ERROR' | 'SUCCESS' | null;
+	}>({
+		message: null,
+		type: null
+	});
 
-	onMount(() => {
-		if (initialData) {
-			log = { ...initialData };
+	$effect(() => {
+		if (logToEdit) {
+			Object.assign(log, logToEdit);
 		}
 	});
 
-	async function handleSubmit() {
-		error = '';
-		success = '';
-
-		if (!log.date || !log.odometer || !log.service || !log.cost) {
-			error = 'Date, Odometer, Service, and Cost are required.';
+	async function persistLog() {
+		if (!log.date || !log.odometer || !log.service || log.cost === null) {
+			status.message = 'Date, Odometer, Service, and Cost are required.';
+			status.type = 'ERROR';
 			return;
 		}
 
-		const method = initialData && initialData.id ? 'PUT' : 'POST';
-		const urlPath =
-			initialData && initialData.id
-				? `/api/maintenance-logs/${initialData.id}`
-				: `/api/vehicles/${vehicleId}/maintenance-logs`;
-
 		try {
-			const response = await fetch(`${env.PUBLIC_API_BASE_URL||""}${urlPath}`, {
-				method: method,
-				headers: {
-					'Content-Type': 'application/json',
-					'X-User-PIN': localStorage.getItem('userPin') || ''
-				},
-				body: JSON.stringify(log)
-			});
+			const response = await fetch(
+				`${env.PUBLIC_API_BASE_URL || ''}/api/vehicles/${vehicleId}/maintenance-logs/${editMode ? logToEdit.id : ''}`,
+				{
+					method: `${editMode ? 'PUT' : 'POST'}`,
+					headers: {
+						'Content-Type': 'application/json',
+						'X-User-PIN': localStorage.getItem('userPin') || ''
+					},
+					body: JSON.stringify(log)
+				}
+			);
 
 			if (response.ok) {
-				success = `Maintenance log ${method === 'POST' ? 'added' : 'updated'} successfully!`;
-				dispatch('success');
-				closeModal();
+				status.message = `Maintenance log ${editMode ? 'updated' : 'added'} successfully!`;
+				status.type = 'SUCCESS';
+				Object.assign(log, {
+					date: '',
+					odometer: null,
+					service: '',
+					cost: null,
+					notes: ''
+				});
+				modalVisibility = false;
 			} else {
 				const data = await response.json();
-				error =
-					data.message || `Failed to ${method === 'POST' ? 'add' : 'update'} maintenance log.`;
+				status.message =
+					data.message || `Failed to ${editMode ? 'update' : 'add'} maintenance log.`;
+				status.type = 'ERROR';
 			}
 		} catch (e) {
-			error = 'Failed to connect to the server.';
+			status.message = 'Failed to connect to the server.';
+			status.type = 'ERROR';
+		}
+		loading = false;
+		if (status.type === 'SUCCESS') {
+			logToEdit = null;
+			callback(true);
 		}
 	}
 </script>
 
-{#if showModal}
-	<div class="bg-opacity-50 fixed inset-0 z-50 flex items-center justify-center bg-black">
-		<div class="w-full max-w-lg rounded-lg bg-white p-8 shadow-2xl dark:bg-gray-800">
-			<h2 class="mb-6 text-2xl font-bold text-gray-900 dark:text-gray-100">
-				{initialData ? 'Edit Maintenance Log' : 'Add Maintenance Log'}
-			</h2>
-
-			<MaintenanceLogFormComponent
-				bind:log
-				onSubmit={handleSubmit}
-				bind:error
-				bind:success
-				editMode={!!initialData}
-				on:close={closeModal}
-			/>
-		</div>
-	</div>
+<form
+	onsubmit={(e) => {
+		persistLog();
+		e.preventDefault();
+	}}
+	class="space-y-6"
+>
+	<FormField
+		id="date"
+		type="date"
+		placeholder="Date"
+		bind:value={log.date}
+		icon={Calendar1}
+		required={true}
+		ariaLabel="Log Date"
+	/>
+	<FormField
+		id="odometer"
+		type="number"
+		placeholder="Odometer ( {getDistanceUnit()} )"
+		bind:value={log.odometer}
+		icon={Gauge}
+		required={true}
+		ariaLabel="Odometer Reading"
+	/>
+	<FormField
+		id="cost"
+		type="number"
+		placeholder="Cost ( {getCurrencySymbol()} )"
+		bind:value={log.cost}
+		icon={BadgeDollarSign}
+		required={true}
+		ariaLabel="Service Cost ( {getCurrencySymbol()} )"
+	/>
+	<FormField
+		id="service"
+		type="text"
+		placeholder="Service"
+		bind:value={log.service}
+		icon={Hammer}
+		required={true}
+		ariaLabel="Service Description"
+	/>
+	<FormField
+		id="notes"
+		type="textarea"
+		placeholder="Notes"
+		bind:value={log.notes}
+		icon={Notebook}
+		required={false}
+		ariaLabel="Additional Notes"
+	/>
+	<FormSubmitButton text={editMode ? 'Update Log' : 'Add Log'} {loading} />
+</form>
+{#if status.message}
+	<p
+		class={`mt-4 text-center text-sm ${status.type === 'ERROR' ? 'text-red-500 dark:text-red-400' : 'text-green-500 dark:text-green-400'}`}
+	>
+		{#if status.type === 'ERROR'}
+			<span class="font-semibold">Error:</span> {status.message}
+		{:else}
+			{status.message}
+		{/if}
+	</p>
 {/if}
diff --git a/app/client/src/components/maintenance/MaintenanceLogFormComponent.svelte b/app/client/src/components/maintenance/MaintenanceLogFormComponent.svelte
deleted file mode 100644
index 4647e3b8..00000000
--- a/app/client/src/components/maintenance/MaintenanceLogFormComponent.svelte
+++ /dev/null
@@ -1,98 +0,0 @@
-<script lang="ts">
-	import { createEventDispatcher } from 'svelte';
-  import { config } from '../../lib/states/config';
-
-  $: formatCurrency = (amount: number) => `${$config.currency} ${amount.toLocaleString()}`
-
-	const dispatch = createEventDispatcher();
-
-	export let log;
-	export let onSubmit;
-	export let error = '';
-	export let success = '';
-	export let editMode = false;
-</script>
-
-<form on:submit|preventDefault={onSubmit}>
-	<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
-		<div class="md:col-span-2">
-			<label for="date" class="block text-sm font-medium text-gray-700 dark:text-gray-300"
-				>Date</label
-			>
-			<input
-				type="date"
-				id="date"
-				bind:value={log.date}
-				class="mt-1 block w-full rounded-md border-gray-300 text-gray-700 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
-			/>
-		</div>
-		<div>
-			<label for="odometer" class="block text-sm font-medium text-gray-700 dark:text-gray-300"
-				>Odometer</label
-			>
-			<input
-				type="number"
-				id="odometer"
-				bind:value={log.odometer}
-				class="mt-1 block w-full rounded-md border-gray-300 text-gray-700 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
-			/>
-		</div>
-		<div>
-			<label for="cost" class="block text-sm font-medium text-gray-700 dark:text-gray-300"
-				>Cost (in {$config.currency})</label
-			>
-			<input
-				type="number"
-				id="cost"
-				bind:value={log.cost}
-				class="mt-1 block w-full rounded-md border-gray-300 text-gray-700 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
-			/>
-		</div>
-		<div class="md:col-span-2">
-			<label for="service" class="block text-sm font-medium text-gray-700 dark:text-gray-300"
-				>Service</label
-			>
-			<input
-				type="text"
-				id="service"
-				bind:value={log.service}
-				class="mt-1 block w-full rounded-md border-gray-300 text-gray-700 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
-			/>
-		</div>
-		<div class="md:col-span-2">
-			<label for="notes" class="block text-sm font-medium text-gray-700 dark:text-gray-300"
-				>Notes</label
-			>
-			<textarea
-				id="notes"
-				bind:value={log.notes}
-				rows="4"
-				class="mt-1 block w-full rounded-md border-gray-300 text-gray-700 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
-			></textarea>
-		</div>
-	</div>
-
-	{#if error}
-		<div class="mt-4 text-red-600 dark:text-red-400" role="alert">
-			{error}
-		</div>
-	{/if}
-
-	{#if success}
-		<div class="mt-4 text-green-600 dark:text-green-400" role="alert">
-			{success}
-		</div>
-	{/if}
-
-	<div class="mt-8 flex justify-end gap-4">
-		<button
-			type="button"
-			on:click={() => dispatch('close')}
-			class="rounded-lg bg-gray-200 px-4 py-2 text-gray-800 hover:bg-gray-300 dark:bg-gray-600 dark:text-gray-200 dark:hover:bg-gray-500"
-			>Cancel</button
-		>
-		<button type="submit" class="rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700"
-			>{editMode ? 'Update Log' : 'Add Log'}</button
-		>
-	</div>
-</form>
diff --git a/app/client/src/components/maintenance/MaintenanceLogList.svelte b/app/client/src/components/maintenance/MaintenanceLogList.svelte
index bba3b149..fd3f0411 100644
--- a/app/client/src/components/maintenance/MaintenanceLogList.svelte
+++ b/app/client/src/components/maintenance/MaintenanceLogList.svelte
@@ -2,17 +2,14 @@
 	import { onMount } from 'svelte';
 	import { browser } from '$app/environment';
 	import { env } from '$env/dynamic/public';
-	import MaintenanceLogForm from './MaintenanceLogForm.svelte';
-  import { config } from '../../lib/states/config';
-  import dayjs from 'dayjs';
+	import { formatCurrency, formatDate } from '$lib/utils/formatting';
+	import { Pencil, Trash2 } from '@lucide/svelte';
+	import { maintenanceModelStore } from '$lib/stores/maintenance';
 
-  $: formatDate = (date: string) => dayjs(date).format($config.dateFormat);
-  $: formatCurrency = (amount: number) => `${$config.currency} ${amount.toLocaleString()}`
+	let { vehicleId } = $props();
 
-	export let vehicleId: number | null = null;
-
-	interface MaintenanceLogEntry {
-		id: number;
+	interface MaintenanceLog {
+		id: string;
 		date: string;
 		odometer: number;
 		service: string;
@@ -20,11 +17,18 @@
 		notes?: string;
 	}
 
-	let maintenanceLogs: MaintenanceLogEntry[] = [];
-	let loading = false;
-	let error = '';
-	let showEditModal = false;
-	let selectedLog: MaintenanceLogEntry | null = null;
+	let maintenanceLogs: MaintenanceLog[] = $state([]);
+	let loading = $state(false);
+	let error = $state('');
+
+	$effect(() => {
+		if (!vehicleId) {
+			error = 'Vehicle ID is required.';
+			loading = false;
+		} else {
+			fetchMaintenanceLogs();
+		}
+	});
 
 	async function fetchMaintenanceLogs() {
 		if (!vehicleId) {
@@ -35,7 +39,7 @@
 		error = '';
 		try {
 			const response = await fetch(
-				`${env.PUBLIC_API_BASE_URL||""}/api/vehicles/${vehicleId}/maintenance-logs`,
+				`${env.PUBLIC_API_BASE_URL || ''}/api/vehicles/${vehicleId}/maintenance-logs`,
 				{
 					headers: {
 						'X-User-PIN': browser ? localStorage.getItem('userPin') || '' : ''
@@ -55,19 +59,22 @@
 		}
 	}
 
-	async function handleDelete(logId: number) {
+	async function deleteMaintenenceLog(logId: string) {
 		if (!confirm('Are you sure you want to delete this maintenance log?')) {
 			return;
 		}
 		try {
-			const response = await fetch(`${env.PUBLIC_API_BASE_URL}/api/maintenance-logs/${logId}`, {
-				method: 'DELETE',
-				headers: {
-					'X-User-PIN': browser ? localStorage.getItem('userPin') || '' : ''
+			const response = await fetch(
+				`${env.PUBLIC_API_BASE_URL || ''}/api/vehicles/${vehicleId}/maintenance-logs/${logId}`,
+				{
+					method: 'DELETE',
+					headers: {
+						'X-User-PIN': browser ? localStorage.getItem('userPin') || '' : ''
+					}
 				}
-			});
+			);
 			if (response.ok) {
-				await fetchMaintenanceLogs(); // Refresh the list
+				await fetchMaintenanceLogs();
 			} else {
 				const data = await response.json();
 				alert(data.message || 'Failed to delete maintenance log.');
@@ -77,102 +84,68 @@
 		}
 	}
 
-	function handleEdit(log: MaintenanceLogEntry) {
-		selectedLog = log;
-		showEditModal = true;
-	}
-
-	function closeEditModal() {
-		showEditModal = false;
-		selectedLog = null;
-	}
-
-	function handleSuccess() {
-		fetchMaintenanceLogs(); // Refresh logs after add/edit
-		closeEditModal();
-	}
-
-	// Refetch when vehicleId changes
-	$: if (vehicleId) {
-		fetchMaintenanceLogs();
-	}
-
 	onMount(() => {
-		if (vehicleId) fetchMaintenanceLogs();
+		fetchMaintenanceLogs();
 	});
 </script>
 
-<div class="mt-8">
-	<h3 class="mb-4 text-lg font-semibold text-gray-900 dark:text-gray-100">Maintenance History</h3>
-	{#if loading}
-		<div class="text-gray-500 dark:text-gray-400">Loading maintenance logs...</div>
-	{:else if error}
-		<div class="text-red-600 dark:text-red-400" role="alert">{error}</div>
-	{:else if maintenanceLogs.length === 0}
-		<div class="text-gray-500 dark:text-gray-400">No maintenance logs for this vehicle.</div>
-	{:else}
-		<div class="overflow-x-auto">
-			<table class="min-w-full rounded border border-gray-200 shadow-sm dark:border-gray-700">
-				<thead class="bg-gray-100 dark:bg-gray-800">
-					<tr>
-						<th class="px-4 py-2 text-left text-xs font-medium text-gray-700 dark:text-gray-200"
-							>Date</th
-						>
-						<th class="px-4 py-2 text-left text-xs font-medium text-gray-700 dark:text-gray-200"
-							>Odometer</th
-						>
-						<th class="px-4 py-2 text-left text-xs font-medium text-gray-700 dark:text-gray-200"
-							>Service</th
-						>
-						<th class="px-4 py-2 text-left text-xs font-medium text-gray-700 dark:text-gray-200"
-							>Cost</th
-						>
-						<th class="px-4 py-2 text-left text-xs font-medium text-gray-700 dark:text-gray-200"
-							>Notes</th
-						>
-						<th class="px-4 py-2 text-left text-xs font-medium text-gray-700 dark:text-gray-200"
-							>Actions</th
-						>
-					</tr>
-				</thead>
-				<tbody>
-					{#each maintenanceLogs as log (log.id)}
-						<tr class="border-t border-gray-200 dark:border-gray-700">
-							<td class="px-4 py-2 text-sm text-gray-900 dark:text-gray-100"
-								>{formatDate(log.date)}</td
+{#if loading}
+	<div class="text-gray-500 dark:text-gray-400">Loading maintenance logs...</div>
+{:else if error}
+	<div class="text-red-600 dark:text-red-400" role="alert">{error}</div>
+{:else if maintenanceLogs.length === 0}
+	<div class="text-gray-500 dark:text-gray-400">No maintenance logs for this vehicle.</div>
+{:else}
+	<div class="overflow-x-auto">
+		<table class="min-w-full overflow-hidden rounded-lg bg-white shadow dark:bg-gray-800">
+			<thead class="bg-gray-200 dark:bg-gray-700">
+				<tr>
+					<th class="px-4 py-2 text-left font-semibold text-gray-700 dark:text-gray-200">Date</th>
+					<th class="px-4 py-2 text-left font-semibold text-gray-700 dark:text-gray-200"
+						>Odometer</th
+					>
+					<th class="px-4 py-2 text-left font-semibold text-gray-700 dark:text-gray-200">Service</th
+					>
+					<th class="px-4 py-2 text-left font-semibold text-gray-700 dark:text-gray-200">Cost</th>
+					<th class="px-4 py-2 text-left font-semibold text-gray-700 dark:text-gray-200">Notes</th>
+					<th class="px-4 py-2 text-left font-semibold text-gray-700 dark:text-gray-200">Actions</th
+					>
+				</tr>
+			</thead>
+			<tbody>
+				{#each maintenanceLogs as log (log.id)}
+					<tr class="border-b border-gray-200 last:border-b-0 dark:border-gray-700">
+						<td class="px-4 py-2 text-gray-900 dark:text-gray-100">{formatDate(log.date)}</td>
+						<td class="px-4 py-2 text-gray-900 dark:text-gray-100">{log.odometer}</td>
+						<td class="px-4 py-2 text-gray-900 dark:text-gray-100">{log.service}</td>
+						<td class="px-4 py-2 text-gray-900 dark:text-gray-100">{formatCurrency(log.cost)}</td>
+						<td class="px-4 py-2 text-gray-900 dark:text-gray-100">{log.notes || '-'}</td>
+						<td class="px-4 py-2 text-gray-800 dark:text-gray-200">
+							<button
+								class="rounded-full p-2 transition-colors hover:bg-gray-100 dark:hover:bg-gray-700"
+								onclick={() =>
+									maintenanceModelStore.show(vehicleId, log, true, (status: boolean) => {
+										if (status) {
+											fetchMaintenanceLogs();
+										}
+									})}
 							>
-							<td class="px-4 py-2 text-sm text-gray-900 dark:text-gray-100">{log.odometer}</td>
-							<td class="px-4 py-2 text-sm text-gray-900 dark:text-gray-100">{log.service}</td>
-							<td class="px-4 py-2 text-sm text-gray-900 dark:text-gray-100">{formatCurrency(log.cost)}</td>
-							<td class="px-4 py-2 text-sm text-gray-900 dark:text-gray-100">{log.notes || '-'}</td>
-							<td class="px-4 py-2 text-sm">
-								<button
-									on:click={() => handleEdit(log)}
-									class="mr-2 rounded bg-blue-500 px-3 py-1 text-white hover:bg-blue-600"
-								>
-									Edit
-								</button>
-								<button
-									on:click={() => handleDelete(log.id)}
-									class="rounded bg-red-500 px-3 py-1 text-white hover:bg-red-600"
-								>
-									Delete
-								</button>
-							</td>
-						</tr>
-					{/each}
-				</tbody>
-			</table>
-		</div>
-	{/if}
-
-	{#if showEditModal}
-		<MaintenanceLogForm
-			{vehicleId}
-			showModal={showEditModal}
-			closeModal={closeEditModal}
-			on:success={handleSuccess}
-			initialData={selectedLog}
-		/>
-	{/if}
-</div>
+								<Pencil
+									class="h-5 w-5 text-gray-500 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400"
+								/>
+							</button>
+							<button
+								class="rounded-full p-2 transition-colors hover:bg-gray-100 dark:hover:bg-gray-700"
+								onclick={() => deleteMaintenenceLog(log.id)}
+							>
+								<Trash2
+									class="h-5 w-5 text-gray-500 hover:text-red-600 dark:text-gray-300 dark:hover:text-red-400"
+								/>
+							</button>
+						</td>
+					</tr>
+				{/each}
+			</tbody>
+		</table>
+	</div>
+{/if}
diff --git a/app/client/src/components/maintenance/MaintenanceLogModal.svelte b/app/client/src/components/maintenance/MaintenanceLogModal.svelte
new file mode 100644
index 00000000..b9ac5514
--- /dev/null
+++ b/app/client/src/components/maintenance/MaintenanceLogModal.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import MaintenanceLogForm from './MaintenanceLogForm.svelte';
+	import ModalContainer from '$components/common/ModalContainer.svelte';
+	import { maintenanceModelStore } from '$lib/stores/maintenance';
+
+	let logToEdit = $state<any>(null);
+	let showModal = $state(false);
+	let editMode = $state(false);
+	let loading = $state(false);
+	let vehicleId = $state<string | undefined>(undefined);
+	let callback = $state<any>();
+
+	maintenanceModelStore.subscribe((data) => {
+		logToEdit = data.logToEdit;
+		showModal = data.show;
+		editMode = data.editMode;
+		vehicleId = data.vehicleId;
+		loading = false;
+		callback = data.callback;
+	});
+
+	function closeModal() {
+		maintenanceModelStore.hide();
+	}
+</script>
+
+{#if showModal}
+	<ModalContainer
+		onclose={closeModal}
+		title={editMode ? 'Edit Maintenance Log' : 'Add Maintenance Log'}
+		{loading}
+	>
+		<MaintenanceLogForm
+			bind:modalVisibility={showModal}
+			bind:logToEdit
+			{editMode}
+			{vehicleId}
+			{callback}
+			{loading}
+		/>
+	</ModalContainer>
+{/if}
diff --git a/app/client/src/components/pucc/PollutionCertificateDetails.svelte b/app/client/src/components/pucc/PollutionCertificateDetails.svelte
deleted file mode 100644
index 3ec008d9..00000000
--- a/app/client/src/components/pucc/PollutionCertificateDetails.svelte
+++ /dev/null
@@ -1,187 +0,0 @@
-<script lang="ts">
-	import { onMount } from 'svelte';
-	import { browser } from '$app/environment';
-	import { env } from '$env/dynamic/public';
-	import { FileText, Calendar, MapPin, Pencil, Trash2 } from '@lucide/svelte';
-	import PollutionCertificateForm from './PollutionCertificateForm.svelte';
-  import { config } from '../../lib/states/config';
-  import dayjs from 'dayjs';
-
-  $: formatDate = (date: string) => dayjs(date).format($config.dateFormat);
-
-	export let vehicleId: number | null = null;
-
-	interface PollutionCertificateDetails {
-		id: number;
-		certificateNumber: string;
-		issueDate: string;
-		expiryDate: string;
-		testingCenter: string;
-		notes?: string;
-	}
-
-	let pollutionCertificate: PollutionCertificateDetails | null = null;
-	let loading = false;
-	let error = '';
-	let showPollutionCertificateFormModal = false;
-
-	async function fetchPollutionCertificateDetails() {
-		if (!vehicleId) {
-			pollutionCertificate = null;
-			return;
-		}
-		loading = true;
-		error = '';
-		try {
-			const response = await fetch(
-				`${env.PUBLIC_API_BASE_URL||""}/api/vehicles/${vehicleId}/pucc`,
-				{
-					headers: {
-						'X-User-PIN': browser ? localStorage.getItem('userPin') || '' : ''
-					}
-				}
-			);
-			if (response.ok) {
-				pollutionCertificate = await response.json();
-			} else {
-				pollutionCertificate = null;
-			}
-		} catch (err) {
-			error = 'Network error. Please try again.';
-		} finally {
-			loading = false;
-		}
-	}
-
-	async function handleDeletePollutionCertificate() {
-		if (!pollutionCertificate) return;
-		if (!confirm('Are you sure you want to delete this pollution certificate?')) {
-			return;
-		}
-		try {
-			const response = await fetch(
-				`${env.PUBLIC_API_BASE_URL||""}/api/vehicles/${vehicleId}/pucc`,
-				{
-					method: 'DELETE',
-					headers: {
-						'X-User-PIN': browser ? localStorage.getItem('userPin') || '' : ''
-					}
-				}
-			);
-			if (response.ok) {
-				pollutionCertificate = null;
-				alert('Pollution certificate deleted successfully.');
-			} else {
-				const data = await response.json();
-				alert(data.message || 'Failed to delete pollution certificate.');
-			}
-		} catch (err) {
-			alert('Network error. Failed to delete pollution certificate.');
-		}
-	}
-
-	function handleEditPollutionCertificate() {
-		showPollutionCertificateFormModal = true;
-	}
-
-	function handleAddPollutionCertificate() {
-		showPollutionCertificateFormModal = true;
-	}
-
-	function closePollutionCertificateFormModal() {
-		showPollutionCertificateFormModal = false;
-		fetchPollutionCertificateDetails(); // Refresh details after form submission
-	}
-
-	// Refetch when vehicleId changes
-	$: if (vehicleId) {
-		fetchPollutionCertificateDetails();
-	}
-
-	onMount(() => {
-		if (vehicleId) fetchPollutionCertificateDetails();
-	});
-</script>
-
-<div class="mt-8 text-gray-600 dark:text-gray-300">
-	<h3 class="mb-4 text-lg font-semibold text-gray-900 dark:text-gray-100">
-		Pollution Certificate Details
-	</h3>
-	{#if loading}
-		<div class="text-gray-500 dark:text-gray-400">Loading pollution certificate details...</div>
-	{:else if error}
-		<div class="text-red-600 dark:text-red-400" role="alert">{error}</div>
-	{:else if pollutionCertificate}
-		<div
-			class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-800"
-		>
-			<div class="flex items-center justify-between">
-				<div class="flex items-center gap-2">
-					<FileText class="h-6 w-6 text-green-500 dark:text-green-400" />
-					<span class="text-xl font-bold text-gray-800 dark:text-gray-100"
-						>{pollutionCertificate.certificateNumber}</span
-					>
-				</div>
-				<div class="flex gap-2">
-					<button
-						on:click={handleEditPollutionCertificate}
-						class="text-gray-500 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400"
-					>
-						<Pencil class="h-5 w-5" />
-					</button>
-					<button
-						on:click={handleDeletePollutionCertificate}
-						class="text-gray-500 hover:text-red-600 dark:text-gray-300 dark:hover:text-red-400"
-					>
-						<Trash2 class="h-5 w-5" />
-					</button>
-				</div>
-			</div>
-			<div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2">
-				<div class="flex items-center gap-2">
-					<Calendar class="h-5 w-5 text-gray-400 dark:text-gray-500" />
-					<span class="font-semibold">Issue Date:</span>
-					<span>{formatDate(pollutionCertificate.issueDate)}</span>
-				</div>
-				<div class="flex items-center gap-2">
-					<Calendar class="h-5 w-5 text-gray-400 dark:text-gray-500" />
-					<span class="font-semibold">Expiry Date:</span>
-					<span>{formatDate(pollutionCertificate.expiryDate)}</span>
-				</div>
-				<div class="flex items-center gap-2">
-					<MapPin class="h-5 w-5 text-gray-400 dark:text-gray-500" />
-					<span class="font-semibold">Testing Center:</span>
-					<span>{pollutionCertificate.testingCenter}</span>
-				</div>
-				{#if pollutionCertificate.notes}
-					<div class="flex items-center gap-2 md:col-span-2">
-						<FileText class="h-5 w-5 text-gray-400 dark:text-gray-500" />
-						<span class="font-semibold">Notes:</span>
-						<span>{pollutionCertificate.notes}</span>
-					</div>
-				{/if}
-			</div>
-		</div>
-	{:else}
-		<div class="text-center">
-			<p class="text-gray-500 dark:text-gray-400">
-				No pollution certificate details found for this vehicle.
-			</p>
-			<button
-				on:click={handleAddPollutionCertificate}
-				class="mt-4 rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700"
-			>
-				Add Pollution Certificate
-			</button>
-		</div>
-	{/if}
-
-	{#if showPollutionCertificateFormModal}
-		<PollutionCertificateForm
-			{vehicleId}
-			showModal={showPollutionCertificateFormModal}
-			closeModal={closePollutionCertificateFormModal}
-			initialData={pollutionCertificate}
-		/>
-	{/if}
-</div>
diff --git a/app/client/src/components/pucc/PollutionCertificateForm.svelte b/app/client/src/components/pucc/PollutionCertificateForm.svelte
index 7ea76a67..90a4779e 100644
--- a/app/client/src/components/pucc/PollutionCertificateForm.svelte
+++ b/app/client/src/components/pucc/PollutionCertificateForm.svelte
@@ -1,68 +1,57 @@
 <script lang="ts">
-	import { createEventDispatcher, onMount } from 'svelte';
+	import FormField from '$components/common/FormField.svelte';
+	import FormSubmitButton from '$components/common/FormSubmitButton.svelte';
 	import { env } from '$env/dynamic/public';
-	import PollutionCertificateFormComponent from './PollutionCertificateFormComponent.svelte';
+	import { Calendar1, IdCard, Notebook, TestTube, TestTube2 } from '@lucide/svelte';
 
-	export let vehicleId: number | null = null;
-	export let showModal: boolean = false;
-	export let closeModal: () => void;
-	export let initialData: {
-		id?: number;
-		certificateNumber: string;
-		issueDate: string;
-		expiryDate: string;
-		testingCenter: string;
-		notes?: string;
-	} | null = null;
+	let {
+		vehicleId,
+		entryToEdit = $bindable(),
+		modalVisibility = $bindable(),
+		editMode,
+		loading,
+		callback
+	} = $props();
 
-	let certificate = {
+	let certificate = $state({
 		certificateNumber: '',
 		issueDate: '',
 		expiryDate: '',
 		testingCenter: '',
 		notes: ''
-	};
-
-	let error = '';
-	let success = '';
+	});
 
-	const dispatch = createEventDispatcher();
+	let status = $state<{
+		message: string | null;
+		type: 'ERROR' | 'SUCCESS' | null;
+	}>({
+		message: null,
+		type: null
+	});
 
-	onMount(() => {
-		if (initialData) {
-			certificate = {
-				...initialData,
-				issueDate: initialData.issueDate
-					? new Date(initialData.issueDate).toISOString().split('T')[0]
-					: '',
-				expiryDate: initialData.expiryDate
-					? new Date(initialData.expiryDate).toISOString().split('T')[0]
-					: ''
-			};
+	$effect(() => {
+		if (entryToEdit) {
+			Object.assign(certificate, entryToEdit);
 		}
 	});
 
-	async function savePollutionCertificate() {
-		error = '';
-		success = '';
-
+	async function persistCertificate() {
 		if (
 			!certificate.certificateNumber ||
 			!certificate.issueDate ||
 			!certificate.expiryDate ||
 			!certificate.testingCenter
 		) {
-			error = 'All fields are required.';
+			status.message = 'Certificate Number, Issue Date, Expiry Date, Testing Center are required.';
+			status.type = 'ERROR';
 			return;
 		}
 
-		const method = initialData && initialData.id ? 'PUT' : 'POST';
-
 		try {
 			const response = await fetch(
-				`${env.PUBLIC_API_BASE_URL||""}/api/vehicles/${vehicleId}/pucc`,
+				`${env.PUBLIC_API_BASE_URL || ''}/api/vehicles/${vehicleId}/pucc/${editMode ? entryToEdit.id : ''}`,
 				{
-					method,
+					method: `${editMode ? 'PUT' : 'POST'}`,
 					headers: {
 						'Content-Type': 'application/json',
 						'X-User-PIN': localStorage.getItem('userPin') || ''
@@ -72,34 +61,97 @@
 			);
 
 			if (response.ok) {
-				success = `Pollution certificate ${initialData ? 'updated' : 'added'} successfully!`;
-				dispatch('success');
-				closeModal();
+				status.message = `Pollution Certificate ${editMode ? 'updated' : 'added'} successfully!`;
+				status.type = 'SUCCESS';
+				Object.assign(certificate, {
+					certificateNumber: '',
+					issueDate: '',
+					expiryDate: '',
+					testingCenter: '',
+					notes: ''
+				});
+				modalVisibility = false;
 			} else {
 				const data = await response.json();
-				error = data.message || 'Failed to save pollution certificate.';
+				status.message =
+					data.message || `Failed to ${editMode ? 'update' : 'add'} pollution certificate.`;
+				status.type = 'ERROR';
 			}
 		} catch (e) {
-			error = 'Failed to connect to the server.';
+			status.message = 'Failed to connect to the server.';
+			status.type = 'ERROR';
+		}
+		loading = false;
+		if (status.type === 'SUCCESS') {
+			entryToEdit = null;
+			callback(true);
 		}
 	}
 </script>
 
-{#if showModal}
-	<div class="bg-opacity-50 fixed inset-0 z-50 flex items-center justify-center bg-black">
-		<div class="w-full max-w-lg rounded-lg bg-white p-8 shadow-2xl dark:bg-gray-800">
-			<h2 class="mb-6 text-2xl font-bold text-gray-900 dark:text-gray-100">
-				{initialData ? 'Edit' : 'Add'} Pollution Certificate Details
-			</h2>
+<form
+	onsubmit={(e) => {
+		persistCertificate();
+		e.preventDefault();
+	}}
+	class="space-y-6"
+>
+	<FormField
+		id="certificate-number"
+		type="text"
+		placeholder="Certificate Number"
+		bind:value={certificate.certificateNumber}
+		icon={IdCard}
+		required={true}
+		ariaLabel="Certificate Number"
+	/>
+	<FormField
+		id="issue-date"
+		type="date"
+		placeholder="Issue Date"
+		bind:value={certificate.issueDate}
+		icon={Calendar1}
+		required={true}
+		ariaLabel="Issue Date"
+	/>
+	<FormField
+		id="expiry-date"
+		type="date"
+		placeholder="Expiry Date"
+		bind:value={certificate.expiryDate}
+		icon={Calendar1}
+		required={true}
+		ariaLabel="Expiry Date"
+	/>
+	<FormField
+		id="testing-center"
+		type="text"
+		placeholder="Testing Center"
+		bind:value={certificate.testingCenter}
+		icon={TestTube2}
+		required={true}
+		ariaLabel="Testing Center"
+	/>
+	<FormField
+		id="notes"
+		type="text"
+		placeholder="Notes"
+		bind:value={certificate.notes}
+		icon={Notebook}
+		required={false}
+		ariaLabel="Notes"
+	/>
+	<FormSubmitButton text={editMode ? 'Update Certificate' : 'Add Certificate'} {loading} />
+</form>
 
-			<PollutionCertificateFormComponent
-				bind:certificate
-				onSubmit={savePollutionCertificate}
-				bind:error
-				bind:success
-				editMode={!!initialData}
-				on:close={closeModal}
-			/>
-		</div>
-	</div>
+{#if status.message}
+	<p
+		class={`mt-4 text-center text-sm ${status.type === 'ERROR' ? 'text-red-500 dark:text-red-400' : 'text-green-500 dark:text-green-400'}`}
+	>
+		{#if status.type === 'ERROR'}
+			<span class="font-semibold">Error:</span> {status.message}
+		{:else}
+			{status.message}
+		{/if}
+	</p>
 {/if}
diff --git a/app/client/src/components/pucc/PollutionCertificateFormComponent.svelte b/app/client/src/components/pucc/PollutionCertificateFormComponent.svelte
deleted file mode 100644
index 4051168d..00000000
--- a/app/client/src/components/pucc/PollutionCertificateFormComponent.svelte
+++ /dev/null
@@ -1,95 +0,0 @@
-<script lang="ts">
-	import { createEventDispatcher } from 'svelte';
-
-	const dispatch = createEventDispatcher();
-
-	export let certificate;
-	export let onSubmit;
-	export let error = '';
-	  export let success = '';
-</script>
-
-<form on:submit|preventDefault={onSubmit}>
-	<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
-		<div class="md:col-span-2">
-			<label
-				for="certificateNumber"
-				class="block text-sm font-medium text-gray-700 dark:text-gray-300">Certificate Number</label
-			>
-			<input
-				type="text"
-				id="certificateNumber"
-				bind:value={certificate.certificateNumber}
-				class="mt-1 block w-full rounded-md border-gray-300 text-gray-700 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
-			/>
-		</div>
-		<div>
-			<label for="issueDate" class="block text-sm font-medium text-gray-700 dark:text-gray-300"
-				>Issue Date</label
-			>
-			<input
-				type="date"
-				id="issueDate"
-				bind:value={certificate.issueDate}
-				class="mt-1 block w-full rounded-md border-gray-300 text-gray-700 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
-			/>
-		</div>
-		<div>
-			<label for="expiryDate" class="block text-sm font-medium text-gray-700 dark:text-gray-300"
-				>Expiry Date</label
-			>
-			<input
-				type="date"
-				id="expiryDate"
-				bind:value={certificate.expiryDate}
-				class="mt-1 block w-full rounded-md border-gray-300 text-gray-700 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
-			/>
-		</div>
-		<div class="md:col-span-2">
-			<label for="testingCenter" class="block text-sm font-medium text-gray-700 dark:text-gray-300"
-				>Testing Center</label
-			>
-			<input
-				type="text"
-				id="testingCenter"
-				bind:value={certificate.testingCenter}
-				class="mt-1 block w-full rounded-md border-gray-300 text-gray-700 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
-			/>
-		</div>
-		<div class="md:col-span-2">
-			<label for="notes" class="block text-sm font-medium text-gray-700 dark:text-gray-300"
-				>Notes</label
-			>
-			<textarea
-				id="notes"
-				bind:value={certificate.notes}
-				rows="4"
-				class="mt-1 block w-full rounded-md border-gray-300 text-gray-700 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
-			></textarea>
-		</div>
-	</div>
-
-	{#if error}
-		<div class="mt-4 text-red-600 dark:text-red-400" role="alert">
-			{error}
-		</div>
-	{/if}
-
-	{#if success}
-		<div class="mt-4 text-green-600 dark:text-green-400" role="alert">
-			{success}
-		</div>
-	{/if}
-
-	<div class="mt-8 flex justify-end gap-4">
-		<button
-			type="button"
-			on:click={() => dispatch('close')}
-			class="rounded-lg bg-gray-200 px-4 py-2 text-gray-800 hover:bg-gray-300 dark:bg-gray-600 dark:text-gray-200 dark:hover:bg-gray-500"
-			>Cancel</button
-		>
-		<button type="submit" class="rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700"
-			>Save</button
-		>
-	</div>
-</form>
diff --git a/app/client/src/components/pucc/PollutionCertificateList.svelte b/app/client/src/components/pucc/PollutionCertificateList.svelte
new file mode 100644
index 00000000..4686faf9
--- /dev/null
+++ b/app/client/src/components/pucc/PollutionCertificateList.svelte
@@ -0,0 +1,162 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { browser } from '$app/environment';
+	import { env } from '$env/dynamic/public';
+	import { FileText, Calendar, MapPin, Pencil, Trash2, BadgeCheck } from '@lucide/svelte';
+	import { formatDate } from '$lib/utils/formatting';
+	import { puccModelStore } from '$lib/stores/pucc';
+
+	let { vehicleId } = $props();
+
+	interface PollutionCertificateDetails {
+		id: string;
+		certificateNumber: string;
+		issueDate: string;
+		expiryDate: string;
+		testingCenter: string;
+		notes?: string;
+	}
+
+	let pollutionCertificates: PollutionCertificateDetails[] = $state([]);
+	let loading = $state(false);
+	let error = $state('');
+
+	$effect(() => {
+		if (!vehicleId) {
+			error = 'Vehicle ID is required.';
+			loading = false;
+		} else {
+			fetchPollutionCertificateDetails();
+		}
+	});
+
+	async function fetchPollutionCertificateDetails() {
+		if (!vehicleId) {
+			pollutionCertificates = [];
+			return;
+		}
+		loading = true;
+		error = '';
+		try {
+			const response = await fetch(
+				`${env.PUBLIC_API_BASE_URL || ''}/api/vehicles/${vehicleId}/pucc`,
+				{
+					headers: {
+						'X-User-PIN': browser ? localStorage.getItem('userPin') || '' : ''
+					}
+				}
+			);
+			if (response.ok) {
+				pollutionCertificates = await response.json();
+			} else {
+				error = 'Failed to fetch Pollution Certificates.';
+			}
+		} catch (err) {
+			error = 'Network error. Please try again.';
+		} finally {
+			loading = false;
+		}
+	}
+
+	async function deletePollutionCertificate(puccId: string) {
+		if (!confirm('Are you sure you want to delete this pollution certificate?')) {
+			return;
+		}
+		try {
+			const response = await fetch(
+				`${env.PUBLIC_API_BASE_URL || ''}/api/vehicles/${vehicleId}/pucc/${puccId}`,
+				{
+					method: 'DELETE',
+					headers: {
+						'X-User-PIN': browser ? localStorage.getItem('userPin') || '' : ''
+					}
+				}
+			);
+			if (response.ok) {
+				await fetchPollutionCertificateDetails();
+			} else {
+				const data = await response.json();
+				alert(data.message || 'Failed to delete pollution certificate.');
+			}
+		} catch (err) {
+			alert('Network error. Failed to delete pollution certificate.');
+		}
+	}
+
+	onMount(() => {
+		fetchPollutionCertificateDetails();
+	});
+</script>
+
+{#if loading}
+	<div class="text-gray-500 dark:text-gray-400">Loading pollution certificate details...</div>
+{:else if error}
+	<div class="text-red-600 dark:text-red-400" role="alert">{error}</div>
+{:else if pollutionCertificates.length === 0}
+	<div class="text-gray-500 dark:text-gray-400">No maintenance logs for this vehicle.</div>
+{:else}
+	{#each pollutionCertificates as pucc (pucc.id)}
+		<div
+			class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-800"
+		>
+			<div class="flex items-center justify-between">
+				<div class="flex items-center gap-2">
+					<BadgeCheck class="h-6 w-6 text-purple-500 dark:text-purple-400" />
+					<span class="text-xl font-bold text-gray-800 dark:text-gray-100"
+						>{pucc.certificateNumber}</span
+					>
+				</div>
+				<div class="flex gap-2">
+					<button
+						class="rounded-full p-2 transition-colors hover:bg-gray-100 dark:hover:bg-gray-700"
+						onclick={() => {
+							puccModelStore.show(vehicleId, pucc, true, (status: boolean) => {
+								if (status) {
+									fetchPollutionCertificateDetails();
+								}
+							});
+						}}
+					>
+						<Pencil
+							class="h-5 w-5 text-gray-500 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400"
+						/>
+					</button>
+					<button
+						class="rounded-full p-2 transition-colors hover:bg-gray-100 dark:hover:bg-gray-700"
+						onclick={() => {
+							deletePollutionCertificate(pucc.id);
+						}}
+					>
+						<Trash2
+							class="h-5 w-5 text-gray-500 hover:text-red-600 dark:text-gray-300 dark:hover:text-red-400"
+						/>
+					</button>
+				</div>
+			</div>
+			<div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2">
+				<div class="flex items-center gap-2 text-gray-900 dark:text-gray-100">
+					<Calendar class="h-5 w-5" />
+					<span class="font-semibold">Issue Date:</span>
+					<span>{formatDate(pucc.issueDate)}</span>
+				</div>
+				<div class="flex items-center gap-2 text-gray-900 dark:text-gray-100">
+					<Calendar class="h-5 w-5" />
+					<span class="font-semibold">Expiry Date:</span>
+					<span>{formatDate(pucc.expiryDate)}</span>
+				</div>
+				<div class="flex items-center gap-2 text-gray-900 dark:text-gray-100">
+					<MapPin class="h-5 w-5" />
+					<span class="font-semibold">Testing Center:</span>
+					<span>{pucc.testingCenter}</span>
+				</div>
+				{#if pucc.notes}
+					<div class="flex items-center gap-2 text-gray-900 md:col-span-2 dark:text-gray-100">
+						<FileText class="h-5 w-5" />
+						<span class="font-semibold">Notes:</span>
+						<span>{pucc.notes}</span>
+					</div>
+				{/if}
+			</div>
+		</div>
+	{/each}
+{/if}
diff --git a/app/client/src/components/pucc/PollutionCertificateModal.svelte b/app/client/src/components/pucc/PollutionCertificateModal.svelte
new file mode 100644
index 00000000..86801d30
--- /dev/null
+++ b/app/client/src/components/pucc/PollutionCertificateModal.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import ModalContainer from '$components/common/ModalContainer.svelte';
+	import { puccModelStore } from '$lib/stores/pucc';
+	import PollutionCertificateForm from './PollutionCertificateForm.svelte';
+
+	let entryToEdit = $state<any>(null);
+	let showModal = $state(false);
+	let editMode = $state(false);
+	let loading = $state(false);
+	let vehicleId = $state<string | undefined>(undefined);
+	let callback = $state<any>();
+
+	puccModelStore.subscribe((data) => {
+		entryToEdit = data.entryToEdit;
+		showModal = data.show;
+		editMode = data.editMode;
+		vehicleId = data.vehicleId;
+		loading = false;
+		callback = data.callback;
+	});
+
+	function closeModal() {
+		puccModelStore.hide();
+	}
+</script>
+
+{#if showModal}
+	<ModalContainer
+		onclose={closeModal}
+		title={editMode ? 'Edit Pollution Certificate' : 'Add Pollution Certificate'}
+		{loading}
+	>
+		<PollutionCertificateForm
+			bind:modalVisibility={showModal}
+			bind:entryToEdit
+			{editMode}
+			{vehicleId}
+			{callback}
+			{loading}
+		/>
+	</ModalContainer>
+{/if}
diff --git a/app/client/src/components/tabs/DashboardTab.svelte b/app/client/src/components/tabs/DashboardTab.svelte
new file mode 100644
index 00000000..1c824a26
--- /dev/null
+++ b/app/client/src/components/tabs/DashboardTab.svelte
@@ -0,0 +1,135 @@
+<script lang="ts">
+	import { Line } from 'svelte5-chartjs';
+	import ChartCard from '$components/chart/ChartCard.svelte';
+	import { darkModeStore } from '$lib/stores/dark-mode';
+	import { env } from '$env/dynamic/public';
+	import { formatDate, getCurrencySymbol, getMileageUnit } from '$lib/utils/formatting';
+	import { Chart, registerables, type ChartOptions } from 'chart.js';
+	import TabContainer from '$components/common/TabContainer.svelte';
+
+	const { vehicleId } = $props();
+
+	$effect(() => {
+		Chart.register(...registerables);
+	});
+
+	let fuelCostData: any = $state({});
+	let mileageData: any = $state({});
+
+	const generateChartOptions = (isDarkMode: boolean): ChartOptions => {
+		return {
+			responsive: true,
+			plugins: {
+				legend: {
+					labels: {
+						color: isDarkMode ? '#e5e7eb' : '#374151' // Tailwind gray-200 or gray-700
+					}
+				}
+			},
+			scales: {
+				x: {
+					ticks: { textStrokeColor: isDarkMode ? '#e5e7eb' : '#374151' },
+					grid: { color: isDarkMode ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.1)' }
+				},
+				y: {
+					ticks: { textStrokeColor: isDarkMode ? '#e5e7eb' : '#374151' },
+					grid: { color: isDarkMode ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.1)' }
+				}
+			}
+		};
+	};
+
+	let chartOptions = $state({});
+
+	darkModeStore.subscribe((isDarkMode) => {
+		chartOptions = generateChartOptions(isDarkMode);
+		fetchChartData();
+	});
+
+	async function fetchChartData() {
+		try {
+			const response = await fetch(
+				`${env.PUBLIC_API_BASE_URL || ''}/api/vehicles/${vehicleId}/fuel-logs`,
+				{
+					headers: {
+						'X-User-PIN': localStorage.getItem('userPin') || ''
+					}
+				}
+			);
+			if (response.ok) {
+				const data = await response.json();
+				const labels = data.map((log: any) => formatDate(log.date));
+				const costData = data.map((log: any) => log.cost);
+				// Calculate Cumulative cost
+				for (let i = 1; i < costData.length; i++) {
+					costData[i] += costData[i - 1];
+				}
+				const mileageDataPoints = data.map((log: any) => log.mileage);
+
+				fuelCostData = {
+					labels,
+					datasets: [
+						{
+							label: `Total Fuel Cost (${getCurrencySymbol()})`,
+							data: costData,
+							fill: false,
+							borderColor: 'rgb(75, 192, 192)',
+							tension: 0.3,
+							borderWidth: 2,
+							borderCapStyle: 'round',
+							pointStyle: 'circle',
+							pointRadius: 2
+						}
+					]
+				};
+
+				mileageData = {
+					labels,
+					datasets: [
+						{
+							label: `Mileage (${getMileageUnit()})`,
+							data: mileageDataPoints,
+							fill: true,
+							borderColor: 'rgb(255, 99, 132)',
+							tension: 0.1
+						}
+					]
+				};
+			} else {
+				console.error('Failed to fetch chart data');
+			}
+		} catch (e) {
+			console.error('Failed to connect to the server.');
+		}
+	}
+	$effect(() => {
+		if (vehicleId) {
+			fetchChartData();
+		}
+	});
+</script>
+
+<TabContainer title="Fuel Cost & Mileage Trends">
+	<div class="grid grid-cols-1 gap-8 md:grid-cols-2">
+		{#if fuelCostData?.datasets?.length > 0 && mileageData?.datasets?.length > 0}
+			<ChartCard
+				title="Fuel Cost Over Time"
+				chartData={fuelCostData}
+				ChartComponent={Line}
+				options={chartOptions}
+			/>
+			<ChartCard
+				title="Mileage Over Time"
+				chartData={mileageData}
+				ChartComponent={Line}
+				options={chartOptions}
+			/>
+		{:else}
+			<div class="col-span-2 py-12 text-center">
+				<p class="text-lg text-gray-500 dark:text-gray-400">
+					No fuel or mileage data available for this vehicle.
+				</p>
+			</div>
+		{/if}
+	</div>
+</TabContainer>
diff --git a/app/client/src/components/tabs/FuelLogTab.svelte b/app/client/src/components/tabs/FuelLogTab.svelte
new file mode 100644
index 00000000..7973ddb0
--- /dev/null
+++ b/app/client/src/components/tabs/FuelLogTab.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import TabContainer from '$components/common/TabContainer.svelte';
+	import FuelLogList from '$components/fuel/FuelLogList.svelte';
+
+	let { vehicleId } = $props();
+</script>
+
+<TabContainer title="Fuel Refill History">
+	<FuelLogList {vehicleId} />
+</TabContainer>
diff --git a/app/client/src/components/tabs/InsuranceTab.svelte b/app/client/src/components/tabs/InsuranceTab.svelte
new file mode 100644
index 00000000..a5d697a1
--- /dev/null
+++ b/app/client/src/components/tabs/InsuranceTab.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import TabContainer from '$components/common/TabContainer.svelte';
+	import InsuranceDetailsList from '$components/insurance/InsuranceDetailsList.svelte';
+
+	let { vehicleId } = $props();
+</script>
+
+<TabContainer title="Insurance Details">
+	<InsuranceDetailsList {vehicleId} />
+</TabContainer>
diff --git a/app/client/src/components/tabs/MaintenenceLogTab.svelte b/app/client/src/components/tabs/MaintenenceLogTab.svelte
new file mode 100644
index 00000000..138ef875
--- /dev/null
+++ b/app/client/src/components/tabs/MaintenenceLogTab.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import TabContainer from '$components/common/TabContainer.svelte';
+	import MaintenanceLogList from '$components/maintenance/MaintenanceLogList.svelte';
+
+	let { vehicleId } = $props();
+</script>
+
+<TabContainer title="Maintenance History">
+	<MaintenanceLogList {vehicleId} />
+</TabContainer>
diff --git a/app/client/src/components/tabs/PollutionTab.svelte b/app/client/src/components/tabs/PollutionTab.svelte
new file mode 100644
index 00000000..cff2a952
--- /dev/null
+++ b/app/client/src/components/tabs/PollutionTab.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import TabContainer from '$components/common/TabContainer.svelte';
+	import PollutionCertificateList from '$components/pucc/PollutionCertificateList.svelte';
+
+	let { vehicleId } = $props();
+</script>
+
+<TabContainer title={'Pollution Certificate Details'}>
+	<PollutionCertificateList {vehicleId} />
+</TabContainer>
diff --git a/app/client/src/components/tabs/TabHeader.svelte b/app/client/src/components/tabs/TabHeader.svelte
new file mode 100644
index 00000000..dceb70b8
--- /dev/null
+++ b/app/client/src/components/tabs/TabHeader.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+	let { activeTab = $bindable() } = $props();
+	const tabs: {
+		name: string;
+		id: string;
+	}[] = [
+		{
+			name: 'Dashboard',
+			id: 'dashboard'
+		},
+		{
+			name: 'Fuel Logs',
+			id: 'fuel'
+		},
+		{
+			name: 'Maintenance',
+			id: 'maintenance'
+		},
+		{
+			name: 'Insurance',
+			id: 'insurance'
+		},
+		{
+			name: 'Pollution Certificate',
+			id: 'pollution'
+		}
+	];
+</script>
+
+<ul class="-mb-px flex flex-wrap" id="default-tab" role="tablist" aria-orientation="horizontal">
+	{#each tabs as tab (tab)}
+		<li class="me-2" role="presentation">
+			<button
+				class="inline-block cursor-pointer rounded-t-lg px-4 py-2 text-sm font-medium"
+				class:text-blue-600={activeTab === tab.id}
+				class:border-blue-600={activeTab === tab.id}
+				class:hover:text-gray-600={activeTab !== tab.id}
+				class:hover:border-gray-300={activeTab !== tab.id}
+				class:dark:text-blue-500={activeTab === tab.id}
+				class:dark:border-blue-500={activeTab === tab.id}
+				class:dark:hover:text-gray-300={activeTab !== tab.id}
+				class:border-transparent={activeTab !== tab.id}
+				class:text-gray-500={activeTab !== tab.id}
+				class:dark:text-gray-400={activeTab !== tab.id}
+				onclick={() => (activeTab = tab.id)}
+				type="button"
+				role="tab"
+				aria-controls={tab.name}
+				aria-selected={activeTab === tab.id}>{tab.name}</button
+			>
+		</li>
+	{/each}
+</ul>
diff --git a/app/client/src/components/vehicle/AddVehicleForm.svelte b/app/client/src/components/vehicle/AddVehicleForm.svelte
deleted file mode 100644
index 3e914b4d..00000000
--- a/app/client/src/components/vehicle/AddVehicleForm.svelte
+++ /dev/null
@@ -1,71 +0,0 @@
-<script lang="ts">
-	import VehicleForm from './VehicleForm.svelte';
-
-	export let newVehicle;
-	export let addVehicle;
-	export let addVehicleError = '';
-	export let addVehicleSuccess = '';
-	export let showModal = false;
-	export let editMode = false;
-
-	function closeModal() {
-		showModal = false;
-	}
-</script>
-
-{#if showModal}
-	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
-		<div
-			class="animate-scale-up relative max-h-[90vh] w-full max-w-xl overflow-y-auto rounded-2xl bg-white p-10 shadow-2xl dark:bg-gray-800"
-		>
-			<button
-				type="button"
-				class="absolute top-6 right-6 rounded-full bg-gray-100 p-2 text-gray-400 transition hover:text-gray-700 dark:bg-gray-700 dark:text-gray-300 dark:hover:text-white"
-				on:click={closeModal}
-				aria-label="Close"
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-6 w-6"
-					fill="none"
-					viewBox="0 0 24 24"
-					stroke="currentColor"
-				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M6 18L18 6M6 6l12 12"
-					/>
-				</svg>
-			</button>
-			<h2 class="mb-2 text-center text-3xl font-extrabold text-gray-900 dark:text-gray-100">
-				{editMode ? 'Edit Vehicle Details' : 'Add a New Vehicle'}
-			</h2>
-			<div class="mb-8 border-b border-gray-200 dark:border-gray-700"></div>
-			<VehicleForm
-				vehicle={newVehicle}
-				onSubmit={addVehicle}
-				error={addVehicleError}
-				success={addVehicleSuccess}
-				{editMode}
-			/>
-		</div>
-	</div>
-{/if}
-
-<style>
-	@keyframes scale-up {
-		from {
-			transform: scale(0.9);
-			opacity: 0;
-		}
-		to {
-			transform: scale(1);
-			opacity: 1;
-		}
-	}
-	.animate-scale-up {
-		animation: scale-up 0.3s ease-out forwards;
-	}
-</style>
diff --git a/app/client/src/components/vehicle/VehicleCard.svelte b/app/client/src/components/vehicle/VehicleCard.svelte
index cd284b92..8a4b025a 100644
--- a/app/client/src/components/vehicle/VehicleCard.svelte
+++ b/app/client/src/components/vehicle/VehicleCard.svelte
@@ -12,22 +12,38 @@
 		Shield,
 		BadgeCheck
 	} from '@lucide/svelte';
-	import { createEventDispatcher } from 'svelte';
+	import { formatDistance } from '$lib/utils/formatting';
+	import { vehicleModelStore, vehiclesStore } from '$lib/stores/vehicle';
+	import { maintenanceModelStore } from '$lib/stores/maintenance';
+	import { fuelLogModelStore } from '$lib/stores/fuel-log';
+	import { insuranceModelStore } from '$lib/stores/insurance';
+	import { puccModelStore } from '$lib/stores/pucc';
 
-	export let vehicle: {
-		id: number;
-		make: string;
-		model: string;
-		year: number;
-		licensePlate: string;
-		vin?: string;
-		color?: string;
-		odometer?: number;
-		insuranceStatus?: string;
-		puccStatus?: string;
-	};
+	const { vehicle, updateCallback } = $props();
 
-	const dispatch = createEventDispatcher();
+	async function deleteVehicle(vehicleId: string) {
+		if (!confirm('Are you sure you want to delete this vehicle?')) {
+			return;
+		}
+		try {
+			const response = await fetch(`http://localhost:3000/api/vehicles/${vehicleId}`, {
+				method: 'DELETE',
+				headers: {
+					'X-User-PIN': localStorage.getItem('userPin') || ''
+				}
+			});
+			if (response.ok) {
+				alert('Vehicle deleted successfully.');
+				vehicleModelStore.hide();
+				vehiclesStore.fetchVehicles();
+			} else {
+				const data = await response.json();
+				alert(data.message || 'Failed to delete vehicle.');
+			}
+		} catch (e) {
+			alert('Failed to connect to the server.');
+		}
+	}
 </script>
 
 <div
@@ -52,29 +68,24 @@
 			>
 			{vehicle.licensePlate}
 		</p>
-		{#if vehicle.vin}
-			<p class="flex items-center gap-2">
-				<Fingerprint class="h-5 w-5 text-gray-400 dark:text-gray-500" /><span class="font-semibold"
-					>VIN:</span
-				>
-				{vehicle.vin}
-			</p>
-		{/if}
-		{#if vehicle.color}
-			<p class="flex items-center gap-2">
-				<Paintbrush class="h-5 w-5 text-gray-400 dark:text-gray-500" /><span class="font-semibold"
-					>Color:</span
-				>
-				{vehicle.color}
-			</p>
-		{/if}
-		{#if vehicle.odometer}
-			<p class="flex items-center gap-2">
-				<Gauge class="h-5 w-5 text-gray-400 dark:text-gray-500" />
-				<span class="font-semibold">Odometer:</span>
-				{vehicle.odometer} km
-			</p>
-		{/if}
+		<p class="flex items-center gap-2">
+			<Fingerprint class="h-5 w-5 text-gray-400 dark:text-gray-500" /><span class="font-semibold"
+				>VIN:</span
+			>
+			{vehicle.vin ? vehicle.vin : '-'}
+		</p>
+
+		<p class="flex items-center gap-2">
+			<Paintbrush class="h-5 w-5 text-gray-400 dark:text-gray-500" /><span class="font-semibold"
+				>Color:</span
+			>
+			{vehicle.color ? vehicle.color : '-'}
+		</p>
+		<p class="flex items-center gap-2">
+			<Gauge class="h-5 w-5 text-gray-400 dark:text-gray-500" />
+			<span class="font-semibold">Odometer:</span>
+			{vehicle.odometer ? formatDistance(vehicle.odometer) : '-'}
+		</p>
 		{#if vehicle.insuranceStatus}
 			<p class="flex items-center gap-2">
 				<Shield class="h-5 w-5 text-gray-400 dark:text-gray-500" />
@@ -94,43 +105,65 @@
 			</p>
 		{/if}
 	</div>
-	<div class="flex justify-end gap-2">
-		<button
-			type="button"
-			class="rounded-full p-2 transition-colors hover:bg-gray-100 dark:hover:bg-gray-700"
-			on:click={() => dispatch('editVehicle', { vehicle })}
-			aria-label="Edit vehicle"
-		>
-			<Pencil
-				class="h-5 w-5 text-gray-500 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400"
-			/>
-		</button>
-		<button
-			type="button"
-			class="rounded-full p-2 transition-colors hover:bg-gray-100 dark:hover:bg-gray-700"
-			on:click={() => dispatch('deleteVehicle', { vehicle })}
-			aria-label="Delete vehicle"
-		>
-			<Trash2
-				class="h-5 w-5 text-gray-500 hover:text-red-600 dark:text-gray-300 dark:hover:text-red-400"
-			/>
-		</button>
-		<button
-			type="button"
-			class="rounded-full p-2 transition-colors hover:bg-green-100 dark:hover:bg-green-700"
-			on:click={() => dispatch('refillFuel', { vehicle })}
-			aria-label="Log fuel refill"
-		>
-			<!-- Fuel icon from Lucide or fallback SVG -->
-			<Fuel class="h-5 w-5 text-green-500 hover:text-green-600 dark:text-green-400" />
-		</button>
-		<button
-			type="button"
-			class="rounded-full p-2 transition-colors hover:bg-yellow-100 dark:hover:bg-yellow-700"
-			on:click={() => dispatch('addMaintenance', { vehicle })}
-			aria-label="Log maintenance"
-		>
-			<Wrench class="h-5 w-5 text-yellow-500 hover:text-yellow-600 dark:text-yellow-400" />
-		</button>
+	<div class=" flex justify-between">
+		<div class="flex justify-start gap-2">
+			<button
+				type="button"
+				class="rounded-full p-2 transition-colors hover:bg-green-100 dark:hover:bg-green-700"
+				onclick={() => fuelLogModelStore.show(vehicle.id, null, false, updateCallback)}
+				aria-label="Log fuel refill"
+			>
+				<!-- Fuel icon from Lucide or fallback SVG -->
+				<Fuel class="h-5 w-5 text-green-500 hover:text-green-600 dark:text-green-400" />
+			</button>
+			<button
+				type="button"
+				class="rounded-full p-2 transition-colors hover:bg-yellow-100 dark:hover:bg-yellow-700"
+				onclick={() => maintenanceModelStore.show(vehicle.id, null, false, updateCallback)}
+				aria-label="Log maintenance"
+			>
+				<Wrench class="h-5 w-5 text-yellow-500 hover:text-yellow-600 dark:text-yellow-400" />
+			</button>
+			<button
+				type="button"
+				class="rounded-full p-2 transition-colors hover:bg-blue-100 dark:hover:bg-blue-700"
+				onclick={() => insuranceModelStore.show(vehicle.id, null, false, updateCallback)}
+				aria-label="Add Insurance"
+			>
+				<Shield class="h-5 w-5 text-blue-500 hover:text-blue-600 dark:text-blue-400" />
+			</button>
+			<button
+				type="button"
+				class="rounded-full p-2 transition-colors hover:bg-purple-100 dark:hover:bg-purple-700"
+				onclick={() => puccModelStore.show(vehicle.id, null, false, updateCallback)}
+				aria-label="Add Pollution Certificate"
+			>
+				<BadgeCheck class="h-5 w-5 text-purple-500 hover:text-purple-600 dark:text-purple-400" />
+			</button>
+		</div>
+		<div class="flex justify-end gap-2">
+			<button
+				type="button"
+				class="rounded-full p-2 transition-colors hover:bg-gray-100 dark:hover:bg-gray-700"
+				onclick={() => {
+					vehicleModelStore.show(vehicle, true);
+				}}
+				aria-label="Edit vehicle"
+			>
+				<Pencil
+					class="h-5 w-5 text-gray-500 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400"
+				/>
+			</button>
+			<button
+				type="button"
+				class="rounded-full p-2 transition-colors hover:bg-gray-100 dark:hover:bg-gray-700"
+				onclick={() => deleteVehicle(vehicle.id)}
+				aria-label="Delete vehicle"
+			>
+				<Trash2
+					class="h-5 w-5 text-gray-500 hover:text-red-600 dark:text-gray-300 dark:hover:text-red-400"
+				/>
+			</button>
+		</div>
 	</div>
 </div>
diff --git a/app/client/src/components/vehicle/VehicleForm.svelte b/app/client/src/components/vehicle/VehicleForm.svelte
index fb398bf9..88ffc4a4 100644
--- a/app/client/src/components/vehicle/VehicleForm.svelte
+++ b/app/client/src/components/vehicle/VehicleForm.svelte
@@ -9,17 +9,93 @@
 		Building2
 	} from '@lucide/svelte';
 	import FormField from '../common/FormField.svelte';
+	import type { NewVehicle, Vehicle } from '$lib/models/vehicle';
+	import { env } from '$env/dynamic/public';
+	import { onMount } from 'svelte';
+	import FormSubmitButton from '$components/common/FormSubmitButton.svelte';
+	import { simulateNetworkDelay } from '$lib/utils/dev';
+	import { vehiclesStore } from '$lib/stores/vehicle';
 
-	export let vehicle;
-	export let onSubmit;
-	export let error = '';
-	export let success = '';
-	export let editMode = false;
+	let { vehicleToEdit = null, editMode = false, modalVisibility = $bindable(), loading } = $props();
+
+	const vehicle: NewVehicle = $state({
+		make: '',
+		model: '',
+		year: null,
+		licensePlate: '',
+		vin: '',
+		color: '',
+		odometer: null
+	});
+
+	let status = $state<{
+		message: string | null;
+		type: 'ERROR' | 'SUCCESS' | null;
+	}>({
+		message: null,
+		type: null
+	});
+
+	$effect(() => {
+		if (vehicleToEdit) {
+			Object.assign(vehicle, vehicleToEdit);
+		}
+	});
+
+	async function persistVehicle() {
+		if (!vehicle.make || !vehicle.model || !vehicle.year || !vehicle.licensePlate) {
+			status.message = 'Please fill in all required fields.';
+			status.type = 'ERROR';
+			return;
+		}
+		try {
+			if (loading) return; // Prevent multiple submissions
+			loading = true;
+			status.message = null;
+			status.type = null;
+			// await simulateNetworkDelay(2000); // Simulate network delay for development
+			const response = await fetch(
+				`${env.PUBLIC_API_BASE_URL || ''}/api/vehicles/${editMode ? vehicleToEdit.id : ''}`,
+				{
+					method: editMode ? 'PUT' : 'POST',
+					headers: {
+						'Content-Type': 'application/json',
+						'X-User-PIN': localStorage.getItem('userPin') || ''
+					},
+					body: JSON.stringify(vehicle)
+				}
+			);
+
+			if (response.ok) {
+				status.message = `Vehicle ${editMode ? 'updated' : 'added'} successfully!`;
+				status.type = 'SUCCESS';
+				Object.assign(vehicle, {
+					make: '',
+					model: '',
+					year: null,
+					licensePlate: '',
+					vin: '',
+					color: '',
+					odometer: null
+				});
+				modalVisibility = false;
+				vehiclesStore.fetchVehicles(); // Refresh the vehicle list after closing the modal
+			} else {
+				const data = await response.json();
+				status.message = data.message || `Failed to ${editMode ? 'update' : 'add'} vehicle.`;
+				status.type = 'ERROR';
+			}
+		} catch (e) {
+			status.message = 'Failed to connect to the server.';
+			status.type = 'ERROR';
+		}
+		loading = false;
+	}
 </script>
 
 <form
-	on:submit={(e) => {
-		onSubmit();
+	onsubmit={(e) => {
+		persistVehicle();
 		e.preventDefault();
 	}}
 	class="space-y-6"
@@ -84,20 +160,20 @@
 		icon={Gauge}
 		ariaLabel="Odometer (Optional)"
 	/>
-	<div class="flex justify-center">
-		<button
-			type="submit"
-			class="flex cursor-pointer gap-2 rounded-lg border-2 bg-blue-600 px-3 py-1 text-lg font-semibold text-blue-600 shadow-md dark:text-blue-200"
-		>
-			{editMode ? 'Save Changes' : 'Add Vehicle'}
-		</button>
-	</div>
+	<FormSubmitButton text={editMode ? 'Save Vehicle' : 'Add Vehicle'} {loading} />
+
+	{#if editMode}
+		<input type="hidden" name="id" value={vehicleToEdit?.id || ''} />
+	{/if}
 </form>
-{#if error}
-	<p class="mt-4 text-center text-sm text-red-500 dark:text-red-400">{error}</p>
-{/if}
-{#if success}
-	<p class="mt-4 text-center text-sm text-green-500 dark:text-green-400">
-		{editMode ? 'Vehicle updated successfully!' : success}
+{#if status.message}
+	<p
+		class={`mt-4 text-center text-sm ${status.type === 'ERROR' ? 'text-red-500 dark:text-red-400' : 'text-green-500 dark:text-green-400'}`}
+	>
+		{#if status.type === 'ERROR'}
+			<span class="font-semibold">Error:</span> {status.message}
+		{:else}
+			{status.message}
+		{/if}
 	</p>
 {/if}
diff --git a/app/client/src/components/vehicle/VehicleList.svelte b/app/client/src/components/vehicle/VehicleList.svelte
index f67dad39..5bb70051 100644
--- a/app/client/src/components/vehicle/VehicleList.svelte
+++ b/app/client/src/components/vehicle/VehicleList.svelte
@@ -1,17 +1,11 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
+	import { vehiclesStore } from '$lib/stores/vehicle';
 	import VehicleCard from './VehicleCard.svelte';
-	export let vehicles: Array<any> = [];
-	export let selectedVehicleId: number | null = null;
 
-	const dispatch = createEventDispatcher();
+	let { vehicles, selectedVehicleId, updateCallback } = $props();
 
-	function selectVehicle(vehicleId: number) {
-		dispatch('vehicleSelect', { vehicleId });
-	}
-
-	function addVehicle() {
-		dispatch('addVehicle');
+	function selectVehicle(vehicleId: string) {
+		vehiclesStore.selectVehicle(vehicleId);
 	}
 </script>
 
@@ -30,13 +24,7 @@
 			class:ring-blue-500={selectedVehicleId === vehicle.id}
 			class="cursor-pointer rounded-2xl transition-all duration-300 ease-in-out"
 		>
-			<VehicleCard
-				{vehicle}
-				on:editVehicle={(e) => dispatch('editVehicle', e.detail)}
-				on:deleteVehicle={(e) => dispatch('deleteVehicle', e.detail)}
-				on:refillFuel={(e) => dispatch('refillFuel', e.detail)}
-				on:addMaintenance={(e) => dispatch('addMaintenance', e.detail)}
-			/>
+			<VehicleCard {vehicle} {updateCallback} />
 		</div>
 	{/each}
 </div>
diff --git a/app/client/src/components/vehicle/VehicleModal.svelte b/app/client/src/components/vehicle/VehicleModal.svelte
new file mode 100644
index 00000000..d81c5d55
--- /dev/null
+++ b/app/client/src/components/vehicle/VehicleModal.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import ModalContainer from '$components/common/ModalContainer.svelte';
+	import { vehicleModelStore } from '$lib/stores/vehicle';
+	import VehicleForm from './VehicleForm.svelte';
+
+	let showModal = $state(false);
+	let vehicleToEdit = $state(null);
+	let editMode = $state(false);
+	let loading = $state(false);
+
+	vehicleModelStore.subscribe((data) => {
+		showModal = data.show;
+		vehicleToEdit = data.vehicleToEdit;
+		editMode = data.editMode;
+		loading = false;
+	});
+
+	function closeModal() {
+		vehicleModelStore.hide();
+	}
+</script>
+
+{#if showModal}
+	<ModalContainer onclose={closeModal} title={editMode ? 'Edit Vehicle' : 'Add Vehicle'} {loading}>
+		<VehicleForm {vehicleToEdit} {editMode} bind:modalVisibility={showModal} {loading} />
+	</ModalContainer>
+{/if}
diff --git a/app/client/src/lib/models/fuel-log.ts b/app/client/src/lib/models/fuel-log.ts
new file mode 100644
index 00000000..b3f789fd
--- /dev/null
+++ b/app/client/src/lib/models/fuel-log.ts
@@ -0,0 +1,11 @@
+export interface NewFuelLog {
+	date: string;
+	odometer: number | null;
+	fuelAmount: number | null;
+	cost: number | null;
+	notes?: string;
+}
+
+export interface FuelLog extends NewFuelLog {
+	id: string;
+}
diff --git a/app/client/src/lib/models/vehicle.ts b/app/client/src/lib/models/vehicle.ts
new file mode 100644
index 00000000..083237ef
--- /dev/null
+++ b/app/client/src/lib/models/vehicle.ts
@@ -0,0 +1,16 @@
+export interface NewVehicle {
+	make: string;
+	model: string;
+	year: number | null;
+	licensePlate: string;
+	vin?: string;
+	color?: string;
+	odometer?: number | null;
+}
+
+export interface Vehicle extends NewVehicle {
+	vehicleType: string;
+	id: string;
+	insuranceStatus?: string;
+	puccStatus?: string;
+}
diff --git a/app/client/src/lib/states/auth.svelte.ts b/app/client/src/lib/stores/auth.ts
similarity index 100%
rename from app/client/src/lib/states/auth.svelte.ts
rename to app/client/src/lib/stores/auth.ts
diff --git a/app/client/src/lib/states/config.ts b/app/client/src/lib/stores/config.ts
similarity index 74%
rename from app/client/src/lib/states/config.ts
rename to app/client/src/lib/stores/config.ts
index 0afd655d..39d0bc80 100644
--- a/app/client/src/lib/states/config.ts
+++ b/app/client/src/lib/stores/config.ts
@@ -8,26 +8,8 @@ export interface Config {
 	description?: string;
 }
 
-export interface ConfigStore {
-	dateFormat: string;
-	currency: string;
-	theme: string;
-	language: string;
-}
-
-const defaultConfig: ConfigStore = {
-	dateFormat: 'DD/MM/YYYY',
-	currency: 'USD',
-	theme: 'light',
-	language: 'en'
-};
-
-// const defaultConfig: ConfigStore = [];
-
 const createConfigStore = () => {
 	const { subscribe, set } = writable<Config[]>([]);
-	const configJson = writable<ConfigStore>(defaultConfig);
-
 	async function fetchConfig() {
 		if (browser) {
 			try {
@@ -38,13 +20,6 @@ const createConfigStore = () => {
 				});
 				if (response.ok) {
 					const data: Config[] = await response.json();
-					const newConfig: any = {};
-					data.forEach((item) => {
-						if (item.key && item.value !== undefined) {
-							newConfig[item.key] = item.value;
-						}
-					});
-					configJson.set(newConfig);
 					set(data);
 				} else {
 					console.error('Failed to fetch config');
@@ -81,7 +56,6 @@ const createConfigStore = () => {
 
 	return {
 		subscribe,
-		configJson,
 		save: (localConfig: Config[]) => {
 			console.log('Saving config:', localConfig);
 			updateConfig(localConfig);
diff --git a/app/client/src/lib/stores/dark-mode.ts b/app/client/src/lib/stores/dark-mode.ts
new file mode 100644
index 00000000..1d89553a
--- /dev/null
+++ b/app/client/src/lib/stores/dark-mode.ts
@@ -0,0 +1,25 @@
+import { writable } from 'svelte/store';
+
+const createDarkModeStore = () => {
+	const { subscribe, set } = writable<boolean>(false);
+
+	function loadDarkModePreference() {
+		if (typeof window !== 'undefined') {
+			const darkMode = localStorage.getItem('darkMode');
+			if (darkMode !== null) {
+				set(darkMode === 'true');
+			} else {
+				set(false); // Default to light mode if no preference is set
+			}
+		}
+	}
+
+	loadDarkModePreference();
+
+	return {
+		subscribe,
+		set
+	};
+};
+
+export const darkModeStore = createDarkModeStore();
diff --git a/app/client/src/lib/stores/fuel-log.ts b/app/client/src/lib/stores/fuel-log.ts
new file mode 100644
index 00000000..2059d7b8
--- /dev/null
+++ b/app/client/src/lib/stores/fuel-log.ts
@@ -0,0 +1,49 @@
+import { writable } from 'svelte/store';
+
+const createFuelLogModalStore = () => {
+	const { subscribe, set } = writable<{
+		logToEdit?: any;
+		vehicleId?: string;
+		editMode: boolean;
+		show: boolean;
+		callback: (status: boolean) => void;
+	}>({
+		logToEdit: undefined,
+		vehicleId: undefined,
+		editMode: false,
+		show: false,
+		callback: () => {}
+	});
+
+	function show(
+		vehicleId: string,
+		logToEdit?: any,
+		editMode: boolean = false,
+		callback: any = undefined
+	) {
+		set({
+			logToEdit,
+			vehicleId,
+			editMode,
+			show: true,
+			callback
+		});
+	}
+	function hide() {
+		set({
+			logToEdit: undefined,
+			vehicleId: undefined,
+			editMode: false,
+			show: false,
+			callback: () => {}
+		});
+	}
+
+	return {
+		subscribe,
+		show,
+		hide
+	};
+};
+
+export const fuelLogModelStore = createFuelLogModalStore();
diff --git a/app/client/src/lib/stores/insurance.ts b/app/client/src/lib/stores/insurance.ts
new file mode 100644
index 00000000..68dd18df
--- /dev/null
+++ b/app/client/src/lib/stores/insurance.ts
@@ -0,0 +1,49 @@
+import { writable } from 'svelte/store';
+
+const createInsuranceModalStore = () => {
+	const { subscribe, set } = writable<{
+		entryToEdit?: any;
+		vehicleId?: string;
+		editMode: boolean;
+		show: boolean;
+		callback: (status: boolean) => void;
+	}>({
+		entryToEdit: undefined,
+		vehicleId: undefined,
+		editMode: false,
+		show: false,
+		callback: () => {}
+	});
+
+	function show(
+		vehicleId: string,
+		entryToEdit?: any,
+		editMode: boolean = false,
+		callback: any = undefined
+	) {
+		set({
+			entryToEdit,
+			vehicleId,
+			editMode,
+			show: true,
+			callback
+		});
+	}
+	function hide() {
+		set({
+			entryToEdit: undefined,
+			vehicleId: undefined,
+			editMode: false,
+			show: false,
+			callback: () => {}
+		});
+	}
+
+	return {
+		subscribe,
+		show,
+		hide
+	};
+};
+
+export const insuranceModelStore = createInsuranceModalStore();
diff --git a/app/client/src/lib/stores/maintenance.ts b/app/client/src/lib/stores/maintenance.ts
new file mode 100644
index 00000000..7c4b5d80
--- /dev/null
+++ b/app/client/src/lib/stores/maintenance.ts
@@ -0,0 +1,49 @@
+import { writable } from 'svelte/store';
+
+const createMaintenanceModalStore = () => {
+	const { subscribe, set } = writable<{
+		vehicleId?: string;
+		logToEdit?: any;
+		editMode: boolean;
+		show: boolean;
+		callback?: any;
+	}>({
+		vehicleId: undefined,
+		logToEdit: undefined,
+		editMode: false,
+		show: false,
+		callback: undefined
+	});
+
+	function show(
+		vehicleId: string,
+		logToEdit?: any,
+		editMode: boolean = false,
+		callback: any = undefined
+	) {
+		set({
+			vehicleId,
+			logToEdit,
+			editMode,
+			show: true,
+			callback
+		});
+	}
+
+	function hide() {
+		set({
+			vehicleId: undefined,
+			logToEdit: undefined,
+			editMode: false,
+			show: false
+		});
+	}
+
+	return {
+		subscribe,
+		show,
+		hide
+	};
+};
+
+export const maintenanceModelStore = createMaintenanceModalStore();
diff --git a/app/client/src/lib/stores/pucc.ts b/app/client/src/lib/stores/pucc.ts
new file mode 100644
index 00000000..d59e95b1
--- /dev/null
+++ b/app/client/src/lib/stores/pucc.ts
@@ -0,0 +1,49 @@
+import { writable } from 'svelte/store';
+
+const createPuccModalStore = () => {
+	const { subscribe, set } = writable<{
+		entryToEdit?: any;
+		vehicleId?: string;
+		editMode: boolean;
+		show: boolean;
+		callback: (status: boolean) => void;
+	}>({
+		entryToEdit: undefined,
+		vehicleId: undefined,
+		editMode: false,
+		show: false,
+		callback: () => {}
+	});
+
+	function show(
+		vehicleId: string,
+		entryToEdit?: any,
+		editMode: boolean = false,
+		callback: any = undefined
+	) {
+		set({
+			entryToEdit,
+			vehicleId,
+			editMode,
+			show: true,
+			callback
+		});
+	}
+	function hide() {
+		set({
+			entryToEdit: undefined,
+			vehicleId: undefined,
+			editMode: false,
+			show: false,
+			callback: () => {}
+		});
+	}
+
+	return {
+		subscribe,
+		show,
+		hide
+	};
+};
+
+export const puccModelStore = createPuccModalStore();
diff --git a/app/client/src/lib/stores/vehicle.ts b/app/client/src/lib/stores/vehicle.ts
new file mode 100644
index 00000000..0fbafce3
--- /dev/null
+++ b/app/client/src/lib/stores/vehicle.ts
@@ -0,0 +1,131 @@
+import { env } from '$env/dynamic/public';
+import type { Vehicle } from '$lib/models/vehicle';
+import { simulateNetworkDelay } from '$lib/utils/dev';
+import { writable } from 'svelte/store';
+
+const createVehicleModalStore = () => {
+	const { subscribe, set } = writable<{
+		vehicleToEdit?: any;
+		editMode: boolean;
+		show: boolean;
+	}>({
+		vehicleToEdit: undefined,
+		editMode: false,
+		show: false
+	});
+
+	function show(vehicleToEdit?: any, editMode: boolean = false) {
+		set({
+			vehicleToEdit,
+			editMode,
+			show: true
+		});
+	}
+	function hide() {
+		set({
+			vehicleToEdit: undefined,
+			editMode: false,
+			show: false
+		});
+	}
+
+	return {
+		subscribe,
+		show,
+		hide
+	};
+};
+
+const createVehiclesStore = () => {
+	const { subscribe, set, update } = writable<{
+		loading: boolean;
+		error: string;
+		vehicles: Vehicle[];
+		selectedVehicleId?: string;
+	}>({
+		loading: true,
+		error: '',
+		vehicles: [],
+		selectedVehicleId: undefined
+	});
+
+	async function fetchVehicles() {
+		let tempSelection: string | undefined = undefined;
+		update((current) => {
+			if (current.selectedVehicleId) {
+				tempSelection = current.selectedVehicleId;
+			}
+			return {
+				loading: true,
+				error: current.error,
+				vehicles: [],
+				selectedVehicleId: undefined
+			};
+		});
+		// await simulateNetworkDelay(2000); // Simulate network delay for development
+		try {
+			const response = await fetch(`${env.PUBLIC_API_BASE_URL || ''}/api/vehicles`, {
+				headers: {
+					'X-User-PIN': localStorage.getItem('userPin') || ''
+				}
+			});
+			if (response.ok) {
+				const vehicles = await response.json();
+				if (Array.isArray(vehicles)) {
+					set({
+						loading: false,
+						error: '',
+						vehicles: vehicles
+					});
+				} else {
+					console.error('Invalid vehicles data format', vehicles);
+					set({
+						loading: false,
+						error: 'Invalid vehicles data format.',
+						vehicles: []
+					});
+				}
+			} else {
+				console.log('Failed to fetch vehicles', response);
+				const data = await response.json();
+				const error = data.message || 'Failed to fetch vehicles.';
+				set({
+					loading: false,
+					error,
+					vehicles: []
+				});
+			}
+		} catch (e) {
+			console.error('Failed to connect to the server.', e);
+			set({
+				loading: false,
+				error: 'Failed to connect to the server.',
+				vehicles: []
+			});
+		}
+		update((current) => ({
+			loading: current.loading,
+			error: '',
+			vehicles: current.vehicles,
+			selectedVehicleId: tempSelection
+		}));
+	}
+
+	function selectVehicle(vehicleId: string) {
+		update((current) => ({
+			...current,
+			selectedVehicleId: vehicleId
+		}));
+	}
+
+	fetchVehicles();
+
+	return {
+		subscribe,
+		fetchVehicles,
+		selectVehicle
+	};
+};
+
+export const vehicleModelStore = createVehicleModalStore();
+export const vehiclesStore = createVehiclesStore();
diff --git a/app/client/src/lib/utils/dev.ts b/app/client/src/lib/utils/dev.ts
new file mode 100644
index 00000000..fe8c71d2
--- /dev/null
+++ b/app/client/src/lib/utils/dev.ts
@@ -0,0 +1,5 @@
+const simulateNetworkDelay = (ms: number) => {
+	return new Promise((resolve) => setTimeout(resolve, ms));
+};
+
+export { simulateNetworkDelay };
diff --git a/app/client/src/lib/utils/formatting.ts b/app/client/src/lib/utils/formatting.ts
new file mode 100644
index 00000000..dea32075
--- /dev/null
+++ b/app/client/src/lib/utils/formatting.ts
@@ -0,0 +1,108 @@
+import dayjs from 'dayjs';
+import { config, type Config } from '$lib/stores/config';
+
+export interface ConfigStore {
+	dateFormat: string;
+	currency: string;
+	unitOfMeasure?: string;
+}
+
+const configs: ConfigStore = {
+	dateFormat: 'DD/MM/YYYY',
+	currency: 'USD',
+	unitOfMeasure: 'metric'
+};
+
+config.subscribe((value) => {
+	if (value && value.length > 0) {
+		value.forEach((item) => {
+			if (item.key === 'dateFormat') {
+				configs.dateFormat = item.value || configs.dateFormat;
+			} else if (item.key === 'currency') {
+				configs.currency = item.value || configs.currency;
+			} else if (item.key === 'unitOfMeasure') {
+				configs.unitOfMeasure = item.value || configs.unitOfMeasure;
+			}
+		});
+	}
+});
+
+const formatDate = (date: Date | string): string => {
+	return dayjs(date).format(configs.dateFormat);
+};
+
+const getCurrencySymbol = (): string => {
+	return (
+		new Intl.NumberFormat('en-US', {
+			style: 'currency',
+			currency: configs.currency
+		})
+			.formatToParts(0)
+			.find((part) => part.type === 'currency')?.value || ''
+	);
+};
+
+const formatCurrency = (amount: number): string => {
+	return new Intl.NumberFormat('en-US', {
+		style: 'currency',
+		currency: configs.currency
+	}).format(amount);
+};
+
+const getDistanceUnit = (): string => {
+	if (configs.unitOfMeasure === 'metric') {
+		return 'km';
+	}
+	if (configs.unitOfMeasure === 'imperial') {
+		return 'mi';
+	}
+	return '';
+};
+
+const formatDistance = (distance: number): string => {
+	if (configs.unitOfMeasure === 'metric') {
+		return `${distance} km`;
+	} else if (configs.unitOfMeasure === 'imperial') {
+		return `${distance} mi`;
+	}
+	return `${distance}`;
+};
+
+const formatVolume = (volume: number): string => {
+	if (configs.unitOfMeasure === 'metric') {
+		return `${volume} l`;
+	} else if (configs.unitOfMeasure === 'imperial') {
+		return `${volume} gal`;
+	}
+	return `${volume}`;
+};
+
+const getMileageUnit = (): string => {
+	if (configs.unitOfMeasure === 'metric') {
+		return 'kmpl';
+	}
+	if (configs.unitOfMeasure === 'imperial') {
+		return 'mpg';
+	}
+	return '';
+};
+
+const formatMileage = (mileage: number): string => {
+	if (configs.unitOfMeasure === 'metric') {
+		return `${mileage} kmpl`;
+	} else if (configs.unitOfMeasure === 'imperial') {
+		return `${mileage} mpg`;
+	}
+	return `${mileage}`;
+};
+
+export {
+	formatDate,
+	getCurrencySymbol,
+	formatCurrency,
+	getDistanceUnit,
+	formatDistance,
+	formatVolume,
+	getMileageUnit,
+	formatMileage
+};
diff --git a/app/client/src/routes/+layout.svelte b/app/client/src/routes/+layout.svelte
index 7a00e4b0..b8fb0c40 100644
--- a/app/client/src/routes/+layout.svelte
+++ b/app/client/src/routes/+layout.svelte
@@ -5,7 +5,7 @@
 	import '../styles/app.css';
 	import { tick } from 'svelte';
 	import { Car, LogOut, Tractor, Settings } from '@lucide/svelte';
-	import ThemeToggle from '../components/common/ThemeToggle.svelte';
+	import ThemeToggle from '$components/common/ThemeToggle.svelte';
 	import { onMount } from 'svelte';
 	import { env } from '$env/dynamic/public';
 
@@ -54,7 +54,7 @@
 			>🚜 Demo Mode: This is a demo instance. Data will be reset periodically and is not saved
 			permanently. Please avoid adding any persoanl info.</span
 		>
-		<br>
+		<br />
 		<strong>Default PIN : 123456</strong>
 	</div>
 {/if}
@@ -76,7 +76,10 @@
 				</a>
 				<div class="flex items-center justify-center gap-4 align-middle">
 					<ThemeToggle />
-					<a href="/config" class="flex items-center gap-1 text-gray-600 transition-colors duration-300 hover:text-blue-500 dark:text-gray-300">
+					<a
+						href="/config"
+						class="flex items-center gap-1 text-gray-600 transition-colors duration-300 hover:text-blue-500 dark:text-gray-300"
+					>
 						<Settings class="h-5 w-5" />
 					</a>
 					<div class="flex items-center gap-2">
@@ -85,7 +88,6 @@
 							class="flex items-center gap-1 text-gray-600 transition-colors duration-300 hover:text-red-500 dark:text-gray-300"
 						>
 							<LogOut class="h-5 w-5" />
-							Logout
 						</button>
 					</div>
 				</div>
diff --git a/app/client/src/routes/+page.svelte b/app/client/src/routes/+page.svelte
index 5e7f5a3a..bae4370a 100644
--- a/app/client/src/routes/+page.svelte
+++ b/app/client/src/routes/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { browser } from '$app/environment';
+	import { Jumper } from 'svelte-loading-spinners';
 
 	if (browser) {
 		const pin = localStorage.getItem('userPin');
@@ -12,6 +13,7 @@
 	}
 </script>
 
-<div class="flex min-h-screen items-center justify-center bg-gray-50">
+<div class="flex min-h-screen items-center justify-center gap-10 bg-gray-50">
+	<Jumper size="64" color="#155dfc" duration="2s" />
 	<p class="text-lg text-gray-600">Redirecting...</p>
 </div>
diff --git a/app/client/src/routes/config/+page.svelte b/app/client/src/routes/config/+page.svelte
index 51477d29..dacce45e 100644
--- a/app/client/src/routes/config/+page.svelte
+++ b/app/client/src/routes/config/+page.svelte
@@ -1,13 +1,14 @@
 <script lang="ts">
-	import { config, type Config } from '../../lib/states/config';
+	import { config, type Config } from '$lib/stores/config';
 
 	let localConfig: Config[] = [];
 	let saveSuccess = false;
 
 	const dateFormatOptions = [
-		{ value: 'DD/MM/YYYY', label: 'DD/MM/YYYY (e.g., 25/12/2024)' },
-		{ value: 'MM/DD/YYYY', label: 'MM/DD/YYYY (e.g., 12/25/2024)' },
-		{ value: 'YYYY-MM-DD', label: 'YYYY-MM-DD (e.g., 2024-12-25)' }
+		{ value: 'DD/MM/YYYY', label: 'DD/MM/YYYY (e.g., 31/12/2000)' },
+		{ value: 'MM/DD/YYYY', label: 'MM/DD/YYYY (e.g., 12/25/2000)' },
+		{ value: 'YYYY-MM-DD', label: 'YYYY-MM-DD (e.g., 2000-12-31)' },
+		{ value: 'DD MMM, YYYY', label: 'DD MMM, YYYY (e.g., 31 Dec, 2000)' }
 	];
 
 	const currencyOptions = [
@@ -17,6 +18,11 @@
 		{ value: 'GBP', label: 'GBP (£)' }
 	];
 
+	const uomOptions = [
+		{ value: 'metric', label: 'Metric' },
+		{ value: 'Imperial', label: 'Imperial' }
+	];
+
 	config.subscribe((value) => {
 		localConfig = JSON.parse(JSON.stringify(value));
 	});
@@ -34,9 +40,7 @@
 			<h1 class="text-4xl font-extrabold tracking-tight text-gray-900 dark:text-gray-100">
 				Application Settings
 			</h1>
-			<p class="mt-3 text-lg text-gray-600 dark:text-gray-400">
-				Customize your app experience.
-			</p>
+			<p class="mt-3 text-lg text-gray-600 dark:text-gray-400">Customize your app experience.</p>
 		</header>
 
 		<div class="space-y-6">
@@ -56,7 +60,7 @@
 						<select
 							id={item.key}
 							bind:value={item.value}
-							class="block w-full rounded-lg border border-gray-300 bg-gray-50 px-4 py-3 text-gray-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 sm:text-sm"
+							class="block w-full rounded-lg border border-gray-300 bg-gray-50 px-4 py-3 text-gray-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none sm:text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100"
 						>
 							{#each dateFormatOptions as option}
 								<option value={option.value}>{option.label}</option>
@@ -66,18 +70,28 @@
 						<select
 							id={item.key}
 							bind:value={item.value}
-							class="block w-full rounded-lg border border-gray-300 bg-gray-50 px-4 py-3 text-gray-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 sm:text-sm"
+							class="block w-full rounded-lg border border-gray-300 bg-gray-50 px-4 py-3 text-gray-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none sm:text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100"
 						>
 							{#each currencyOptions as option}
 								<option value={option.value}>{option.label}</option>
 							{/each}
 						</select>
+					{:else if item.key === 'unitOfMeasure'}
+						<select
+							id={item.key}
+							bind:value={item.value}
+							class="block w-full rounded-lg border border-gray-300 bg-gray-50 px-4 py-3 text-gray-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none sm:text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100"
+						>
+							{#each uomOptions as option}
+								<option value={option.value}>{option.label}</option>
+							{/each}
+						</select>
 					{:else}
 						<input
 							type="text"
 							id={item.key}
 							bind:value={item.value}
-							class="block w-full rounded-lg border border-gray-300 bg-gray-50 px-4 py-3 text-gray-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 sm:text-sm"
+							class="block w-full rounded-lg border border-gray-300 bg-gray-50 px-4 py-3 text-gray-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none sm:text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100"
 						/>
 					{/if}
 				</div>
@@ -101,4 +115,4 @@
 			</div>
 		{/if}
 	</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/client/src/routes/dashboard/+page.svelte b/app/client/src/routes/dashboard/+page.svelte
index 65121641..ecbfd8a1 100644
--- a/app/client/src/routes/dashboard/+page.svelte
+++ b/app/client/src/routes/dashboard/+page.svelte
@@ -1,287 +1,44 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { Line } from 'svelte5-chartjs';
-	import { Chart, registerables } from 'chart.js';
 	import { Plus } from '@lucide/svelte';
-	import { browser } from '$app/environment';
-	import { derived } from 'svelte/store';
-	import { env } from '$env/dynamic/public';
-	import ChartCard from '../../components/chart/ChartCard.svelte';
-	import FuelRefillForm from '../../components/fuel/FuelRefillForm.svelte';
-	import FuelRefillList from '../../components/fuel/FuelRefillList.svelte';
-	import InsuranceDetails from '../../components/insurance/InsuranceDetails.svelte';
-	import MaintenanceLogForm from '../../components/maintenance/MaintenanceLogForm.svelte';
-	import MaintenanceLogList from '../../components/maintenance/MaintenanceLogList.svelte';
-	import PollutionCertificateDetails from '../../components/pucc/PollutionCertificateDetails.svelte';
-	import AddVehicleForm from '../../components/vehicle/AddVehicleForm.svelte';
-	import VehicleList from '../../components/vehicle/VehicleList.svelte';
-	import { config } from '../../lib/states/config';
-	import dayjs from 'dayjs';
-
-	Chart.register(...registerables);
-
-	interface Vehicle {
-		id: number;
-		make: string;
-		model: string;
-		year: number;
-		licensePlate: string;
-		vin?: string;
-		color?: string;
-		odometer?: number;
-		insuranceStatus?: string;
-		puccStatus?: string;
-	}
+	import FuelLogModal from '$components/fuel/FuelLogModal.svelte';
+	import VehicleModal from '$components/vehicle/VehicleModal.svelte';
+	import VehicleList from '$components/vehicle/VehicleList.svelte';
+	import type { Vehicle } from '$lib/models/vehicle';
+	import { Jumper } from 'svelte-loading-spinners';
+	import MaintenanceLogModal from '$components/maintenance/MaintenanceLogModal.svelte';
+	import TabHeader from '$components/tabs/TabHeader.svelte';
+	import DashboardTab from '$components/tabs/DashboardTab.svelte';
+	import FuelLogTab from '$components/tabs/FuelLogTab.svelte';
+	import MaintenenceLogTab from '$components/tabs/MaintenenceLogTab.svelte';
+	import InsuranceTab from '$components/tabs/InsuranceTab.svelte';
+	import PollutionTab from '$components/tabs/PollutionTab.svelte';
+	import { vehicleModelStore, vehiclesStore } from '$lib/stores/vehicle';
+	import PollutionCertificateModal from '$components/pucc/PollutionCertificateModal.svelte';
+	import InsuranceForm from '$components/insurance/InsuranceForm.svelte';
+	import InsuranceModal from '$components/insurance/InsuranceModal.svelte';
 
 	let vehicles = $state<Vehicle[]>([]);
 	let loading = $state(true);
 	let error = $state('');
 
-	let newVehicle = $state({
-		vehicleType: 'car',
-		make: '',
-		model: '',
-		year: null,
-		licensePlate: '',
-		vin: '',
-		color: '',
-		odometer: null
-	});
-
-	let addVehicleError = $state('');
-	let addVehicleSuccess = $state('');
-
-	let showAddVehicleModal = $state(false);
-
-	let editVehicle = $state<Vehicle | null>(null);
-	let showEditVehicleModal = $state(false);
-
-	let selectedVehicleId = $state<number | null>(null);
-
-	function handleVehicleSelect(event: CustomEvent<{ vehicleId: number }>) {
-		selectedVehicleId = event.detail.vehicleId;
-		fetchChartData(selectedVehicleId);
-	}
-
-	let fuelCostData: any = $state({});
-	let mileageData: any = $state({});
-
-	let showFuelRefillModal = $state(false);
-	let showMaintenanceLogModal = $state(false);
-	let activeTab = $state('dashboard'); // 'dashboard', 'fuel', 'maintenance', 'insurance', 'pollution'
-
-	// Dark mode chart options
-	let isDarkMode = false;
-	if (browser) {
-		isDarkMode = document.documentElement.classList.contains('dark');
-	}
-
-	let chartOptions = $derived({});
-
-	$effect(() => {
-		chartOptions = {
-			responsive: true,
-			cubicInterpolationMode: 'monotone',
-			plugins: {
-				legend: {
-					labels: {
-						color: isDarkMode ? '#e5e7eb' : '#374151' // Tailwind gray-200 or gray-700
-					}
-				}
-			},
-			scales: {
-				x: {
-					ticks: { color: isDarkMode ? '#e5e7eb' : '#374151' },
-					grid: { color: isDarkMode ? '#374151' : '#e5e7eb' }
-				},
-				y: {
-					ticks: { color: isDarkMode ? '#e5e7eb' : '#374151' },
-					grid: { color: isDarkMode ? '#374151' : '#e5e7eb' }
-				}
-			}
-		};
-	});
-	async function fetchVehicles() {
-		loading = true;
-		error = '';
-		try {
-			const response = await fetch(`${env.PUBLIC_API_BASE_URL || ''}/api/vehicles`, {
-				headers: {
-					'X-User-PIN': localStorage.getItem('userPin') || ''
-				}
-			});
-			if (response.ok) {
-				vehicles = await response.json();
-			} else {
-				console.log('Failed to fetch vehicles', response);
-				const data = await response.json();
-				error = data.message || 'Failed to fetch vehicles.';
-			}
-		} catch (e) {
-			console.error('Failed to connect to the server.', e);
-			error = 'Failed to connect to the server.';
-		}
-		loading = false;
-	}
-
-	async function addVehicle() {
-		addVehicleError = '';
-		addVehicleSuccess = '';
-		try {
-			const response = await fetch(`${env.PUBLIC_API_BASE_URL || ''}/api/vehicles`, {
-				method: 'POST',
-				headers: {
-					'Content-Type': 'application/json',
-					'X-User-PIN': localStorage.getItem('userPin') || ''
-				},
-				body: JSON.stringify(newVehicle)
-			});
-
-			if (response.ok) {
-				addVehicleSuccess = 'Vehicle added successfully!';
-				newVehicle = {
-					make: '',
-					model: '',
-					year: null,
-					licensePlate: '',
-					vin: '',
-					color: '',
-					odometer: null
-				};
-				fetchVehicles();
-				showAddVehicleModal = false;
-			} else {
-				const data = await response.json();
-				addVehicleError = data.message || 'Failed to add vehicle.';
-			}
-		} catch (e) {
-			addVehicleError = 'Failed to connect to the server.';
-		}
-	}
-
-	function openAddVehicleModal() {
-		addVehicleError = '';
-		addVehicleSuccess = '';
-		showAddVehicleModal = true;
-	}
-
-	function handleEditVehicle(event: CustomEvent<{ vehicle: Vehicle }>) {
-		editVehicle = { ...event.detail.vehicle };
-		showEditVehicleModal = true;
-	}
+	let selectedVehicleId = $state<string | undefined>(undefined);
 
-	async function updateVehicle() {
-		addVehicleError = '';
-		addVehicleSuccess = '';
-		try {
-			if (!editVehicle) return;
-			const response = await fetch(`http://localhost:3000/api/vehicles/${editVehicle.id}`, {
-				method: 'PUT',
-				headers: {
-					'Content-Type': 'application/json',
-					'X-User-PIN': localStorage.getItem('userPin') || ''
-				},
-				body: JSON.stringify(editVehicle)
-			});
-			if (response.ok) {
-				addVehicleSuccess = 'Vehicle updated successfully!';
-				showEditVehicleModal = false;
-				editVehicle = null;
-				await fetchVehicles();
-			} else {
-				const data = await response.json();
-				addVehicleError = data.message || 'Failed to update vehicle.';
-			}
-		} catch (e) {
-			addVehicleError = 'Failed to connect to the server.';
-		}
-	}
-
-	function handleDeleteVehicle(event: CustomEvent<{ vehicle: Vehicle }>) {
-		if (confirm('Are you sure you want to delete this vehicle?')) {
-			deleteVehicle(event.detail.vehicle.id);
-		}
-	}
+	let activeTab = $state('dashboard');
 
-	async function deleteVehicle(vehicleId: number) {
-		addVehicleError = '';
-		addVehicleSuccess = '';
-		try {
-			const response = await fetch(`http://localhost:3000/api/vehicles/${vehicleId}`, {
-				method: 'DELETE',
-				headers: {
-					'X-User-PIN': localStorage.getItem('userPin') || ''
-				}
-			});
-			if (response.ok) {
-				addVehicleSuccess = 'Vehicle deleted successfully!';
-				await fetchVehicles();
-				if (selectedVehicleId === vehicleId) {
-					selectedVehicleId = vehicles.length > 0 ? vehicles[0].id : null;
-				}
-			} else {
-				const data = await response.json();
-				addVehicleError = data.message || 'Failed to delete vehicle.';
-			}
-		} catch (e) {
-			addVehicleError = 'Failed to connect to the server.';
-		}
-	}
-
-	onMount(() => {
-		fetchVehicles();
+	vehiclesStore.subscribe((data) => {
+		vehicles = data.vehicles;
+		loading = data.loading;
+		error = data.error;
+		selectedVehicleId = data.selectedVehicleId;
 		if (vehicles.length > 0) {
-			selectedVehicleId = vehicles[0].id;
-			fetchChartData(selectedVehicleId);
+			selectedVehicleId = selectedVehicleId || vehicles[0].id;
 		}
 	});
 
-	async function fetchChartData(vehicleId: number) {
-		try {
-			const response = await fetch(
-				`${env.PUBLIC_API_BASE_URL || ''}/api/vehicles/${vehicleId}/fuel-logs`,
-				{
-					headers: {
-						'X-User-PIN': localStorage.getItem('userPin') || ''
-					}
-				}
-			);
-			if (response.ok) {
-				const data = await response.json();
-				const labels = data.map((log: any) => dayjs(log.date).format($config.dateFormat));
-				const costData = data.map((log: any) => log.cost);
-				const mileageDataPoints = data.map((log: any) => log.mileage);
-
-				fuelCostData = {
-					labels,
-					datasets: [
-						{
-							label: 'Fuel Cost',
-							data: costData,
-							fill: false,
-							borderColor: 'rgb(75, 192, 192)',
-							tension: 0.1
-						}
-					]
-				};
-
-				mileageData = {
-					labels,
-					datasets: [
-						{
-							label: 'Mileage (km/L)',
-							data: mileageDataPoints,
-							fill: false,
-							borderColor: 'rgb(255, 99, 132)',
-							tension: 0.1
-						}
-					]
-				};
-			} else {
-				console.error('Failed to fetch chart data');
-			}
-		} catch (e) {
-			console.error('Failed to connect to the server.');
+	function updateCallback(status: boolean) {
+		if (status) {
+			vehiclesStore.fetchVehicles();
 		}
 	}
 </script>
@@ -292,254 +49,53 @@
 		<button
 			type="button"
 			class="flex cursor-pointer items-center gap-2 rounded-lg border-2 border-blue-600 bg-transparent px-3 py-1 text-lg font-semibold text-blue-600 shadow-md dark:text-blue-200"
-			onclick={openAddVehicleModal}
+			onclick={() => vehicleModelStore.show()}
 		>
 			<Plus class="h-5 w-5 text-blue-600 dark:text-blue-200" />
 			Add Vehicle
 		</button>
 	</div>
 	{#if loading}
-		<p class="text-lg text-gray-500 dark:text-gray-400">Loading vehicles...</p>
+		<p class="flex items-center justify-center gap-5 text-lg text-gray-500 dark:text-gray-400">
+			<Jumper size="40" color="#155dfc" unit="px" duration="2s" />
+			Loading Vehicles...
+		</p>
 	{:else if error}
 		<p class="text-lg text-red-500 dark:text-red-400">Error: {error}</p>
 	{:else}
-		<VehicleList
-			{vehicles}
-			{selectedVehicleId}
-			on:vehicleSelect={handleVehicleSelect}
-			on:editVehicle={handleEditVehicle}
-			on:deleteVehicle={handleDeleteVehicle}
-			on:refillFuel={(e) => {
-				selectedVehicleId = e.detail.vehicle.id;
-				showFuelRefillModal = true;
-			}}
-			on:addMaintenance={(e) => {
-				selectedVehicleId = e.detail.vehicle.id;
-				showMaintenanceLogModal = true;
-			}}
-		/>
-	{/if}
-
-	<AddVehicleForm
-		bind:newVehicle
-		bind:addVehicleError
-		bind:addVehicleSuccess
-		bind:showModal={showAddVehicleModal}
-		{addVehicle}
-	/>
-
-	{#if showEditVehicleModal}
-		<AddVehicleForm
-			newVehicle={editVehicle}
-			addVehicle={updateVehicle}
-			{addVehicleError}
-			{addVehicleSuccess}
-			showModal={showEditVehicleModal}
-			editMode={true}
-		/>
+		<VehicleList {vehicles} {selectedVehicleId} {updateCallback} />
 	{/if}
 
 	{#if selectedVehicleId}
 		<div class="mt-12">
 			<div class="mb-4 border-b border-gray-200 dark:border-gray-700">
-				<ul
-					class="-mb-px flex flex-wrap"
-					id="default-tab"
-					role="tablist"
-					aria-orientation="horizontal"
-				>
-					<li class="me-2" role="presentation">
-						<button
-							class="inline-block rounded-t-lg px-4 py-2 text-sm font-medium"
-							class:text-blue-600={activeTab === 'dashboard'}
-							class:border-blue-600={activeTab === 'dashboard'}
-							class:hover:text-gray-600={activeTab !== 'dashboard'}
-							class:hover:border-gray-300={activeTab !== 'dashboard'}
-							class:dark:text-blue-500={activeTab === 'dashboard'}
-							class:dark:border-blue-500={activeTab === 'dashboard'}
-							class:dark:hover:text-gray-300={activeTab !== 'dashboard'}
-							class:border-transparent={activeTab !== 'dashboard'}
-							class:text-gray-500={activeTab !== 'dashboard'}
-							class:dark:text-gray-400={activeTab !== 'dashboard'}
-							onclick={() => (activeTab = 'dashboard')}
-							type="button"
-							role="tab"
-							aria-controls="dashboard"
-							aria-selected={activeTab === 'dashboard'}>Dashboard</button
-						>
-					</li>
-					<li class="me-2" role="presentation">
-						<button
-							class="inline-block rounded-t-lg px-4 py-2 text-sm font-medium"
-							class:text-blue-600={activeTab === 'fuel'}
-							class:border-blue-600={activeTab === 'fuel'}
-							class:hover:text-gray-600={activeTab !== 'fuel'}
-							class:hover:border-gray-300={activeTab !== 'fuel'}
-							class:dark:text-blue-500={activeTab === 'fuel'}
-							class:dark:border-blue-500={activeTab === 'fuel'}
-							class:dark:hover:text-gray-300={activeTab !== 'fuel'}
-							class:border-transparent={activeTab !== 'fuel'}
-							class:text-gray-500={activeTab !== 'fuel'}
-							class:dark:text-gray-400={activeTab !== 'fuel'}
-							onclick={() => (activeTab = 'fuel')}
-							type="button"
-							role="tab"
-							aria-controls="fuel-logs"
-							aria-selected={activeTab === 'fuel'}>Fuel Logs</button
-						>
-					</li>
-					<li class="me-2" role="presentation">
-						<button
-							class="inline-block rounded-t-lg px-4 py-2 text-sm font-medium"
-							class:text-blue-600={activeTab === 'maintenance'}
-							class:border-blue-600={activeTab === 'maintenance'}
-							class:hover:text-gray-600={activeTab !== 'maintenance'}
-							class:hover:border-gray-300={activeTab !== 'maintenance'}
-							class:dark:text-blue-500={activeTab === 'maintenance'}
-							class:dark:border-blue-500={activeTab === 'maintenance'}
-							class:dark:hover:text-gray-300={activeTab !== 'maintenance'}
-							class:border-transparent={activeTab !== 'maintenance'}
-							class:text-gray-500={activeTab !== 'maintenance'}
-							class:dark:text-gray-400={activeTab !== 'maintenance'}
-							onclick={() => (activeTab = 'maintenance')}
-							type="button"
-							role="tab"
-							aria-controls="maintenance-logs"
-							aria-selected={activeTab === 'maintenance'}>Maintenance</button
-						>
-					</li>
-					<li class="me-2" role="presentation">
-						<button
-							class="inline-block rounded-t-lg px-4 py-2 text-sm font-medium"
-							class:text-blue-600={activeTab === 'insurance'}
-							class:border-blue-600={activeTab === 'insurance'}
-							class:hover:text-gray-600={activeTab !== 'insurance'}
-							class:hover:border-gray-300={activeTab !== 'insurance'}
-							class:dark:text-blue-500={activeTab === 'insurance'}
-							class:dark:border-blue-500={activeTab === 'insurance'}
-							class:dark:hover:text-gray-300={activeTab !== 'insurance'}
-							class:border-transparent={activeTab !== 'insurance'}
-							class:text-gray-500={activeTab !== 'insurance'}
-							class:dark:text-gray-400={activeTab !== 'insurance'}
-							onclick={() => (activeTab = 'insurance')}
-							type="button"
-							role="tab"
-							aria-controls="insurance-details"
-							aria-selected={activeTab === 'insurance'}>Insurance</button
-						>
-					</li>
-					<li class="me-2" role="presentation">
-						<button
-							class="inline-block rounded-t-lg px-4 py-2 text-sm font-medium"
-							class:text-blue-600={activeTab === 'pollution'}
-							class:border-blue-600={activeTab === 'pollution'}
-							class:hover:text-gray-600={activeTab !== 'pollution'}
-							class:hover:border-gray-300={activeTab !== 'pollution'}
-							class:dark:text-blue-500={activeTab === 'pollution'}
-							class:dark:border-blue-500={activeTab === 'pollution'}
-							class:dark:hover:text-gray-300={activeTab !== 'pollution'}
-							class:border-transparent={activeTab !== 'pollution'}
-							class:text-gray-500={activeTab !== 'pollution'}
-							class:dark:text-gray-400={activeTab !== 'pollution'}
-							onclick={() => (activeTab = 'pollution')}
-							type="button"
-							role="tab"
-							aria-controls="pollution-certificate"
-							aria-selected={activeTab === 'pollution'}>Pollution Certificate</button
-						>
-					</li>
-				</ul>
+				<TabHeader bind:activeTab />
 			</div>
 			<div id="default-tab-content">
 				{#if activeTab === 'dashboard'}
-					<div
-						class="rounded-lg bg-gray-50 p-4 dark:bg-gray-800"
-						role="tabpanel"
-						aria-labelledby="dashboard-tab"
-					>
-						<h2 class="mb-6 text-2xl font-bold text-gray-900 dark:text-gray-100">
-							Fuel Cost & Mileage Trends
-						</h2>
-						<div class="grid grid-cols-1 gap-8 md:grid-cols-2">
-							{#if fuelCostData?.datasets?.length > 0 && mileageData?.datasets?.length > 0}
-								<ChartCard
-									title="Fuel Cost Over Time"
-									chartData={fuelCostData}
-									ChartComponent={Line}
-									options={chartOptions}
-								/>
-								<ChartCard
-									title="Mileage Over Time"
-									chartData={mileageData}
-									ChartComponent={Line}
-									options={chartOptions}
-								/>
-							{:else}
-								<div class="col-span-2 py-12 text-center">
-									<p class="text-lg text-gray-500 dark:text-gray-400">
-										No fuel or mileage data available for this vehicle.
-									</p>
-								</div>
-							{/if}
-						</div>
-					</div>
+					<DashboardTab vehicleId={selectedVehicleId} />
 				{:else if activeTab === 'fuel'}
-					<div
-						class="rounded-lg bg-gray-50 p-4 dark:bg-gray-800"
-						role="tabpanel"
-						aria-labelledby="fuel-logs-tab"
-					>
-						<FuelRefillList vehicleId={selectedVehicleId} />
-					</div>
+					<FuelLogTab vehicleId={selectedVehicleId} />
 				{:else if activeTab === 'maintenance'}
-					<div
-						class="rounded-lg bg-gray-50 p-4 dark:bg-gray-800"
-						role="tabpanel"
-						aria-labelledby="maintenance-logs-tab"
-					>
-						<MaintenanceLogList vehicleId={selectedVehicleId} />
-					</div>
+					<MaintenenceLogTab vehicleId={selectedVehicleId} />
 				{:else if activeTab === 'insurance'}
-					<div
-						class="rounded-lg bg-gray-50 p-4 dark:bg-gray-800"
-						role="tabpanel"
-						aria-labelledby="insurance-details-tab"
-					>
-						<InsuranceDetails vehicleId={selectedVehicleId} />
-					</div>
+					<InsuranceTab vehicleId={selectedVehicleId} />
 				{:else if activeTab === 'pollution'}
-					<div
-						class="rounded-lg bg-gray-50 p-4 dark:bg-gray-800"
-						role="tabpanel"
-						aria-labelledby="pollution-certificate-tab"
-					>
-						<PollutionCertificateDetails vehicleId={selectedVehicleId} />
-					</div>
+					<PollutionTab vehicleId={selectedVehicleId} />
 				{/if}
 			</div>
 		</div>
-		<FuelRefillForm
-			vehicleId={selectedVehicleId}
-			showModal={showFuelRefillModal}
-			closeModal={() => (showFuelRefillModal = false)}
-			on:success={() => {
-				if (selectedVehicleId) fetchChartData(selectedVehicleId);
-				showFuelRefillModal = false;
-			}}
-		/>
-		<MaintenanceLogForm
-			vehicleId={selectedVehicleId}
-			showModal={showMaintenanceLogModal}
-			closeModal={() => (showMaintenanceLogModal = false)}
-			on:success={() => {
-				showMaintenanceLogModal = false;
-			}}
-		/>
-	{:else}
+	{:else if vehicles.length > 0 && !loading}
 		<div class="py-12 text-center">
 			<p class="text-lg text-gray-500 dark:text-gray-400">
 				Select a vehicle to view fuel and mileage data.
 			</p>
 		</div>
 	{/if}
+
+	<VehicleModal />
+	<FuelLogModal />
+	<MaintenanceLogModal />
+	<PollutionCertificateModal />
+	<InsuranceModal />
 </div>
diff --git a/app/client/src/routes/login/+page.svelte b/app/client/src/routes/login/+page.svelte
index f7ebfca7..71c61aef 100644
--- a/app/client/src/routes/login/+page.svelte
+++ b/app/client/src/routes/login/+page.svelte
@@ -1,9 +1,12 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { browser } from '$app/environment';
-	import PinInput from '../../components/auth/PinInput.svelte';
-	import ThemeToggle from '../../components/common/ThemeToggle.svelte';
+	import PinInput from '$components/auth/PinInput.svelte';
+	import ThemeToggle from '$components/common/ThemeToggle.svelte';
 	import { env } from '$env/dynamic/public';
+	import { Tractor } from '@lucide/svelte';
+	import { DoubleBounce, Jumper, Shadow } from 'svelte-loading-spinners';
+	import { simulateNetworkDelay } from '$lib/utils/dev';
 
 	let loading = $state(false);
 	let error = $state('');
@@ -22,7 +25,7 @@
 			// Check if PIN exists on the server
 			async function checkPinStatus() {
 				try {
-					const response = await fetch(`${env.PUBLIC_API_BASE_URL||""}/api/pin/status`);
+					const response = await fetch(`${env.PUBLIC_API_BASE_URL || ''}/api/pin/status`);
 					if (response.ok) {
 						const data = await response.json();
 						pinExists = data.exists;
@@ -39,14 +42,13 @@
 		}
 	});
 
-	async function handlePinComplete(event: CustomEvent<string>) {
-		const pin = event.detail;
+	async function handlePinComplete(pin: string) {
 		loading = true;
 		error = '';
-
+		await simulateNetworkDelay(1000); // Simulate network delay for development
 		try {
 			const endpoint = pinExists ? '/api/pin/verify' : '/api/pin';
-			const response = await fetch(`${env.PUBLIC_API_BASE_URL||""}${endpoint}`, {
+			const response = await fetch(`${env.PUBLIC_API_BASE_URL || ''}${endpoint}`, {
 				method: 'POST',
 				headers: {
 					'Content-Type': 'application/json'
@@ -76,12 +78,18 @@
 <div
 	class="flex min-h-screen flex-col items-center justify-center bg-gray-50 p-4 transition-colors dark:bg-gray-900"
 >
+	<div class="absolute top-4 right-4">
+		<ThemeToggle />
+	</div>
 	<div
 		class="w-full max-w-md rounded-2xl bg-white p-8 shadow-xl ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700"
 	>
 		<div class="mb-6">
-			<ThemeToggle />
-			<h1 class="text-center text-3xl font-bold text-gray-800 dark:text-gray-100">Welcome Back</h1>
+			<h1
+				class="flex items-center justify-center gap-5 text-center text-3xl font-bold text-gray-800 dark:text-gray-100"
+			>
+				<Tractor class="h-10 w-10"></Tractor> Welcome
+			</h1>
 		</div>
 
 		{#if checkingPinStatus}
@@ -97,11 +105,15 @@
 		{/if}
 
 		{#if !checkingPinStatus}
-			<PinInput on:complete={handlePinComplete} />
+			<PinInput complete={(pin: string) => handlePinComplete(pin)} />
 		{/if}
 
 		{#if loading}
-			<p class="mt-4 text-center font-semibold text-blue-600 dark:text-blue-400">Verifying...</p>
+			<p
+				class="mt-4 flex items-center justify-center text-center font-semibold text-blue-600 dark:text-blue-400"
+			>
+				<Jumper size="40" color="#155dfc" unit="px" duration="2s" />
+			</p>
 		{/if}
 		{#if error}
 			<p
diff --git a/app/client/src/styles/app.css b/app/client/src/styles/app.css
index e1f9615d..526b925e 100644
--- a/app/client/src/styles/app.css
+++ b/app/client/src/styles/app.css
@@ -1,5 +1,10 @@
+@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 @import 'tailwindcss';
 @plugin '@tailwindcss/forms';
 @plugin '@tailwindcss/typography';
 
 @custom-variant dark (&:where(.dark, .dark *));
+
+* {
+	font-family: 'Fira Sans', sans-serif;
+}
diff --git a/app/client/svelte.config.js b/app/client/svelte.config.js
index e0a641ee..97ac5949 100644
--- a/app/client/svelte.config.js
+++ b/app/client/svelte.config.js
@@ -11,7 +11,11 @@ const config = {
 		// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
 		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
 		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
-		adapter: adapter()
+		adapter: adapter(),
+		alias: {
+			$components: './src/components',
+			$lib: './src/lib'
+		}
 	}
 };
 
diff --git a/app/server/seed.ts b/app/server/seed.ts
index b7f9b54c..1fbdf86f 100644
--- a/app/server/seed.ts
+++ b/app/server/seed.ts
@@ -33,9 +33,9 @@ const seedDatabase = async () => {
         description: "Default currency for financial transactions",
       },
       {
-        key: "language",
-        value: "en",
-        description: "Default language for the application",
+        key: "unitOfMeasure",
+        value: "metric",
+        description: "Unit of measure for distance and volume",
       },
     ];
     await Config.bulkCreate(configData);
diff --git a/app/server/src/controllers/InsuranceController.ts b/app/server/src/controllers/InsuranceController.ts
index 0da03e24..1e5c1c5f 100644
--- a/app/server/src/controllers/InsuranceController.ts
+++ b/app/server/src/controllers/InsuranceController.ts
@@ -3,7 +3,7 @@ import * as insuranceService from "../services/insuranceService.js";
 import {
   InsuranceNotFoundError,
   InsuranceExistsError,
-  InsuranceServiceError
+  InsuranceServiceError,
 } from "../exceptions/InsuranceError.js";
 
 export const addInsurance = async (req: Request, res: Response) => {
@@ -15,7 +15,8 @@ export const addInsurance = async (req: Request, res: Response) => {
   }
   if (!provider || !policyNumber || !startDate || !endDate || !cost) {
     return res.status(400).json({
-      message: "Provider, Policy Number, Start Date, End Date, and Cost are required.",
+      message:
+        "Provider, Policy Number, Start Date, End Date, and Cost are required.",
     });
   }
 
@@ -42,7 +43,7 @@ export const getInsurance = async (req: Request, res: Response) => {
     return res.status(400).json({ message: "Vehicle ID is required." });
   }
   try {
-    const insurance = await insuranceService.getInsurance(vehicleId);
+    const insurance = await insuranceService.getInsurances(vehicleId);
     res.status(200).json(insurance);
   } catch (error: any) {
     if (error instanceof InsuranceNotFoundError) {
@@ -64,7 +65,8 @@ export const updateInsurance = async (req: Request, res: Response) => {
   }
   if (!provider || !policyNumber || !startDate || !endDate || !cost) {
     return res.status(400).json({
-      message: "Provider, Policy Number, Start Date, End Date, and Cost are required.",
+      message:
+        "Provider, Policy Number, Start Date, End Date, and Cost are required.",
     });
   }
 
diff --git a/app/server/src/controllers/PUCCController.ts b/app/server/src/controllers/PUCCController.ts
index 45632763..0fd04d55 100644
--- a/app/server/src/controllers/PUCCController.ts
+++ b/app/server/src/controllers/PUCCController.ts
@@ -3,26 +3,28 @@ import * as pollutionCertificateService from "../services/pollutionCertificateSe
 import {
   PollutionCertificateNotFoundError,
   PollutionCertificateExistsError,
-  PollutionCertificateServiceError
+  PollutionCertificateServiceError,
 } from "../exceptions/PollutionCertificateErrors.js";
 
 export const addPollutionCertificate = async (req: Request, res: Response) => {
   const { vehicleId } = req.params;
-  const { certificateNumber, issueDate, expiryDate, testingCenter, notes } = req.body;
+  const { certificateNumber, issueDate, expiryDate, testingCenter, notes } =
+    req.body;
 
   if (!vehicleId) {
     return res.status(400).json({ message: "Vehicle ID is required." });
   }
   if (!certificateNumber || !issueDate || !expiryDate || !testingCenter) {
     return res.status(400).json({
-      message: "Certificate Number, Issue Date, Expiry Date, and Testing Center are required.",
+      message:
+        "Certificate Number, Issue Date, Expiry Date, and Testing Center are required.",
     });
   }
 
   try {
     const result = await pollutionCertificateService.addPollutionCertificate(
       vehicleId,
-      req.body
+      req.body,
     );
     res.status(201).json(result);
   } catch (error: any) {
@@ -45,9 +47,8 @@ export const getPollutionCertificate = async (req: Request, res: Response) => {
     return res.status(400).json({ message: "Vehicle ID is required." });
   }
   try {
-    const pollutionCertificate = await pollutionCertificateService.getPollutionCertificate(
-      vehicleId
-    );
+    const pollutionCertificate =
+      await pollutionCertificateService.getPollutionCertificates(vehicleId);
     res.status(200).json(pollutionCertificate);
   } catch (error: any) {
     if (error instanceof PollutionCertificateNotFoundError) {
@@ -60,23 +61,28 @@ export const getPollutionCertificate = async (req: Request, res: Response) => {
   }
 };
 
-export const updatePollutionCertificate = async (req: Request, res: Response) => {
+export const updatePollutionCertificate = async (
+  req: Request,
+  res: Response,
+) => {
   const { vehicleId } = req.params;
-  const { certificateNumber, issueDate, expiryDate, testingCenter, notes } = req.body;
+  const { certificateNumber, issueDate, expiryDate, testingCenter, notes } =
+    req.body;
 
   if (!vehicleId) {
     return res.status(400).json({ message: "Vehicle ID is required." });
   }
   if (!certificateNumber || !issueDate || !expiryDate || !testingCenter) {
     return res.status(400).json({
-      message: "Certificate Number, Issue Date, Expiry Date, and Testing Center are required.",
+      message:
+        "Certificate Number, Issue Date, Expiry Date, and Testing Center are required.",
     });
   }
 
   try {
     const result = await pollutionCertificateService.updatePollutionCertificate(
       vehicleId,
-      req.body
+      req.body,
     );
     res.status(200).json(result);
   } catch (error: any) {
@@ -90,15 +96,17 @@ export const updatePollutionCertificate = async (req: Request, res: Response) =>
   }
 };
 
-export const deletePollutionCertificate = async (req: Request, res: Response) => {
+export const deletePollutionCertificate = async (
+  req: Request,
+  res: Response,
+) => {
   const { vehicleId } = req.params;
   if (!vehicleId) {
     return res.status(400).json({ message: "Vehicle ID is required." });
   }
   try {
-    const result = await pollutionCertificateService.deletePollutionCertificate(
-      vehicleId
-    );
+    const result =
+      await pollutionCertificateService.deletePollutionCertificate(vehicleId);
     res.status(200).json(result);
   } catch (error: any) {
     if (error instanceof PollutionCertificateNotFoundError) {
diff --git a/app/server/src/controllers/VehicleController.ts b/app/server/src/controllers/VehicleController.ts
index 5dc8ecca..06a4b08b 100644
--- a/app/server/src/controllers/VehicleController.ts
+++ b/app/server/src/controllers/VehicleController.ts
@@ -1,12 +1,11 @@
-
 import { Request, Response } from "express";
 import * as vehicleService from "../services/vehicleService.js";
 import { VehicleNotFoundError } from "../exceptions/VehicleErrors.js";
 
 export const addVehicle = async (req: Request, res: Response) => {
-  const { vehicleType, make, model, year, licensePlate } = req.body;
+  const { make, model, year, licensePlate } = req.body;
 
-  if (!vehicleType || !make || !model || !year || !licensePlate) {
+  if (!make || !model || !year || !licensePlate) {
     return res
       .status(400)
       .json({ message: "Make, Model, Year, and License Plate are required." });
@@ -55,9 +54,7 @@ export const updateVehicle = async (req: Request, res: Response) => {
       .json({ message: "Make, Model, Year, and License Plate are required." });
   }
   if (!id) {
-    return res
-      .status(400)
-      .json({ message: "Vehicle ID is required." });
+    return res.status(400).json({ message: "Vehicle ID is required." });
   }
   try {
     const result = await vehicleService.updateVehicle(id, req.body);
diff --git a/app/server/src/models/FuelLog.ts b/app/server/src/models/FuelLog.ts
index 64c82109..55f6f580 100644
--- a/app/server/src/models/FuelLog.ts
+++ b/app/server/src/models/FuelLog.ts
@@ -1,83 +1,89 @@
-import { DataTypes, Model, Optional } from 'sequelize';
-import sequelize from '../config/database.js';
-import Vehicle from './Vehicle.js';
+import { DataTypes, Model, Optional } from "sequelize";
+import sequelize from "../config/database.js";
+import Vehicle from "./Vehicle.js";
 
 interface FuelLogAttributes {
-    id: string;
-    vehicleId: string;
-    date: string;
-    odometer: number;
-    fuelAmount: number;
-    cost: number;
-    notes?: string;
+  id: string;
+  vehicleId: string;
+  date: string;
+  odometer: number;
+  fuelAmount: number;
+  cost: number;
+  notes?: string;
 }
 
-interface FuelLogCreationAttributes extends Optional<FuelLogAttributes, 'id'> {}
+interface FuelLogCreationAttributes extends Optional<FuelLogAttributes, "id"> {}
 
-class FuelLog extends Model<FuelLogAttributes, FuelLogCreationAttributes> implements FuelLogAttributes {
-    public declare id: string;
-    public declare vehicleId: string;
-    public declare date: string;
-    public declare odometer: number;
-    public declare fuelAmount: number;
-    public declare cost: number;
-    public declare notes?: string;
+class FuelLog
+  extends Model<FuelLogAttributes, FuelLogCreationAttributes>
+  implements FuelLogAttributes
+{
+  declare public id: string;
+  declare public vehicleId: string;
+  declare public date: string;
+  declare public odometer: number;
+  declare public fuelAmount: number;
+  declare public cost: number;
+  declare public notes?: string;
 }
 
-FuelLog.init({
+FuelLog.init(
+  {
     id: {
-        type: DataTypes.UUIDV4,
-        primaryKey: true,
-        defaultValue: DataTypes.UUIDV4,
-        allowNull: false,
+      type: DataTypes.UUIDV4,
+      primaryKey: true,
+      defaultValue: DataTypes.UUIDV4,
+      allowNull: false,
     },
     vehicleId: {
-        type: DataTypes.UUIDV4,
-        allowNull: false,
-        references: {
-            model: Vehicle,
-            key: 'id',
-        }
+      type: DataTypes.UUIDV4,
+      allowNull: false,
+      references: {
+        model: Vehicle,
+        key: "id",
+      },
     },
     date: {
-        type: DataTypes.DATE,
-        allowNull: false,
-        validate: {
-            isDate: true,
-            notEmpty: true,
-        }
+      type: DataTypes.DATEONLY,
+      allowNull: false,
+      validate: {
+        isDate: true,
+        notEmpty: true,
+      },
     },
     odometer: {
-        type: DataTypes.INTEGER,
-        allowNull: false,
-        validate: {
-            isInt: true,
-            min: 0,
-        }
+      type: DataTypes.INTEGER,
+      allowNull: false,
+      validate: {
+        isInt: true,
+        min: 0,
+      },
     },
     fuelAmount: {
-        type: DataTypes.FLOAT,
-        allowNull: false,
+      type: DataTypes.FLOAT,
+      allowNull: false,
     },
     cost: {
-        type: DataTypes.FLOAT,
-        allowNull: false,
-        validate: {
-            isFloat: true,
-            min: 0,
-        }
+      type: DataTypes.FLOAT,
+      allowNull: false,
+      validate: {
+        isFloat: true,
+        min: 0,
+      },
     },
     notes: {
-        type: DataTypes.STRING,
-        allowNull: true,
-        validate: {
-            len: [0, 500],
-        }
+      type: DataTypes.STRING,
+      allowNull: true,
+      validate: {
+        len: [0, 500],
+      },
     },
-}, {
-    tableName: 'fuel_logs',
+  },
+  {
+    tableName: "fuel_logs",
     timestamps: true,
     underscored: true,
     sequelize,
-});
-export default FuelLog;
\ No newline at end of file
+  },
+);
+export default FuelLog;
diff --git a/app/server/src/models/Insurance.ts b/app/server/src/models/Insurance.ts
index c2e302e7..316f3b2c 100644
--- a/app/server/src/models/Insurance.ts
+++ b/app/server/src/models/Insurance.ts
@@ -19,13 +19,13 @@ class Insurance
   extends Model<InsuranceAttributes, InsuranceCreationAttributes>
   implements InsuranceAttributes
 {
-  public declare id: string;
-  public declare vehicleId: string;
-  public declare provider: string;
-  public declare policyNumber: string;
-  public declare startDate: string;
-  public declare endDate: string;
-  public declare cost: number;
+  declare public id: string;
+  declare public vehicleId: string;
+  declare public provider: string;
+  declare public policyNumber: string;
+  declare public startDate: string;
+  declare public endDate: string;
+  declare public cost: number;
 }
 
 Insurance.init(
@@ -59,17 +59,17 @@ Insurance.init(
       },
     },
     startDate: {
-      type: DataTypes.DATE,
+      type: DataTypes.DATEONLY,
       allowNull: false,
       validate: {
         isDate: true,
       },
     },
     endDate: {
-      type: DataTypes.DATE,
+      type: DataTypes.DATEONLY,
       allowNull: false,
       validate: {
-        isDate: true
+        isDate: true,
       },
     },
     cost: {
@@ -85,8 +85,8 @@ Insurance.init(
     tableName: "insurances",
     timestamps: true,
     underscored: true,
-    sequelize
-  }
+    sequelize,
+  },
 );
 
 export default Insurance;
diff --git a/app/server/src/models/MaintenanceLog.ts b/app/server/src/models/MaintenanceLog.ts
index 4af547c4..b9c7d452 100644
--- a/app/server/src/models/MaintenanceLog.ts
+++ b/app/server/src/models/MaintenanceLog.ts
@@ -19,13 +19,13 @@ class MaintenanceLog
   extends Model<MaintenanceLogAttributes, MaintenanceLogCreationAttributes>
   implements MaintenanceLogAttributes
 {
-  public declare id: string;
-  public declare vehicleId: string;
-  public declare date: string;
-  public declare odometer: number;
-  public declare service: string;
-  public declare cost: number;
-  public declare notes: string;
+  declare public id: string;
+  declare public vehicleId: string;
+  declare public date: string;
+  declare public odometer: number;
+  declare public service: string;
+  declare public cost: number;
+  declare public notes: string;
 }
 
 MaintenanceLog.init(
@@ -39,13 +39,13 @@ MaintenanceLog.init(
     vehicleId: {
       type: DataTypes.INTEGER,
       references: {
-        model: Vehicle, 
+        model: Vehicle,
         key: "id",
       },
       allowNull: false,
     },
     date: {
-      type: DataTypes.DATE,
+      type: DataTypes.DATEONLY,
       allowNull: false,
       validate: {
         isDate: true,
@@ -78,7 +78,7 @@ MaintenanceLog.init(
       type: DataTypes.STRING,
       allowNull: true,
       validate: {
-        notEmpty: true
+        notEmpty: true,
       },
     },
   },
@@ -87,7 +87,7 @@ MaintenanceLog.init(
     timestamps: true,
     underscored: true,
     sequelize,
-  }
+  },
 );
 
 export default MaintenanceLog;
diff --git a/app/server/src/models/PUCC.ts b/app/server/src/models/PUCC.ts
index 75b5db43..c992cacc 100644
--- a/app/server/src/models/PUCC.ts
+++ b/app/server/src/models/PUCC.ts
@@ -16,16 +16,19 @@ interface PollutionCertificateCreationAttributes
   extends Optional<PollutionCertificateAttributes, "id"> {}
 
 class PollutionCertificate
-  extends Model<PollutionCertificateAttributes, PollutionCertificateCreationAttributes>
+  extends Model<
+    PollutionCertificateAttributes,
+    PollutionCertificateCreationAttributes
+  >
   implements PollutionCertificateAttributes
 {
-  public declare id: string;
-  public declare vehicleId: string;
-  public declare certificateNumber: string;
-  public declare issueDate: string;
-  public declare expiryDate: string;
-  public declare testingCenter: string;
-  public declare notes: string;
+  declare public id: string;
+  declare public vehicleId: string;
+  declare public certificateNumber: string;
+  declare public issueDate: string;
+  declare public expiryDate: string;
+  declare public testingCenter: string;
+  declare public notes: string;
 }
 
 PollutionCertificate.init(
@@ -42,7 +45,7 @@ PollutionCertificate.init(
         model: Vehicle, // Use string reference
         key: "id",
       },
-      allowNull: false
+      allowNull: false,
     },
     certificateNumber: {
       type: DataTypes.STRING,
@@ -86,7 +89,7 @@ PollutionCertificate.init(
     tableName: "pollution_certificates",
     timestamps: true,
     underscored: true,
-  }
+  },
 );
 
 export default PollutionCertificate;
diff --git a/app/server/src/models/Vehicle.ts b/app/server/src/models/Vehicle.ts
index af1ca05f..8df20c4b 100644
--- a/app/server/src/models/Vehicle.ts
+++ b/app/server/src/models/Vehicle.ts
@@ -1,95 +1,97 @@
-import { DataTypes, Model, Optional } from 'sequelize';
-import sequelize from '../config/database.js';
+import { DataTypes, Model, Optional } from "sequelize";
+import sequelize from "../config/database.js";
 
 interface VehicleAttributes {
-    id: string;
-    make: string;
-    model: string;
-    year: number;
-    licensePlate: string;
-    vin?: string;
-    color?: string;
-    odometer?: number;
+  id: string;
+  make: string;
+  model: string;
+  year: number;
+  licensePlate: string;
+  vin?: string;
+  color?: string;
+  odometer?: number;
 }
 
-interface VehicleCreationAttributes extends Optional<VehicleAttributes, 'id'> {}
+interface VehicleCreationAttributes extends Optional<VehicleAttributes, "id"> {}
 
-class Vehicle extends Model<VehicleAttributes, VehicleCreationAttributes> implements VehicleAttributes {
-    public declare id: string;
-    public declare make: string;
-    public declare model: string;
-    public declare year: number;
-    public declare licensePlate: string;
-    public declare vin?: string;
-    public declare color?: string;
-    public declare odometer?: number;
+class Vehicle
+  extends Model<VehicleAttributes, VehicleCreationAttributes>
+  implements VehicleAttributes
+{
+  declare public id: string;
+  declare public make: string;
+  declare public model: string;
+  declare public year: number;
+  declare public licensePlate: string;
+  declare public vin?: string;
+  declare public color?: string;
+  declare public odometer?: number;
 }
 
-Vehicle.init({
+Vehicle.init(
+  {
     id: {
-        type: DataTypes.UUIDV4,
-        primaryKey: true,
-        allowNull: false,
-        defaultValue: DataTypes.UUIDV4,
+      type: DataTypes.UUIDV4,
+      primaryKey: true,
+      allowNull: false,
+      defaultValue: DataTypes.UUIDV4,
     },
     make: {
-        type: DataTypes.STRING,
-        allowNull: false,
-        validate: {
-            notEmpty: true,
-        },
+      type: DataTypes.STRING,
+      allowNull: false,
+      validate: {
+        notEmpty: true,
+      },
     },
     model: {
-        type: DataTypes.STRING,
-        allowNull: false,
-        validate: {
-            notEmpty: true,
-        },
+      type: DataTypes.STRING,
+      allowNull: false,
+      validate: {
+        notEmpty: true,
+      },
     },
     year: {
-        type: DataTypes.INTEGER,
-        allowNull: false,
-        validate: {
-            isInt: true,
-            min: 1886, // The year the first car was invented
-            max: new Date().getFullYear() + 1
-        },
+      type: DataTypes.INTEGER,
+      allowNull: false,
+      validate: {
+        isInt: true,
+        min: 1886, // The year the first car was invented
+        max: new Date().getFullYear() + 1,
+      },
     },
     licensePlate: {
-        type: DataTypes.STRING,
-        allowNull: false,
-        unique: true,
-        validate: {
-            notEmpty: true,
-            len: [1, 15], // Assuming a maximum length for license plates
-        },
+      type: DataTypes.STRING,
+      allowNull: false,
+      unique: true,
+      validate: {
+        notEmpty: true,
+        len: [1, 15], // Assuming a maximum length for license plates
+      },
     },
     vin: {
-        type: DataTypes.STRING,
-        unique: true,
-        allowNull: true,
-        validate: {
-            is: /^[A-HJ-NPR-Z0-9]{17}$/, // VIN must be 17 characters long, excluding I, O, and Q
-        },
+      type: DataTypes.STRING,
+      unique: true,
+      allowNull: true,
     },
     color: {
-        type: DataTypes.STRING,
-        allowNull: true,
-
+      type: DataTypes.STRING,
+      allowNull: true,
     },
     odometer: {
-        type: DataTypes.INTEGER,
-        allowNull: true,
-        validate: {
-            isInt: true,
-            min: 0, // Odometer cannot be negative
-        }
+      type: DataTypes.INTEGER,
+      allowNull: true,
+      validate: {
+        isInt: true,
+        min: 0, // Odometer cannot be negative
+      },
     },
-}, {
-    tableName: 'vehicles',
+  },
+  {
+    tableName: "vehicles",
     timestamps: true,
     underscored: true,
     sequelize,
-});
+  },
+);
 
-export default Vehicle;
\ No newline at end of file
+export default Vehicle;
diff --git a/app/server/src/services/insuranceService.ts b/app/server/src/services/insuranceService.ts
index 1284b9b7..57603ac5 100644
--- a/app/server/src/services/insuranceService.ts
+++ b/app/server/src/services/insuranceService.ts
@@ -1,4 +1,8 @@
-import { InsuranceNotFoundError, InsuranceExistsError, InsuranceServiceError } from "../exceptions/InsuranceError.js";
+import {
+  InsuranceNotFoundError,
+  InsuranceExistsError,
+  InsuranceServiceError,
+} from "../exceptions/InsuranceError.js";
 import { Insurance, Vehicle } from "../models/index.js";
 import { UniqueConstraintError } from "sequelize";
 
@@ -28,9 +32,9 @@ export const addInsurance = async (vehicleId: string, insuranceData: any) => {
   }
 };
 
-export const getInsurance = async (vehicleId: string) => {
+export const getInsurances = async (vehicleId: string) => {
   try {
-    const insurance = await Insurance.findOne({
+    const insurance = await Insurance.findAll({
       where: { vehicleId: vehicleId },
     });
     if (!insurance) {
@@ -45,7 +49,10 @@ export const getInsurance = async (vehicleId: string) => {
   }
 };
 
-export const updateInsurance = async (vehicleId: string, insuranceData: any) => {
+export const updateInsurance = async (
+  vehicleId: string,
+  insuranceData: any,
+) => {
   try {
     const insurance = await Insurance.findOne({
       where: { vehicleId: vehicleId },
diff --git a/app/server/src/services/pollutionCertificateService.ts b/app/server/src/services/pollutionCertificateService.ts
index 1ca83b47..c679210d 100644
--- a/app/server/src/services/pollutionCertificateService.ts
+++ b/app/server/src/services/pollutionCertificateService.ts
@@ -2,13 +2,13 @@ import { Vehicle, PollutionCertificate } from "../models/index.js";
 import {
   PollutionCertificateNotFoundError,
   PollutionCertificateExistsError,
-  PollutionCertificateServiceError
+  PollutionCertificateServiceError,
 } from "../exceptions/PollutionCertificateErrors.js";
 import { UniqueConstraintError } from "sequelize";
 
 export const addPollutionCertificate = async (
   vehicleId: string,
-  pollutionCertificateData: any
+  pollutionCertificateData: any,
 ) => {
   try {
     const vehicle = await Vehicle.findByPk(vehicleId);
@@ -31,13 +31,15 @@ export const addPollutionCertificate = async (
     if (error instanceof PollutionCertificateNotFoundError) {
       throw error;
     }
-    throw new PollutionCertificateServiceError("Error adding pollution certificate.");
+    throw new PollutionCertificateServiceError(
+      "Error adding pollution certificate.",
+    );
   }
 };
 
-export const getPollutionCertificate = async (vehicleId: string) => {
+export const getPollutionCertificates = async (vehicleId: string) => {
   try {
-    const pollutionCertificate = await PollutionCertificate.findOne({
+    const pollutionCertificate = await PollutionCertificate.findAll({
       where: { vehicleId: vehicleId },
     });
     if (!pollutionCertificate) {
@@ -48,13 +50,15 @@ export const getPollutionCertificate = async (vehicleId: string) => {
     if (error instanceof PollutionCertificateNotFoundError) {
       throw error;
     }
-    throw new PollutionCertificateServiceError("Error fetching pollution certificate.");
+    throw new PollutionCertificateServiceError(
+      "Error fetching pollution certificate.",
+    );
   }
 };
 
 export const updatePollutionCertificate = async (
   vehicleId: string,
-  pollutionCertificateData: any
+  pollutionCertificateData: any,
 ) => {
   try {
     const pollutionCertificate = await PollutionCertificate.findOne({
@@ -70,7 +74,9 @@ export const updatePollutionCertificate = async (
     if (error instanceof PollutionCertificateNotFoundError) {
       throw error;
     }
-    throw new PollutionCertificateServiceError("Error updating pollution certificate.");
+    throw new PollutionCertificateServiceError(
+      "Error updating pollution certificate.",
+    );
   }
 };
 
@@ -87,6 +93,8 @@ export const deletePollutionCertificate = async (vehicleId: string) => {
     if (error instanceof PollutionCertificateNotFoundError) {
       throw error;
     }
-    throw new PollutionCertificateServiceError("Error deleting pollution certificate.");
+    throw new PollutionCertificateServiceError(
+      "Error deleting pollution certificate.",
+    );
   }
 };
diff --git a/app/server/undefined b/app/server/undefined
index dc162c69..066f70bb 100644
Binary files a/app/server/undefined and b/app/server/undefined differ
diff --git a/package-lock.json b/package-lock.json
index e080a159..8fc24982 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "chart.js": "^4.5.0",
         "dayjs": "^1.11.13",
         "dot-env": "^0.0.1",
+        "svelte-loading-spinners": "^0.3.6",
         "svelte5-chartjs": "^1.0.0"
       },
       "devDependencies": {
@@ -12432,6 +12433,12 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/svelte-loading-spinners": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/svelte-loading-spinners/-/svelte-loading-spinners-0.3.6.tgz",
+      "integrity": "sha512-mthHQ2TwiwzTWzbFry3CBnVEfzqPOD9WkVw84OfSYzHRq6N9wgQ+yv37u81uPeuLU/ZOIPqhujpXquB1aol5ZQ==",
+      "license": "MIT"
+    },
     "node_modules/svelte5-chartjs": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/svelte5-chartjs/-/svelte5-chartjs-1.0.0.tgz",