diff --git a/index.html b/index.html
index a7333498a..2a211fa63 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,11 @@
     <link rel="stylesheet" href="styles/index.css">
     <!------------- Font Awesome ------------>
     <script src="https://kit.fontawesome.com/dff1440c2f.js" crossorigin="anonymous"></script>
+
+    <!------------- Fonts ------------------->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
 </head>
 <body>
     <!------------- Header/ Search Box ------------>
@@ -36,7 +41,7 @@ <h1 id="temp">70°</h1>
                 <i class="fa-solid fa-arrow-up fa-xl" id="arrow-up" ></i>
                 <i class="fa-solid fa-arrow-down fa-xl" id="arrow-down"></i>
             </div>
-            <div class="fc">F<span id='tempToggle'><i id="toggle" class="fa-solid fa-xl fa-toggle-off"></i></span>C</div>
+            <div class="fc">°F<span id='tempToggle'><i id="toggle" class="fa-solid fa-xl fa-toggle-off"></i></span>°C</div>
         </div>
         <!-- </div> -->
         </section>
@@ -46,17 +51,16 @@ <h1 id="temp">70°</h1>
     <script src="src/index.js"></script>
 </body>
 <!------------- Sky Section ------------>
-<footer class="sky-container">
-<section >
+<footer id="sky-container">
+<section>
     <label for="sky">Sky:</label>
 
-    <select name="sky" id="cars">
+    <select name="sky" id="sky-select">
     <option value="sunny">Sunny</option>
     <option value="cloudy">Cloudy</option>
     <option value="rainy">Rainy</option>
     <option value="snowy">Snowy</option>
     </select>
-    <button id="sky-reset-btn">Reset</button>
 </section>
 </footer>
 </html>
\ No newline at end of file
diff --git a/src/images/cloudySky.jpeg b/src/images/cloudySky.jpeg
new file mode 100644
index 000000000..9d336d267
Binary files /dev/null and b/src/images/cloudySky.jpeg differ
diff --git a/src/images/rainSky.jpg b/src/images/rainSky.jpg
new file mode 100644
index 000000000..ba555e394
Binary files /dev/null and b/src/images/rainSky.jpg differ
diff --git a/src/images/snowySky.jpeg b/src/images/snowySky.jpeg
new file mode 100644
index 000000000..660d3c58c
Binary files /dev/null and b/src/images/snowySky.jpeg differ
diff --git a/src/images/sunnySky.jpeg b/src/images/sunnySky.jpeg
new file mode 100644
index 000000000..7ee253bc0
Binary files /dev/null and b/src/images/sunnySky.jpeg differ
diff --git a/src/index.js b/src/index.js
index de663142a..482e36d25 100644
--- a/src/index.js
+++ b/src/index.js
@@ -8,9 +8,10 @@ const state = {
   lat: 32.7762719,
   lon: -96.7968559,
   isF: true,
+  skyBackground: 'url(../src/images/sunnySky.jpeg)',
 };
 
-// Default Values
+//Default Values
 const temp = document.getElementById('temp');
 temp.textContent = state.temp + '°';
 temp.style.color = state.tempColor;
