diff --git a/README.md b/README.md
index 5293b55..f1bc9e0 100644
--- a/README.md
+++ b/README.md
@@ -7,4 +7,6 @@
 - Posts by tag page
 - Code editor
 - Tag component
+
+## Done
 - Update login/register to use form components
diff --git a/resources/views/auth/confirm-password.blade.php b/resources/views/auth/confirm-password.blade.php
index 3cbbe08..0dd5a4c 100644
--- a/resources/views/auth/confirm-password.blade.php
+++ b/resources/views/auth/confirm-password.blade.php
@@ -8,14 +8,14 @@
 
         <!-- Password -->
         <div>
-            <x-input-label for="password" :value="__('Password')" />
+            <x-form.label for="password" :value="__('Password')" />
 
-            <x-text-input id="password" class="block mt-1 w-full"
+            <x-form.input id="password" class="block mt-1 w-full"
                             type="password"
                             name="password"
                             required autocomplete="current-password" />
 
-            <x-input-error :messages="$errors->get('password')" class="mt-2" />
+            <x-form.error :messages="$errors->get('password')" class="mt-2" />
         </div>
 
         <div class="flex justify-end mt-4">
diff --git a/resources/views/auth/forgot-password.blade.php b/resources/views/auth/forgot-password.blade.php
index 3c70788..6a454b1 100644
--- a/resources/views/auth/forgot-password.blade.php
+++ b/resources/views/auth/forgot-password.blade.php
@@ -11,9 +11,9 @@
 
         <!-- Email Address -->
         <div>
-            <x-input-label for="email" :value="__('Email')" />
-            <x-text-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus />
-            <x-input-error :messages="$errors->get('email')" class="mt-2" />
+            <x-form.label for="email" :value="__('Email')" />
+            <x-form.input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus />
+            <x-form.error :messages="$errors->get('email')" class="mt-2" />
         </div>
 
         <div class="flex items-center justify-end mt-4">
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index 80e1b39..a31ff1a 100644
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -7,21 +7,21 @@
 
         <!-- Email Address -->
         <div>
-            <x-input-label for="email" :value="__('Email')" />
-            <x-text-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus autocomplete="username" />
-            <x-input-error :messages="$errors->get('email')" class="mt-2" />
+            <x-form.label for="email" :value="__('Email')" />
+            <x-form.input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus autocomplete="username" />
+            <x-form.error :messages="$errors->get('email')" class="mt-2" />
         </div>
 
         <!-- Password -->
         <div class="mt-4">
-            <x-input-label for="password" :value="__('Password')" />
+            <x-form.label for="password" :value="__('Password')" />
 
-            <x-text-input id="password" class="block mt-1 w-full"
+            <x-form.input id="password" class="block mt-1 w-full"
                             type="password"
                             name="password"
                             required autocomplete="current-password" />
 
-            <x-input-error :messages="$errors->get('password')" class="mt-2" />
+            <x-form.error :messages="$errors->get('password')" class="mt-2" />
         </div>
 
         <!-- Remember Me -->
diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php
index d4b3d58..7269d4a 100644
--- a/resources/views/auth/register.blade.php
+++ b/resources/views/auth/register.blade.php
@@ -4,39 +4,39 @@
 
         <!-- Name -->
         <div>
-            <x-input-label for="name" :value="__('Name')" />
-            <x-text-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name')" required autofocus autocomplete="name" />
-            <x-input-error :messages="$errors->get('name')" class="mt-2" />
+            <x-form.label for="name" :value="__('Name')" />
+            <x-form.input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name')" required autofocus autocomplete="name" />
+            <x-form.error :messages="$errors->get('name')" class="mt-2" />
         </div>
 
         <!-- Email Address -->
         <div class="mt-4">
-            <x-input-label for="email" :value="__('Email')" />
-            <x-text-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autocomplete="username" />
-            <x-input-error :messages="$errors->get('email')" class="mt-2" />
+            <x-form.label for="email" :value="__('Email')" />
+            <x-form.input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autocomplete="username" />
+            <x-form.error :messages="$errors->get('email')" class="mt-2" />
         </div>
 
         <!-- Password -->
         <div class="mt-4">
-            <x-input-label for="password" :value="__('Password')" />
+            <x-form.label for="password" :value="__('Password')" />
 
-            <x-text-input id="password" class="block mt-1 w-full"
+            <x-form.input id="password" class="block mt-1 w-full"
                             type="password"
                             name="password"
                             required autocomplete="new-password" />
 
-            <x-input-error :messages="$errors->get('password')" class="mt-2" />
+            <x-form.error :messages="$errors->get('password')" class="mt-2" />
         </div>
 
         <!-- Confirm Password -->
         <div class="mt-4">
