diff --git a/index.html b/index.html
index 18c202e..ade795f 100644
--- a/index.html
+++ b/index.html
@@ -18,7 +18,7 @@
     </nav>
 
     <div class="container">
-        <h1>Temperature Converter</h1>
+        <h1 class="Heading">Temperature Converter</h1>
         <div class="input-container">
             <select id="conversion-from-type" class="dropdown-box">
                 <option value="Fahrenheit">Fahrenheit</option>
@@ -26,19 +26,20 @@ <h1>Temperature Converter</h1>
                 <option value="Kelvin">Kelvin</option>
                 <option value="Rankine">Rankine</option>
             </select> 
-            <span id="to">to</span>
+            <span id="to">TO</span>
             <select id="conversion-to-type" class="dropdown-box">
                 <option value="Fahrenheit">Fahrenheit</option>
                 <option value="Celsius" selected>Celsius</option>
                 <option value="Kelvin">Kelvin</option>
                 <option value="Rankine">Rankine</option>
             </select>
+        </div>
             <input type="number" id="temperature" placeholder="Enter temperature in Fahrenheit">
             <button id="convert">Convert</button>
             <div class="result">
                 <p id="result-text"></p>
             </div>
-        </div>
+      
 
     </div>
     <script src="script.js"></script>
diff --git a/script.js b/script.js
index 4c62eb7..c4a431e 100644
--- a/script.js
+++ b/script.js
@@ -76,3 +76,5 @@ light.addEventListener('click', () => {
   document.body.style.color = 'black';
   document.body.style.transition = 'ease-out 0.5s';
 });
+
+
diff --git a/styles.css b/styles.css
index a380e58..04320ad 100644
--- a/styles.css
+++ b/styles.css
@@ -30,6 +30,9 @@ body {
     margin-top: 50px;
     color: black;
 }
+.Heading{
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
 
 .container:hover {
     background-color: #c5cccf;
@@ -47,7 +50,7 @@ h1 {
 }
 
 .input-container {
-    margin-top: 20px;
+    margin-top: 30px;
     margin-left: 20px;
     margin-right: 20px;
     margin-bottom: 20px;
@@ -60,22 +63,23 @@ label {
 }
 
 input[type="number"] {
-    width: 100%;
-    padding: 10px;
-    margin-top: 5px;
+    /* width: 100%; */
+    padding: 15px;
+    margin-top: 10px;
     border: 2px solid #ccc;
-    border-radius: 5px;
+    border-radius: 10px;
 }
 
 button {
     background-color: #007BFF;
     color: #fff;
     border: none;
-    padding: 10px 20px;
+    padding: 15px 20px;
     cursor: pointer;
     margin-top: 10px;
-    border-radius: 5px;
+    border-radius: 10px;
     transition: background-color 0.3s, transform 0.2s;
+    
 }
 
 button:hover {
@@ -88,8 +92,12 @@ button:hover {
     font-weight: bold;
     font-size: 18px;
     color: rgb(7, 0, 7);
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    
 }
 
+
+
 @media (max-width: 768px) {
     h1 {
         font-size: 24px;
@@ -103,8 +111,15 @@ button:hover {
 }
 
 .dropdown-box {
-    height: 30px;
+    height: auto;
     border-radius: 3px;
+    padding:10px;
+    text-align:left;
+    background-color: gray;
+    color:white;
+    font-size: 16px;
+
+    
 }
 
 .no-display{
@@ -112,4 +127,10 @@ button:hover {
 }
 #dark,#light{
     cursor: pointer;
+    font-size: 40px;
+}
+#to{
+    margin-left: 6px;
+    margin-right:6px;
+    font-weight: bold;
 }
\ No newline at end of file