diff --git a/app/Livewire/Project/Application/Preview/Form.php b/app/Livewire/Project/Application/Preview/Form.php
index 73b423f90..79b3276a1 100644
--- a/app/Livewire/Project/Application/Preview/Form.php
+++ b/app/Livewire/Project/Application/Preview/Form.php
@@ -3,6 +3,7 @@
 namespace App\Livewire\Project\Application\Preview;
 
 use App\Models\Application;
+use Livewire\Attributes\Rule;
 use Livewire\Component;
 use Spatie\Url\Url;
 
@@ -10,49 +11,53 @@ class Form extends Component
 {
     public Application $application;
 
-    public string $preview_url_template;
-
-    protected $rules = [
-        'application.preview_url_template' => 'required',
-    ];
-
-    protected $validationAttributes = [
-        'application.preview_url_template' => 'preview url template',
-    ];
-
-    public function resetToDefault()
-    {
-        $this->application->preview_url_template = '{{pr_id}}.{{domain}}';
-        $this->preview_url_template = $this->application->preview_url_template;
-        $this->application->save();
-        $this->generate_real_url();
-    }
-
-    public function generate_real_url()
-    {
-        if (data_get($this->application, 'fqdn')) {
-            try {
-                $firstFqdn = str($this->application->fqdn)->before(',');
-                $url = Url::fromString($firstFqdn);
-                $host = $url->getHost();
-                $this->preview_url_template = str($this->application->preview_url_template)->replace('{{domain}}', $host);
-            } catch (\Exception) {
-                $this->dispatch('error', 'Invalid FQDN.');
-            }
-        }
-    }
+    #[Rule('required')]
+    public string $previewUrlTemplate;
 
     public function mount()
     {
-        $this->generate_real_url();
+        try {
+            $this->previewUrlTemplate = $this->application->preview_url_template;
+            $this->generateRealUrl();
+        } catch (\Throwable $e) {
+            return handleError($e, $this);
+        }
     }
 
     public function submit()
     {
-        $this->validate();
-        $this->application->preview_url_template = str_replace(' ', '', $this->application->preview_url_template);
-        $this->application->save();
-        $this->dispatch('success', 'Preview url template updated.');
-        $this->generate_real_url();
+        try {
+            $this->resetErrorBag();
+            $this->validate();
+            $this->application->preview_url_template = str_replace(' ', '', $this->previewUrlTemplate);
+            $this->application->save();
+            $this->dispatch('success', 'Preview url template updated.');
+            $this->generateRealUrl();
+        } catch (\Throwable $e) {
+            return handleError($e, $this);
+        }
+    }
+
+    public function resetToDefault()
+    {
+        try {
+            $this->application->preview_url_template = '{{pr_id}}.{{domain}}';
+            $this->previewUrlTemplate = $this->application->preview_url_template;
+            $this->application->save();
+            $this->generateRealUrl();
+            $this->dispatch('success', 'Preview url template updated.');
+        } catch (\Throwable $e) {
+            return handleError($e, $this);
+        }
+    }
+
+    public function generateRealUrl()
+    {
+        if (data_get($this->application, 'fqdn')) {
+            $firstFqdn = str($this->application->fqdn)->before(',');
+            $url = Url::fromString($firstFqdn);
+            $host = $url->getHost();
+            $this->previewUrlTemplate = str($this->application->preview_url_template)->replace('{{domain}}', $host);
+        }
     }
 }
diff --git a/resources/views/livewire/project/application/preview/form.blade.php b/resources/views/livewire/project/application/preview/form.blade.php
index 62210a99d..fda54e31f 100644
--- a/resources/views/livewire/project/application/preview/form.blade.php
+++ b/resources/views/livewire/project/application/preview/form.blade.php
@@ -2,14 +2,14 @@
     <div class="flex items-center gap-2">
         <h2>Preview Deployments</h2>
         <x-forms.button type="submit">Save</x-forms.button>
-        <x-forms.button wire:click="resetToDefault">Reset template to default</x-forms.button>
+        <x-forms.button isHighlighted wire:click="resetToDefault">Reset template to default</x-forms.button>
     </div>
     <div class="pb-4 ">Preview Deployments based on pull requests are here.</div>
     <div class="flex flex-col gap-2 pb-4">
-        <x-forms.input id="application.preview_url_template" label="Preview URL Template"
+        <x-forms.input id="previewUrlTemplate" label="Preview URL Template"
             helper="Templates:<span class='text-helper'>@@{{ random }}</span> to generate random sub-domain each time a PR is deployed, <span class='text-helper'>@@{{ pr_id }}</span> to use pull request ID as sub-domain or <span class='text-helper'>@@{{ domain }}</span> to replace the domain name with the application's domain name." />
-        @if ($preview_url_template)
-            <div class="">Domain Preview: {{ $preview_url_template }}</div>
+        @if ($previewUrlTemplate)
+            <div class="">Domain Preview: {{ $previewUrlTemplate }}</div>
         @endif
     </div>
 </form>