diff --git a/resources/views/forms/components/json-input.blade.php b/resources/views/forms/components/json-input.blade.php
index 6145a76..eed5139 100644
--- a/resources/views/forms/components/json-input.blade.php
+++ b/resources/views/forms/components/json-input.blade.php
@@ -1,10 +1,14 @@
 <x-dynamic-component
     :component="$getFieldWrapperView()"
     :field="$field"
+
 >
+    @php
+        ray($getStatePath())
+    @endphp
     <div
         x-data="{ state: $wire.{{ $applyStateBindingModifiers("\$entangle('{$getStatePath()}')") }} }"
-        class="relative rounded-md"
+        style="position: relative; border-radius: 0.375rem;"
         x-cloak
     >
         <div
@@ -13,6 +17,7 @@ class="relative rounded-md"
                 codeMirrorEditor = CodeMirror($refs.input, {
                     mode: 'application/json',
                     lineNumbers: {{ json_encode($getHasLineNumbers()) }},
+                    lineWrapping: {{ json_encode($getHasLineWrapping()) }},
                     autoCloseBrackets: {{ json_encode($getHasAutoCloseBrackets()) }},
                     viewportMargin: Infinity,
                     theme: '{{ $getHasDarkTheme() ? 'darcula' : 'default' }}',
@@ -52,8 +57,8 @@ class="relative rounded-md"
                     }
                 });
 
-                codeMirrorEditor.setSize(null, '100%');
-                codeMirrorEditor.setValue(state);
+                codeMirrorEditor.setSize('100%', '100%');
+                codeMirrorEditor.setValue(state ?? '{}');
 
                 setTimeout(function() {
                         codeMirrorEditor.refresh();
@@ -65,7 +70,6 @@ class="relative rounded-md"
             <div
                 wire:ignore
                 x-ref="input"
-                class="w-full"
             ></div>
         </div>
     </div>
diff --git a/resources/views/infolists/components/json-entry.blade.php b/resources/views/infolists/components/json-entry.blade.php
index 9e24eae..488f87e 100644
--- a/resources/views/infolists/components/json-entry.blade.php
+++ b/resources/views/infolists/components/json-entry.blade.php
@@ -1,6 +1,6 @@
 <x-dynamic-component :component="$getEntryWrapperView()" :entry="$entry">
     <div
-        class="relative rounded-md"
+        style="position: relative; border-radius: 0.375rem;"
         x-cloak
     >
         <div
@@ -10,6 +10,7 @@ class="relative rounded-md"
                     mode: 'application/json',
                     readOnly: true,
                     lineNumbers: {{ json_encode($getHasLineNumbers()) }},
+                    lineWrapping: {{ json_encode($getHasLineWrapping()) }},
                     autoCloseBrackets: {{ json_encode($getHasAutoCloseBrackets()) }},
                     viewportMargin: Infinity,
                     theme: '{{ $getHasDarkTheme() ? 'darcula' : 'default' }}',
@@ -50,7 +51,7 @@ class="relative rounded-md"
                 });
 
                 codeMirrorEditor.setSize(null, '100%');
-                codeMirrorEditor.setValue({{ json_encode($getState()) }});
+                codeMirrorEditor.setValue({{ json_encode($getState()) }} ?? '{}');
 
                 setTimeout(function() {
                         codeMirrorEditor.refresh();
@@ -60,7 +61,6 @@ class="relative rounded-md"
             <div
                 wire:ignore
                 x-ref="input"
-                class="w-full"
             ></div>
         </div>
     </div>
diff --git a/src/Concerns/HasLineWrapping.php b/src/Concerns/HasLineWrapping.php
new file mode 100644
index 0000000..8a64c4b
--- /dev/null
+++ b/src/Concerns/HasLineWrapping.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace CodebarAg\FilamentJsonField\Concerns;
+
+use Closure;
+
+trait HasLineWrapping
+{
+    protected bool|Closure $hasLineWrapping = true;
+
+    public function lineWrapping(bool|Closure $condition = true): static
+    {
+        $this->hasLineWrapping = $condition;
+
+        return $this;
+    }
+
+    public function getHasLineWrapping(): bool
+    {
+        return (bool) $this->evaluate($this->hasLineWrapping);
+    }
+}
diff --git a/src/Forms/Components/JsonInput.php b/src/Forms/Components/JsonInput.php
index d557591..aabcc27 100644
--- a/src/Forms/Components/JsonInput.php
+++ b/src/Forms/Components/JsonInput.php
@@ -6,6 +6,7 @@
 use CodebarAg\FilamentJsonField\Concerns\HasDarkTheme;
 use CodebarAg\FilamentJsonField\Concerns\HasFoldingCode;
 use CodebarAg\FilamentJsonField\Concerns\HasLineNumbers;
+use CodebarAg\FilamentJsonField\Concerns\HasLineWrapping;
 use Filament\Forms\Components\Concerns;
 use Filament\Forms\Components\Field;
 
@@ -16,6 +17,7 @@ class JsonInput extends Field
     use HasDarkTheme;
     use HasFoldingCode;
     use HasLineNumbers;
+    use HasLineWrapping;
 
     protected string $view = 'filament-json-field::forms.components.json-input';
 }
diff --git a/src/Infolists/Components/JsonEntry.php b/src/Infolists/Components/JsonEntry.php
index f66781d..85cfff8 100644
--- a/src/Infolists/Components/JsonEntry.php
+++ b/src/Infolists/Components/JsonEntry.php
@@ -6,6 +6,7 @@
 use CodebarAg\FilamentJsonField\Concerns\HasDarkTheme;
 use CodebarAg\FilamentJsonField\Concerns\HasFoldingCode;
 use CodebarAg\FilamentJsonField\Concerns\HasLineNumbers;
+use CodebarAg\FilamentJsonField\Concerns\HasLineWrapping;
 use Filament\Infolists\Components\Entry;
 
 class JsonEntry extends Entry
@@ -14,6 +15,7 @@ class JsonEntry extends Entry
     use HasDarkTheme;
     use HasFoldingCode;
     use HasLineNumbers;
+    use HasLineWrapping;
 
     protected string $view = 'filament-json-field::infolists.components.json-entry';
 }