diff --git a/api/index.ts b/api/index.ts
new file mode 100644
index 0000000..a1c0594
--- /dev/null
+++ b/api/index.ts
@@ -0,0 +1,10 @@
+import axios from 'axios';
+
+const apiClient = axios.create({
+    baseURL: 'https://pets-react-query-backend.eapi.joincoded.com',
+
+});
+
+
+export default apiClient;
+
diff --git a/api/pets.ts b/api/pets.ts
new file mode 100644
index 0000000..2afdd2f
--- /dev/null
+++ b/api/pets.ts
@@ -0,0 +1,19 @@
+import { Pet } from "@/data/pets";
+import apiClient from ".";
+
+const getAllPets = async () => {
+    const response = await apiClient.get('/pets');
+    return response.data;
+}
+
+const getOnePet = async (id: string) => {
+    const response = await apiClient.get(`/pets/${id}`);
+    return response.data;
+}
+
+const addPet = async (pet: Pet) => {
+    const response = await apiClient.post('/pets', pet);
+    return response.data;
+}
+export { addPet, getAllPets, getOnePet };
+
diff --git a/app/[id].tsx b/app/[id].tsx
index 5a8e841..67470a8 100644
--- a/app/[id].tsx
+++ b/app/[id].tsx
@@ -1,19 +1,24 @@
+import { getOnePet } from "@/api/pets";
+import PetButton from "@/components/PetButton";
+import { Pet } from "@/data/pets";
 import { useLocalSearchParams } from "expo-router";
