diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 633862c..0c635c3 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -195,7 +195,6 @@ function App() {
                 return (
                     <PetDetail
                         pet={selectedPet}
-                        petRecords={myRecords.filter(r => (r.petId || r.pet?.id) === selectedPet?.id)}
                         onBack={goBackToDashboard}
                         onRegisterCase={(pet) => { setSelectedPet(pet); setCurrentView('create-case'); }}
                         onCaseClick={handleCaseClick}
diff --git a/frontend/src/pages/PetDetail.jsx b/frontend/src/pages/PetDetail.jsx
index 7bf7014..ee45885 100644
--- a/frontend/src/pages/PetDetail.jsx
+++ b/frontend/src/pages/PetDetail.jsx
@@ -1,7 +1,24 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { STATUS_MAP } from '../utils/statusHelper';
+import { medicalRecordService } from '../services/api';
 
-const PetDetail = ({ pet, petRecords = [], onBack, onRegisterCase, onCaseClick }) => {
+const PetDetail = ({ pet, onBack, onRegisterCase, onCaseClick }) => {
+    const [petRecords, setPetRecords] = useState([]);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        if (!pet?.id) {
+            setLoading(false);
+            return;
+        }
+        let cancelled = false;
+        setLoading(true);
+        medicalRecordService.getRecordsByPet(pet.id)
+            .then(res => { if (!cancelled) setPetRecords(res.data); })
+            .catch(() => { if (!cancelled) setPetRecords([]); })
+            .finally(() => { if (!cancelled) setLoading(false); });
+        return () => { cancelled = true; };
+    }, [pet?.id]);
 
     if (!pet) {
         return <div className="p-10 text-center italic text-slate-400">Ingen djurdata hittades.</div>;
@@ -66,7 +83,12 @@ const PetDetail = ({ pet, petRecords = [], onBack, onRegisterCase, onCaseClick }
                     </h2>
 
                     <div className="space-y-4">
-                        {Array.isArray(petRecords) && petRecords.length > 0 ? (
+                        {loading ? (
+                            <div className="flex items-center gap-2 text-slate-400 py-4">
+                                <div className="w-4 h-4 border-2 border-slate-200 border-t-blue-400 rounded-full animate-spin"></div>
+                                <span className="text-[10px] font-bold uppercase tracking-widest italic">Laddar...</span>
+                            </div>
+                        ) : Array.isArray(petRecords) && petRecords.length > 0 ? (
                             petRecords.map(record => {
                                 const statusKey = record?.status;
                                 const statusConfig = (STATUS_MAP && STATUS_MAP[statusKey]) || {