diff --git a/CHANGELOG.md b/CHANGELOG.md
index c81c06f..b7ab62a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Change Log
 
+## 4.2.0 - 2021-03-23
+
+- Added dark/light mode option.
+- Fixed display if html characters exist in ASN name.
+- Changed default for travel_time_junk option to off.
+
 ## 4.1.0 - 2020-11-12
 
 - Added daily message cache.
diff --git a/content/mailhops_details.xhtml b/content/mailhops_details.xhtml
index 4a849f4..de90203 100644
--- a/content/mailhops_details.xhtml
+++ b/content/mailhops_details.xhtml
@@ -5,10 +5,13 @@
     <meta charset="utf-8" />
     <title>MailHops</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.7/semantic.min.css" integrity="sha512-g/MzOGVPy3OQ4ej1U+qe4D/xhLwUn5l5xL0Fa7gdC258ZWVJQGwsbIR47SWMpRxSPjD0tfu/xkilTy+Lhrl3xg==" crossorigin="anonymous" />    
+    <link rel="stylesheet" href="/css/styles.css" />
 </head>
-<body>
-    <div class="popup-page" style="max-width: 400px;">
-        <div id="hop-message" class="ui message">
+<body id="mh-body">
+    <div class="popup-page" style="max-width: 405px;">
+        <div id="mh-pop-segment" class="ui segment">
+        
+        <div id="hop-message" class="ui message" style="width: 100%;">
             <div id="hop-message-header" class="header" style="text-align: center;"></div>
         </div>
         
@@ -23,6 +26,8 @@
             <button type="button" class="ui blue button" id="mh-reload-button">Reload</button>
             <button type="button" class="ui icon button" id="mh-options-button" style="float: right;">Options</button>        
         </div>
+        
+        </div>
     </div>
     
     <script src="/js/utils.js"></script>
diff --git a/content/preferences.html b/content/preferences.html
index 832c2d3..e96e4b1 100644
--- a/content/preferences.html
+++ b/content/preferences.html
@@ -5,7 +5,10 @@
     <meta charset="utf-8" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.7/semantic.min.css" integrity="sha512-g/MzOGVPy3OQ4ej1U+qe4D/xhLwUn5l5xL0Fa7gdC258ZWVJQGwsbIR47SWMpRxSPjD0tfu/xkilTy+Lhrl3xg==" crossorigin="anonymous" />
   </head>
-  <body style="padding: 20px; margin-bottom: 20px; height: 100%;">	
+  <body>	
+		
+		<div id="mh-main-segment" class="ui segment" style="padding: 20px; margin-bottom: 20px; height: 100%;">
+			
 		<img src="/images/mailhops-logo.png" width="300"/>
 				
 		<div class="ui divider"></div>
@@ -20,7 +23,7 @@
 			<p>There was a problem with your request.  Please try again.</p>
 		</div>
 		
-		<div class="ui two top attached unstackable steps">
+		<div id="mh-steps" class="ui two top attached unstackable steps">
 			<div id="step_one" class="step active">
 				<i class="key icon"></i>
 				<div class="content">
@@ -36,10 +39,10 @@
 				</div>
 			</div>			
 		</div>
-		<div class="ui attached segment">
+		<div id="mh-segment" class="ui attached segment">
 		
 		<div id="step_api_keys" class="content">
-				<form class="ui form">
+				<form id="mh-form" class="ui form">
 					<div class="field">
 						<label>MailHops API Key</label>
 						<input type="text" id="mailhop.api_key" placeholder="Enter your MailHops API Key"/>
@@ -77,10 +80,26 @@
 				</p>						
 			</div>
 				
-			<div id="step_settings" style="display: none;">				
+			<div id="step_settings" class="ui form" style="display: none;">		
 				<div class="grouped fields">
-					<label style="font-weight: bold;">Distance Unit</label>
 					<div class="field">
+						<label>Theme Unit</label>
+						<div class="ui radio checkbox">
+							<input type="radio" id="theme_dark" name="theme" value="dark" />
+							<label for="theme_dark">Dark</label>
+						</div>
+					</div>
+					<div class="field">
+						<div class="ui radio checkbox">
+							<input type="radio" id="theme_light" name="theme" value="light" />
+							<label for="theme_light">Light</label>
+						</div>
+					</div>
+				</div>
+				<br/>		
+				<div class="grouped fields">
+					<div class="field">
+						<label>Distance Unit</label>
 						<div class="ui radio checkbox">
 							<input type="radio" id="unit_mi" name="unit" value="mi" />
 							<label for="unit_mi">Miles and &deg;F</label>
