diff --git a/app/controllers/components_controller.ts b/app/controllers/components_controller.ts
index a240ec2..dfef7cb 100644
--- a/app/controllers/components_controller.ts
+++ b/app/controllers/components_controller.ts
@@ -9,7 +9,7 @@ export default class ComponentsController {
   async index({ inertia, auth }: HttpContext) {
     const user = await auth.authenticate()
     const components = await Component.query().preload('type').where('userId', user.id)
-    return inertia.render('components/index', { components: components.map((c) => c.serialize()) })
+    return inertia.render('components/index', { components: components.map((c) => c.serialize({ relations: true })) })
   }
 
   async create({ inertia }: HttpContext) {
@@ -40,7 +40,7 @@ export default class ComponentsController {
       .where('userId', user.id)
       .andWhere('id', componentId)
       .firstOrFail()
-    return inertia.render('components/show', { component: component.serialize() })
+    return inertia.render('components/show', { component: component.serialize({ relations: true }) })
   }
 
   async edit({ params, auth, inertia }: HttpContext) {
@@ -53,7 +53,7 @@ export default class ComponentsController {
       .andWhere('id', componentId)
       .firstOrFail()
     return inertia.render('components/edit', {
-      component: component.serialize(),
+      component: component.serialize({ relations: true }),
       types: types.map((t) => t.serialize()),
     })
   }
diff --git a/app/controllers/computers_controller.ts b/app/controllers/computers_controller.ts
index bafc73c..ebf41a0 100644
--- a/app/controllers/computers_controller.ts
+++ b/app/controllers/computers_controller.ts
@@ -19,7 +19,7 @@ export default class ComputersController {
         picturesQuery.where('order', 1)
       })
 
-    return inertia.render('computers/index', { computers: computers.map((c) => c.serialize()) })
+    return inertia.render('computers/index', { computers: computers.map((c) => c.serialize({ relations: true })) })
   }
 
   async create({ auth, inertia }: HttpContext) {
@@ -29,7 +29,7 @@ export default class ComputersController {
       .where('userId', user.id)
       .whereNull('computerId')
       .preload('type')
-    return inertia.render('computers/create', { components: components.map((c) => c.serialize()), states: states.map((s) => s.serialize()) })
+    return inertia.render('computers/create', { components: components.map((c) => c.serialize({ relations: true })), states: states.map((s) => s.serialize()) })
   }
 
   async store({ auth, request, response }: HttpContext) {
@@ -60,7 +60,7 @@ export default class ComputersController {
       .where('user_id', user.id)
       .andWhere('id', computerId)
       .firstOrFail()
-    return inertia.render('computers/show', { computer: computer.serialize() })
+    return inertia.render('computers/show', { computer: computer.serialize({ relations: true }) })
   }
 
   async edit({ params, inertia, auth }: HttpContext) {
@@ -86,7 +86,7 @@ export default class ComputersController {
         'id',
         computer.components.map((c) => c.id)
       )
-    return inertia.render('computers/edit', { computer: computer.serialize(), availableComponents: availableComponents.map((c) => c.serialize()), states: states.map((s) => s.serialize()) })
+    return inertia.render('computers/edit', { computer: computer.serialize({ relations: true }), availableComponents: availableComponents.map((c) => c.serialize({ relations: true })), states: states.map((s) => s.serialize()) })
   }
 
   async update({ params, request, response }: HttpContext) {
diff --git a/inertia/pages/auth/login.vue b/inertia/pages/auth/login.vue
index a1792fc..d43b4ab 100644
--- a/inertia/pages/auth/login.vue
+++ b/inertia/pages/auth/login.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { Link, useForm } from '@inertiajs/vue3'
+import { Link } from '@adonisjs/inertia/vue'
+import { useForm } from '@inertiajs/vue3'
 import { computed } from 'vue'
 import EmptyLayout from '~/pages/layout/emptyLayout.vue'
 
diff --git a/inertia/pages/components/create.vue b/inertia/pages/components/create.vue
index c170f56..ebb495d 100644
--- a/inertia/pages/components/create.vue
+++ b/inertia/pages/components/create.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, reactive } from 'vue'
-import { Link, useForm } from '@inertiajs/vue3'
+import { Link } from '@adonisjs/inertia/vue'
+import { useForm } from '@inertiajs/vue3'
 import CustomSelect from '~/pages/widgets/CustomSelect.vue'
 
 const props = defineProps<{ types: any[]; errors?: Record<string, string> }>()
diff --git a/inertia/pages/components/edit.vue b/inertia/pages/components/edit.vue
index bcaac57..52e6413 100644
--- a/inertia/pages/components/edit.vue
+++ b/inertia/pages/components/edit.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, reactive } from 'vue'
-import { Link, usePage } from '@inertiajs/vue3'
+import { Link } from '@adonisjs/inertia/vue'
+import { usePage } from '@inertiajs/vue3'
 import CustomSelect from '~/pages/widgets/CustomSelect.vue'
 
 const { props } = usePage<{
diff --git a/inertia/pages/components/index.vue b/inertia/pages/components/index.vue
index 38ac59e..8a93d18 100644
--- a/inertia/pages/components/index.vue
+++ b/inertia/pages/components/index.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import { Link } from '@inertiajs/vue3'
-
-defineProps<{ components: any[] }>()
+import { Link } from '@adonisjs/inertia/vue'
+import ComponentsViewer from '~/pages/widgets/ComponentsViewer.vue'
 </script>
 
 <template>
   <div>
-    <div class="flex justify-between items-center">
+    <div class="flex justify-between items-center mb-6">
       <h3 class="text-3xl font-semibold text-gray-700">Components</h3>
       <Link
         href="/components/create"
@@ -17,27 +16,6 @@ defineProps<{ components: any[] }>()
       </Link>
     </div>
 
-    <div class="mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-      <template v-if="components.length > 0">
-        <div
-          v-for="component in components"
-          :key="component.id"
-          class="p-4 border rounded-lg shadow hover:shadow-lg transition"
-        >
-          <h4 class="font-semibold text-lg text-gray-800">{{ component.name }}</h4>
-          <p class="text-gray-600">Type: {{ component.type?.name }}</p>
-          <p class="text-indigo-600 font-semibold">Price: ${{ component.price }}</p>
-          <Link
-            :href="`/components/${component.id}`"
-            class="mt-2 inline-block text-indigo-600 hover:text-indigo-700"
-          >
-            View Details
-          </Link>
-        </div>
-      </template>
-      <template v-else>
-        <p class="text-gray-500">No components yet. Create one to get started!</p>
-      </template>
-    </div>
+    <ComponentsViewer />
   </div>
 </template>
diff --git a/inertia/pages/components/show.vue b/inertia/pages/components/show.vue
index 159d8b7..170cc56 100644
--- a/inertia/pages/components/show.vue
+++ b/inertia/pages/components/show.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Link } from '@inertiajs/vue3'
+import { Link } from '@adonisjs/inertia/vue'
 
 const props = defineProps<{ component: any }>()
 </script>
diff --git a/inertia/pages/computers/create.vue b/inertia/pages/computers/create.vue
index f17ee07..5e17354 100644
--- a/inertia/pages/computers/create.vue
+++ b/inertia/pages/computers/create.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, reactive } from 'vue'
-import { Link, usePage } from '@inertiajs/vue3'
+import { Link } from '@adonisjs/inertia/vue'
+import { usePage } from '@inertiajs/vue3'
 
 const { props } = usePage<{
   components: any[]
diff --git a/inertia/pages/computers/edit.vue b/inertia/pages/computers/edit.vue
index 36f7685..d2fd909 100644
--- a/inertia/pages/computers/edit.vue
+++ b/inertia/pages/computers/edit.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, reactive } from 'vue'
-import { Link, router, usePage } from '@inertiajs/vue3'
+import { Link } from '@adonisjs/inertia/vue'
+import { router, usePage } from '@inertiajs/vue3'
 
 const { props } = usePage<{
   computer: any
diff --git a/inertia/pages/computers/index.vue b/inertia/pages/computers/index.vue
index 09270ef..a0ea7da 100644
--- a/inertia/pages/computers/index.vue
+++ b/inertia/pages/computers/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Link } from '@inertiajs/vue3'
+import { Link } from '@adonisjs/inertia/vue'
 
 defineProps<{ computers: any[] }>()
 </script>
diff --git a/inertia/pages/computers/show.vue b/inertia/pages/computers/show.vue
index 351d97b..043f6e6 100644
--- a/inertia/pages/computers/show.vue
+++ b/inertia/pages/computers/show.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Link } from '@inertiajs/vue3'
+import { Link } from '@adonisjs/inertia/vue'
 
 const { props } = defineProps<{ computer: any }>()
 </script>