-            <x-input-label for="password_confirmation" :value="__('Confirm Password')" />
+            <x-form.label for="password_confirmation" :value="__('Confirm Password')" />
 
-            <x-text-input id="password_confirmation" class="block mt-1 w-full"
+            <x-form.input id="password_confirmation" class="block mt-1 w-full"
                             type="password"
                             name="password_confirmation" required autocomplete="new-password" />
 
-            <x-input-error :messages="$errors->get('password_confirmation')" class="mt-2" />
+            <x-form.error :messages="$errors->get('password_confirmation')" class="mt-2" />
         </div>
 
         <div class="flex items-center justify-end mt-4">
diff --git a/resources/views/auth/reset-password.blade.php b/resources/views/auth/reset-password.blade.php
index a6494cc..eab30b9 100644
--- a/resources/views/auth/reset-password.blade.php
+++ b/resources/views/auth/reset-password.blade.php
@@ -7,27 +7,27 @@
 
         <!-- Email Address -->
         <div>
-            <x-input-label for="email" :value="__('Email')" />
-            <x-text-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email', $request->email)" required autofocus autocomplete="username" />
-            <x-input-error :messages="$errors->get('email')" class="mt-2" />
+            <x-form.label for="email" :value="__('Email')" />
+            <x-form.input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email', $request->email)" required autofocus autocomplete="username" />
+            <x-form.error :messages="$errors->get('email')" class="mt-2" />
         </div>
 
         <!-- Password -->
         <div class="mt-4">
-            <x-input-label for="password" :value="__('Password')" />
-            <x-text-input id="password" class="block mt-1 w-full" type="password" name="password" required autocomplete="new-password" />
-            <x-input-error :messages="$errors->get('password')" class="mt-2" />
+            <x-form.label for="password" :value="__('Password')" />
+            <x-form.input id="password" class="block mt-1 w-full" type="password" name="password" required autocomplete="new-password" />
+            <x-form.error :messages="$errors->get('password')" class="mt-2" />
         </div>
 
         <!-- Confirm Password -->
         <div class="mt-4">
-            <x-input-label for="password_confirmation" :value="__('Confirm Password')" />
+            <x-form.label for="password_confirmation" :value="__('Confirm Password')" />
 
-            <x-text-input id="password_confirmation" class="block mt-1 w-full"
+            <x-form.input id="password_confirmation" class="block mt-1 w-full"
                                 type="password"
                                 name="password_confirmation" required autocomplete="new-password" />
 
-            <x-input-error :messages="$errors->get('password_confirmation')" class="mt-2" />
+            <x-form.error :messages="$errors->get('password_confirmation')" class="mt-2" />
         </div>
 
         <div class="flex items-center justify-end mt-4">
diff --git a/resources/views/profile/partials/delete-user-form.blade.php b/resources/views/profile/partials/delete-user-form.blade.php
index b3a6382..1e1b817 100644
--- a/resources/views/profile/partials/delete-user-form.blade.php
+++ b/resources/views/profile/partials/delete-user-form.blade.php
@@ -28,9 +28,9 @@
             </p>
 
             <div class="mt-6">
-                <x-input-label for="password" value="{{ __('Password') }}" class="sr-only" />
+                <x-form.label for="password" value="{{ __('Password') }}" class="sr-only" />
 
-                <x-text-input
+                <x-form.input
                     id="password"
                     name="password"
                     type="password"
@@ -38,7 +38,7 @@ class="mt-1 block w-3/4"
                     placeholder="{{ __('Password') }}"
                 />
 
-                <x-input-error :messages="$errors->userDeletion->get('password')" class="mt-2" />
+                <x-form.error :messages="$errors->userDeletion->get('password')" class="mt-2" />
             </div>
 
             <div class="mt-6 flex justify-end">
diff --git a/resources/views/profile/partials/update-password-form.blade.php b/resources/views/profile/partials/update-password-form.blade.php
index acd200d..22e5f11 100644
--- a/resources/views/profile/partials/update-password-form.blade.php
+++ b/resources/views/profile/partials/update-password-form.blade.php
@@ -14,21 +14,21 @@
         @method('put')
 
         <div>
-            <x-input-label for="update_password_current_password" :value="__('Current Password')" />
-            <x-text-input id="update_password_current_password" name="current_password" type="password" class="mt-1 block w-full" autocomplete="current-password" />
-            <x-input-error :messages="$errors->updatePassword->get('current_password')" class="mt-2" />
+            <x-form.label for="update_password_current_password" :value="__('Current Password')" />
+            <x-form.input id="update_password_current_password" name="current_password" type="password" class="mt-1 block w-full" autocomplete="current-password" />
+            <x-form.error :messages="$errors->updatePassword->get('current_password')" class="mt-2" />
         </div>
 
         <div>
