diff --git a/frontend/package.json b/frontend/package.json
index 51914e7f..9a6574b6 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,6 +13,7 @@
     "bootstrap": "^5.3.3",
     "bootstrap-icons": "^1.11.3",
     "oidc-client-ts": "^3.0.1",
+    "openapi-fetch": "^0.10.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-oidc-context": "^3.1.0",
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 5758821d..8212a856 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -8,18 +8,20 @@ import Navbar from "./Components/Navbar/Navbar";
 import Settings from "./Components/Settings";
 import CreatePetModal from "./Components/CreatePetModal";
 import PetPage from "./Components/PetPage";
+import type { paths } from "./web-backend-api";
+import createClient, { type Middleware } from "openapi-fetch";
 
 function App() {
   const auth = useAuth();
-  const [count, setCount] = useState(0)
+  const [count, setCount] = useState(0);
 
   switch (auth.activeNavigator) {
-    case 'signinSilent':
+    case "signinSilent":
       return <div>Signing you in...</div>;
-    case 'signoutRedirect':
+    case "signoutRedirect":
       return <div>Signing you out...</div>;
   }
-  
+
   if (auth.isLoading) {
     return <div>Loading...</div>;
   }
@@ -30,18 +32,43 @@ function App() {
   }
 
   if (auth.isAuthenticated) {
+    // Client initialisation
+    const authMiddleware: Middleware = {
+      async onRequest({ request }) {
+        // add Authorization header to every request
+        request.headers.set(
+          "Authorization",
+          `Bearer ${auth.user?.access_token}`
+        );
+        return request;
+      },
+    };
+
+    const client = createClient<paths>({
+      baseUrl: "http://localhost:4000/backend",
+    });
+    client.use(authMiddleware);
+
+    // https://github.com/openapi-ts/openapi-typescript/tree/main/packages/openapi-fetch
+    (async () => {
+      console.log("hi there!");
+      const { data, error } = await client.GET("/api/v1/devices/self", {});
+
+      console.log("data", data);
+      console.log("error", error);
+    })();
+
     return (
       <div style={{ backgroundColor: "#FFFFFF" }}>
         <div>
           <div>
-            <Navbar />{" "}
-            <LinkDevice />
+            <Navbar />
           </div>
         </div>
         {/* <div>
           Hello USERNAME: {auth.user?.profile?.preferred_username || "User"}
         </div> */}
-        <Footer />,
+        <Footer />
       </div>
     );
   }
diff --git a/frontend/src/web-backend-api.d.ts b/frontend/src/web-backend-api.d.ts
new file mode 100644
index 00000000..b370f17f
--- /dev/null
+++ b/frontend/src/web-backend-api.d.ts
@@ -0,0 +1,552 @@
+/**
+ * This file was auto-generated by openapi-typescript.
+ * Do not make direct changes to the file.
+ */
+
+export interface paths {
+    "/api/v1/devices": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Get all devices */
+        get: {
+            parameters: {
+                query?: never;
+                header?: never;
+                path?: never;
+                cookie?: never;
+            };
+            requestBody?: never;
+            responses: {
+                /** @description OK */
+                200: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content: {
+                        "application/json": components["schemas"]["DeviceDTO"][];
+                    };
+                };
+            };
+        };
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v1/devices/self": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Get all devices owned by a given user */
+        get: {
+            parameters: {
+                query?: never;
+                header?: never;
+                path?: never;
+                cookie?: never;
+            };
+            requestBody?: never;
+            responses: {
+                /** @description OK */
+                200: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content: {
+                        "application/json": components["schemas"]["DeviceDTO"][];
+                    };
+                };
+            };
+        };
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v1/devices/self/register/{registrationCode}/{deviceName}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Register a device using a registration code */
+        post: {
+            parameters: {
+                query?: never;
+                header?: never;
+                path: {
+                    deviceName: string;
+                    registrationCode: string;
+                };
+                cookie?: never;
+            };
+            requestBody?: never;
+            responses: {
+                /** @description OK */
+                200: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content: {
+                        "application/json": components["schemas"]["DeviceDTO"];
+                    };
+                };
+                /** @description Not Found */
+                404: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content?: never;
+                };
+            };
+        };
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v1/devices/self/{deviceId}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Get a device by its id */
+        get: {
+            parameters: {
+                query?: never;
+                header?: never;
+                path: {
+                    deviceId: number;
+                };
+                cookie?: never;
+            };
+            requestBody?: never;
+            responses: {
+                /** @description OK */
+                200: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content: {
+                        "application/json": components["schemas"]["DeviceDTO"];
+                    };
+                };
+                /** @description Not Found */
+                404: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content?: never;
+                };
+            };
+        };
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v1/devices/{deviceId}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Get a device by its id */
+        get: {
+            parameters: {
+                query?: never;
+                header?: never;
+                path: {
+                    deviceId: number;
+                };
+                cookie?: never;
+            };
+            requestBody?: never;
+            responses: {
+                /** @description OK */
+                200: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content: {
+                        "application/json": components["schemas"]["DeviceDTO"];
+                    };
+                };
+                /** @description Not Found */
+                404: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content?: never;
+                };
+            };
+        };
+        put?: never;
+        post?: never;
+        /** Delete a device by its id */
+        delete: {
+            parameters: {
+                query?: never;
+                header?: never;
+                path: {
+                    deviceId: number;
+                };
+                cookie?: never;
+            };
+            requestBody?: never;
+            responses: {
+                /** @description OK */
+                200: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content: {
+                        "application/json": components["schemas"]["DeviceDTO"];
+                    };
+                };
+                /** @description Not Found */
+                404: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content?: never;
+                };
+            };
+        };
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v1/pets": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Get all pets */
+        get: {
+            parameters: {
+                query?: never;
+                header?: never;
+                path?: never;
+                cookie?: never;
+            };
+            requestBody?: never;
+            responses: {
+                /** @description OK */
+                200: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content: {
+                        "application/json": components["schemas"]["PetDTO"][];
+                    };
+                };
+            };
+        };
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v1/pets/self": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Get all pets owned by a given user */
+        get: {
+            parameters: {
+                query?: never;
+                header?: never;
+                path?: never;
+                cookie?: never;
+            };
+            requestBody?: never;
+            responses: {
+                /** @description OK */
+                200: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content: {
+                        "application/json": components["schemas"]["PetDTO"][];
+                    };
+                };
+            };
+        };
+        put?: never;
+        /** Create a pet */
+        post: {
+            parameters: {
+                query?: never;
+                header?: never;
+                path?: never;
+                cookie?: never;
+            };
+            requestBody?: {
+                content: {
+                    "application/json": components["schemas"]["PetDTO"];
+                };
+            };
+            responses: {
+                /** @description OK */
+                200: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content: {
+                        "application/json": components["schemas"]["PetDTO"];
+                    };
+                };
+            };
+        };
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v1/pets/self/{petId}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Get a pet by its id */
+        get: {
+            parameters: {
+                query?: never;
+                header?: never;
+                path: {
+                    petId: number;
+                };
+                cookie?: never;
+            };
+            requestBody?: never;
+            responses: {
+                /** @description OK */
+                200: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content: {
+                        "application/json": components["schemas"]["PetDTO"];
+                    };
+                };
+                /** @description Not Found */
+                404: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content?: never;
+                };
+            };
+        };
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v1/pets/types": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Get all pet types */
+        get: {
+            parameters: {
+                query?: never;
+                header?: never;
+                path?: never;
+                cookie?: never;
+            };
+            requestBody?: never;
+            responses: {
+                /** @description OK */
+                200: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content: {
+                        "application/json": components["schemas"]["PetTypeDTO"][];
+                    };
+                };
+            };
+        };
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v1/pets/{petId}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Get a pet by its id */
+        get: {
+            parameters: {
+                query?: never;
+                header?: never;
+                path: {
+                    petId: number;
+                };
+                cookie?: never;
+            };
+            requestBody?: never;
+            responses: {
+                /** @description OK */
+                200: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content: {
+                        "application/json": components["schemas"]["PetDTO"];
+                    };
+                };
+                /** @description Not Found */
+                404: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content?: never;
+                };
+            };
+        };
+        put?: never;
+        post?: never;
+        /** Delete a pet by its id */
+        delete: {
+            parameters: {
+                query?: never;
+                header?: never;
+                path: {
+                    petId: number;
+                };
+                cookie?: never;
+            };
+            requestBody?: never;
+            responses: {
+                /** @description OK */
+                200: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content: {
+                        "application/json": components["schemas"]["PetDTO"];
+                    };
+                };
+                /** @description Not Found */
+                404: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content?: never;
+                };
+            };
+        };
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+}
+export type webhooks = Record<string, never>;
+export interface components {
+    schemas: {
+        /**
+         * Format: date
+         * @example 2022-03-10
+         */
+        Date: string;
+        DeviceDTO: {
+            /** Format: int64 */
+            id?: number;
+            name?: string;
+            type?: string;
+            ownerId?: string;
+            /** Format: int64 */
+            petId?: number;
+        };
+        PetDTO: {
+            /** Format: int64 */
+            id?: number;
+            name?: string;
+            /** Format: int64 */
+            type?: number;
+            ownerId?: string;
+            lastTimeOnDevice?: components["schemas"]["Date"];
+            state?: components["schemas"]["PetStateDTO"];
+        };
+        PetStateDTO: {
+            /** Format: int32 */
+            happiness?: number;
+            /** Format: int32 */
+            wellbeing?: number;
+            /** Format: int32 */
+            health?: number;
+            /** Format: int32 */
+            hunger?: number;
+            /** Format: int32 */
+            cleanliness?: number;
+            /** Format: int32 */
+            fun?: number;
+            /** Format: int32 */
+            xp?: number;
+        };
+        PetTypeDTO: {
+            /** Format: int64 */
+            id?: number;
+            name?: string;
+        };
+    };
+    responses: never;
+    parameters: never;
+    requestBodies: never;
+    headers: never;
+    pathItems: never;
+}
+export type $defs = Record<string, never>;
+export type operations = Record<string, never>;