@@ -94,10 +113,9 @@
 					</div>
 				</div>
 				<br/>
-				<div class="grouped fields">
-					<label style="font-weight: bold;">Travel Time Junk</label>
-					<p>Flag messages as junk if travel time takes longer than normal.</p>
+				<div class="grouped fields">					
 					<div class="field">
+						<label>Travel Time Junk</label>
 						<div class="ui radio checkbox">
 							<input type="radio" id="travel_time_junk_on" name="travel_time_junk" value="on" />
 							<label for="travel_time_junk_on">On</label>
@@ -109,6 +127,7 @@
 							<label for="travel_time_junk_off">Off</label>
 						</div>
 					</div>
+					<p>Flag messages as junk if travel time takes longer than normal.</p>
 				</div>
 				<div style="text-align: center; padding: 10px;">
 					<button class="ui primary button" id="mh-save-options">Save</button>					
@@ -117,6 +136,7 @@
 		</div>
 								
 		<script src="/js/preferences.js"></script>
-
+		</div>
+		
   </body>
 </html>
diff --git a/css/styles.css b/css/styles.css
new file mode 100644
index 0000000..42ac4a2
--- /dev/null
+++ b/css/styles.css
@@ -0,0 +1,7 @@
+#mh-body {
+  background-color: #FFF;
+}
+
+#mh-body.inverted {
+  background-color: #121212;
+}
\ No newline at end of file
diff --git a/js/mailhops.js b/js/mailhops.js
index 33a6db8..b40b145 100644
--- a/js/mailhops.js
+++ b/js/mailhops.js
@@ -10,16 +10,17 @@ const MailHops = {
   loading: false,
   previousId: null,
   options: {
-    version: 'MailHops Plugin 4.1.1',    
+    version: 'MailHops Plugin 4.2.0',    
     api_key: '',
     owm_key: '',
     lang: 'en',    
-    unit: 'mi',    
+    unit: 'mi',
+    theme: 'light',
     api_http: 'https://',    
     api_host: 'api.Mailhops.com',    
     debug: false,    
     country_tag: false,    
-    travel_time_junk: true,    
+    travel_time_junk: false,    
     country_filter: []    
   },
   message: {
@@ -66,7 +67,10 @@ MailHops.init = function(id, headers)
     }
     if (data.unit) {
       MailHops.options.unit = data.unit;
-    }   
+    }
+    if (data.theme) {
+      MailHops.options.theme = data.theme;
+    } 
     if (typeof data.travel_time_junk != 'undefined') {
       MailHops.options.travel_time_junk = data.travel_time_junk == 'on' ? true : false;
     } 