-            <x-input-label for="update_password_password" :value="__('New Password')" />
-            <x-text-input id="update_password_password" name="password" type="password" class="mt-1 block w-full" autocomplete="new-password" />
-            <x-input-error :messages="$errors->updatePassword->get('password')" class="mt-2" />
+            <x-form.label for="update_password_password" :value="__('New Password')" />
+            <x-form.input id="update_password_password" name="password" type="password" class="mt-1 block w-full" autocomplete="new-password" />
+            <x-form.error :messages="$errors->updatePassword->get('password')" class="mt-2" />
         </div>
 
         <div>
-            <x-input-label for="update_password_password_confirmation" :value="__('Confirm Password')" />
-            <x-text-input id="update_password_password_confirmation" name="password_confirmation" type="password" class="mt-1 block w-full" autocomplete="new-password" />
-            <x-input-error :messages="$errors->updatePassword->get('password_confirmation')" class="mt-2" />
+            <x-form.label for="update_password_password_confirmation" :value="__('Confirm Password')" />
+            <x-form.input id="update_password_password_confirmation" name="password_confirmation" type="password" class="mt-1 block w-full" autocomplete="new-password" />
+            <x-form.error :messages="$errors->updatePassword->get('password_confirmation')" class="mt-2" />
         </div>
 
         <div class="flex items-center gap-4">
diff --git a/resources/views/profile/partials/update-profile-information-form.blade.php b/resources/views/profile/partials/update-profile-information-form.blade.php
index 7273fff..c21a4c5 100644
--- a/resources/views/profile/partials/update-profile-information-form.blade.php
+++ b/resources/views/profile/partials/update-profile-information-form.blade.php
@@ -18,15 +18,15 @@
         @method('patch')
 
         <div>
-            <x-input-label for="name" :value="__('Name')" />
-            <x-text-input id="name" name="name" type="text" class="mt-1 block w-full" :value="old('name', $user->name)" required autofocus autocomplete="name" />
-            <x-input-error class="mt-2" :messages="$errors->get('name')" />
+            <x-form.label for="name" :value="__('Name')" />
+            <x-form.input id="name" name="name" type="text" class="mt-1 block w-full" :value="old('name', $user->name)" required autofocus autocomplete="name" />
+            <x-form.error class="mt-2" :messages="$errors->get('name')" />
         </div>
 
         <div>
-            <x-input-label for="email" :value="__('Email')" />
-            <x-text-input id="email" name="email" type="email" class="mt-1 block w-full" :value="old('email', $user->email)" required autocomplete="username" />
-            <x-input-error class="mt-2" :messages="$errors->get('email')" />
+            <x-form.label for="email" :value="__('Email')" />
+            <x-form.input id="email" name="email" type="email" class="mt-1 block w-full" :value="old('email', $user->email)" required autocomplete="username" />
+            <x-form.error class="mt-2" :messages="$errors->get('email')" />
 
             @if ($user instanceof \Illuminate\Contracts\Auth\MustVerifyEmail && ! $user->hasVerifiedEmail())
                 <div>
diff --git a/resources/views/tricks/edit.blade.php b/resources/views/tricks/edit.blade.php
index 71618d1..2ed735c 100644
--- a/resources/views/tricks/edit.blade.php
+++ b/resources/views/tricks/edit.blade.php
@@ -8,21 +8,21 @@
     <x-container>
         <x-form method="PUT" action="{{ route('tricks.update', $trick) }}">
             <div>
-                <x-input-label for="name" :value="__('Name')" />
-                <x-text-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name') ?? $trick->name" required autofocus />
-                <x-input-error :messages="$errors->get('name')" class="mt-2" />
+                <x-form.label for="name" :value="__('Name')" />
+                <x-form.input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name') ?? $trick->name" required autofocus />
+                <x-form.error :messages="$errors->get('name')" class="mt-2" />
             </div>
 
             <div>
-                <x-input-label for="description" :value="__('Description')" />
+                <x-form.label for="description" :value="__('Description')" />
                 <x-form.textarea id="description" class="block mt-1 w-full" name="description" :value="old('description') ?? $trick->description" required />
-                <x-input-error :messages="$errors->get('description')" class="mt-2" />
+                <x-form.error :messages="$errors->get('description')" class="mt-2" />
             </div>
 
             <div>
-                <x-input-label for="code" :value="__('Code')" />
+                <x-form.label for="code" :value="__('Code')" />
                 <x-form.textarea id="code" class="block mt-1 w-full" name="code" :value="old('code') ?? $trick->code" required />
-                <x-input-error :messages="$errors->get('code')" class="mt-2" />
+                <x-form.error :messages="$errors->get('code')" class="mt-2" />
             </div>
 
             <div class="flex items-center justify-end mt-4">