diff --git a/composer.json b/composer.json
index fb0940d..43c5e4c 100644
--- a/composer.json
+++ b/composer.json
@@ -1,6 +1,6 @@
 {
     "name": "fantismic/dynamic-settings",
-    "version": "1.0.0",
+    "version": "1.0.1",
     "description": "This package creates custom dynamic settings controlled by the user.",
     "license": "MIT",
     "keywords": [
diff --git a/src/DynSettings.php b/src/DynSettings.php
index c1f36a1..675b620 100644
--- a/src/DynSettings.php
+++ b/src/DynSettings.php
@@ -28,6 +28,16 @@ public function get($key) {
         return DynamicSetting::get($key);
     }
 
+    public function isKey($key) {
+        if (is_null($key) || empty($key)) return false;
+        
+        if ($this->getModel($key)) {
+            return true;
+        } else {
+            return false;
+        }
+    }
+
     public function getModel($key=null) {
         return DynamicSetting::getModelByKey($key);
     }
diff --git a/src/Livewire/DynamicSettingsComponent.php b/src/Livewire/DynamicSettingsComponent.php
index 9a96477..be020c7 100644
--- a/src/Livewire/DynamicSettingsComponent.php
+++ b/src/Livewire/DynamicSettingsComponent.php
@@ -8,13 +8,17 @@
 use Livewire\Attributes\Layout;
 use Livewire\Attributes\Validate;
 use Fantismic\DynSettings\Facades\DynSettings;
+use WireUi\Traits\WireUiActions;
 
 class DynamicSettingsComponent extends Component
 {
 
+    use WireUiActions;
+
     public $wire_ui = false;
     public $layout_mode;
     public $layout_path;
+    public $alert_array_format;
 
     public $settingsArr = [];
     public $settingsAll = [];
@@ -49,6 +53,7 @@ public function mount() {
         
         $this->layout_mode = config('dynsettings.layout_mode', 'component');
         $this->layout_path = config('dynsettings.layout_path', 'layouts.app');
+        $this->alert_array_format = config('dynsettings.alert_array_format', true);
 
         switch (strtolower(config('dynsettings.component_blade'))) {
             case 'wireui':
@@ -70,6 +75,17 @@ public function mount() {
 
     }
 
+    public function boot()
+    {
+        $this->withValidator(function ($validator) {
+            $validator->after(function ($validator) {
+                if (DynSettings::isKey($this->key)) {
+                    $validator->errors()->add('key', __('A key already exists with this value'));
+                }
+            });
+        });
+    }
+
     public function resetFields() {
         $this->allTypes = [];
         $this->allGroups = [];
@@ -135,7 +151,12 @@ public function showAddModalBtn() {
     public function addSetting() {
         $this->validate();
 
-        if (DynSettings::add($this->key,'empty',$this->type,$this->name,$this->group,$this->assoc,$this->description)) {
+        $value = 'n/v';
+        if ($this->type == 'bool') {
+            $value = false;
+        }
+
+        if (DynSettings::add($this->key,$value,$this->type,$this->name,$this->group,$this->assoc,$this->description)) {
             $this->message = 'Setting '.$this->name. ' has been created!';
             $this->showMessage = true;
             $this->resetFields();
diff --git a/src/resources/views/livewire/dynamic-settings-wire_ui.blade.php b/src/resources/views/livewire/dynamic-settings-wire_ui.blade.php
index 116fd3e..86d163c 100644
--- a/src/resources/views/livewire/dynamic-settings-wire_ui.blade.php
+++ b/src/resources/views/livewire/dynamic-settings-wire_ui.blade.php
@@ -1,5 +1,5 @@
 <section>
-  <div class="p-3 bg-slate-100 dark:bg-slate-800 rounded-lg ">
+  <div class="p-2 bg-slate-100 dark:bg-slate-800 rounded-lg ">
     {{-- Header --}}
     <div class="p-1 flex justify-between">
       {{-- Header title --}}
@@ -39,18 +39,18 @@
     {{-- Body --}}
     @foreach ($groups as $name => $group)
       {{-- Card body --}}
-      <div class="bg-slate-100 dark:bg-gray-700 rounded-lg pb-1 mb-3">
+      <div class="bg-slate-100 dark:bg-gray-700 rounded-lg">
 
         {{-- Card Content --}}
         <x-card title="{{ucFirst($name)}}">
           @foreach ($group as $name => $settings)
             {{-- Assoc card --}}
-            <x-card title="{{ucFirst($name)}}" class="border p-3 dark:border-gray-600">
+            <x-card title="{{ucFirst($name)}}" class="border p-1 mb-4 dark:border-gray-600">
               {{-- Setting item --}}
               <div class="space-y-4">
                 @foreach ($settings as $setting)
                   {{-- Setting item 1 --}}
-                  <div class="flex space-x-10 m-3">
+                  <div class="flex space-x-10">
                     {{-- Setting first column  --}}
                     <div class="w-1/2">
                       @switch($setting['type'])
@@ -65,11 +65,12 @@
                           <x-toggle lg label="{{$setting['name']}}" wire:model.live="settingsArr.{{$setting['key']}}" />
                           @break                               
                       @endswitch
+                      <div class="text-sm italic mt-1">{{$setting['key']}}</div>
                     {{-- End setting first column --}}
                     </div>
                     {{-- Setting second column --}}
                     <div class="w-1/2 place-content-center pl-5 dark:text-gray-200 border-l border-l-gray-300 dark:border-l-gray-600 text-sm italic">
-                      @if($setting['type'] == "array")
+                      @if($setting['type'] == "array" && $alert_array_format)
                       <b>Always comma separated values!</b><br>
                       @endif
                       {{$setting['description']}}
@@ -135,7 +136,7 @@
         <x-select 
           label="{{__('Choose a group')}}"
           :options="$allGroups"
-          wire:model="group"
+          wire:model.live="group"
           :searchable="true"
           :min-items-for-search="1"
         >
@@ -150,7 +151,7 @@
         <x-select 
           label="{{__('Choose an assoc')}}"
           :options="$allAssocs"
-          wire:model="assoc"
+          wire:model.live="assoc"
           :searchable="true"
           :min-items-for-search="1"
           >
@@ -173,5 +174,4 @@
     </x-card>
   </x-modal>
 
-</section> 
-{{-- <hr class="h-px my-3 bg-gray-200 border-0 dark:bg-gray-700"> --}}
\ No newline at end of file
+</section>
\ No newline at end of file
diff --git a/src/resources/views/livewire/dynamic-settings.blade.php b/src/resources/views/livewire/dynamic-settings.blade.php
index 7c8553d..93b3a9c 100644
--- a/src/resources/views/livewire/dynamic-settings.blade.php
+++ b/src/resources/views/livewire/dynamic-settings.blade.php
@@ -27,13 +27,13 @@
       </div>
       {{-- Buttons --}}
       <div>
-        <button wire:click="save" type="button" class="focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800">
+        <button wire:click="save" type="button" class="focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-emerald-800 dark:hover:bg-green-900 dark:focus:ring-green-900">
           {{__('Save')}}
         </button>
-        <button wire:click="showAddModalBtn" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
+        <button wire:click="showAddModalBtn" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-800 dark:hover:bg-blue-900 focus:outline-none dark:focus:ring-blue-900">
           {{__('Add')}}
         </button>
-        <button wire:click="showRemoveModalBtn" type="button" class="focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900">
+        <button wire:click="showRemoveModalBtn" type="button" class="focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-rose-800 dark:hover:bg-red-900 dark:focus:ring-red-900">
           {{__('Remove')}}
         </button>
       {{-- End buttons --}}
@@ -45,7 +45,7 @@
     {{-- Body --}}
     @foreach ($groups as $name => $group)
       {{-- Card body --}}
-      <div class="rounded-md bg-white dark:bg-slate-900 dark:bg-opacity-50 shadow pb-3 mb-3">
+      <div class="rounded-md bg-white dark:bg-slate-800 dark:bg-opacity-50 shadow pb-3 mb-3">
       {{-- Card title --}}
         <div class="p-3 border-b-2 border-b-gray-300 dark:border-b-gray-600 mb-4">
           <p class="font-medium text-lg whitespace-normal text-gray-700 dark:text-gray-400">{{ucFirst($name)}}</p>
@@ -54,7 +54,7 @@
         <div class="">
           @foreach ($group as $name => $settings)
             {{-- Assoc card --}}
-            <div class="rounded-md bg-white dark:bg-gray-800 shadow m-3 pb-3 border dark:border-gray-600">
+            <div class="rounded-md bg-white dark:bg-slate-800 shadow m-3 pb-3 border dark:border-gray-600">
               {{-- Assoc card title --}}
               <div class="p-3 border-b-2 border-b-gray-300 dark:border-b-gray-600 mb-4">
                 <p class="font-medium text-base whitespace-normal text-gray-700 dark:text-gray-400">{{ucFirst($name)}}</p>
@@ -70,14 +70,14 @@
                         @case('array')
                           <div>
                             <label for="{{$setting['key']}}" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{$setting['name']}}</label>
-                            <textarea wire:model="settingsArr.{{$setting['key']}}" id="{{$setting['key']}}" rows="2" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-indigo-600 focus:border-indigo-600 dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-indigo-500 dark:focus:border-indigo-500"></textarea>
+                            <textarea wire:model="settingsArr.{{$setting['key']}}" id="{{$setting['key']}}" rows="2" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-indigo-600 focus:border-indigo-600 dark:bg-slate-800 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-indigo-500 dark:focus:border-indigo-500"></textarea>
                           </div>
                           @break
                         @case('string')
                         @case('int')
                           <div class="mb-3">
                             <label for="{{$setting['key']}}" class="block ml-1 mb-1 text-sm font-medium text-gray-900 dark:text-white">{{$setting['name']}}</label>
-                            <input wire:model="settingsArr.{{$setting['key']}}" type="text" id="{{$setting['key']}}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-indigo-600 focus:border-indigo-600 block w-full p-2.5 dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-indigo-500 dark:focus:border-indigo-500" />
+                            <input wire:model="settingsArr.{{$setting['key']}}" type="text" id="{{$setting['key']}}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-indigo-600 focus:border-indigo-600 block w-full p-2.5 dark:bg-slate-800 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-indigo-500 dark:focus:border-indigo-500" />
                           </div>
                           @break
                         @case('bool')
@@ -90,11 +90,12 @@
                           </div>
                           @break                               
                       @endswitch
+                      <div class="text-sm italic mt-1 dark:text-gray-400">{{$setting['key']}}</div>
                     {{-- End setting first column --}}
                     </div>
                     {{-- Setting second column --}}
                     <div class="w-1/2 place-content-center pl-5 dark:text-gray-200 border-l border-l-gray-300 dark:border-l-gray-600 text-sm italic">
-                      @if($setting['type'] == "array")
+                      @if($setting['type'] == "array" && $alert_array_format)
                       <b>Always comma separated values!</b><br>
                       @endif
                       {{$setting['description']}}