diff --git a/app/Providers/Filament/AdminPanelProvider.php b/app/Providers/Filament/AdminPanelProvider.php
index d5f4275..b394023 100644
--- a/app/Providers/Filament/AdminPanelProvider.php
+++ b/app/Providers/Filament/AdminPanelProvider.php
@@ -20,7 +20,6 @@
 use Illuminate\Session\Middleware\StartSession;
 use Illuminate\View\Middleware\ShareErrorsFromSession;
 use pxlrbt\FilamentEnvironmentIndicator\EnvironmentIndicatorPlugin;
-use Stephenjude\FilamentDebugger\DebuggerPlugin;
 
 class AdminPanelProvider extends PanelProvider
 {
diff --git a/bun.lockb b/bun.lockb
index 0e0644c..a8b8f11 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 8c9d8ab..57a5b23 100644
--- a/package.json
+++ b/package.json
@@ -5,13 +5,14 @@
     "@sentry/vue": "^8.54.0",
     "@tailwindcss/forms": "^0.5.10",
     "@tailwindcss/typography": "^0.5.16",
+    "@tailwindcss/vite": "^4.0.4",
     "@vitejs/plugin-vue": "^5.2.1",
     "autoprefixer": "^10.4.20",
     "laravel-vite-plugin": "^1.2.0",
     "postcss": "^8.5.1",
     "postcss-import": "^16.1.0",
     "postcss-nested": "^7.0.2",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.0",
     "vite": "^6.1.0",
     "vue": "^3.5.13"
   },
diff --git a/resources/css/app.css b/resources/css/app.css
index 147f392..4ff3920 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -1,11 +1,42 @@
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
-
-@import "@css/typography.css";
-@import "@css/forms.css";
-@import "@css/buttons.css";
-@import "@css/content.css";
+@source "../../resources/js/";
+@source "../../resources/views/";
+
+@import "tailwindcss";
+
+@import "./typography.css";
+@import "./forms.css";
+@import "./buttons.css";
+@import "./content.css";
+
+@plugin '@tailwindcss/forms';
+@plugin '@tailwindcss/typography';
+
+@theme {
+    --font-*: initial;
+    --font-text: "Arial", sans-serif;
+    --font-heading: "Arial", sans-serif;
+
+    --breakpoint-xs: 321px;
+    --breakpoint-sm: 451px;
+    --breakpoint-md: 671px;
+    --breakpoint-lg: 769px;
+    --breakpoint-xl: 1025px;
+    --breakpoint-2xl: 1281px;
+    --breakpoint-3xl: 1441px;
+    --breakpoint-4xl: 1901px;
+
+    --color-brand-50: #f3f6fb;
+    --color-brand-100: #e5e9f4;
+    --color-brand-200: #d0d9ed;
+    --color-brand-300: #b0c0e0;
+    --color-brand-400: #8a9fd0;
+    --color-brand-500: #6a7fc1;
+    --color-brand-600: #5b6bb5;
+    --color-brand-700: #505aa5;
+    --color-brand-800: #464c87;
+    --color-brand-900: #3c416c;
+    --color-brand-950: #282a43;
+}
 
 #app {
     @apply h-full;
