diff --git a/backend/app.js b/backend/app.js
index 2bec675..59d02c8 100644
--- a/backend/app.js
+++ b/backend/app.js
@@ -1,11 +1,107 @@
-const express = require('express')
-const app = express()
-const port = 3000
+const express = require("express");
+const csv = require("csv-parser");
+const fs = require("fs");
+const path = require("path");
+const https = require("https");
+const csvtojson = require("csvtojson");
+const cors = require('cors')
 
-app.get('/', (req, res) => {
-  res.send('Hello World!')
-})
+const app = express();
+const port = 3000;
+
+const getTemperature =
+  "https://api.open-meteo.com/v1/forecast?latitude=52.52&longitude=13.41&hourly=temperature_2m";
+
+// app.use(express.static("public"));
+
+app.use(cors());
+
+app.get("/getcities", (req, res) => {
+  try {
+    const data = fs.readFileSync("./gb.csv", "utf8");
+
+    csvtojson()
+      .fromString(data)
+      .then((jsonObj) => {
+        console.log(jsonObj);
+        res.json(jsonObj);
+      });
+
+    //res.send('test');
+  } catch (err) {
+    console.error(err);
+    res.send(err);
+  }
+});
+
+app.get("/getTemperature", (req, res) => {
+  try {
+    const lat = req.query.lat;
+    const lng = req.query.lng;
+
+    const parsedUrl =
+      "https://api.open-meteo.com/v1/forecast?latitude=" +
+      lat +
+      "&longitude=" +
+      lng +
+      "&hourly=temperature_2m";
+
+    let request = https.get(parsedUrl, (response) => {
+      if (response.statusCode !== 200) {
+        console.error(
+          `Did not get an OK from the server. Code: ${response.statusCode}`
+        );
+        response.resume();
+        return;
+      }
+
+      let data = "";
+
+      response.on("data", (chunk) => {
+        data += chunk;
+      });
+
+      console.log(data);
+
+      response.on("close", () => {
+        console.log("Retrieved all data");
+        //console.log(JSON.parse(data));
+        res.send(data);
+      });
+    });
+
+    // console.log(req.query.lat);
+  } catch (err) {
+    console.error(err);
+    res.send(err);
+  }
+});
+
+// app.get("/getTemperature", (req, res) => {
+//   const cityName = req.query.cityName.toLowerCase();
+//   const csvFile = "gb.csv";
+//   //res.sendFile(path.join(__dirname, 'gb.csv'));
+
+//   // Read and parse the CSV file
+//   const csvData = [];
+//   fs.createReadStream(csvFile)
+//     .pipe(csv())
+//     .on("data", (row) => {
+//       const city = row.city.toLowerCase();
+//       if (city === cityName) {
+//         csvData.push(row);
+//       }
+//     })
+//     .on("end", () => {
+//       if (csvData.length > 0) {
+//         const temperature = csvData[0].temperature;
+//         res.send(`The current temperature in ${cityName} is ${temperature}°C.`);
+//       } else {
+//         res.status(404).send("City not found in the data file.");
+//       }
+//     });
+// });
 
 app.listen(port, () => {
-  console.log(`Example app listening on port ${port}`)
-})
\ No newline at end of file
+  console.log(`Server is running on http://localhost:${port}`);
+});
diff --git a/data/gb.csv b/backend/gb.csv
similarity index 100%
rename from data/gb.csv
rename to backend/gb.csv
diff --git a/backend/package-lock.json b/backend/package-lock.json
index c2bb3fa..d0afcea 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -9,9 +9,11 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
+        "cors": "^2.8.5",
+        "csv-parser": "^3.0.0",
+        "csvtojson": "^2.0.10",
         "express": "^4.18.2"
-      },
-      "devDependencies": {}
+      }
     },
     "node_modules/accepts": {
       "version": "1.3.8",
@@ -30,6 +32,11 @@
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
       "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg=="
     },
+    "node_modules/bluebird": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
+      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg=="
+    },
     "node_modules/body-parser": {
       "version": "1.20.1",
       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
@@ -105,6 +112,48 @@
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
       "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
     },
