diff --git a/package.json b/package.json
index 6519a6a5..9a41e605 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
         "build": "vite build"
     },
     "devDependencies": {
+        "@tailwindcss/forms": "^0.5.11",
         "@tailwindcss/postcss": "^4.1.18",
         "autoprefixer": "^10.4.20",
         "laravel-vite-plugin": "^1.2.0",
diff --git a/resources/css/app.css b/resources/css/app.css
index d4b50785..ffb96a15 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -1 +1,2 @@
 @import 'tailwindcss';
+@plugin '@tailwindcss/forms';
diff --git a/resources/views/components/dropdown.blade.php b/resources/views/components/dropdown.blade.php
index a46f7c83..97e3c2ee 100644
--- a/resources/views/components/dropdown.blade.php
+++ b/resources/views/components/dropdown.blade.php
@@ -28,7 +28,7 @@
             class="absolute z-50 mt-2 {{ $width }} rounded-md shadow-lg {{ $alignmentClasses }}"
             style="display: none;"
             @click="open = false">
-        <div class="rounded-md ring-1 ring-black ring-opacity-5 {{ $contentClasses }}">
+        <div class="rounded-md ring-1 ring-black/5 {{ $contentClasses }}">
             {{ $content }}
         </div>
     </div>
diff --git a/resources/views/components/form-modal.blade.php b/resources/views/components/form-modal.blade.php
new file mode 100644
index 00000000..7a9f832d
--- /dev/null
+++ b/resources/views/components/form-modal.blade.php
@@ -0,0 +1,34 @@
+@props([
+    'title',
+    'close',
+    'maxWidth' => 'lg',
+])
+
+@php
+$maxWidthClass = [
+    'sm' => 'max-w-sm',
+    'md' => 'max-w-md',
+    'lg' => 'max-w-lg',
+    'xl' => 'max-w-xl',
+    '2xl' => 'max-w-2xl',
+][$maxWidth];
+@endphp
+
+<div class="fixed inset-0 z-50 overflow-y-auto" role="dialog" aria-modal="true" aria-labelledby="modal-title">
+    <div class="flex min-h-full items-center justify-center p-4">
+        <div class="fixed inset-0 bg-gray-900/50 backdrop-blur-sm transition-opacity" wire:click="{{ $close }}"></div>
+
+        <div class="relative z-10 w-full {{ $maxWidthClass }} max-h-[90vh] overflow-y-auto rounded-lg bg-white p-6 text-left shadow-xl">
+            <div class="flex items-center justify-between mb-4">
+                <h3 id="modal-title" class="text-lg font-medium text-gray-900">{{ $title }}</h3>
+                <button type="button" wire:click="{{ $close }}" class="text-gray-400 hover:text-gray-600">
+                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+                    </svg>
+                </button>
+            </div>
+
+            {{ $slot }}
+        </div>
+    </div>
+</div>
diff --git a/resources/views/components/modal.blade.php b/resources/views/components/modal.blade.php
index 70704c1a..2ccb99df 100644
--- a/resources/views/components/modal.blade.php
+++ b/resources/views/components/modal.blade.php
@@ -60,7 +60,7 @@ class="fixed inset-0 transform transition-all"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
     >
-        <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
+        <div class="absolute inset-0 bg-gray-900/50 backdrop-blur-sm"></div>
     </div>
 
     <div
diff --git a/resources/views/livewire/channels.blade.php b/resources/views/livewire/channels.blade.php
index 756a6e60..26140bae 100644
--- a/resources/views/livewire/channels.blade.php
+++ b/resources/views/livewire/channels.blade.php
@@ -125,24 +125,7 @@ class="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-me
 
     <!-- Account Management Modal -->
     @if ($managingChannel)
-        <div class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
-            <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-                <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" wire:click="closeAccountModal"></div>
-
-                <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
-
-                <div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
-                    <div class="flex items-center justify-between mb-4">
-                        <h3 class="text-lg font-medium text-gray-900">
-                            Manage Accounts for {{ $managingChannel->display_name ?? $managingChannel->name }}
-                        </h3>
-                        <button wire:click="closeAccountModal" class="text-gray-400 hover:text-gray-600">
-                            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
-                            </svg>
-                        </button>
-                    </div>
-
+        <x-form-modal :title="'Manage Accounts for ' . ($managingChannel->display_name ?? $managingChannel->name)" close="closeAccountModal">
                     @if ($availableAccounts->isNotEmpty())
                         <div class="mb-4">
                             <h4 class="text-sm font-medium text-gray-700 mb-2">Available Accounts</h4>
@@ -172,29 +155,12 @@ class="w-full inline-flex justify-center rounded-md border border-gray-300 shado
                             Close
                         </button>
                     </div>
-                </div>
-            </div>
-        </div>
+        </x-form-modal>
     @endif
 
     <!-- Create Channel Modal -->
     @if ($showCreateModal)
-        <div class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
-            <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-                <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" wire:click="closeCreateModal"></div>
-
-                <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
-
-                <div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
-                    <div class="flex items-center justify-between mb-4">
-                        <h3 class="text-lg font-medium text-gray-900">Add Channel</h3>
-                        <button wire:click="closeCreateModal" class="text-gray-400 hover:text-gray-600">
-                            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
-                            </svg>
-                        </button>
-                    </div>
-
+        <x-form-modal title="Add Channel" close="closeCreateModal">
                     <form wire:submit="createChannel" class="space-y-4">
                         <div>
                             <label for="new-channel-name" class="block text-sm font-medium text-gray-700">Name</label>
@@ -202,7 +168,7 @@ class="w-full inline-flex justify-center rounded-md border border-gray-300 shado
                                 type="text"
                                 id="new-channel-name"
                                 wire:model="newName"
-                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
+                                class="mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
                             />
                             @error('newName') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                         </div>
@@ -212,7 +178,7 @@ class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-
                             <select
                                 id="new-channel-instance"
                                 wire:model="newPlatformInstanceId"
-                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
+                                class="mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
                             >
                                 <option value="">Select an instance</option>
                                 @foreach ($platformInstances as $instance)
@@ -227,7 +193,7 @@ class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-
                             <select
                                 id="new-channel-language"
                                 wire:model="newLanguageId"
-                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
+                                class="mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
                             >
                                 <option value="">Select a language</option>
                                 @foreach ($languages as $language)
@@ -243,7 +209,7 @@ class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-
                                 id="new-channel-description"
                                 wire:model="newDescription"
                                 rows="2"
-                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
+                                class="mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
                             ></textarea>
                             @error('newDescription') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                         </div>
@@ -266,8 +232,6 @@ class="inline-flex justify-center rounded-md border border-transparent shadow-sm
                             </button>
                         </div>
                     </form>
-                </div>
-            </div>
-        </div>
+        </x-form-modal>
     @endif
 </div>
diff --git a/resources/views/livewire/dashboard.blade.php b/resources/views/livewire/dashboard.blade.php
index 489812b2..b807ee64 100644
--- a/resources/views/livewire/dashboard.blade.php
+++ b/resources/views/livewire/dashboard.blade.php
@@ -85,7 +85,7 @@
             <h2 class="text-lg font-semibold text-gray-900">Article Statistics</h2>
             <select
                 wire:model.live="period"
-                class="rounded-md border-gray-300 text-sm focus:border-blue-500 focus:ring-blue-500"
+                class="rounded-md border border-gray-300 text-sm focus:border-blue-500 focus:ring-blue-500"
             >
                 @foreach ($availablePeriods as $value => $label)
                     <option value="{{ $value }}">{{ $label }}</option>
diff --git a/resources/views/livewire/feeds.blade.php b/resources/views/livewire/feeds.blade.php
index 7ce870fc..e01120b8 100644
--- a/resources/views/livewire/feeds.blade.php
+++ b/resources/views/livewire/feeds.blade.php
@@ -103,22 +103,7 @@ class="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-me
 
     <!-- Create Feed Modal -->
     @if ($showCreateModal)
-        <div class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
-            <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-                <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" wire:click="closeCreateModal"></div>
-
-                <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
-
-                <div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
-                    <div class="flex items-center justify-between mb-4">
-                        <h3 class="text-lg font-medium text-gray-900">Add Feed</h3>
-                        <button wire:click="closeCreateModal" class="text-gray-400 hover:text-gray-600">
-                            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
-                            </svg>
-                        </button>
-                    </div>
-
+        <x-form-modal title="Add Feed" close="closeCreateModal">
                     <form wire:submit="createFeed" class="space-y-4">
                         <div>
                             <label for="new-feed-name" class="block text-sm font-medium text-gray-700">Name</label>
@@ -126,7 +111,7 @@ class="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-me
                                 type="text"
                                 id="new-feed-name"
                                 wire:model="newName"
-                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
+                                class="mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
                             />
                             @error('newName') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                         </div>
@@ -136,7 +121,7 @@ class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-
                             <select
                                 id="new-feed-provider"
                                 wire:model="newProvider"
-                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
+                                class="mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
                             >
                                 <option value="">Select a provider</option>
                                 @foreach ($providers as $code => $provider)
@@ -151,7 +136,7 @@ class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-
                             <select
                                 id="new-feed-language"
                                 wire:model="newLanguageId"
-                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
+                                class="mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
                             >
                                 <option value="">Select a language</option>
                                 @foreach ($languages as $language)
@@ -167,7 +152,7 @@ class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-
                                 id="new-feed-description"
                                 wire:model="newDescription"
                                 rows="2"
-                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
+                                class="mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
                             ></textarea>
                             @error('newDescription') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                         </div>
@@ -190,8 +175,6 @@ class="inline-flex justify-center rounded-md border border-transparent shadow-sm
                             </button>
                         </div>
                     </form>
-                </div>
-            </div>
-        </div>
+        </x-form-modal>
     @endif
 </div>
diff --git a/resources/views/livewire/notification-bell.blade.php b/resources/views/livewire/notification-bell.blade.php
index 0df0c6fd..10920bd3 100644
--- a/resources/views/livewire/notification-bell.blade.php
+++ b/resources/views/livewire/notification-bell.blade.php
@@ -23,7 +23,7 @@ class="relative p-2 rounded-md text-gray-400 hover:text-gray-600 hover:bg-gray-1
         x-transition:leave="transition ease-in duration-75"
         x-transition:leave-start="opacity-100 scale-100"
         x-transition:leave-end="opacity-0 scale-95"
-        class="absolute right-0 z-50 mt-2 w-80 bg-white rounded-lg shadow-lg ring-1 ring-black ring-opacity-5"
+        class="absolute right-0 z-50 mt-2 w-80 bg-white rounded-lg shadow-lg ring-1 ring-black/5"
         style="display: none;"
     >
         <div class="flex items-center justify-between px-4 py-3 border-b border-gray-100">
diff --git a/resources/views/livewire/routes.blade.php b/resources/views/livewire/routes.blade.php
index 45c04c69..42b84c69 100644
--- a/resources/views/livewire/routes.blade.php
+++ b/resources/views/livewire/routes.blade.php
@@ -144,14 +144,7 @@ class="inline-flex items-center px-4 py-2 border border-transparent text-sm font
 
     <!-- Create Route Modal -->
     @if ($showCreateModal)
-        <div class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
-            <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-                <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" wire:click="closeCreateModal"></div>
-
-                <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
-
-                <div class="relative z-10 inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
-                    <h3 class="text-lg font-medium text-gray-900 mb-4">Create New Route</h3>
+        <x-form-modal title="Create New Route" close="closeCreateModal">
                     <form wire:submit="createRoute" class="space-y-4">
                         <div>
                             <label for="newFeedId" class="block text-sm font-medium text-gray-700 mb-1">
@@ -219,29 +212,12 @@ class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transp
                             </button>
                         </div>
                     </form>
-                </div>
-            </div>
-        </div>
+        </x-form-modal>
     @endif
 
     <!-- Edit Route Modal -->
     @if ($editingRoute)
-        <div class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
-            <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-                <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" wire:click="closeEditModal"></div>
-
-                <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
-
-                <div class="relative z-10 inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
-                    <div class="flex items-center justify-between mb-4">
-                        <h3 class="text-lg font-medium text-gray-900">Edit Route</h3>
-                        <button wire:click="closeEditModal" class="text-gray-400 hover:text-gray-600">
-                            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
-                            </svg>
-                        </button>
-                    </div>
-
+        <x-form-modal title="Edit Route" close="closeEditModal">
                     <div class="mb-4 p-3 bg-gray-50 rounded-md">
                         <p class="text-sm text-gray-600">
                             <strong>Feed:</strong> {{ $editingRoute->feed?->name }}
@@ -394,8 +370,6 @@ class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transp
                             </button>
                         </div>
                     </form>
-                </div>
-            </div>
-        </div>
+        </x-form-modal>
     @endif
 </div>
diff --git a/resources/views/livewire/settings.blade.php b/resources/views/livewire/settings.blade.php
index a03019d6..cb5fa1f7 100644
--- a/resources/views/livewire/settings.blade.php
+++ b/resources/views/livewire/settings.blade.php
@@ -58,7 +58,7 @@ class="flex-shrink-0"
                             min="0"
                             max="1440"
                             step="1"
-                            class="w-24 rounded-md border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"
+                            class="w-24 rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"
                         />
                         <button
                             wire:click="updateArticlePublishingInterval"
@@ -128,7 +128,7 @@ class="flex-shrink-0"
                             wire:model="feedStalenessThreshold"
                             min="0"
                             step="1"
-                            class="w-24 rounded-md border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"
+                            class="w-24 rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"
                         />
                         <button
                             wire:click="updateFeedStalenessThreshold"