diff --git a/BlazorOpenApi/Controls/OperationControl.razor b/BlazorOpenApi/Controls/OperationControl.razor
index a17dfa9..65a9d5e 100644
--- a/BlazorOpenApi/Controls/OperationControl.razor
+++ b/BlazorOpenApi/Controls/OperationControl.razor
@@ -56,7 +56,7 @@
                         {
                             <div class="example">
                                 <h3 class="e-title">Example Data</h3>
-                                <pre class="e-item">@GenerateExampleData()</pre>
+                                <textarea type="text" readonly multiple rows="20" class="e-item">@GenerateExampleData()</textarea>
                             </div>
                         }
 
diff --git a/BlazorOpenApi/wwwroot/css/openapi-ui.css b/BlazorOpenApi/wwwroot/css/openapi-ui.css
index 111591e..7171b41 100644
--- a/BlazorOpenApi/wwwroot/css/openapi-ui.css
+++ b/BlazorOpenApi/wwwroot/css/openapi-ui.css
@@ -18,6 +18,10 @@
     font-family: monospace;
     font-size: var(--oa-font-small);
     color: lightseagreen;
+    background-color: var(--oa-bg-darkest);
+    overflow: auto;
+    field-sizing: content;
+    padding: 10px;
 }
 .e-name             {}
 .e-title            {}