diff --git a/.adonisjs/server/pages.d.ts b/.adonisjs/server/pages.d.ts
index 9194775..e73e235 100644
--- a/.adonisjs/server/pages.d.ts
+++ b/.adonisjs/server/pages.d.ts
@@ -9,7 +9,6 @@ type ExtractProps<T> = Omit<
 
 declare module '@adonisjs/inertia/types' {
   export interface InertiaPages {
-    'account/signup': ExtractProps<(typeof import('../../inertia/pages/account/signup.vue'))['default']>
     'auth/login': ExtractProps<(typeof import('../../inertia/pages/auth/login.vue'))['default']>
     'auth/signup': ExtractProps<(typeof import('../../inertia/pages/auth/signup.vue'))['default']>
     'components/create': ExtractProps<(typeof import('../../inertia/pages/components/create.vue'))['default']>
diff --git a/app/validators/user.ts b/app/validators/user.ts
index 7225d2a..e7c28f2 100644
--- a/app/validators/user.ts
+++ b/app/validators/user.ts
@@ -4,7 +4,7 @@ const email = () => vine.string().email().maxLength(254)
 const password = () => vine.string().minLength(8).maxLength(32)
 
 export const signupValidator = vine.create({
-  fullName: vine.string().nullable(),
+  name: vine.string().nullable(),
   email: email().unique({ table: 'users', column: 'email' }),
   password: password().confirmed({
     confirmationField: 'passwordConfirmation',
diff --git a/database/schema.ts b/database/schema.ts
index 11a42b3..0961591 100644
--- a/database/schema.ts
+++ b/database/schema.ts
@@ -7,6 +7,134 @@
 import { BaseModel, column } from '@adonisjs/lucid/orm'
 import { DateTime } from 'luxon'
 
+export class AccessListSchema extends BaseModel {
+  static $columns = ['createdOn', 'id', 'isDeleted', 'meta', 'modifiedOn', 'name', 'ownerUserId', 'passAuth', 'satisfyAny'] as const
+  $columns = AccessListSchema.$columns
+  @column.dateTime()
+  declare createdOn: DateTime
+  @column({ isPrimary: true })
+  declare id: number
+  @column()
+  declare isDeleted: number
+  @column()
+  declare meta: any
+  @column.dateTime()
+  declare modifiedOn: DateTime
+  @column()
+  declare name: string
+  @column()
+  declare ownerUserId: number
+  @column()
+  declare passAuth: number
+  @column()
+  declare satisfyAny: number
+}
+
+export class AccessListAuthSchema extends BaseModel {
+  static $columns = ['accessListId', 'createdOn', 'id', 'meta', 'modifiedOn', 'password', 'username'] as const
+  $columns = AccessListAuthSchema.$columns
+  @column()
+  declare accessListId: number
+  @column.dateTime()
+  declare createdOn: DateTime
+  @column({ isPrimary: true })
+  declare id: number
+  @column()
+  declare meta: any
+  @column.dateTime()
+  declare modifiedOn: DateTime
+  @column({ serializeAs: null })
+  declare password: string
+  @column()
+  declare username: string
+}
+
+export class AccessListClientSchema extends BaseModel {
+  static $columns = ['accessListId', 'address', 'createdOn', 'directive', 'id', 'meta', 'modifiedOn'] as const
+  $columns = AccessListClientSchema.$columns
+  @column()
+  declare accessListId: number
+  @column()
+  declare address: string
+  @column.dateTime()
+  declare createdOn: DateTime
+  @column()
+  declare directive: string
+  @column({ isPrimary: true })
+  declare id: number
+  @column()
+  declare meta: any
+  @column.dateTime()
+  declare modifiedOn: DateTime
+}
+
+export class AuditLogSchema extends BaseModel {
+  static $columns = ['action', 'createdOn', 'id', 'meta', 'modifiedOn', 'objectId', 'objectType', 'userId'] as const
+  $columns = AuditLogSchema.$columns
+  @column()
+  declare action: string
+  @column.dateTime()
+  declare createdOn: DateTime
+  @column({ isPrimary: true })
+  declare id: number
+  @column()
+  declare meta: any
+  @column.dateTime()
+  declare modifiedOn: DateTime
+  @column()
+  declare objectId: number
+  @column()
+  declare objectType: string
+  @column()
+  declare userId: number
+}
+
+export class AuthSchema extends BaseModel {
+  static $columns = ['createdOn', 'id', 'isDeleted', 'meta', 'modifiedOn', 'secret', 'type', 'userId'] as const
+  $columns = AuthSchema.$columns
+  @column.dateTime()
+  declare createdOn: DateTime
+  @column({ isPrimary: true })
+  declare id: number
+  @column()
+  declare isDeleted: number
+  @column()
+  declare meta: any
+  @column.dateTime()
+  declare modifiedOn: DateTime
+  @column()
+  declare secret: string
+  @column()
+  declare type: string
+  @column()
+  declare userId: number
+}
+
+export class CertificateSchema extends BaseModel {
+  static $columns = ['createdOn', 'domainNames', 'expiresOn', 'id', 'isDeleted', 'meta', 'modifiedOn', 'niceName', 'ownerUserId', 'provider'] as const
+  $columns = CertificateSchema.$columns
+  @column.dateTime()
+  declare createdOn: DateTime
+  @column()
+  declare domainNames: any
+  @column.dateTime()
+  declare expiresOn: DateTime
+  @column({ isPrimary: true })
+  declare id: number
+  @column()
+  declare isDeleted: number
+  @column()
+  declare meta: any
+  @column.dateTime()
+  declare modifiedOn: DateTime
+  @column()
+  declare niceName: string
+  @column()
+  declare ownerUserId: number
+  @column()
+  declare provider: string
+}
+
 export class ComponentTypeSchema extends BaseModel {
   static $columns = ['id', 'name', 'unique'] as const
   $columns = ComponentTypeSchema.$columns
@@ -92,6 +220,253 @@ export class ComputerSchema extends BaseModel {
   declare userId: number | null
 }
 
+export class DeadHostSchema extends BaseModel {
+  static $columns = ['advancedConfig', 'certificateId', 'createdOn', 'domainNames', 'enabled', 'hstsEnabled', 'hstsSubdomains', 'http2Support', 'id', 'isDeleted', 'meta', 'modifiedOn', 'ownerUserId', 'sslForced'] as const
+  $columns = DeadHostSchema.$columns
+  @column()
+  declare advancedConfig: string
+  @column()
+  declare certificateId: number
+  @column.dateTime()
+  declare createdOn: DateTime
+  @column()
+  declare domainNames: any
+  @column()
+  declare enabled: number
+  @column()
+  declare hstsEnabled: number
+  @column()
+  declare hstsSubdomains: number
+  @column()
+  declare http2Support: number
+  @column({ isPrimary: true })
+  declare id: number
+  @column()
+  declare isDeleted: number
+  @column()
+  declare meta: any
+  @column.dateTime()
+  declare modifiedOn: DateTime
+  @column()
+  declare ownerUserId: number
+  @column()
+  declare sslForced: number
+}
+
+export class MigrationSchema extends BaseModel {
+  static $columns = ['batch', 'id', 'migrationTime', 'name'] as const
+  $columns = MigrationSchema.$columns
+  @column()
+  declare batch: number | null
+  @column({ isPrimary: true })
+  declare id: number
+  @column.dateTime()
+  declare migrationTime: DateTime | null
+  @column()
+  declare name: string | null
+}
+
+export class MigrationsLockSchema extends BaseModel {
+  static $columns = ['index', 'isLocked'] as const
+  $columns = MigrationsLockSchema.$columns
+  @column({ isPrimary: true })
+  declare index: number
+  @column()
+  declare isLocked: number | null
+}
+
+export class ProxyHostSchema extends BaseModel {
+  static $columns = ['accessListId', 'advancedConfig', 'allowWebsocketUpgrade', 'blockExploits', 'cachingEnabled', 'certificateId', 'createdOn', 'domainNames', 'enabled', 'forwardHost', 'forwardPort', 'forwardScheme', 'hstsEnabled', 'hstsSubdomains', 'http2Support', 'id', 'isDeleted', 'locations', 'meta', 'modifiedOn', 'ownerUserId', 'sslForced', 'trustForwardedProto'] as const
+  $columns = ProxyHostSchema.$columns
+  @column()
+  declare accessListId: number
+  @column()
+  declare advancedConfig: string
+  @column()
+  declare allowWebsocketUpgrade: number
+  @column()
+  declare blockExploits: number
+  @column()
+  declare cachingEnabled: number
+  @column()
+  declare certificateId: number
+  @column.dateTime()
+  declare createdOn: DateTime
+  @column()
+  declare domainNames: any
+  @column()
+  declare enabled: number
+  @column()
+  declare forwardHost: string
+  @column()
+  declare forwardPort: number
+  @column()
+  declare forwardScheme: string
+  @column()
+  declare hstsEnabled: number
+  @column()
+  declare hstsSubdomains: number
+  @column()
+  declare http2Support: number
+  @column({ isPrimary: true })
+  declare id: number
+  @column()
+  declare isDeleted: number
+  @column()
+  declare locations: any | null
+  @column()
+  declare meta: any
+  @column.dateTime()
+  declare modifiedOn: DateTime
+  @column()
+  declare ownerUserId: number
+  @column()
+  declare sslForced: number
+  @column()
+  declare trustForwardedProto: boolean
+}
+
+export class RedirectionHostSchema extends BaseModel {
+  static $columns = ['advancedConfig', 'blockExploits', 'certificateId', 'createdOn', 'domainNames', 'enabled', 'forwardDomainName', 'forwardHttpCode', 'forwardScheme', 'hstsEnabled', 'hstsSubdomains', 'http2Support', 'id', 'isDeleted', 'meta', 'modifiedOn', 'ownerUserId', 'preservePath', 'sslForced'] as const
+  $columns = RedirectionHostSchema.$columns
+  @column()
+  declare advancedConfig: string
+  @column()
+  declare blockExploits: number
+  @column()
+  declare certificateId: number
+  @column.dateTime()
+  declare createdOn: DateTime
+  @column()
+  declare domainNames: any
+  @column()
+  declare enabled: number
+  @column()
+  declare forwardDomainName: string
+  @column()
+  declare forwardHttpCode: number
+  @column()
+  declare forwardScheme: string
+  @column()
+  declare hstsEnabled: number
+  @column()
+  declare hstsSubdomains: number
+  @column()
+  declare http2Support: number
+  @column({ isPrimary: true })
+  declare id: number
+  @column()
+  declare isDeleted: number
+  @column()
+  declare meta: any
+  @column.dateTime()
+  declare modifiedOn: DateTime
+  @column()
+  declare ownerUserId: number
+  @column()
+  declare preservePath: number
+  @column()
+  declare sslForced: number
+}
+
+export class SettingSchema extends BaseModel {
+  static $columns = ['description', 'id', 'meta', 'name', 'value'] as const
+  $columns = SettingSchema.$columns
+  @column()
+  declare description: string
+  @column({ isPrimary: true })
+  declare id: string
+  @column()
+  declare meta: any
+  @column()
+  declare name: string
+  @column()
+  declare value: string
+}
+
+export class StreamSchema extends BaseModel {
+  static $columns = ['certificateId', 'createdOn', 'enabled', 'forwardingHost', 'forwardingPort', 'id', 'incomingPort', 'isDeleted', 'meta', 'modifiedOn', 'ownerUserId', 'tcpForwarding', 'udpForwarding'] as const
+  $columns = StreamSchema.$columns
+  @column()
+  declare certificateId: number
+  @column.dateTime()
+  declare createdOn: DateTime
+  @column()
+  declare enabled: number
+  @column()
+  declare forwardingHost: string
+  @column()
+  declare forwardingPort: number
+  @column({ isPrimary: true })
+  declare id: number
+  @column()
+  declare incomingPort: number
+  @column()
+  declare isDeleted: number
+  @column()
+  declare meta: any
+  @column.dateTime()
+  declare modifiedOn: DateTime
+  @column()
+  declare ownerUserId: number
+  @column()
+  declare tcpForwarding: number
+  @column()
+  declare udpForwarding: number
+}
+
+export class UserSchema extends BaseModel {
+  static $columns = ['avatar', 'createdOn', 'email', 'id', 'isDeleted', 'isDisabled', 'modifiedOn', 'name', 'nickname', 'roles'] as const
+  $columns = UserSchema.$columns
+  @column()
+  declare avatar: string
+  @column.dateTime()
+  declare createdOn: DateTime
+  @column()
+  declare email: string
+  @column({ isPrimary: true })
+  declare id: number
+  @column()
+  declare isDeleted: number
+  @column()
+  declare isDisabled: number
+  @column.dateTime()
+  declare modifiedOn: DateTime
+  @column()
+  declare name: string
+  @column()
+  declare nickname: string
+  @column()
+  declare roles: any
+}
+
+export class UserPermissionSchema extends BaseModel {
+  static $columns = ['accessLists', 'certificates', 'createdOn', 'deadHosts', 'id', 'modifiedOn', 'proxyHosts', 'redirectionHosts', 'streams', 'userId', 'visibility'] as const
+  $columns = UserPermissionSchema.$columns
+  @column()
+  declare accessLists: string
+  @column()
+  declare certificates: string
+  @column.dateTime()
+  declare createdOn: DateTime
+  @column()
+  declare deadHosts: string
+  @column({ isPrimary: true })
+  declare id: number
+  @column.dateTime()
+  declare modifiedOn: DateTime
+  @column()
+  declare proxyHosts: string
+  @column()
+  declare redirectionHosts: string
+  @column()
+  declare streams: string
+  @column()
+  declare userId: number
+  @column()
+  declare visibility: string
+}
+
 export class UserSchema extends BaseModel {
   static $columns = ['createdAt', 'email', 'id', 'name', 'password', 'updatedAt'] as const
   $columns = UserSchema.$columns
diff --git a/database/seeders/component_type_seeder.ts b/database/seeders/component_type_seeder.ts
new file mode 100644
index 0000000..5c16c01
--- /dev/null
+++ b/database/seeders/component_type_seeder.ts
@@ -0,0 +1,57 @@
+import { BaseSeeder } from '@adonisjs/lucid/seeders'
+import ComponentType from '#models/component_type'
+
+export default class extends BaseSeeder {
+  async run() {
+    await ComponentType.createMany([
+      {
+        name: 'Processor',
+        unique: true,
+      },
+      {
+        name: 'Motherboard',
+        unique: true,
+      },
+      {
+        name: 'Graphic Card',
+        unique: true,
+      },
+      {
+        name: 'Memory',
+        unique: true,
+      },
+      {
+        name: 'SSD',
+        unique: true,
+      },
+      {
+        name: 'HDD',
+        unique: true,
+      },
+      {
+        name: 'Cooler',
+        unique: true,
+      },
+      {
+        name: 'Power Supply',
+        unique: true,
+      },
+      {
+        name: 'Case',
+        unique: true,
+      },
+      {
+        name: 'Fan',
+        unique: false,
+      },
+      {
+        name: 'WiFi-Card',
+        unique: true,
+      },
+      {
+        name: 'Other',
+        unique: false,
+      },
+    ])
+  }
+}
diff --git a/database/seeders/computer_state_seeder.ts b/database/seeders/computer_state_seeder.ts
new file mode 100644
index 0000000..da065dc
--- /dev/null
+++ b/database/seeders/computer_state_seeder.ts
@@ -0,0 +1,18 @@
+import { BaseSeeder } from '@adonisjs/lucid/seeders'
+import ComputerState from '#models/computer_state'
+
+export default class extends BaseSeeder {
+  async run() {
+    await ComputerState.createMany([
+      {
+        name: 'ON_GOING',
+      },
+      {
+        name: 'FINISHED',
+      },
+      {
+        name: 'SOLD',
+      },
+    ])
+  }
+}
diff --git a/inertia/css/app.css b/inertia/css/app.css
index 3e3515d..41ca9ca 100644
--- a/inertia/css/app.css
+++ b/inertia/css/app.css
@@ -2,18 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --gray-1: oklch(98.5% 0 0);
-  --gray-2: oklch(97% 0 0);
-  --gray-3: oklch(92.2% 0 0);
-  --gray-4: oklch(87% 0 0);
-  --gray-6: oklch(55.6% 0 0);
-  --gray-7: oklch(43.9% 0 0);
-  --gray-8: oklch(37.1% 0 0);
-  --gray-10: oklch(26.9% 0 0);
-  --gray-12: oklch(14.5% 0 0);
-}
-
 * {
   box-sizing: border-box;
   margin: 0;
@@ -23,218 +11,11 @@
 html,
 body {
   height: 100%;
-  font-family: system-ui, sans-serif;
   -webkit-font-smoothing: antialiased;
-  background: var(--gray-2);
-  color: var(--gray-10);
-  font-size: 16px;
-  line-height: 1.5;
 }
 
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-[x-cloak] {
-  display: none;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  color: var(--gray-12);
-}
-
-/* Header */
-header {
-  max-width: 1440px;
-  margin: auto;
-  padding: 0 30px;
-}
-header > div {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 64px;
-}
-header nav {
-  display: flex;
-  align-items: center;
-  gap: 26px;
-}
-header nav a {
-  font-weight: 500;
-  color: var(--gray-8);
-}
-header nav a:hover,
-header nav a.current {
-  color: var(--gray-12);
-}
-
-/* Main */
-main {
-  max-width: 1440px;
-  margin: 0 30px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  min-height: calc(100vh - 65px);
-  background: #fff;
-  border: 1px solid var(--gray-3);
-}
-
-.hero {
-  padding: 100px 50px;
-  max-width: 880px;
-}
-.hero h1 {
-  margin-bottom: 15px;
-  font-size: 52px;
-  font-weight: 600;
-  letter-spacing: -1px;
-  line-height: 1.05;
-}
-.hero p {
-  font-size: 22px;
-  color: var(--gray-7);
-}
-.hero .button {
-  margin-top: 30px;
+.material-symbols-outlined {
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
   display: inline-block;
-  padding: 10px 16px;
-}
-
-.cards {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  padding: 0 50px;
-  border-top: 1px solid var(--gray-3);
-}
-.cards a {
-  padding: 30px 40px;
-  border-right: 1px solid var(--gray-3);
-}
-.cards a:first-child {
-  border-left: 1px solid var(--gray-3);
-}
-.cards a:hover {
-  background: var(--gray-1);
-}
-.cards h3 {
-  margin-bottom: 10px;
-  font-size: 20px;
-  font-weight: 600;
-  letter-spacing: -0.4px;
-}
-.cards p {
-  color: var(--gray-6);
-}
-
-/* Form */
-.form-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  max-width: 400px;
-  margin: auto;
-}
-.form-container h1 {
-  font-size: 32px;
-  letter-spacing: -0.5px;
-  margin-bottom: 5px;
-}
-.form-container p {
-  font-size: 18px;
-  margin-bottom: 48px;
-  color: var(--gray-6);
-}
-form {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-}
-label {
-  margin-bottom: 4px;
-  display: block;
-  font-size: 14px;
-  font-weight: 500;
-}
-input,
-textarea,
-button {
-  width: 100%;
-  border-radius: 4px;
-  font: inherit;
-}
-input {
-  height: 40px;
-  border: 1px solid var(--gray-4);
-  padding: 0 16px;
-}
-input[data-invalid='true'],
-textarea[data-invalid='true'] {
-  border-color: #fb2c36;
-}
-input[data-invalid='true'] + div,
-textarea[data-invalid='true'] + div {
-  color: #fb2c36;
-  font-size: 14px;
-  font-weight: 500;
-  margin-top: 2px;
-}
-
-button {
-  background: var(--gray-12);
-  color: #fff;
-  border: none;
-  padding: 10px;
-  font-weight: 500;
-}
-button:hover {
-  background: var(--gray-10);
-}
-
-/* Alerts */
-.alert {
-  background: #fff;
-  position: relative;
-  padding: 12px 16px;
-  font-size: 14px;
-  min-width: 380px;
-  font-weight: 500;
-  border: 1px solid var(--gray-3);
-  border-radius: 10px;
-  animation: scale-up 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
-}
-.alert-destructive {
-  color: #fb2c36;
-  background: #fb2c361a;
-  border-color: #fb2c36;
-}
-.alert-success {
-  color: #00a63e;
-  background: #00a63e1a;
-  border-color: #00a63e;
-}
-.flash-container {
-  position: fixed;
-  top: 80px;
-  left: 0;
-  right: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-@keyframes scale-up {
-  from {
-    transform: scale(0.7);
-  }
-  to {
-    transform: scale(1);
-  }
+  vertical-align: middle;
 }
diff --git a/inertia/pages/account/signup.vue b/inertia/pages/account/signup.vue
deleted file mode 100644
index a9cba73..0000000
--- a/inertia/pages/account/signup.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<script setup lang="ts">
-import { Form, Link } from '@adonisjs/inertia/vue'
-import { useForm } from '@inertiajs/vue3'
-import EmptyLayout from '~/pages/layout/emptyLayout.vue'
-
-defineOptions({ layout: EmptyLayout })
-
-const form = useForm({
-  fullName: '',
-  email: '',
-  password: '',
-  passwordConfirmation: '',
-})
-</script>
-
-<template>
-  <div class="flex items-center justify-center min-h-screen px-4 py-8 bg-gradient-to-br from-gray-100 to-gray-200">
-    <div class="w-full max-w-md p-6 sm:p-8 bg-white rounded-lg shadow-lg">
-      <div class="flex flex-col items-center justify-center mb-8">
-        <h1 class="text-2xl sm:text-3xl font-bold text-gray-800">Create Account</h1>
-        <p class="text-sm text-gray-600 mt-2">Join PC Creator today</p>
-      </div>
-
-      <Form route="account.signup" #default="{ processing, errors }">
-        <div class="space-y-4 sm:space-y-6">
-          <div>
-            <label class="block">
-              <span class="text-sm font-medium text-gray-700 mb-2 block">Full Name</span>
-              <input
-                v-model="form.fullName"
-                class="w-full px-3 sm:px-4 py-2 sm:py-3 border-2 border-gray-300 rounded-lg focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500/40 transition text-base"
-                name="fullName"
-                type="text"
-                placeholder="Enter your full name"
-              />
-            </label>
-          </div>
-
-          <div>
-            <label class="block">
-              <span class="text-sm font-medium text-gray-700 mb-2 block">Email</span>
-              <input
-                v-model="form.email"
-                class="w-full px-3 sm:px-4 py-2 sm:py-3 border-2 border-gray-300 rounded-lg focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500/40 transition text-base"
-                name="email"
-                type="email"
-                placeholder="Enter your email"
-              />
-            </label>
-          </div>
-
-          <div>
-            <label class="block">
-              <span class="text-sm font-medium text-gray-700 mb-2 block">Password</span>
-              <input
-                v-model="form.password"
-                class="w-full px-3 sm:px-4 py-2 sm:py-3 border-2 border-gray-300 rounded-lg focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500/40 transition text-base"
-                name="password"
-                type="password"
-                placeholder="Enter your password"
-              />
-            </label>
-          </div>
-
-          <div>
-            <label class="block">
-              <span class="text-sm font-medium text-gray-700 mb-2 block">Confirm Password</span>
-              <input
-                v-model="form.passwordConfirmation"
-                class="w-full px-3 sm:px-4 py-2 sm:py-3 border-2 border-gray-300 rounded-lg focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500/40 transition text-base"
-                name="passwordConfirmation"
-                type="password"
-                placeholder="Confirm your password"
-              />
-            </label>
-          </div>
-
-          <button
-            type="submit"
-            :disabled="processing"
-            class="w-full px-3 sm:px-4 py-2 sm:py-3 mt-6 sm:mt-8 text-base font-semibold text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500/40 transition disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            {{ processing ? 'Creating account...' : 'Sign Up' }}
-          </button>
-
-          <div class="text-center mt-4">
-            <p class="text-sm text-gray-600">
-              Already have an account?
-              <Link route="auth.show_login" class="text-indigo-600 hover:text-indigo-700 font-semibold">
-                Login
-              </Link>
-            </p>
-          </div>
-        </div>
-      </Form>
-    </div>
-  </div>
-</template>
diff --git a/inertia/pages/auth/login.vue b/inertia/pages/auth/login.vue
index e544cf5..a1792fc 100644
--- a/inertia/pages/auth/login.vue
+++ b/inertia/pages/auth/login.vue
@@ -5,18 +5,18 @@ import EmptyLayout from '~/pages/layout/emptyLayout.vue'
 
 defineOptions({ layout: EmptyLayout })
 
-const props = defineProps<{ errors?: any[] | any }>()
+const props = defineProps<{ errors?: Record<string, string> }>()
 
 const vineErrors = computed(() => {
-  if (Array.isArray(props.errors)) {
-    return props.errors as any[]
+  if (props.errors && !Array.isArray(props.errors)) {
+    return props.errors
   }
-  return []
+  return {}
 })
 
 const authError = computed(() => {
-  if (!Array.isArray(props.errors) && props.errors) {
-    return props.errors as any
+  if (props.errors && !Array.isArray(props.errors)) {
+    return props.errors
   }
   return null
 })
@@ -27,13 +27,8 @@ const form = useForm({
 })
 
 function getErrorMessage(field: string): string | null {
-  const error = vineErrors.value.find((error) => error.field === field)
-  return error ? error.message : null
+  return vineErrors.value[field] || null
 }
-
-console.log(authError)
-console.log(vineErrors)
-console.log(props)
 </script>
 
 <template>
@@ -109,7 +104,7 @@ console.log(props)
         <Link
           as="button"
           class="w-full px-3 sm:px-4 py-2 sm:py-3 mt-3 sm:mt-4 text-base font-semibold text-indigo-600 bg-gray-100 rounded-lg hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500/40 transition"
-          href="/account/signup"
+          href="/auth/signup"
           type="button"
         >
           Create an account
diff --git a/inertia/pages/auth/signup.vue b/inertia/pages/auth/signup.vue
index a9cba73..27467f2 100644
--- a/inertia/pages/auth/signup.vue
+++ b/inertia/pages/auth/signup.vue
@@ -6,7 +6,7 @@ import EmptyLayout from '~/pages/layout/emptyLayout.vue'
 defineOptions({ layout: EmptyLayout })
 
 const form = useForm({
-  fullName: '',
+  name: '',
   email: '',
   password: '',
   passwordConfirmation: '',
@@ -21,15 +21,15 @@ const form = useForm({
         <p class="text-sm text-gray-600 mt-2">Join PC Creator today</p>
       </div>
 
-      <Form route="account.signup" #default="{ processing, errors }">
+      <Form route="new_account.store" #default="{ processing, errors }">
         <div class="space-y-4 sm:space-y-6">
           <div>
             <label class="block">
               <span class="text-sm font-medium text-gray-700 mb-2 block">Full Name</span>
               <input
-                v-model="form.fullName"
+                v-model="form.name"
                 class="w-full px-3 sm:px-4 py-2 sm:py-3 border-2 border-gray-300 rounded-lg focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500/40 transition text-base"
-                name="fullName"
+                name="name"
                 type="text"
                 placeholder="Enter your full name"
               />
@@ -86,7 +86,7 @@ const form = useForm({
           <div class="text-center mt-4">
             <p class="text-sm text-gray-600">
               Already have an account?
-              <Link route="auth.show_login" class="text-indigo-600 hover:text-indigo-700 font-semibold">
+              <Link route="session.create" class="text-indigo-600 hover:text-indigo-700 font-semibold">
                 Login
               </Link>
             </p>
diff --git a/inertia/pages/components/create.vue b/inertia/pages/components/create.vue
index 44b6e0f..d9faa7e 100644
--- a/inertia/pages/components/create.vue
+++ b/inertia/pages/components/create.vue
@@ -2,19 +2,18 @@
 import { computed, reactive } from 'vue'
 import { Link, useForm } from '@inertiajs/vue3'
 
-const props = defineProps<{ types: any[]; errors?: any[] }>()
-const errors = computed(() => props.errors || [])
+const props = defineProps<{ types: any[]; errors?: Record<string, string> }>()
+const errors = computed(() => props.errors || {})
 const form = reactive({
   name: '',
   price: 0,
-  type_id: null,
-  purchase_date: new Date().toISOString().split('T')[0],
+  typeId: null,
+  purchaseDate: new Date().toISOString().split('T')[0],
   quantity: 1,
 })
 
 function getErrorMessage(field: string): string | null {
-  const error = errors.value.find((error) => error.field === field)
-  return error ? error.message : null
+  return errors.value[field] || null
 }
 
 function formatDateForMySQL(date: string) {
@@ -60,8 +59,8 @@ function submitForm() {
       <div>
         <label class="block text-gray-700 text-sm font-bold mb-2" for="type">Type</label>
         <select
-          name="type_id"
-          v-model.number="form.type_id"
+          name="typeId"
+          v-model.number="form.typeId"
           id="type"
           class="w-full mt-2 border-gray-200 focus:border-indigo-600 focus:ring-indigo-500 px-3 py-2 focus:ring-1 border rounded text-gray-700 bg-white"
         >
@@ -77,8 +76,8 @@ function submitForm() {
           >Purchase Date</label
         >
         <input
-          name="purchase_date"
-          v-model="form.purchase_date"
+          name="purchaseDate"
+          v-model="form.purchaseDate"
           class="w-full mt-2 border-gray-200 focus:border-indigo-600 focus:ring focus:ring-indigo-500/40 border rounded text-gray-700 px-3 py-2"
           type="date"
         />
diff --git a/inertia/pages/components/edit.vue b/inertia/pages/components/edit.vue
index 2971023..13ef45a 100644
--- a/inertia/pages/components/edit.vue
+++ b/inertia/pages/components/edit.vue
@@ -6,23 +6,22 @@ const { props } = usePage<{
   component: any
   types: any[]
   origin: string
-  errors?: any[]
+  errors?: Record<string, string>
 }>()
 const { component, types, origin } = props
-const errors = computed(() => props.errors || [])
+const errors = computed(() => props.errors || {})
 
 const form = reactive({
   id: component.id,
   name: component.name,
   price: component.price,
-  type_id: component.type.id,
-  purchase_date: component.purchaseDate,
+  typeId: component.type.id,
+  purchaseDate: component.purchaseDate,
   origin: origin,
 })
 
 function getErrorMessage(field: string): string | null {
-  const error = errors.value.find((error) => error.field === field)
-  return error ? error.message : null
+  return errors.value[field] || null
 }
 
 function formatDateForMySQL(date: string) {
@@ -62,7 +61,7 @@ function formatDateForMySQL(date: string) {
       <div>
         <label class="block text-gray-700 text-sm font-bold mb-2" for="type">Type</label>
         <select
-          v-model="form.type_id"
+          v-model="form.typeId"
           id="type"
           class="w-full mt-2 border-gray-200 focus:border-indigo-600 focus:ring-indigo-500 px-3 py-2 focus:ring-1 border rounded text-gray-700 bg-white"
         >
@@ -78,8 +77,8 @@ function formatDateForMySQL(date: string) {
           >Purchase Date</label
         >
         <input
-          name="purchase_date"
-          v-model="form.purchase_date"
+          name="purchaseDate"
+          v-model="form.purchaseDate"
           class="w-full mt-2 border-gray-200 focus:border-indigo-600 focus:ring focus:ring-indigo-500/40 border rounded text-gray-700 px-3 py-2"
           type="date"
         />
diff --git a/inertia/pages/components/show.vue b/inertia/pages/components/show.vue
index af3ab7f..93e66fe 100644
--- a/inertia/pages/components/show.vue
+++ b/inertia/pages/components/show.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import { Link, usePage } from '@inertiajs/vue3'
+import { Link } from '@inertiajs/vue3'
 
-const { props } = usePage<{ component: any }>()
-const { component } = props
-const originHeader = { 'X-Inertia-Origin': 'components' }
+defineProps<{ component: any }>()
 </script>
 
 <template>
@@ -11,29 +9,27 @@ const originHeader = { 'X-Inertia-Origin': 'components' }
     <h1 class="text-2xl font-semibold mb-8 text-gray-800">Component Details</h1>
 
     <div class="mb-6">
-      <label class="block text-gray-700 text-sm font-bold mb-2" for="name">Name</label>
-      <div class="px-3 py-2 border rounded text-gray-700" id="name">
+      <label class="block text-gray-700 text-sm font-bold mb-2">Name</label>
+      <div class="px-3 py-2 border rounded text-gray-700">
         {{ component.name }}
       </div>
     </div>
 
     <div class="mb-6">
-      <label class="block text-gray-700 text-sm font-bold mb-2" for="price">Price</label>
-      <div class="px-3 py-2 border rounded text-gray-700" id="price">${{ component.price }}</div>
+      <label class="block text-gray-700 text-sm font-bold mb-2">Price</label>
+      <div class="px-3 py-2 border rounded text-gray-700">${{ component.price }}</div>
     </div>
 
     <div class="mb-6">
-      <label class="block text-gray-700 text-sm font-bold mb-2" for="type">Type</label>
-      <div class="px-3 py-2 border rounded text-gray-700" id="type">
-        {{ component.type.name }}
+      <label class="block text-gray-700 text-sm font-bold mb-2">Type</label>
+      <div class="px-3 py-2 border rounded text-gray-700">
+        {{ component.type?.name ?? 'N/A' }}
       </div>
     </div>
 
     <div class="mb-6">
-      <label class="block text-gray-700 text-sm font-bold mb-2" for="purchaseDate"
-        >Purchase Date</label
-      >
-      <div class="px-3 py-2 border rounded text-gray-700" id="purchaseDate">
+      <label class="block text-gray-700 text-sm font-bold mb-2">Purchase Date</label>
+      <div class="px-3 py-2 border rounded text-gray-700">
         {{ component.purchaseDate }}
       </div>
     </div>
@@ -43,11 +39,8 @@ const originHeader = { 'X-Inertia-Origin': 'components' }
       type="button"
       as="button"
       class="w-full md:w-auto px-4 py-2 bg-indigo-600 text-white rounded hover:bg-blue-700 transition text-center"
-      :headers="originHeader"
     >
       Edit
     </Link>
   </div>
 </template>
-
-<style scoped></style>
diff --git a/inertia/pages/computers/create.vue b/inertia/pages/computers/create.vue
index 566d5b4..f17ee07 100644
--- a/inertia/pages/computers/create.vue
+++ b/inertia/pages/computers/create.vue
@@ -5,10 +5,10 @@ import { Link, usePage } from '@inertiajs/vue3'
 const { props } = usePage<{
   components: any[]
   states: any[]
-  errors: any[]
+  errors: Record<string, string>
 }>()
 const { components, states } = props
-const errors = computed(() => props.errors || [])
+const errors = computed(() => props.errors || {})
 
 const componentTypeOrder = [
   'Processor',
@@ -49,8 +49,7 @@ const form = reactive({
 })
 
 function getErrorMessage(field: string): string | null {
-  const error = errors.value.find((error) => error.field === field)
-  return error ? error.message : null
+  return errors.value[field] || null
 }
 </script>
 
diff --git a/inertia/pages/computers/edit.vue b/inertia/pages/computers/edit.vue
index ed8ba51..36f7685 100644
--- a/inertia/pages/computers/edit.vue
+++ b/inertia/pages/computers/edit.vue
@@ -6,10 +6,10 @@ const { props } = usePage<{
   computer: any
   availableComponents: any[]
   states: any[]
-  errors?: any[]
+  errors?: Record<string, string>
 }>()
 const { computer, availableComponents, states } = props
-const errors = computed(() => props.errors || [])
+const errors = computed(() => props.errors || {})
 
 const form = reactive({
   id: computer.id,
@@ -31,8 +31,7 @@ function deleteComputer(id: number) {
 }
 
 function getErrorMessage(field: string): string | null {
-  const error = errors.value.find((error) => error.field === field)
-  return error ? error.message : null
+  return errors.value[field] || null
 }
 </script>
 
diff --git a/inertia/pages/computers/index.vue b/inertia/pages/computers/index.vue
index 95c899c..09270ef 100644
--- a/inertia/pages/computers/index.vue
+++ b/inertia/pages/computers/index.vue
@@ -13,7 +13,7 @@ defineProps<{ computers: any[] }>()
         href="/computers/create"
         type="button"
         as="button"
-        class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-blue-700 transition"
+        class="inline-flex shrink-0 px-4 py-2 bg-indigo-600 text-white rounded hover:bg-blue-700 transition"
       >
         Add
       </Link>
diff --git a/inertia/pages/layout/defaultLayout.vue b/inertia/pages/layout/defaultLayout.vue
index 564c657..f772d07 100644
--- a/inertia/pages/layout/defaultLayout.vue
+++ b/inertia/pages/layout/defaultLayout.vue
@@ -4,14 +4,16 @@ import Header from './header.vue'
 </script>
 
 <template>
-  <div class="flex h-screen bg-gray-200 font-roboto">
-    <Sidebar />
+  <div class="flex h-screen bg-background font-body-md text-on-background overflow-hidden">
+    <aside class="w-64 shrink-0">
+      <Sidebar />
+    </aside>
 
-    <div class="flex-1 flex flex-col overflow-hidden">
+    <div class="flex-1 flex flex-col min-w-0">
       <Header />
 
-      <main class="flex-1 overflow-x-hidden overflow-y-auto bg-gray-200">
-        <div class="container mx-auto px-6 py-8">
+      <main class="flex-1 pt-16 min-h-screen border-0 overflow-auto">
+        <div class="p-10 max-w-[1400px] mx-auto">
           <slot />
         </div>
       </main>
diff --git a/inertia/pages/layout/header.vue b/inertia/pages/layout/header.vue
index 0c06daa..95f6f5b 100644
--- a/inertia/pages/layout/header.vue
+++ b/inertia/pages/layout/header.vue
@@ -3,15 +3,9 @@ import { computed, ref } from 'vue'
 import { useSidebar } from '~/composables/useSidebar'
 import { Link, usePage } from '@inertiajs/vue3'
 import { userProfileIcon } from '~/assets/icons'
-import { useAdminMode } from '~/composables/isAdminMode'
 
 const dropdownOpen = ref(false)
 const { isOpen } = useSidebar()
-const { isAdminActive } = useAdminMode()
-
-function toggleActive() {
-  isAdminActive.value = !isAdminActive.value
-}
 
 const page = usePage()
 
@@ -22,78 +16,73 @@ const user = computed(() => {
 </script>
 
 <template>
-  <header class="flex items-center justify-between px-6 py-4 bg-white border-b-4 border-indigo-600">
-    <div class="flex items-center">
-      <button class="text-gray-500 focus:outline-none lg:hidden" @click="isOpen = true">
-        <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path
-            d="M4 6H20M4 12H20M4 18H11"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-        </svg>
-      </button>
+  <header
+    class="flex justify-between items-center px-10 h-16 bg-white ml-64 w-[calc(100%-16rem)] fixed top-0 right-0 z-40 border-b border-outline-variant shadow-sm"
+  >
+    <div
+      class="flex items-center gap-4 bg-surface-container-low px-4 py-2 rounded-lg border border-outline-variant w-96 focus-within:ring-2 focus-within:ring-primary transition-all"
+    >
+      <span class="material-symbols-outlined text-on-surface-variant">search</span>
+      <input
+        class="bg-transparent border-none focus:ring-0 focus:outline-none text-body-sm font-body-sm w-full p-0"
+        placeholder="Search builds..."
+        type="text"
+      />
     </div>
 
-    <div class="flex items-center">
-      <div class="relative">
-        <button
-          class="relative z-10 block w-8 h-8 overflow-hidden rounded-full shadow focus:outline-none"
-          @click="dropdownOpen = !dropdownOpen"
-        >
-          <img class="object-cover w-full h-full" :src="userProfileIcon" alt="Your avatar" />
-        </button>
+    <div class="flex items-center gap-6">
+      <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">
+        <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="text-right hidden sm:block">
+          <p class="font-label-md text-label-md text-on-surface">{{ user.name }}</p>
+        </div>
+        <img
+          class="w-10 h-10 rounded-full border-2 border-primary-container group-hover:border-primary transition-all object-cover"
+          :src="userProfileIcon"
+          alt="Avatar"
+        />
+      </div>
+
+      <transition
+        enter-active-class="transition duration-150 ease-out transform"
+        enter-from-class="scale-95 opacity-0"
+        enter-to-class="scale-100 opacity-100"
+        leave-active-class="transition duration-150 ease-in transform"
+        leave-from-class="scale-100 opacity-100"
+        leave-to-class="scale-95 opacity-0"
+      >
         <div
           v-show="dropdownOpen"
-          class="fixed inset-0 z-10 w-full h-full"
-          @click="dropdownOpen = false"
-        />
-
-        <transition
-          enter-active-class="transition duration-150 ease-out transform"
-          enter-from-class="scale-95 opacity-0"
-          enter-to-class="scale-100 opacity-100"
-          leave-active-class="transition duration-150 ease-in transform"
-          leave-from-class="scale-100 opacity-100"
-          leave-to-class="scale-95 opacity-0"
+          class="absolute top-14 right-0 z-50 min-w-48 max-w-72 bg-white rounded-lg shadow-xl border border-outline-variant overflow-hidden"
         >
-          <div
-            v-show="dropdownOpen"
-            class="absolute right-0 z-20 w-48 py-2 mt-2 bg-white rounded-md shadow-xl"
-          >
-            <div class="flex items-center justify-between px-4 py-2 text-sm text-indigo-600">
-              <strong>{{ user.name }}</strong>
-            </div>
-            <hr />
-
-            <div
-              class="flex items-center justify-between px-4 py-2 text-sm text-gray-700 hover:bg-indigo-600 hover:text-white cursor-pointer"
-              @click="toggleActive"
-            >
-              <span>{{ isAdminActive ? 'Admin' : 'Classic' }}</span>
-              <button
-                :class="{ 'bg-indigo-800': isAdminActive, 'bg-gray-200': !isAdminActive }"
-                class="w-10 h-5 rounded-full focus:outline-none relative"
-              >
-                <span
-                  :class="{ 'translate-x-5': isAdminActive, 'translate-x-0': !isAdminActive }"
-                  class="block w-4 h-4 bg-white rounded-full shadow transform transition duration-300"
-                ></span>
-              </button>
-            </div>
-
-            <Link
-              href="/auth/logout"
-              class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-600 hover:text-white"
-            >
-              Logout
-            </Link>
+          <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>
           </div>
-        </transition>
-      </div>
+
+          <Link
+            href="/auth/logout"
+            class="flex items-center gap-3 px-4 py-2 text-body-sm font-body-sm text-on-surface hover:bg-surface-container-low transition-colors"
+          >
+            <span class="material-symbols-outlined text-[20px]">logout</span>
+            Sign Out
+          </Link>
+        </div>
+      </transition>
     </div>
   </header>
+
+  <div
+    v-show="dropdownOpen"
+    class="fixed inset-0 z-30"
+    @click="dropdownOpen = false"
+  />
 </template>
diff --git a/inertia/pages/layout/sidebar.vue b/inertia/pages/layout/sidebar.vue
index 0730e44..1ea38f3 100644
--- a/inertia/pages/layout/sidebar.vue
+++ b/inertia/pages/layout/sidebar.vue
@@ -14,7 +14,7 @@ console.log(route)
 </script>
 
 <template>
-  <div class="flex">
+  <div class="flex h-full">
     <!-- Backdrop -->
     <div
       :class="isOpen ? 'block' : 'hidden'"
@@ -25,7 +25,7 @@ console.log(route)
 
     <div
       :class="isOpen ? 'translate-x-0 ease-out' : '-translate-x-full ease-in'"
-      class="fixed inset-y-0 left-0 z-30 w-64 overflow-y-auto transition duration-300 transform bg-gray-900 lg:translate-x-0 lg:static lg:inset-0"
+      class="fixed inset-y-0 left-0 z-30 w-64 overflow-y-auto transition duration-300 transform bg-gray-900 lg:h-full lg:translate-x-0 lg:static lg:inset-0"
     >
       <div class="flex items-center justify-center mt-8">
         <div class="flex items-center">
diff --git a/inertia/pages/widgets/ComponentEditor.vue b/inertia/pages/widgets/ComponentEditor.vue
index d2bb8fc..378d5fd 100644
--- a/inertia/pages/widgets/ComponentEditor.vue
+++ b/inertia/pages/widgets/ComponentEditor.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, defineEmits, defineProps, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { Component } from '~/pages/types/UITypes'
 
 interface ComponentsByType {
diff --git a/inertia/pages/widgets/DeleteConfirmationModal.vue b/inertia/pages/widgets/DeleteConfirmationModal.vue
index 6008052..bf34012 100644
--- a/inertia/pages/widgets/DeleteConfirmationModal.vue
+++ b/inertia/pages/widgets/DeleteConfirmationModal.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { defineEmits, defineProps } from 'vue'
-
 defineProps<{ show: boolean }>()
 const emit = defineEmits(['confirm', 'cancel'])
 
diff --git a/package-lock.json b/package-lock.json
index 0fad267..5060505 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,11 @@
 {
-  "name": "pc-builderV2",
+  "name": "pc-builder",
   "version": "0.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "pc-builderV2",
+      "name": "pc-builder",
       "version": "0.0.0",
       "license": "UNLICENSED",
       "dependencies": {
diff --git a/package.json b/package.json
index e5bc6db..aabf556 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "pc-builderV2",
+  "name": "pc-builder",
   "version": "0.0.0",
   "private": true,
   "type": "module",
diff --git a/resources/views/inertia_layout.edge b/resources/views/inertia_layout.edge
index d13fc9a..88727c7 100644
--- a/resources/views/inertia_layout.edge
+++ b/resources/views/inertia_layout.edge
@@ -6,6 +6,17 @@
     <title inertia>
       AdonisJS
     </title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet" />
+    <style>
+      .material-symbols-outlined {
+        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+        display: inline-block;
+        vertical-align: middle;
+      }
+    </style>
 
     @vite(['inertia/app.ts'])
     @inertiaHead()
diff --git a/tailwind.config.ts b/tailwind.config.ts
index b551c1e..b4b2699 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -6,7 +6,66 @@ export default {
     './inertia/**/*.vue',
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        'primary': '#3525cd',
+        'on-primary': '#ffffff',
+        'primary-container': '#4f46e5',
+        'on-primary-container': '#dad7ff',
+        'secondary': '#565e74',
+        'on-secondary': '#ffffff',
+        'secondary-container': '#dae2fd',
+        'on-secondary-container': '#5c647a',
+        'tertiary': '#46494b',
+        'on-tertiary': '#ffffff',
+        'error': '#ba1a1a',
+        'on-error': '#ffffff',
+        'error-container': '#ffdad6',
+        'on-error-container': '#93000a',
+        'background': '#f8f9ff',
+        'on-background': '#0b1c30',
+        'surface': '#f8f9ff',
+        'on-surface': '#0b1c30',
+        'surface-variant': '#d3e4fe',
+        'on-surface-variant': '#464555',
+        'surface-dim': '#cbdbf5',
+        'surface-bright': '#f8f9ff',
+        'surface-container-lowest': '#ffffff',
+        'surface-container-low': '#eff4ff',
+        'surface-container': '#e5eeff',
+        'surface-container-high': '#dce9ff',
+        'surface-container-highest': '#d3e4fe',
+        'inverse-surface': '#213145',
+        'inverse-on-surface': '#eaf1ff',
+        'inverse-primary': '#c3c0ff',
+        'outline': '#777587',
+        'outline-variant': '#c7c4d8',
+        'surface-tint': '#4d44e3',
+      },
+      fontFamily: {
+        'headline-lg': ['Hanken Grotesk'],
+        'headline-md': ['Hanken Grotesk'],
+        'headline-xl': ['Hanken Grotesk'],
+        'body-lg': ['Inter'],
+        'body-md': ['Inter'],
+        'body-sm': ['Inter'],
+        'label-md': ['JetBrains Mono'],
+        'label-sm': ['JetBrains Mono'],
+      },
+      fontSize: {
+        'headline-lg': ['28px', { lineHeight: '36px', letterSpacing: '-0.01em', fontWeight: '600' }],
+        'headline-md': ['20px', { lineHeight: '28px', fontWeight: '600' }],
+        'headline-xl': ['36px', { lineHeight: '44px', letterSpacing: '-0.02em', fontWeight: '700' }],
+        'body-lg': ['18px', { lineHeight: '28px', fontWeight: '400' }],
+        'body-md': ['16px', { lineHeight: '24px', fontWeight: '400' }],
+        'body-sm': ['14px', { lineHeight: '20px', fontWeight: '400' }],
+        'label-md': ['14px', { lineHeight: '20px', letterSpacing: '0.02em', fontWeight: '500' }],
+        'label-sm': ['12px', { lineHeight: '16px', letterSpacing: '0.05em', fontWeight: '500' }],
+      },
+      spacing: {
+        'sidebar-width': '280px',
+      },
+    },
   },
   plugins: [],
 } satisfies Config
diff --git a/tmp/.gitkeep b/tmp/.gitkeep
deleted file mode 100644
index e69de29..0000000