diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index dde92bd..a3511f3 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -2,3 +2,4 @@
 
 1. zetabug
 2. AnthonyHad
+3. akshayghatiki311
diff --git a/public/index.html b/public/index.html
index aa069f2..000f406 100644
--- a/public/index.html
+++ b/public/index.html
@@ -24,6 +24,12 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
+      crossorigin="anonymous"
+    />
     <title>React App</title>
   </head>
   <body>
@@ -39,5 +45,10 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
+      crossorigin="anonymous"
+    ></script>
   </body>
 </html>
diff --git a/src/components/Weather.js b/src/components/Weather.js
index c3685e6..ae52411 100644
--- a/src/components/Weather.js
+++ b/src/components/Weather.js
@@ -1,6 +1,18 @@
-import './Weather.css';
+import "./Weather.css";
+import { useState } from "react";
 
 const Weather = (props) => {
+  const [tempUnit, setTempUnit] = useState("C");
+  const [temp, setTemp] = useState(props.data.temp_c);
+  const toggleTemp = async () => {
+    if (tempUnit === "C") {
+      setTempUnit("F");
+      setTemp(props.data.temp_f);
+    } else if (tempUnit === "F") {
+      setTempUnit("C");
+      setTemp(props.data.temp_c);
+    }
+  };
   return (
     <div className="output-sec">
       <div className="location">
@@ -8,7 +20,21 @@ const Weather = (props) => {
       </div>
       <img src={props.data.condition.icon} alt="" />
       <div className="sky-status">{props.data.condition.text}</div>
-      <div className="temp">Temperature : {props.data.temp_c}°C</div>
+      <div className="temp mx-5">
+        Temperature : {temp}°{tempUnit}
+      </div>
+      <div className="d-flex">
+        <label className="form-check-label mx-2">°C</label>
+        <div className="form-check form-switch" onClick={toggleTemp}>
+          <input
+            className="form-check-input"
+            type="checkbox"
+            role="switch"
+            id="tempUnit"
+          />
+          <label className="form-check-label">°F</label>
+        </div>
+      </div>
       <div className="humidity">Humidity : {props.data.humidity}</div>
     </div>
   );