diff --git a/data/interfaces/default/css/plexpy.css b/data/interfaces/default/css/plexpy.css
index 76219f05..fc6ec12e 100644
--- a/data/interfaces/default/css/plexpy.css
+++ b/data/interfaces/default/css/plexpy.css
@@ -3059,6 +3059,9 @@ a:hover .overlay-refresh-image:hover {
 #plex-log-levels label {
     margin-bottom: 0;
 }
-#api_key.form-control[disabled] {
+#api_key.form-control[readonly] {
     background-color: #555;
+}
+#api_key.form-control[readonly]:focus {
+    background-color: #fff;
 }
\ No newline at end of file
diff --git a/data/interfaces/default/settings.html b/data/interfaces/default/settings.html
index 3092de3d..a48d34c1 100644
--- a/data/interfaces/default/settings.html
+++ b/data/interfaces/default/settings.html
@@ -541,7 +541,7 @@
                             <div class="row">
                                 <div class="col-md-6">
                                     <div class="input-group">
-                                        <input class="form-control" type="text" name="api_key" id="api_key" value="${config['api_key']}" size="20" disabled>
+                                        <input class="form-control" type="text" name="api_key" id="api_key" value="${config['api_key']}" size="20" readonly>
                                         <span class="input-group-btn">
                                             <button class="btn btn-form" type="button" id="generate_api">Generate</button>
                                         </span>