-import React from "react";
+import React, { useState } from "react";
 import { Image, ScrollView, StyleSheet, Text, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
-import { pets } from "../data/pets";
 
 export default function PetDetails() {
   const { id } = useLocalSearchParams();
-
-  const pet = pets.find((p) => p.id === Number(id));
+  const [pet, setPet] = useState<Pet | null>(null);
+  const handleGetOnePet = async () => {
+    const pet = await getOnePet(id as string);
+    setPet(pet);
+  };
 
   if (!pet) {
     return (
       <SafeAreaView style={styles.container} edges={["bottom"]}>
         <View style={styles.errorContainer}>
-          <Text style={styles.errorText}>Pet not found!</Text>
+          <PetButton title="Get Pet" onPress={() => handleGetOnePet()} />
         </View>
       </SafeAreaView>
     );
diff --git a/app/index.tsx b/app/index.tsx
index 4aae0c3..50c3a85 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -1,12 +1,8 @@
+import { getAllPets } from "@/api/pets";
+import PetButton from "@/components/PetButton";
 import { useRouter } from "expo-router";
 import React, { useState } from "react";
-import {
-  ScrollView,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from "react-native";
+import { ScrollView, StyleSheet, Text, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { AddPetModal } from "../components/AddPetModal";
 import { PetCard } from "../components/PetCard";
@@ -17,6 +13,11 @@ export default function Index() {
   const [pets, setPets] = useState<Pet[]>(initialPets);
   const [modalVisible, setModalVisible] = useState(false);
 
+  const handleGetPets = async () => {
+    const pets = await getAllPets();
+    setPets(pets);
+  };
+
   const handlePetPress = (id: number) => {
     router.push(`/${id}`);
   };
@@ -27,12 +28,8 @@ export default function Index() {
 
   return (
     <>
-      <TouchableOpacity
-        onPress={() => setModalVisible(true)}
-        style={styles.headerButton}
-      >
-        <Text style={styles.headerButtonText}>Add Pet</Text>
-      </TouchableOpacity>
+      <PetButton title="Get Pets" onPress={() => handleGetPets()} />
+      <PetButton title="Add Pet" onPress={() => setModalVisible(true)} />
 
       <SafeAreaView style={styles.container} edges={["bottom"]}>
         <ScrollView contentContainerStyle={styles.scrollContent}>
@@ -46,7 +43,7 @@ export default function Index() {
               <PetCard
                 key={pet.id}
                 pet={pet}
-                onPress={() => handlePetPress(pet.id)}
+                onPress={() => handlePetPress(pet.id as number)}
               />
             ))
           )}
diff --git a/components/AddPetModal.tsx b/components/AddPetModal.tsx
index 6638890..d5eb170 100644
--- a/components/AddPetModal.tsx
+++ b/components/AddPetModal.tsx
@@ -1,3 +1,4 @@
+import { addPet } from "@/api/pets";
 import React, { useState } from "react";
 import {
   KeyboardAvoidingView,
@@ -27,16 +28,19 @@ export const AddPetModal: React.FC<AddPetModalProps> = ({
   const [adopted, setAdopted] = useState("");
   const [image, setImage] = useState("");
 
-  const handleAdd = () => {
+  const handleAdd = async () => {
     if (name.trim() && type.trim()) {
       const maxId = Date.now(); // Generate unique ID using rtimestamp
-      onAdd({
+      const newPet = await addPet({
         id: maxId,
         name: name.trim(),
         type: type.trim(),
         adopted: adopted.trim() || "No",
-        image: image.trim() || "https://images.unsplash.com/photo-1450778869180-41d0601e046e?w=400&h=400&fit=crop",
+        image:
+          image.trim() ||
+          "https://images.unsplash.com/photo-1450778869180-41d0601e046e?w=400&h=400&fit=crop",
       });
+      onAdd(newPet);
       // Reset form
       setName("");
       setType("");
@@ -216,4 +220,3 @@ const styles = StyleSheet.create({
     fontWeight: "600",
   },
 });
-
diff --git a/components/AddTodoModal.tsx b/components/AddTodoModal.tsx
deleted file mode 100644
index 0519ecb..0000000
--- a/components/AddTodoModal.tsx
+++ /dev/null
@@ -1 +0,0 @@
- 
\ No newline at end of file
diff --git a/components/PetButton.tsx b/components/PetButton.tsx
new file mode 100644
index 0000000..b507c20
--- /dev/null
+++ b/components/PetButton.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import { StyleSheet, Text, TouchableOpacity } from "react-native";
+
+const PetButton = ({
+  title,
+  onPress,
+}: {
+  title: string;
+  onPress: () => void;
+}) => {
+  return (
+    <TouchableOpacity onPress={onPress} style={styles.headerButton}>
+      <Text style={styles.headerButtonText}>{title}</Text>
+    </TouchableOpacity>
+  );
+};
+
+export default PetButton;
+
+const styles = StyleSheet.create({
+  headerButton: {
+    margin: 8,
+    borderRadius: 8,
+    backgroundColor: "#6200EE",
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 10,
+  },
+  headerButtonText: {
+    color: "white",
+    fontSize: 16,
+    fontWeight: "300",
+    marginTop: -2,
+    textAlign: "center",
+  },
+});
diff --git a/data/pets.ts b/data/pets.ts
index 7e3dae1..84fdbfa 100644
--- a/data/pets.ts
+++ b/data/pets.ts
@@ -1,5 +1,5 @@
 export interface Pet {
-    id: number;
+    id?: number;
     name: string;
     type: string;
     adopted: string;
diff --git a/package-lock.json b/package-lock.json
index 211e9e2..894f103 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@react-navigation/bottom-tabs": "^7.4.0",
         "@react-navigation/elements": "^2.6.3",
         "@react-navigation/native": "^7.1.8",
+        "axios": "^1.13.1",
         "expo": "~54.0.20",
         "expo-constants": "~18.0.10",
         "expo-font": "~14.0.9",
@@ -4015,6 +4016,11 @@
       "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
       "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ=="
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -4030,6 +4036,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/axios": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.1.tgz",
+      "integrity": "sha512-hU4EGxxt+j7TQijx1oYdAjw4xuIp1wRQSsbMFwSthCWeBQur1eF+qJ5iQ5sN3Tw8YRzQNKb8jszgBdMDVqwJcw==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.4",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/babel-jest": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-29.7.0.tgz",
@@ -4430,7 +4446,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
       "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
-      "dev": true,
       "dependencies": {
         "es-errors": "^1.3.0",
         "function-bind": "^1.1.2"
@@ -4682,6 +4697,17 @@
         "simple-swizzle": "^0.2.2"
       }
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
@@ -4981,6 +5007,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -5052,7 +5086,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
       "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
-      "dev": true,
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.1",
         "es-errors": "^1.3.0",
@@ -5178,7 +5211,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
       "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -5187,7 +5219,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
       "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -5223,7 +5254,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
       "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
-      "dev": true,
       "dependencies": {
         "es-errors": "^1.3.0"
       },
@@ -5235,7 +5265,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
       "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
-      "dev": true,
       "dependencies": {
         "es-errors": "^1.3.0",
         "get-intrinsic": "^1.2.6",
@@ -6601,6 +6630,25 @@
       "resolved": "https://registry.npmjs.org/flow-enums-runtime/-/flow-enums-runtime-0.0.6.tgz",
       "integrity": "sha512-3PYnM29RFXwvAN6Pc/scUfkI7RwhQ/xqyLUyPNlXUp9S40zI8nup9tUSrTLSVnWGBN38FNiGWbwZOB6uR4OGdw=="
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.11",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
+      "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fontfaceobserver": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/fontfaceobserver/-/fontfaceobserver-2.3.0.tgz",
@@ -6636,6 +6684,21 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
+      "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/freeport-async": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/freeport-async/-/freeport-async-2.0.0.tgz",
@@ -6736,7 +6799,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
       "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
-      "dev": true,
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.2",
         "es-define-property": "^1.0.1",
@@ -6776,7 +6838,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
       "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
-      "dev": true,
       "dependencies": {
         "dunder-proto": "^1.0.1",
         "es-object-atoms": "^1.0.0"
@@ -6918,7 +6979,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
       "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -6988,7 +7048,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
       "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -7000,7 +7059,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
       "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
-      "dev": true,
       "dependencies": {
         "has-symbols": "^1.0.3"
       },
@@ -8411,7 +8469,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
       "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -9576,6 +9633,11 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "dev": true
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
diff --git a/package.json b/package.json
index 1a45817..5d588a8 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@react-navigation/bottom-tabs": "^7.4.0",
     "@react-navigation/elements": "^2.6.3",
     "@react-navigation/native": "^7.1.8",
+    "axios": "^1.13.1",
     "expo": "~54.0.20",
     "expo-constants": "~18.0.10",
     "expo-font": "~14.0.9",
@@ -31,17 +32,17 @@
     "react-dom": "19.1.0",
     "react-native": "0.81.5",
     "react-native-gesture-handler": "~2.28.0",
-    "react-native-worklets": "0.5.1",
     "react-native-reanimated": "~4.1.1",
     "react-native-safe-area-context": "~5.6.0",
     "react-native-screens": "~4.16.0",
-    "react-native-web": "~0.21.0"
+    "react-native-web": "~0.21.0",
+    "react-native-worklets": "0.5.1"
   },
   "devDependencies": {
     "@types/react": "~19.1.0",
-    "typescript": "~5.9.2",
     "eslint": "^9.25.0",
-    "eslint-config-expo": "~10.0.0"
+    "eslint-config-expo": "~10.0.0",
+    "typescript": "~5.9.2"
   },
   "private": true
 }