diff --git a/app/Http/Livewire/SlackSettingsForm.php b/app/Http/Livewire/SlackSettingsForm.php
index d2760cb890..6ba3b5b1a9 100644
--- a/app/Http/Livewire/SlackSettingsForm.php
+++ b/app/Http/Livewire/SlackSettingsForm.php
@@ -11,7 +11,7 @@ class SlackSettingsForm extends Component
     public $webhook_endpoint;
     public $webhook_channel;
     public $webhook_botname;
-    public $isDisabled ='disabled' ;
+    public $isDisabled ='' ;
     public $webhook_name;
     public $webhook_link;
     public $webhook_placeholder;
@@ -27,7 +27,6 @@ class SlackSettingsForm extends Component
         'webhook_botname'                       => 'string|nullable',
     ];
 
-
     public function mount(){
         $this->webhook_text= [
             "slack" => array(
@@ -45,6 +44,7 @@ class SlackSettingsForm extends Component
         ];
 
         $this->setting = Setting::getSettings();
+        $this->save_button = trans('general.save');
         $this->webhook_selected = $this->setting->webhook_selected;
         $this->webhook_placeholder = $this->webhook_text[$this->setting->webhook_selected]["placeholder"];
         $this->webhook_name = $this->webhook_text[$this->setting->webhook_selected]["name"];
@@ -54,6 +54,12 @@ class SlackSettingsForm extends Component
         $this->webhook_botname = $this->setting->webhook_botname;
         $this->webhook_options = $this->setting->webhook_selected;
 
+        if($this->setting->webhook_selected == 'general'){
+            $this->isDisabled='';
+        }
+        if($this->setting->webhook_endpoint != null && $this->setting->webhook_channel != null){
+            $this->isDisabled= '';
+        }
 
     }
     public function updated($field){
@@ -66,17 +72,28 @@ class SlackSettingsForm extends Component
         $this->webhook_icon = $this->webhook_text[$this->webhook_selected]["icon"]; ;
         $this->webhook_placeholder = $this->webhook_text[$this->webhook_selected]["placeholder"];
         $this->webhook_link = $this->webhook_text[$this->webhook_selected]["link"];
-
+        if($this->webhook_selected != 'slack'){
+            $this->isDisabled= '';
+            $this->save_button = trans('general.save');
+        }
     }
 
+    private function isButtonDisabled(){
+        if($this->webhook_selected == 'slack') {
+            if (empty($this->webhook_endpoint)) {
+                $this->isDisabled = 'disabled';
+                $this->save_button = trans('admin/settings/general.webhook_presave');
+            }
+            if (empty($this->webhook_channel)) {
+                $this->isDisabled = 'disabled';
+                $this->save_button = trans('admin/settings/general.webhook_presave');
+            }
+        }
+
+    }
     public function render()
     {
-        if(empty($this->webhook_channel || $this->webhook_endpoint)){
-            $this->isDisabled= 'disabled';
-        }
-        if(empty($this->webhook_endpoint && $this->webhook_channel)){
-            $this->isDisabled= '';
-        }
+        $this->isButtonDisabled();
         return view('livewire.slack-settings-form');
     }
 
@@ -100,6 +117,7 @@ class SlackSettingsForm extends Component
         try {
             $webhook->post($this->webhook_endpoint, ['body' => $payload]);
             $this->isDisabled='';
+            $this->save_button = trans('general.save');
             return session()->flash('success' , 'Your '.$this->webhook_name.' Integration works!');
 
         } catch (\Exception $e) {
@@ -110,9 +128,21 @@ class SlackSettingsForm extends Component
         //}
         return session()->flash('message' , trans('admin/settings/message.webhook.error_misc'));
 
-
-
     }
+
+    public function clearSettings(){
+        $this->webhook_endpoint = '';
+        $this->webhook_channel = '';
+        $this->webhook_botname = '';
+        $this->setting->webhook_endpoint = '';
+        $this->setting->webhook_channel = '';
+        $this->setting->webhook_botname = '';
+
+        $this->setting->save();
+
+        session()->flash('save',trans('admin/settings/message.update.success'));
+    }
+
     public function submit()
     {
         if($this->webhook_selected != 'general') {
@@ -124,11 +154,9 @@ class SlackSettingsForm extends Component
         $this->setting->webhook_channel = $this->webhook_channel;
         $this->setting->webhook_botname = $this->webhook_botname;
 
-
         $this->setting->save();
 
         session()->flash('save',trans('admin/settings/message.update.success'));
 
-
     }
 }
diff --git a/resources/lang/en/admin/settings/general.php b/resources/lang/en/admin/settings/general.php
index 3316ed09ff..4c8bdcb629 100644
--- a/resources/lang/en/admin/settings/general.php
+++ b/resources/lang/en/admin/settings/general.php
@@ -202,6 +202,7 @@ return [
     'slack'                     => 'Slack',
     'general_webhook'           => 'General Webhook',
     'webhook'                   => ':app',
+    'webhook_presave'           => 'Test to Save',
     'webhook_title'               => 'Update Webhook Settings',
     'webhook_help'                => 'Integration settings',
     'webhook_botname'             => ':app Botname',
diff --git a/resources/views/livewire/slack-settings-form.blade.php b/resources/views/livewire/slack-settings-form.blade.php
index ce6ba52c0e..e7a22978ff 100644
--- a/resources/views/livewire/slack-settings-form.blade.php
+++ b/resources/views/livewire/slack-settings-form.blade.php
@@ -13,9 +13,6 @@
 @section('content')
 
 <div>
-    <form class="form-horizontal" role="form" wire:submit.prevent="submit">
-        {{csrf_field()}}
-
         <div class="row">
             <div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
     <div class="panel box box-default">
@@ -34,7 +31,7 @@
                 <br>
             </div>
 
-                    <div class="col-md-12">
+                    <div class="col-md-12" style="border-top: 0px;">
                         @if (session()->has('save'))
                             <div class="alert alert-success fade in">
                                 {{session('save')}}
@@ -58,66 +55,72 @@
                         @endif
 
 
-                        <div class="form-group col-md-12 required">
+                        <div class="form-group" style="margin-left:-14px;">
                             <div class="col-md-3">
                                 <label for="webhook_selected">
                                     {{ trans('general.integration_option') }}
                                 </label>
                             </div>
 
-                            <div class="col-md-9">
+                            <div class="col-md-8" style="margin-left: -62px;">
                                 <select wire:model="webhook_selected" aria-label="webhook_selected" class="form-control">
                                     <option value="slack">{{ trans('admin/settings/general.slack') }}</option>
                                     <option value="general">{{ trans('admin/settings/general.general_webhook') }}</option>
                                 </select>
                             </div>
+                            <br><br><br>
 
                         </div>
+                        <form class="form-horizontal" role="form" wire:submit.prevent="submit">
+                            {{csrf_field()}}
 
-                        <!--Webhook endpoint-->
-                        <div class="form-group col-md-12 required{{ $errors->has('webhook_endpoint') ? ' error' : '' }}">
-
-                            <div class="col-md-3">
-                                {{ Form::label('webhook_endpoint', trans('admin/settings/general.webhook_endpoint',['app' => ucwords($webhook_selected) ])) }}
+                            <!--Webhook endpoint-->
+                            <div class="form-group{{ $errors->has('webhook_endpoint') ? ' error' : '' }}">
+                                <div class="col-md-2">
+                                    {{ Form::label('webhook_endpoint', trans('admin/settings/general.webhook_endpoint',['app' => $webhook_name ])) }}
+                                </div>
+                                <div class="col-md-8 required">
+                                    @if (config('app.lock_passwords')===true)
+                                        <p class="text-warning"><i
+                                                    class="fas fa-lock"></i> {{ trans('general.feature_disabled') }}</p>
+                                        <input type="text" wire:model="webhook_endpoint" class='form-control'
+                                               placeholder="{{$webhook_placeholder}}"
+                                                value="{{old('webhook_endpoint', $webhook_endpoint)}}">
+                                    @else
+                                        <input type="text" wire:model="webhook_endpoint" class='form-control'
+                                               placeholder="{{$webhook_placeholder}}"
+                                                value="{{old('webhook_endpoint', $webhook_endpoint)}}">
+                                    @endif
+                                    {!! $errors->first('webhook_endpoint', '<span class="alert-msg" aria-hidden="true">:message</span>') !!}
+                                </div>
                             </div>
 
-                            <div class="col-md-9">
-                                @if (config('app.lock_passwords')===true)
-                                    <p class="text-warning">
-                                        <i class="fas fa-lock" aria-hidden="true"></i>
-                                        {{ trans('general.feature_disabled') }}
-                                    </p>
-                                    <input type="text" wire:model="webhook_endpoint" class="form-control" placeholder="{{ $webhook_placeholder }}" value="{{ old('webhook_endpoint', $webhook_endpoint) }}">
-                                @else
-                                    <input type="text" wire:model="webhook_endpoint" class="form-control" placeholder="{{ $webhook_placeholder }}" value="{{ old('webhook_endpoint', $webhook_endpoint) }}">
-                                @endif
-                                {!! $errors->first('webhook_endpoint', '<span class="alert-msg">:message</span>') !!}
-                            </div>
-                        </div>
+                            <!-- Webhook channel -->
+                            <div class="form-group{{ $errors->has('webhook_channel') ? ' error' : '' }}">
+                                <div class="col-md-2">
+                                    {{ Form::label('webhook_channel', trans('admin/settings/general.webhook_channel',['app' => $webhook_name ])) }}
+                                </div>
+                                <div class="col-md-8 required">
+                                    @if (config('app.lock_passwords')===true)
+                                        <input type="text" wire:model="webhook_channel" class='form-control'
+                                               placeholder="#IT-Ops"
+                                               value="{{old('webhook_channel', $webhook_channel)}}">
+                                        <p class="text-warning"><i
+                                                    class="fas fa-lock"></i> {{ trans('general.feature_disabled') }}</p>
 
-                        <!-- Webhook channel -->
-                        <div class="col-md-12 form-group required{{ $errors->has('webhook_channel') ? ' error' : '' }}">
-                            <div class="col-md-3">
-                                {{ Form::label('webhook_channel', trans('admin/settings/general.webhook_channel',['app' => ucwords($webhook_selected) ])) }}
+                                    @else
+                                        <input type="text" wire:model="webhook_channel" class='form-control'
+                                               placeholder="#IT-Ops"
+                                               value="{{old('webhook_channel', $webhook_channel)}}">
+                                    @endif
+                                    {!! $errors->first('webhook_channel', '<span class="alert-msg" aria-hidden="true">:message</span>') !!}
+                                </div>
                             </div>
-                            <div class="col-md-9">
-
-                                @if (config('app.lock_passwords')===true)
-                                    <input type="text" wire:model="webhook_channel" class="form-control" placeholder="#IT-Ops" value="{{ old('webhook_channel', $webhook_channel) }}">
-                                    <p class="text-warning">
-                                        <i class="fas fa-lock" aria-hidden="true"></i> {{ trans('general.feature_disabled') }}</p>
-                                @else
-                                    <input type="text" wire:model="webhook_channel" class="form-control" placeholder="#IT-Ops" value="{{ old('webhook_channel', $webhook_channel) }}">
-                                @endif
-                                {!! $errors->first('webhook_channel', '<span class="alert-msg">:message</span>') !!}
-                            </div>
-
-                        </div>
 
                             <!-- Webhook botname -->
-                            <div class="col-md-12 form-group required{{ $errors->has('webhook_botname') ? ' error' : '' }}">
-                                <div class="col-md-3">
-                                    {{ Form::label('webhook_botname', trans('admin/settings/general.webhook_botname',['app' => ucwords($webhook_selected) ])) }}
+                            <div class="form-group{{ $errors->has('webhook_botname') ? ' error' : '' }}">
+                                <div class="col-md-2">
+                                    {{ Form::label('webhook_botname', trans('admin/settings/general.webhook_botname',['app' => $webhook_name ])) }}
                                 </div>
                                 <div class="col-md-9">
                                     @if (config('app.lock_passwords')===true)
@@ -127,7 +130,8 @@
                                             {{ trans('general.feature_disabled') }}
                                         </p>
                                     @else
-                                        <input type="text" wire:model="webhook_botname" class="form-control" placeholder="Snipe-Bot" {{old('webhook_botname', $webhook_botname)}}>
+                                        <input type="text" wire:model="webhook_botname" class='form-control'
+                                               placeholder="Snipe-Bot" {{old('webhook_botname', $webhook_botname)}}>
                                     @endif
                                     {!! $errors->first('webhook_botname', '<span class="alert-msg" aria-hidden="true">:message</span>') !!}
                                 </div><!--col-md-10-->
@@ -136,9 +140,8 @@
                             <!--Webhook Integration Test-->
                             @if($webhook_selected == 'slack')
                                 @if($webhook_endpoint != null && $webhook_channel != null)
-                                    <div class="form-group col-md-12">
-                                        <div class="col-md-offset-3 col-md-9">
-
+                                    <div class="form-group">
+                                        <div class="col-md-offset-2 col-md-8">
                                             <a href="#" wire:click.prevent="testWebhook"
                                                class="btn btn-default btn-sm pull-left">
                                                 <i class="{{$webhook_icon}}" aria-hidden="true"></i>
@@ -149,7 +152,6 @@
                                                     <i class="fas fa-spinner fa-spin" aria-hidden="true"></i>
                                                 </span>
                                             </div>
-
                                         </div>
                                     </div>
                                 @endif
@@ -157,17 +159,20 @@
 
                             <div class="box-footer" style="margin-top: 45px;">
                                 <div class="text-right col-md-12">
+                                    <button type="reset" wire:click.prevent="clearSettings" class="col-md-2 text-left btn btn-danger">Clear & Save</button>
+
                                     <a class="btn btn-link text-left"
                                        href="{{ route('settings.index') }}">{{ trans('button.cancel') }}</a>
                                     <button type="submit" {{$isDisabled}} class="btn btn-primary"><i
                                                 class="fas fa-check icon-white"
-                                                aria-hidden="true"></i> {{ trans('general.save') }}</button>
+                                                aria-hidden="true"></i> {{ $save_button }}</button>
                                 </div>
                             </div><!--box-footer-->
+                        </form>
+
                     </div> <!-- /box -->
                 </div> <!-- /.col-md-8-->
-        </div>
     </div>
-    </form>
+            </div>
+        </div>
 </div>
-