diff --git a/client/env.d.ts b/client/env.d.ts
new file mode 100644
index 0000000..d3c52bd
--- /dev/null
+++ b/client/env.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+    readonly VITE_API_URL: string
+}
+
+interface ImportMeta {
+    readonly env: ImportMetaEnv
+}
\ No newline at end of file
diff --git a/client/src/components/addItem.vue b/client/src/components/addItem.vue
index 825423c..7608dfe 100644
--- a/client/src/components/addItem.vue
+++ b/client/src/components/addItem.vue
@@ -22,7 +22,7 @@
 </template>
 
 <script>
-import itemService from '../services/itemService';
+import { createItem } from '../services/itemService';
 
 export default {
   name: "addItem",
@@ -44,7 +44,7 @@ export default {
       if (this.name != "" && this.price > 0) {
         this.loading = true;
 
-        let response = await itemService.createItem(this.budgetId, this.recipientId, this.name, this.price);
+        let response = await createItem(this.budgetId, this.recipientId, this.name, this.price);
           
         this.items.push(response.data.data);
         this.clear();        
diff --git a/client/src/components/budgetList.vue b/client/src/components/budgetList.vue
index 4f8a499..65f4c3f 100644
--- a/client/src/components/budgetList.vue
+++ b/client/src/components/budgetList.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="budget-list-container">
     <h1 class="title is-4">My Budgets</h1>
+    <Test />
     <clip-loader v-if="loading" size="80" color="#973735" />
     <div class="grid">
       <budget-card-v2 v-for="budget in budgets" v-bind:key="budget.id" v-bind:budget="budget" />
diff --git a/client/src/components/item.vue b/client/src/components/item.vue
index 88c9866..82c0c8e 100644
--- a/client/src/components/item.vue
+++ b/client/src/components/item.vue
@@ -26,7 +26,7 @@
 </template>
 
 <script>
-import itemService from '../services/itemService';
+import { updateItem } from '../services/itemService';
 
 export default {
   name: "item",
@@ -49,7 +49,7 @@ export default {
   methods: {
     togglePurchase: async function() {
       try {
-        await itemService.updateItem(
+        await updateItem(
           this.budgetId,
           this.recipientId,
           this.item.id,
@@ -64,7 +64,7 @@ export default {
       }
     },
     update: async function() {      
-      await itemService.updateItem(
+      await updateItem(
         this.budgetId,
         this.recipientId,
         this.item.id,
diff --git a/client/src/components/recipientDetails.vue b/client/src/components/recipientDetails.vue
index 5726350..e61146b 100644
--- a/client/src/components/recipientDetails.vue
+++ b/client/src/components/recipientDetails.vue
@@ -42,7 +42,7 @@
 import addItem from './addItem.vue'
 import item from './item.vue'
 
-import itemService from '../services/itemService'
+import { deleteItem } from '../services/itemService'
 
 export default {
   name: 'recipientDetails',
@@ -61,7 +61,7 @@ export default {
       if (!confirm(`Are you sure you'd like to delete '${item.name}'? This cannot be undone.`))
         return;
 
-      await itemService.deleteItem(this.budgetId, this.recipient.id, item.id);
+      await deleteItem(this.budgetId, this.recipient.id, item.id);
       
       this.recipient.items = this.recipient.items.filter(i => i.id != item.id);
     }
diff --git a/client/src/infrastructure/http.js b/client/src/infrastructure/http.js
deleted file mode 100644
index 06a2a04..0000000
--- a/client/src/infrastructure/http.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import axios from 'axios';
-
-let http = 
-  axios.create({
-    baseURL: import.meta.env.VITE_API_URL
-  });
-
-let headers = () =>
-  ({
-    headers: {
-      'Access-Control-Allow-Headers': '*',
-      'Authorization': `Bearer ${localStorage.getItem('token')}`
-    }
-  });
-
-export default {
-  get: url => http.get(url, headers()),
-
-  post: (url, data) => http.post(url, data, headers()),
-
-  patch: (url, data) => http.patch(url, data, headers()),
-
-  delete: url => http.delete(url, headers())
-};
\ No newline at end of file
diff --git a/client/src/infrastructure/http.ts b/client/src/infrastructure/http.ts
new file mode 100644
index 0000000..cba8853
--- /dev/null
+++ b/client/src/infrastructure/http.ts
@@ -0,0 +1,32 @@
+import axios from 'axios';
+
+let http = 
+  axios.create({
+    baseURL: import.meta.env.VITE_API_URL
+  });
+
+let headers = () =>
+  ({
+    headers: {
+      'Access-Control-Allow-Headers': '*',
+      'Authorization': `Bearer ${localStorage.getItem('token')}`
+    }
+  });
+  
+export default {
+  get<T>(url: string) {
+    return http.get<T>(url, headers());
+  },
+
+  post<T>(url: string, data: any) {
+    return http.post<T>(url, data, headers());
+  },
+
+  patch<T>(url: string, data: any) {
+    return http.patch<T>(url, data, headers());
+  },
+
+  delete(url: string) {
+    http.delete(url, headers());
+  }
+};
\ No newline at end of file
diff --git a/client/src/services/itemService.js b/client/src/services/itemService.js
deleted file mode 100644
index 891142f..0000000
--- a/client/src/services/itemService.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import http from '../infrastructure/http';
-
-export default {
-  createItem: (budgetId, recipientId, name, price) =>
-    http.post(`/api/budgets/${budgetId}/recipients/${recipientId}/items`, { name, price }),
-    
-  updateItem: (budgetId, recipientId, id, name, price, purchased) =>
-    http.patch(`/api/budgets/${budgetId}/recipients/${recipientId}/items/${id}`, { name, price, purchased }),
-
-  deleteItem: (budgetId, recipientId, id) =>
-    http.delete(`/api/budgets/${budgetId}/recipients/${recipientId}/items/${id}`),
-}
\ No newline at end of file
diff --git a/client/src/services/itemService.ts b/client/src/services/itemService.ts
new file mode 100644
index 0000000..2b4a5ea
--- /dev/null
+++ b/client/src/services/itemService.ts
@@ -0,0 +1,15 @@
+import http from '../infrastructure/http';
+import { Item } from '../types/Item';
+
+
+export function createItem(budgetId: number, recipientId: number, name: string, price: number) {
+  return http.post<Item>(`/api/budgets/${budgetId}/recipients/${recipientId}/items`, { name, price });
+}
+  
+export function updateItem(budgetId, recipientId, id, name, price, purchased) {
+  return http.patch<Item>(`/api/budgets/${budgetId}/recipients/${recipientId}/items/${id}`, { name, price, purchased });
+}
+
+export function deleteItem(budgetId, recipientId, id) {
+  http.delete(`/api/budgets/${budgetId}/recipients/${recipientId}/items/${id}`);
+}
\ No newline at end of file
diff --git a/client/src/types/Item.ts b/client/src/types/Item.ts
new file mode 100644
index 0000000..1c4a084
--- /dev/null
+++ b/client/src/types/Item.ts
@@ -0,0 +1,9 @@
+export type Item = {
+    id: number
+    recipientId: number
+    name: string
+    price: number
+    purchased: boolean
+    created_at: Date
+    updated_at: Date
+}
\ No newline at end of file
diff --git a/client/vite.config.js b/client/vite.config.js
index bbb2ca3..7d198c7 100644
--- a/client/vite.config.js
+++ b/client/vite.config.js
@@ -1,5 +1,5 @@
-import vue from '@vitejs/plugin-vue2'
 import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue2'
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -7,4 +7,4 @@ export default defineConfig({
     server: {
         port: 8080
     }
-})
\ No newline at end of file
+})