diff --git a/frontend/components/RelatedList.vue b/frontend/components/RelatedList.vue
index 4d06140..e1ea2bc 100644
--- a/frontend/components/RelatedList.vue
+++ b/frontend/components/RelatedList.vue
@@ -19,11 +19,11 @@ interface Props {
   config: RelatedListConfig
   parentId: string
   relatedRecords?: any[] // Can be passed in if already fetched
-  baseUrl?: string // Base API URL, defaults to '/api/central'
+  baseUrl?: string // Base API URL, defaults to '/central'
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  baseUrl: '/api/central',
+  baseUrl: '/central',
   relatedRecords: undefined,
 })
 
@@ -32,7 +32,7 @@ const emit = defineEmits<{
   'create': [objectApiName: string, parentId: string]
 }>()
 
-const { $api } = useNuxtApp() as unknown as { $api: Function }
+const { api } = useApi()
 const records = ref<any[]>([])
 const loading = ref(false)
 const error = ref<string | null>(null)
@@ -52,7 +52,7 @@ const fetchRelatedRecords = async () => {
   error.value = null
   
   try {
-    const response = await $api(`${props.baseUrl}/${props.config.objectApiName}`, {
+    const response = await api.get(`${props.baseUrl}/${props.config.objectApiName}`, {
       params: {
         parentId: props.parentId,
       },
diff --git a/frontend/components/fields/FieldRenderer.vue b/frontend/components/fields/FieldRenderer.vue
index d10685e..921f85b 100644
--- a/frontend/components/fields/FieldRenderer.vue
+++ b/frontend/components/fields/FieldRenderer.vue
@@ -21,14 +21,14 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  baseUrl: '/api/central',
+  baseUrl: '/central',
 })
 
 const emit = defineEmits<{
   'update:modelValue': [value: any]
 }>()
 
-const { $api } = useNuxtApp() as unknown as { $api: Function }
+const { api } = useApi()
 
 // For relationship fields, store the related record for display
 const relatedRecord = ref<any | null>(null)
@@ -65,7 +65,7 @@ const fetchRelatedRecord = async () => {
   
   loadingRelated.value = true
   try {
-    const record = await $api(`${props.baseUrl}/${relationObject}/${props.modelValue}`)
+    const record = await api.get(`${props.baseUrl}/${relationObject}/${props.modelValue}`)
     relatedRecord.value = record
   } catch (err) {
     console.error('Error fetching related record:', err)
diff --git a/frontend/components/fields/LookupField.vue b/frontend/components/fields/LookupField.vue
index ee164fc..0acb501 100644
--- a/frontend/components/fields/LookupField.vue
+++ b/frontend/components/fields/LookupField.vue
@@ -12,11 +12,11 @@ interface Props {
   field: FieldConfig
   modelValue: string | null // The ID of the selected record
   readonly?: boolean
-  baseUrl?: string // Base API URL, defaults to '/api/central'
+  baseUrl?: string // Base API URL, defaults to '/central'
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  baseUrl: '/api/central',
+  baseUrl: '/central',
   modelValue: null,
 })
 
@@ -24,7 +24,7 @@ const emit = defineEmits<{
   'update:modelValue': [value: string | null]
 }>()
 
-const { $api } = useNuxtApp() as unknown as { $api: Function }
+const { api } = useApi()
 const open = ref(false)
 const searchQuery = ref('')
 const records = ref<any[]>([])
@@ -56,7 +56,7 @@ const filteredRecords = computed(() => {
 const fetchRecords = async () => {
   loading.value = true
   try {
-    const response = await $api(`${props.baseUrl}/${relationObject.value}`)
+    const response = await api.get(`${props.baseUrl}/${relationObject.value}`)
     records.value = response || []
     
     // If we have a modelValue, find the selected record