@@ -21,19 +22,31 @@ backColor.style.backgroundImage = state.tempBackground;
 
 // Change the color of the temp
 const changetempColor = () => {
-  if (state.temp >= 80) {
+  if ((state.isF && state.temp >= 80) || (!state.isF && state.temp >= 27)) {
     state.tempColor = 'red';
     temp.style.color = state.tempColor;
-  } else if (state.temp > 69 && state.temp < 80) {
+  } else if (
+    (state.isF && state.temp < 80 && state.temp > 69) ||
+    (!state.isF && state.temp < 27 && state.temp > 20)
+  ) {
     state.tempColor = 'orange';
     temp.style.color = state.tempColor;
-  } else if (state.temp < 70 && state.temp > 59) {
+  } else if (
+    (state.isF && state.temp < 70 && state.temp > 59) ||
+    (!state.isF && state.temp < 20 && state.temp > 15)
+  ) {
     state.tempColor = 'yellow';
     temp.style.color = state.tempColor;
-  } else if (state.temp < 60 && state.temp > 49) {
+  } else if (
+    (state.isF && state.temp < 60 && state.temp > 49) ||
+    (!state.isF && state.temp < 15 && state.temp > 10)
+  ) {
     state.tempColor = 'green';
     temp.style.color = state.tempColor;
-  } else if (state.temp < 50) {
+  } else if (
+    (state.isF && state.temp < 50) ||
+    (!state.isF && state.temp < 10)
+  ) {
     state.tempColor = 'teal';
     temp.style.color = state.tempColor;
   }
@@ -41,19 +54,28 @@ const changetempColor = () => {
 
 // Change the background image by temp
 const changeBackImg = () => {
-  if (state.temp >= 80) {
+  if ((state.isF && state.temp >= 80) || (!state.isF && state.temp >= 27)) {
     state.tempBackground = 'url(../src/images/sunny.png)';
     backColor.style.backgroundImage = state.tempBackground;
     backColor.style.color = 'black';
-  } else if (state.temp < 80 && state.temp > 69) {
+  } else if (
+    (state.isF && state.temp < 80 && state.temp > 69) ||
+    (!state.isF && state.temp < 27 && state.temp > 20)
+  ) {
     state.tempBackground = 'url(../src/images/spring.png)';
     backColor.style.backgroundImage = state.tempBackground;
     backColor.style.color = 'white';
-  } else if (state.temp < 70 && state.temp > 59) {
+  } else if (
+    (state.isF && state.temp < 70 && state.temp > 59) ||
+    (!state.isF && state.temp < 20 && state.temp > 15)
+  ) {
     state.tempBackground = 'url(../src/images/cool.png)';
     backColor.style.backgroundImage = state.tempBackground;
     backColor.style.color = 'white';
-  } else if (state.temp < 60) {
+  } else if (
+    (state.isF && state.temp < 60) ||
+    (!state.isF && state.temp < 15)
+  ) {
     state.tempBackground = 'url(../src/images/snow.png)';
     backColor.style.color = 'white';
     backColor.style.backgroundImage = state.tempBackground;
@@ -83,9 +105,6 @@ const changeCity = (e) => {
   cityState.textContent = state.cityName;
 };
 
-// Reset city name by button
-const resetCity = () => {};
-
 // Get lat lon of city.
 const getLatLon = () => {
   const url = 'http://127.0.0.1:5000/';
@@ -99,6 +118,7 @@ const getLatLon = () => {
       const data = response.data[0];
       state.lat = data.lat;
       state.lon = data.lon;
+      getWeather();
     })
     .catch((error) => {
       console.log('error!', error.response.data);
@@ -107,8 +127,6 @@ const getLatLon = () => {
 
 // get weather data and update colors and background image
 const getWeather = () => {
-  getLatLon();
-
   const url = 'http://127.0.0.1:5000/';
   axios
     .get(url + 'weather', {
@@ -129,7 +147,7 @@ const getWeather = () => {
     });
 };
 
-// kelvin to F
+// kelvin to F or C
 const kToF = (k) => {
   if (state.isF) {
     const conversion = (k - 273.15) * (9 / 5) + 32;
@@ -140,6 +158,7 @@ const kToF = (k) => {
   }
 };
 
+// Toggle between F and C and change the button
 const setTempToggle = () => {
   state.isF = !state.isF;
   if (state.isF === false) {
@@ -151,30 +170,71 @@ const setTempToggle = () => {
     toggle.classList.remove('fa-toggle-on');
     toggle.classList.add('fa-toggle-off');
   }
-  getWeather();
+  getLatLon();
+};
+
+//change sky
+const changeSky = (e) => {
+  const skyImg = document.getElementById('sky-container');
+  const skyValue = document.getElementById('sky-select').value;
+
+  if (skyValue === 'sunny') {
+    state.skyBackground = 'url(../src/images/sunnySky.jpeg)';
+    skyImg.style.backgroundImage = state.skyBackground;
+  } else if (skyValue === 'rainy') {
+    console.log(skyValue);
+    state.skyBackground = 'url(../src/images/rainSky.jpg)';
+    skyImg.style.backgroundImage = state.skyBackground;
+  } else if (skyValue === 'snowy') {
+    state.skyBackground = 'url(../src/images/snowySky.jpeg)';
+    skyImg.style.backgroundImage = state.skyBackground;
+  } else if (skyValue === 'cloudy') {
+    state.skyBackground = 'url(../src/images/cloudySky.jpeg)';
+    skyImg.style.backgroundImage = state.skyBackground;
+  }
+};
+
+// Reset search button
+const resetSearchBtn = () => {
+  const searchBox = document.getElementById('search-box');
+  const cityState = document.getElementById('city-state');
+  searchBox.value = '';
+  state.cityName = 'Dallas';
+  cityState.textContent = state.cityName;
+  getLatLon();
 };
 
 // Event Handlers
 const registerEventHandlers = () => {
+  // Increse Decrease Arrows
   const upArrow = document.getElementById('arrow-up');
   upArrow.addEventListener('click', increaseTemp);
 
   const downArrow = document.getElementById('arrow-down');
   downArrow.addEventListener('click', decreaseTemp);
 
+  //Search for city and reset city button
   const searchCity = document.getElementById('search-box');
   searchCity.addEventListener('input', changeCity);
 
-  const searchResetBtn = document.getElementById('search-reset-btn');
-  searchResetBtn.addEventListener('click', resetCity);
+  const resetBtn = document.getElementById('search-reset-btn');
+  resetBtn.addEventListener('click', resetSearchBtn);
 
-  const cityResetBtn = document.getElementById('currentTempBtn');
-  cityResetBtn.addEventListener('click', getWeather);
+  //Get current temp
+  const cityTempBtn = document.getElementById('currentTempBtn');
+  cityTempBtn.addEventListener('click', getLatLon);
 
+  //Toggle btwn F/C
   const toggleFC = document.getElementById('tempToggle');
-  if (toggleFC) {
-    toggleFC.addEventListener('click', setTempToggle);
-  }
+  toggleFC.addEventListener('click', setTempToggle);
+
+  //Change sky
+  const skySelect = document.getElementById('sky-select');
+  skySelect.addEventListener('change', changeSky);
+
+  // Default Values that need DOM content loading
+  const skyContainer = document.getElementById('sky-container');
+  skyContainer.style.backgroundImage = state.skyBackground;
 };
 
 document.addEventListener('DOMContentLoaded', registerEventHandlers);
diff --git a/styles/index.css b/styles/index.css
index 9e4a5a846..4cc34f44d 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -3,6 +3,7 @@ body{
     grid-template: 20% 1fr 1fr 10%/ 1fr 1fr 1fr;
     margin: 0;
     padding: 0;
+    font-family: 'Monserrat', sans-serif;
 }
 
 header{
@@ -90,8 +91,6 @@ footer{
     padding: 15px 10px;
 }
 
-
-
 .fc {
     font-size: 1.5rem;
 }
@@ -124,12 +123,14 @@ footer{
 }
 
 /*----- sky ------*/
-.sky-container{
+#sky-container{
     background-color: palevioletred;
     padding-top: 5%;
     display: flex;
     justify-content: center;
     font-size: 1.5rem;
+    background-repeat: no-repeat;
+    background-size:cover;
 }
 
 .sky{
@@ -139,4 +140,8 @@ footer{
 
 .red{
     color: red;
+}
+
+.logo {
+    color: white;
 }
\ No newline at end of file
