diff --git a/frontend/src/api/vehicles.ts b/frontend/src/api/vehicles.ts
new file mode 100644
index 0000000..5158947
--- /dev/null
+++ b/frontend/src/api/vehicles.ts
@@ -0,0 +1,13 @@
+import { request } from './client'
+
+export interface VehicleData {
+  make: string
+  model: string
+  year: number
+  color: string
+  fuel: string
+}
+
+export function lookupVehicle(plate: string): Promise<VehicleData> {
+  return request<VehicleData>(`/vehicles/${plate}`)
+}
diff --git a/frontend/src/components/VehicleInfo.vue b/frontend/src/components/VehicleInfo.vue
index 052b3dc..a9c159f 100644
--- a/frontend/src/components/VehicleInfo.vue
+++ b/frontend/src/components/VehicleInfo.vue
@@ -4,6 +4,7 @@ export interface VehicleInfo {
   model: string
   year: number
   color: string
+  fuel: string
 }
 
 defineProps<{
@@ -23,7 +24,7 @@ defineProps<{
     >
       <p class="vehicle-info__text">
         {{ vehicle.make }} {{ vehicle.model }} ({{ vehicle.year }}) &mdash;
-        {{ vehicle.color }}
+        {{ vehicle.color }}, {{ vehicle.fuel }}
       </p>
     </div>
     <div v-else-if="loading" class="vehicle-info__loading" role="status">
diff --git a/frontend/src/pages/HomePage.vue b/frontend/src/pages/HomePage.vue
index 65e16e9..552d02b 100644
--- a/frontend/src/pages/HomePage.vue
+++ b/frontend/src/pages/HomePage.vue
@@ -4,34 +4,31 @@ import { RouterLink } from 'vue-router'
 import PlateInput from '@/components/PlateInput.vue'
 import VehicleInfo from '@/components/VehicleInfo.vue'
 import type { VehicleInfo as VehicleData } from '@/components/VehicleInfo.vue'
-
-const FAKE_VEHICLES: Record<string, VehicleData> = {
-  ABC123: { make: 'Volvo', model: 'V70', year: 2009, color: 'Silver' },
-  ABC12D: { make: 'Volkswagen', model: 'Golf', year: 2020, color: 'Blå' },
-  XYZ789: { make: 'Saab', model: '9-3', year: 2005, color: 'Röd' },
-}
+import { lookupVehicle } from '@/api/vehicles'
 
 const plate = ref('')
 const vehicle = ref<VehicleData | null>(null)
 const notFound = ref(false)
 const lookingUp = ref(false)
 
-function handleLookup(lookedUpPlate: string) {
+async function handleLookup(lookedUpPlate: string) {
   lookingUp.value = true
   notFound.value = false
   vehicle.value = null
 
-  setTimeout(() => {
-    const found = FAKE_VEHICLES[lookedUpPlate]
-    if (found) {
-      vehicle.value = found
-      notFound.value = false
+  try {
+    const result = await lookupVehicle(lookedUpPlate)
+    vehicle.value = result
+  } catch (err: unknown) {
+    if (err instanceof Error && err.message.includes('Inget fordon')) {
+      notFound.value = true
     } else {
       vehicle.value = null
       notFound.value = true
     }
+  } finally {
     lookingUp.value = false
-  }, 400)
+  }
 }
 </script>