diff --git a/js/mailhops_details.js b/js/mailhops_details.js
index 608fd0c..d93008c 100644
--- a/js/mailhops_details.js
+++ b/js/mailhops_details.js
@@ -17,6 +17,7 @@ function updateContent(msg) {
   document.getElementById("mh-reload-button").addEventListener("click", async function () { 
     let data = await browser.storage.local.get('messages');
     if (data.messages && data.messages.list[msg.message.hash]) {
+      console.log(data.messages);
       delete data.messages.list[msg.message.hash];
       browser.storage.local.set({
         messages: data.messages
@@ -38,9 +39,33 @@ function updateContent(msg) {
   const route = msg.response.route || [];
   const sender = msg.message.sender || null;
   const unit = msg.options.unit || "mi";
+  const theme = msg.options.theme || "light";
   let client = null;
   let items = [];
   
+  // update theme
+  if (theme == "dark") {
+    if (!document.getElementById("hop-message").classList.contains("inverted")) {
+      document.getElementById('mh-body').classList.add('inverted');
+      document.getElementById('hop-message').classList.add('brown');
+      document.getElementById('hop-list').classList.add('inverted');
+      document.getElementById('mh-pop-segment').classList.add('inverted');
+      document.getElementById('mh-map-button').classList.add('inverted');
+      document.getElementById('mh-reload-button').classList.add('inverted');
+      document.getElementById('mh-options-button').classList.add('inverted');
+    }
+  } else {
+    if (document.getElementById("hop-message").classList.contains("inverted")) {
+      document.getElementById('mh-body').classList.remove('inverted');
+      document.getElementById('hop-message').classList.remove('brown');
+      document.getElementById('hop-list').classList.remove('inverted');
+      document.getElementById('mh-pop-segment').classList.remove('inverted');
+      document.getElementById('mh-map-button').classList.remove('inverted');
+      document.getElementById('mh-reload-button').classList.remove('inverted');
+      document.getElementById('mh-options-button').classList.remove('inverted');
+    }
+  }
+  
   for (var i = 0; i < route.length; i++) { 
     var header = 'Private';
     var icon = '/images/local.png';
@@ -72,9 +97,9 @@ function updateContent(msg) {
     if (route[i].host)          
       description += route[i].host;
     if (route[i].whois && route[i].whois.descr)          
-      description += route[i].whois.descr;
+      description += MailHopsUtils.htmlEncode(route[i].whois.descr);
     if (route[i].whois && route[i].whois.netname)          
-      description += route[i].whois.netname;
+      description += MailHopsUtils.htmlEncode(route[i].whois.netname);
     
     var weather = '';
     if (route[i].weather) {
@@ -85,7 +110,7 @@ function updateContent(msg) {
       
     var asn = '';
     if (route[i].asn) {
-      asn = '<br/>ASN Org: ' + route[i].asn.autonomous_system_organization;
+      asn = '<br/>ASN Org: ' + MailHopsUtils.htmlEncode(route[i].asn.autonomous_system_organization);
       asn += ' (<a href="https://dnschecker.org/asn-whois-lookup.php?query='+route[i].asn.autonomous_system_number+'" target="_blank" title="ASN Lookup">' + route[i].asn.autonomous_system_number + '</a>)'
     }
     
@@ -99,12 +124,7 @@ function updateContent(msg) {
       }
     }
     // append child
-    items.push('<div class="item">\
-    <div class="content">\
-    <div class="header"><img src="'+ icon + '" /> ' + header + weather +' <label class="ui circular label icon" style="float: right;">'+ (i + 1) +'</label></div>\
-    <div class="description">'+ description + asn + '</div>\
-    </div>\
-    </div>');    
+    items.push('<div class="item"><div class="content"><div class="header"><img src="'+ icon + '" /> ' + header + weather +' <label class="ui circular label icon" style="float: right;">'+ (i + 1) +'</label></div><div class="description">'+ description + asn + '</div></div></div>');    
   }
   // header
   document.getElementById('hop-message-header').innerHTML = `${route.length} Hops`;
diff --git a/js/preferences.js b/js/preferences.js
index 9a62260..d77fa90 100644
--- a/js/preferences.js
+++ b/js/preferences.js
@@ -2,6 +2,7 @@ const MailHopPreferences = {
   api_key: '', //api key
   valid_api_key: false,
   unit: 'mi',
+  theme: 'light',
   owm_key: '', //OpenWeatherMap.org api key
   
   init: async function(){
@@ -9,6 +10,8 @@ const MailHopPreferences = {
     this.api_key = document.getElementById("mailhop.api_key");
     this.owm_key = document.getElementById("mailhop.owm_key");
     
+    if (!this.api_key) return;
+    
     document.getElementById("mh-save").addEventListener("click", function (event) {
       event.preventDefault();
       event.stopPropagation();
@@ -60,14 +63,44 @@ const MailHopPreferences = {
         document.getElementById("unit_km").setAttribute('checked', 'checked');
     } else {
       document.getElementById("unit_mi").setAttribute('checked', 'checked');
-    }      
+    }
+    if (data.theme) {
+      if (data.theme == "dark")
+        document.getElementById("theme_dark").setAttribute('checked', 'checked');
+      else
+        document.getElementById("theme_light").setAttribute('checked', 'checked');
+    } else {
+      document.getElementById("theme_light").setAttribute('checked', 'checked');
+    }   
     if (typeof data.travel_time_junk != 'undefined') {
       if (data.travel_time_junk == 'on')
         document.getElementById("travel_time_junk_on").setAttribute('checked', 'checked');
       else
         document.getElementById("travel_time_junk_off").setAttribute('checked', 'checked');
     } else {
-      document.getElementById("travel_time_junk_on").setAttribute('checked', 'checked');
+      document.getElementById("travel_time_junk_off").setAttribute('checked', 'checked');
+    }
+    
+    if (data.theme && data.theme == "dark") {
+      if (!document.getElementById("mh-main-segment").classList.contains("inverted")) {
+        document.getElementById("mh-main-segment").classList.add("inverted");
+        document.getElementById("mh-steps").classList.add("inverted");
+        document.getElementById("mh-segment").classList.add("inverted");
+        document.getElementById("mh-form").classList.add("inverted");
+        document.getElementById("step_settings").classList.add("inverted");
+        document.getElementById("mh-save").classList.add("inverted");
+        document.getElementById("mh-save-options").classList.add("inverted");
+      }
+    } else {
+      if (document.getElementById("mh-main-segment").classList.contains("inverted")) {
+        document.getElementById("mh-main-segment").classList.remove("inverted");
+        document.getElementById("mh-steps").classList.remove("inverted");
+        document.getElementById("mh-segment").classList.remove("inverted");
+        document.getElementById("mh-form").classList.remove("inverted");
+        document.getElementById("step_settings").classList.remove("inverted");
+        document.getElementById("mh-save").classList.remove("inverted");
+        document.getElementById("mh-save-options").classList.remove("inverted");
+      }
     }
     
     await this.saveAPIKey(true);
@@ -98,10 +131,34 @@ const MailHopPreferences = {
       api_key: self.api_key.value.trim(),
       owm_key: self.owm_key.value.trim(),
       unit: document.querySelector('input[name="unit"]:checked').value,
+      theme: document.querySelector('input[name="theme"]:checked').value,
       travel_time_junk: document.querySelector('input[name="travel_time_junk"]:checked').value,
     });    
     if(!init)
-      document.getElementById("saved_message").style.display = 'block';    
+      document.getElementById("saved_message").style.display = 'block';
+    
+    this.theme = document.querySelector('input[name="theme"]:checked').value
+    if (this.theme == "dark") {
+      if (!document.getElementById("mh-main-segment").classList.contains("inverted")) {
+        document.getElementById("mh-main-segment").classList.add("inverted");
+        document.getElementById("mh-steps").classList.add("inverted");
+        document.getElementById("mh-segment").classList.add("inverted");
+        document.getElementById("mh-form").classList.add("inverted");
+        document.getElementById("step_settings").classList.add("inverted");
+        document.getElementById("mh-save").classList.add("inverted");
+        document.getElementById("mh-save-options").classList.add("inverted");
+      }
+    } else {
+      if (document.getElementById("mh-main-segment").classList.contains("inverted")) {
+        document.getElementById("mh-main-segment").classList.remove("inverted");
+        document.getElementById("mh-steps").classList.remove("inverted");
+        document.getElementById("mh-segment").classList.remove("inverted");
+        document.getElementById("mh-form").classList.remove("inverted");
+        document.getElementById("step_settings").classList.remove("inverted");
+        document.getElementById("mh-save").classList.remove("inverted");
+        document.getElementById("mh-save-options").classList.remove("inverted");
+      }
+    }
     return true;
   },
 
diff --git a/js/utils.js b/js/utils.js
index 7638420..862b6e3 100644
--- a/js/utils.js
+++ b/js/utils.js
@@ -192,5 +192,8 @@ getDistance: function(from, to, unit) {
       }
     }
     return null;
+  },
+  htmlEncode: function (text) {
+    return text.replace(/&/g, "&amp;").replace(/>/g, "&gt;").replace(/</g, "&lt;").replace(/"/g, "&quot;");
   }
 };
diff --git a/manifest.json b/manifest.json
index 92c263a..d72320b 100644
--- a/manifest.json
+++ b/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "__MSG_appName__",
   "description": "__MSG_appDesc__",
-  "version": "4.1.1",
+  "version": "4.2.0",
   "author": "Hopsware LLC",
   "developer": {
     "name": "Andrew Van Tassel",