+    "node_modules/cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/csv-parser": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/csv-parser/-/csv-parser-3.0.0.tgz",
+      "integrity": "sha512-s6OYSXAK3IdKqYO33y09jhypG/bSDHPuyCme/IdEHfWpLf/jKcpitVFyOC6UemgGk8v7Q5u2XE0vvwmanxhGlQ==",
+      "dependencies": {
+        "minimist": "^1.2.0"
+      },
+      "bin": {
+        "csv-parser": "bin/csv-parser"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/csvtojson": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/csvtojson/-/csvtojson-2.0.10.tgz",
+      "integrity": "sha512-lUWFxGKyhraKCW8Qghz6Z0f2l/PqB1W3AO0HKJzGIQ5JRSlR651ekJDiGJbBT4sRNNv5ddnSGVEnsxP9XRCVpQ==",
+      "dependencies": {
+        "bluebird": "^3.5.1",
+        "lodash": "^4.17.3",
+        "strip-bom": "^2.0.0"
+      },
+      "bin": {
+        "csvtojson": "bin/csvtojson"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -321,6 +370,16 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/is-utf8": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
+      "integrity": "sha512-rMYPYvCzsXywIsldgLaSoPlw5PfoB/ssr7hY4pLfcodrA5M/eArza1a9VmTiNIBNMjOGr1Ow9mTyU2o69U6U9Q=="
+    },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
     "node_modules/media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -372,6 +431,14 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -385,6 +452,14 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/object-inspect": {
       "version": "1.12.3",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
@@ -557,6 +632,17 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/strip-bom": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
+      "integrity": "sha512-kwrX1y7czp1E69n2ajbG65mIo9dqvJ+8aBQXOGVxqwvNbsXdFM6Lq37dLAY3mknUwru8CfcCbfOLL/gMo+fi3g==",
+      "dependencies": {
+        "is-utf8": "^0.2.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/toidentifier": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
diff --git a/backend/package.json b/backend/package.json
index 1c56e99..aa6c0e8 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -1,5 +1,8 @@
 {
   "dependencies": {
+    "cors": "^2.8.5",
+    "csv-parser": "^3.0.0",
+    "csvtojson": "^2.0.10",
     "express": "^4.18.2"
   },
   "name": "backend",
diff --git a/frontend/index.html b/frontend/index.html
index b0083ab..fdeb0ed 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,19 +1,145 @@
 <!DOCTYPE html>
 <html lang="en">
-<meta charset="UTF-8">
-<title>Born Coding Challenge</title>
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<link rel="stylesheet" href="">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Born Coding Challenge</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <link rel="stylesheet" href="" />
+    <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=Quicksand:wght@300&display=swap"
+      rel="stylesheet"
+    />
+
+    <title>City Current Temperature</title>
 <style>
+*{
+padding: 0;
+margin: 0;
+font-family: "Quicksand", sans-serif;
+}
+
+body{
+background: #f3f2ef;
+display: flex;
+justify-content: center;
+flex-wrap: wrap;
+height: 100vh;
+width:100vw;
+}
+
+html,
+body{	
+font-size: 52.5%;
+height: 100%;
+}
+
+html{
+background : #eee;
+}
+
+.box{
+width: 20vw;
+height: 40vh;
+border-radius: 0.5rem;
+box-shadow: 0 0.2rem 3rem rgba(0, 0, 0, 0.2);
+background: #a5bbdd;
+position: relative;
+overflow: hidden;
+transform: translate3d(0, 0, 0);
+min-width: 20rem;
+min-height: 35rem;
+font-size: medium;
+text-align: center;
+margin-top: 100px;
+padding-top: 150px;
+border-radius: 10px;
+}
+.button{
+color: red;
+border-radius: .5px;
+border-color: aqua;
+background-color: #23ebd3;
+
+}
+
+
 </style>
-<script src=""></script>
 
-<body>
 
-    <div class="">
-        <h1>Current Temperature</h1>
+  </head>
+  <body>
+    <div class="box">
+      <h3>Current Temperature</h3>
+         <form action="/getTemperature" method="GET">
+        <label for="city">Select city in UK</label>
+        <!-- <input type="text" id="city" name="city" required /> -->
+        <br><br>
+        <select id="selectCity"></select>
+        <button class="button" type="submit" id="submit">Search</button>
+      </form>
+      <br>
+      <p id="temperature"></p>
     </div>
+    
+    <script
+      src="https://code.jquery.com/jquery-3.7.1.min.js"
+      integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
+      crossorigin="anonymous"
+    ></script>
+
+    
+
+    <script>
+      $(document).ready(function () {
+        console.log("ready!");
+
+        $.get(baseUrl + "getcities", function (json, status) {
+          var select = $("#selectCity");
+
+          $.each(json, function (index, json) {
+            select.append(
+              $("<option></option>")
+                .attr("value", json.lat + "," + json.lng)
+                .text(json.city)
+            );
+          });
+
+          $("#divSelect").html(select);
+        });
+      });
+
+      const submitBtn = document.getElementById("submit");
+
+      const baseUrl = "http://localhost:3000/";
+
+      submitBtn.addEventListener("click", getInfo);
+      async function getInfo(e) {
+        e.preventDefault();
+
+        var selectedValue = $("#selectCity").find(":selected").val();
+        var arr = selectedValue.split(",");
+        if (arr.length != 2) return;
+
+        var lat = arr[0];
+        var lng = arr[1];
 
-</body>
+        $("#temperature").html("");
 
-</html>
\ No newline at end of file
+        $.get(
+          baseUrl + "getTemperature?lat=" + lat + "&lng=" + lng,
+          function (json, status) {
+            var data = JSON.parse(json);
+            $("#temperature").html(
+              "<h2> Temperature is " + data.hourly.temperature_2m[0] + "</h2>"
+            );
+          }
+        );
+      }
+      
+      async function postInfo() {}
+    </script>
+    
+  </body>
+</html>