diff --git a/index.html b/index.html
index db7a3a7..e0146fa 100644
--- a/index.html
+++ b/index.html
@@ -92,18 +92,18 @@
 
 					<div class='header' id='weatherSettingsHeader'>
 						<div class='headerIcon' id='weatherSettingsHeaderIcon'></div>
-						<label for='apiBox' class='headerLabel' id='weatherSettingsHeaderLabel'>Weather Settings</label>
+						<label for='apiKeySet' class='headerLabel' id='weatherSettingsHeaderLabel'>Weather Settings</label>
 					</div>
 
 					<div id='weatherSettingsContainer'>
 						<div class='weatherSettingsGroups' id='weatherSettingsAPIKey'>
-							<label for='apiBox' class='weatherSettingsLabels'>API Key</label>
-							<input type='text' class='weatherSettingsInputs' id='apiBox' autocomplete='off' placeholder='API KEY'/>
+							<label for='apiKeySet' class='weatherSettingsLabels'>API Key</label>
+							<input type='text' class='weatherSettingsInputs' id='apiKeySet' autocomplete='off' placeholder='API KEY'/>
 						</div>
 
 						<div class='weatherSettingsGroups'  id='weatherSettingsCityID'>
-							<label for='cityBox' class='weatherSettingsLabels'>City ID</label>
-							<input type='text' class='weatherSettingsInputs' id='cityBox' autocomplete='off' placeholder='City ID'/>
+							<label for='cityIDSet' class='weatherSettingsLabels'>City ID</label>
+							<input type='text' class='weatherSettingsInputs' id='cityIDSet' autocomplete='off' placeholder='City ID'/>
 						</div>
 
 						<div class='weatherSettingsGroups' id='weatherSettingsUnitsSelect'>
diff --git a/js/weather-settings.js b/js/weather-settings.js
index e39e8d3..c05d445 100644
--- a/js/weather-settings.js
+++ b/js/weather-settings.js
@@ -8,8 +8,8 @@ class WeatherSettings {
 		this._cityID = '';
 		this._units = '';
 
-		this._apiBox = document.querySelector('#apiBox');
-		this._cityBox = document.querySelector('#cityBox');
+		this._apiKeySet = document.querySelector('#apiKeySet');
+		this._cityIDSet = document.querySelector('#cityIDSet');
 
 		this._weatherSelectUnits = document.querySelector('#weatherSelectUnits');
 
@@ -38,15 +38,15 @@ class WeatherSettings {
 
 	// Reset textboxes
 	_deleteWeatherSettingsValue = () => {
-		this._apiBox.value = '';
-		this._cityBox.value = '';
+		this._apiKeySet.value = '';
+		this._cityIDSet.value = '';
 		this._weatherSelectUnits.value = 'metric';
 	}
 
 	// Update textbox placeholders
 	_updateWeatherSettingsPlaceholder = () => {
-		this._apiBox.placeholder = this._appID;
-		this._cityBox.placeholder = this._cityID;
+		this._apiKeySet.placeholder = this._appID;
+		this._cityIDSet.placeholder = this._cityID;
 		this._weatherSelectUnits.value = this._units;
 	}
 
@@ -77,8 +77,8 @@ class WeatherSettings {
 
 	_weatherApplyOnClickEvent = e => {
 		this._applyWeatherSettings(
-			this._apiBox.value || this._apiBox.placeholder,
-			this._cityBox.value || this._cityBox.placeholder,
+			this._apiKeySet.value || this._apiKeySet.placeholder,
+			this._cityIDSet.value || this._cityIDSet.placeholder,
 			this._weatherSelectUnits.options[this._weatherSelectUnits.selectedIndex].value
 		);
 		this._updateWeatherSettings();