diff --git a/resources/css/buttons.css b/resources/css/buttons.css
index d089010..6378c3c 100644
--- a/resources/css/buttons.css
+++ b/resources/css/buttons.css
@@ -1,13 +1,11 @@
-@layer components {
-    .button {
-        @apply rounded-md bg-brand-800 px-6 py-3 text-sm font-semibold text-white inline-flex shadow-sm hover:bg-brand-600 transition-all ease-in-out duration-200;
-    }
-
-    .button-full {
-        @apply w-full text-center justify-center;
-    }
+@utility button {
+    @apply cursor-pointer rounded-md bg-brand-800 px-6 py-3 text-sm font-semibold text-white inline-flex shadow-xs hover:bg-brand-600 transition-all ease-in-out duration-200;
 
-    .button[disabled] {
+    &[disabled] {
         @apply pointer-events-none opacity-50;
     }
 }
+
+@utility button-full {
+    @apply w-full text-center justify-center;
+}
diff --git a/resources/css/content.css b/resources/css/content.css
index 42997c1..63c81cb 100644
--- a/resources/css/content.css
+++ b/resources/css/content.css
@@ -1,89 +1,87 @@
-@layer components {
-    .content {
-        @apply prose text-neutral-700;
-
-        h1,
-        h2,
-        h3,
-        h4,
-        h5,
-        h6 {
-            @apply font-heading font-bold  text-neutral-900;
-        }
+@utility content {
+    @apply prose text-neutral-700;
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        @apply font-heading font-bold  text-neutral-900;
+    }
 
-        h1 {
-            @apply text-4xl md:text-5xl;
-        }
+    h1 {
+        @apply text-4xl md:text-5xl;
+    }
 
-        h2 {
-            @apply text-3xl;
-        }
+    h2 {
+        @apply text-3xl;
+    }
 
-        h3 {
-            @apply text-2xl;
-        }
+    h3 {
+        @apply text-2xl;
+    }
 
-        h4 {
-            @apply text-xl;
-        }
+    h4 {
+        @apply text-xl;
+    }
 
-        h5 {
-            @apply text-lg;
-        }
+    h5 {
+        @apply text-lg;
+    }
 
-        h6 {
-            @apply text-base;
-        }
+    h6 {
+        @apply text-base;
+    }
 
-        li {
-            @apply ml-8;
-        }
+    li {
+        @apply ml-8;
+    }
 
-        a {
-            @apply hover:underline;
-        }
+    a {
+        @apply hover:underline;
+    }
 
-        ul li {
-            @apply list-disc;
-        }
+    ul li {
+        @apply list-disc;
+    }
 
-        ol li {
-            @apply list-decimal;
-        }
+    ol li {
+        @apply list-decimal;
+    }
 
-        strong {
-            @apply font-bold;
-        }
+    strong {
+        @apply font-bold;
+    }
 
-        blockquote {
-            @apply pl-4 py-3 my-4 border-s-4 border-gray-300 text-xl italic;
-        }
+    blockquote {
+        @apply pl-4 py-3 my-4 border-s-4 border-gray-300 text-xl italic;
+    }
 
-        table {
-            @apply w-full text-sm text-left;
-        }
+    table {
+        @apply w-full text-sm text-left;
+    }
 
-        th {
-            @apply p-4 font-bold bg-brand-200;
-        }
+    th {
+        @apply p-4 font-bold bg-brand-200;
+    }
 
-        td {
-            @apply p-4 font-medium;
-        }
+    td {
+        @apply p-4 font-medium;
+    }
 
-        tr:not(:last-child) td {
-            @apply border-b border-brand-200;
-        }
+    tr:not(:last-child) td {
+        @apply border-b border-brand-200;
+    }
 
-        * {
-            & + h1,
-            & + h2,
-            & + h3,
-            & + h4,
-            & + h5,
-            & + h6 {
-                @apply mt-8;
-            }
+    * {
+        & + h1,
+        & + h2,
+        & + h3,
+        & + h4,
+        & + h5,
+        & + h6 {
+            @apply mt-8;
         }
     }
 }
diff --git a/resources/css/forms.css b/resources/css/forms.css
index 7cd9371..ec91462 100644
--- a/resources/css/forms.css
+++ b/resources/css/forms.css
@@ -1,64 +1,63 @@
-@layer components {
-    .form-row {
-        @apply grid grid-cols-1 gap-5 sm:gap-7 sm:grid-cols-4;
-    }
+@utility form-row {
+    @apply grid grid-cols-1 gap-5 sm:gap-7 sm:grid-cols-4;
+}
 
-    .form-col {
-        @apply col-span-full;
-    }
+@utility form-col {
+    @apply col-span-full;
+}
 
-    .form-col-2 {
-        @apply col-span-2;
-    }
+@utility form-col-2 {
+    @apply col-span-2;
+}
 
-    label {
-        &[for] {
-            @apply cursor-pointer;
-        }
-    }
+@utility label {
+    @apply pb-3 block text-sm sm:text-base font-medium;
+}
 
-    .label {
-        @apply pb-3 block text-sm sm:text-base font-medium;
-    }
+@utility small-label {
+    @apply block text-sm font-medium;
+}
 
-    .small-label {
-        @apply block text-sm font-medium;
-    }
+@utility inline-label {
+    @apply flex items-center gap-x-2;
+}
 
-    .inline-label {
-        @apply flex items-center gap-x-2;
-    }
+@utility field {
+    @apply block rounded-md border-brand-300 shadow-xs hover:ring-3 hover:ring-brand-200/50 focus:border-brand-300 focus:ring-3 focus:ring-brand-200/50 focus:ring-offset-0 transition ease-in-out duration-200;
+}
 
-    .input,
-    .textarea,
-    .select,
-    .checkbox,
-    .radio {
-        @apply block rounded-md border-brand-300 shadow-sm hover:ring hover:ring-brand-200 hover:ring-opacity-50 focus:border-brand-300 focus:ring focus:ring-brand-200 focus:ring-opacity-50 focus:ring-offset-0 transition ease-in-out duration-200;
-    }
+@utility input {
+    @apply field block text-base w-full;
+}
 
-    .input,
-    .textarea,
-    .select {
-        @apply block text-base w-full;
-    }
+@utility textarea {
+    @apply field block text-base w-full;
+    @apply min-h-32;
+}
 
-    .textarea {
-        @apply min-h-32;
-    }
+@utility select {
+    @apply field block text-base w-full;
+    @apply cursor-pointer;
+}
 
-    .select,
-    .checkbox,
-    .radio {
-        @apply cursor-pointer;
-    }
+@utility option {
+    @apply field;
+    @apply cursor-pointer size-5 text-brand-800;
+}
 
-    .checkbox,
-    .radio {
-        @apply size-5 text-brand-800;
-    }
+@utility checkbox {
+    @apply option;
+}
 
-    .radio {
-        @apply rounded-full;
+@utility radio {
+    @apply option;
+    @apply rounded-full;
+}
+
+@layer components {
+    label {
+        &[for] {
+            @apply cursor-pointer;
+        }
     }
 }
diff --git a/resources/css/typography.css b/resources/css/typography.css
index a497c21..d2b2625 100644
--- a/resources/css/typography.css
+++ b/resources/css/typography.css
@@ -1,29 +1,27 @@
-@layer components {
-    .heading {
-        @apply text-neutral-900 font-semibold leading-none;
-    }
+@utility heading {
+    @apply text-neutral-900 font-semibold leading-none;
+}
 
-    .h1 {
-        @apply text-4xl sm:text-5xl xl:text-6xl;
-    }
+@utility h1 {
+    @apply text-4xl sm:text-5xl xl:text-6xl;
+}
 
-    .h2 {
-        @apply text-3xl sm:text-4xl xl:text-5xl;
-    }
+@utility h2 {
+    @apply text-3xl sm:text-4xl xl:text-5xl;
+}
 
-    .h3 {
-        @apply text-xl sm:text-2xl xl:text-3xl;
-    }
+@utility h3 {
+    @apply text-xl sm:text-2xl xl:text-3xl;
+}
 
-    .h4 {
-        @apply text-lg sm:text-xl xl:text-2xl;
-    }
+@utility h4 {
+    @apply text-lg sm:text-xl xl:text-2xl;
+}
 
-    .h5 {
-        @apply text-base sm:text-lg xl:text-xl;
-    }
+@utility h5 {
+    @apply text-base sm:text-lg xl:text-xl;
+}
 
-    .h6 {
-        @apply text-sm sm:text-base xl:text-lg;
-    }
+@utility h6 {
+    @apply text-sm sm:text-base xl:text-lg;
 }
diff --git a/resources/js/Components/Header.vue b/resources/js/Components/Header.vue
index 694fe59..86670a9 100644
--- a/resources/js/Components/Header.vue
+++ b/resources/js/Components/Header.vue
@@ -5,7 +5,7 @@
                 <div class="flex h-16 items-center justify-between">
                     <div class="flex items-center">
                         <Link :href="route('home')">
-                        <SparklesIcon class="h-8 w-8 flex-shrink-0 text-brand-800" />
+                        <SparklesIcon class="h-8 w-8 shrink-0 text-brand-800" />
                         </Link>
                     </div>
 
@@ -31,11 +31,11 @@
                         </div>
                     </div>
 
-                    <div class="-mr-2 flex md:hidden">
+                    <div class="flex md:hidden">
                         <button
                             @click="mobileMenuOpen = !mobileMenuOpen"
                             type="button"
-                            class="relative inline-flex items-center justify-center rounded-md bg-brand-100 p-2 text-brand-900 hover:bg-brand-900 hover:text-white"
+                            class="relative inline-flex items-center justify-center rounded-md bg-brand-100 p-2 text-brand-900 hover:bg-brand-900 hover:text-white cursor-pointer"
                         >
                             <span class="sr-only">Open main menu</span>
                             <XMarkIcon
@@ -55,7 +55,7 @@
                 v-show="mobileMenuOpen"
                 class="md:hidden"
             >
-                <div class="space-y-1 px-2 pb-3 pt-2 sm:px-3">
+                <div class="space-y-1 pb-3 pt-2">
                     <template
                         v-for="link in menu"
                         :key="link.label"
diff --git a/resources/js/Components/Notice.vue b/resources/js/Components/Notice.vue
index 28b4f56..5e7295d 100644
--- a/resources/js/Components/Notice.vue
+++ b/resources/js/Components/Notice.vue
@@ -12,7 +12,7 @@
         <component
             v-if="icon"
             :is="icon"
-            class="flex-shrink-0 inline w-6 h-6 me-3"
+            class="shrink-0 inline w-6 h-6 me-3"
         />
         <p v-text="message"></p>
     </div>
diff --git a/resources/js/Pages/Login/Show.vue b/resources/js/Pages/Login/Show.vue
index cf7184c..98f5b48 100644
--- a/resources/js/Pages/Login/Show.vue
+++ b/resources/js/Pages/Login/Show.vue
@@ -56,7 +56,7 @@
                                 v-model="loginForm.remember"
                             />
                             <div
-                                class="relative w-9 h-5 bg-neutral-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:size-4 after:transition-all peer-checked:bg-brand-600">
+                                class="relative w-9 h-5 bg-neutral-200 peer-focus:outline-hidden rounded-full peer peer-checked:after:translate-x-full peer-checked:rtl:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:size-4 after:transition-all peer-checked:bg-brand-600">
                             </div>
                             <span class="text-sm font-medium">
                                 Remember me
diff --git a/tailwind.config.js b/tailwind.config.js
deleted file mode 100644
index 4aaef43..0000000
--- a/tailwind.config.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-    content: [
-        "./resources/**/*.blade.php",
-        "./resources/**/*.js",
-        "./resources/**/*.vue",
-    ],
-
-    theme: {
-        fontFamily: {
-            'text': ['Arial', 'sans-serif'],
-            'heading': ['Arial', 'sans-serif'],
-        },
-
-        extend: {
-            screens: {
-                'xs': '321px',
-                'sm': '451px',
-                'md': '671px',
-                'lg': '769px',
-                'xl': '1025px',
-                '2xl': '1281px',
-                '3xl': '1441px',
-                '4xl': '1901px',
-            },
-
-            colors: {
-                'brand': {
-                    '50': '#f3f6fb',
-                    '100': '#e5e9f4',
-                    '200': '#d0d9ed',
-                    '300': '#b0c0e0',
-                    '400': '#8a9fd0',
-                    '500': '#6a7fc1',
-                    '600': '#5b6bb5',
-                    '700': '#505aa5',
-                    '800': '#464c87',
-                    '900': '#3c416c',
-                    '950': '#282a43',
-                },
-            },
-        },
-    },
-
-    plugins: [
-        require('@tailwindcss/forms'),
-        require('@tailwindcss/typography'),
-    ],
-}
diff --git a/vite.config.js b/vite.config.js
index 94d6c11..c53f56d 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,11 +1,13 @@
 import { defineConfig } from 'vite';
 import autoprefixer from 'autoprefixer';
 import laravel from 'laravel-vite-plugin';
-import tailwindcss from "tailwindcss";
+import tailwindcss from "@tailwindcss/vite";
 import vue from '@vitejs/plugin-vue';
 
 export default defineConfig({
     plugins: [
+        tailwindcss(),
+
         laravel({
             input: [
                 'resources/css/app.css',
@@ -24,15 +26,6 @@ export default defineConfig({
         }),
     ],
 
-    css: {
-        postcss: {
-            plugins: [
-                tailwindcss(),
-                autoprefixer(),
-            ],
-        },
-    },
-
     resolve: {
         alias: {
             'ziggy-js': '/vendor/tightenco/ziggy',