diff --git a/inertia/pages/home.vue b/inertia/pages/home.vue
index b352559..899ecfe 100644
--- a/inertia/pages/home.vue
+++ b/inertia/pages/home.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { Link, usePage } from '@inertiajs/vue3'
+import { Link } from '@adonisjs/inertia/vue'
+import { usePage } from '@inertiajs/vue3'
 
 const page = usePage()
 
diff --git a/inertia/pages/layout/header.vue b/inertia/pages/layout/header.vue
index 95f6f5b..d2826ec 100644
--- a/inertia/pages/layout/header.vue
+++ b/inertia/pages/layout/header.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { useSidebar } from '~/composables/useSidebar'
-import { Link, usePage } from '@inertiajs/vue3'
+import { Link } from '@adonisjs/inertia/vue'
+import { usePage } from '@inertiajs/vue3'
 import { userProfileIcon } from '~/assets/icons'
 
 const dropdownOpen = ref(false)
@@ -31,16 +32,23 @@ const user = computed(() => {
     </div>
 
     <div class="flex items-center gap-6">
-      <button class="text-on-surface-variant hover:bg-surface-container-low p-2 rounded-full transition-all">
+      <button
+        class="text-on-surface-variant hover:bg-surface-container-low p-2 rounded-full transition-all"
+      >
         <span class="material-symbols-outlined">notifications</span>
       </button>
-      <button class="text-on-surface-variant hover:bg-surface-container-low p-2 rounded-full transition-all">
+      <button
+        class="text-on-surface-variant hover:bg-surface-container-low p-2 rounded-full transition-all"
+      >
         <span class="material-symbols-outlined">settings</span>
       </button>
 
       <div class="h-8 w-px bg-outline-variant mx-2"></div>
 
-      <div class="relative flex items-center gap-3 cursor-pointer group" @click="dropdownOpen = !dropdownOpen">
+      <div
+        class="relative flex items-center gap-3 cursor-pointer group"
+        @click="dropdownOpen = !dropdownOpen"
+      >
         <div class="text-right hidden sm:block">
           <p class="font-label-md text-label-md text-on-surface">{{ user.name }}</p>
         </div>
@@ -65,7 +73,9 @@ const user = computed(() => {
         >
           <div class="px-4 py-3 border-b border-outline-variant">
             <p class="font-label-md text-label-md text-on-surface truncate">{{ user.name }}</p>
-            <p class="font-label-sm text-label-sm text-on-surface-variant truncate">{{ user.email }}</p>
+            <p class="font-label-sm text-label-sm text-on-surface-variant truncate">
+              {{ user.email }}
+            </p>
           </div>
 
           <Link
diff --git a/inertia/pages/layout/sidebar.vue b/inertia/pages/layout/sidebar.vue
index 1ea38f3..d03feb2 100644
--- a/inertia/pages/layout/sidebar.vue
+++ b/inertia/pages/layout/sidebar.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { ref, useAttrs } from 'vue'
 import { useSidebar } from '~/composables/useSidebar'
-import { Link } from '@inertiajs/vue3'
+import { Link } from '@adonisjs/inertia/vue'
 import { siteIcon } from '~/assets/icons'
 
 const { isOpen } = useSidebar()
diff --git a/inertia/pages/widgets/ComponentEditor.vue b/inertia/pages/widgets/ComponentEditor.vue
index 378d5fd..8f45e5e 100644
--- a/inertia/pages/widgets/ComponentEditor.vue
+++ b/inertia/pages/widgets/ComponentEditor.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue'
-import { Component } from '~/pages/types/UITypes'
+import type { Component } from '~/pages/types/UITypes'
 
 interface ComponentsByType {
   type: string
diff --git a/inertia/pages/widgets/ComponentsViewer.vue b/inertia/pages/widgets/ComponentsViewer.vue
index 1ea73a7..9113335 100644
--- a/inertia/pages/widgets/ComponentsViewer.vue
+++ b/inertia/pages/widgets/ComponentsViewer.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed, reactive, ref } from 'vue'
 import TableComponent from '~/pages/widgets/TableComponent.vue'
-import Component from '#models/component'
-import ComponentType from '#models/component_type'
+import type Component from '#models/component'
+import type ComponentType from '#models/component_type'
 import { usePage } from '@inertiajs/vue3'
 
 const { props } = usePage<{ components: Component[] }>()
diff --git a/inertia/pages/widgets/ComputerComponentsTable.vue b/inertia/pages/widgets/ComputerComponentsTable.vue
index 579ce7d..0ff4895 100644
--- a/inertia/pages/widgets/ComputerComponentsTable.vue
+++ b/inertia/pages/widgets/ComputerComponentsTable.vue
@@ -14,8 +14,8 @@ import {
   ssd,
   wiFiCard,
 } from '~/assets/icons'
-import Component from '#models/component'
-import { Link } from '@inertiajs/vue3'
+import type Component from '#models/component'
+import { Link } from '@adonisjs/inertia/vue'
 
 const props = defineProps<{
   components: Component[]
diff --git a/inertia/pages/widgets/SimpleGallery.vue b/inertia/pages/widgets/SimpleGallery.vue
index 0fa29ee..951caac 100644
--- a/inertia/pages/widgets/SimpleGallery.vue
+++ b/inertia/pages/widgets/SimpleGallery.vue
@@ -84,8 +84,8 @@
 import { computed, ref, watch } from 'vue'
 import { crossIcon } from '~/assets/icons'
 import { Navigation, Pagination } from 'vue3-carousel'
-import { NewImage, ServerImage } from '../../../app/types/UItypes'
-import { Image } from '~/pages/types/UITypes'
+import type { NewImage, ServerImage } from '../../../app/types/UItypes'
+import type { Image } from '~/pages/types/UITypes'
 
 const props = defineProps<{
   galleryId: string
diff --git a/inertia/pages/widgets/TableComponent.vue b/inertia/pages/widgets/TableComponent.vue
index aa04b0b..6c0a9e2 100644
--- a/inertia/pages/widgets/TableComponent.vue
+++ b/inertia/pages/widgets/TableComponent.vue
@@ -16,7 +16,7 @@ import {
 } from '~/assets/icons'
 import { router } from '@inertiajs/vue3'
 import { useAdminMode } from '~/composables/isAdminMode'
-import Component from '#models/component'
+import type Component from '#models/component'
 
 const props = defineProps<{
   components: Component[]