diff --git a/css/style.css b/css/style.css
index bd5e4de..30fa0b1 100644
--- a/css/style.css
+++ b/css/style.css
@@ -53,6 +53,7 @@ div.dt-container .dt-input {
 	max-width: 80%;
 	min-height: 200px;
 	max-height: 80%;
+	text-align: left;
 }
 .aaa-option-optimizer-popover pre {
 	padding: 10px;
@@ -62,7 +63,6 @@ div.dt-container .dt-input {
 	border: 1px solid #ccc;
 	background-color: #eee;
 	overflow: scroll;
-	text-align: left;
 	white-space: pre-wrap;
 	word-wrap: anywhere;
 }
diff --git a/src/class-admin-page.php b/src/class-admin-page.php
index da5c217..5425ec6 100644
--- a/src/class-admin-page.php
+++ b/src/class-admin-page.php
@@ -435,7 +435,7 @@ private function get_value_button( string $name, $value ): string {
 		<button class="aaa-option-optimizer-popover__close" popovertarget="' . $id . '" popovertargetaction="hide">X</button>' .
 		// translators: %s is the name of the option.
 		'<p><strong>' . sprintf( esc_html__( 'Value of %s', 'aaa-option-optimizer' ), '<code>' . esc_html( $name ) . '</code>' ) . '</strong></p>
-		<pre>' . esc_html( $string ) . '</pre>
+		<pre>' . htmlentities( $string, ENT_QUOTES | ENT_SUBSTITUTE ) . '</pre>
 		</div>';
 	}
 
diff --git a/src/class-rest.php b/src/class-rest.php
index fdccab5..8bde134 100644
--- a/src/class-rest.php
+++ b/src/class-rest.php
@@ -148,7 +148,7 @@ public function get_all_options() {
 			$output[] = [
 				'name'     => $option->option_name,
 				'plugin'   => $this->map_plugin_to_options->get_plugin_name( $option->option_name ),
-				'value'    => $option->option_value,
+				'value'    => htmlentities( $option->option_value, ENT_QUOTES | ENT_SUBSTITUTE ),
 				'size'     => number_format( strlen( $option->option_value ) / 1024, 2 ),
 				'autoload' => $option->autoload,
 				'row_id'   => 'option_' . $option->option_name,