diff --git a/clone.css b/clone.css
deleted file mode 100644
index 4915733..0000000
--- a/clone.css
+++ /dev/null
@@ -1,90 +0,0 @@
-html, body {
-  height: 100%;
-  width: 100%;
-  max-width: 1000px;
-  min-width: 550px;
-  margin:0 auto;
-  
-}
-
-#map, #pano{
-  border-style: solid;
-  border-width: 1px;
-}
-
-#map {
-  float: left;
-  height: 40%;
-  width: 50%;
-  border-top-left-radius: 5px;
-  border-bottom-left-radius: 5px;
-  border-right-width: .5px;
-
-}
-
-#pano {
-  float: left;
-  height: 40%;
-  width: 50%;
-  border-top-right-radius: 5px;
-  border-bottom-right-radius: 5px;
-  border-left-width: 0px;
-}
-
-
-#result{
-  height: 25%;
-  width: 90%;
-  border-radius: 30px;
-  border-style: solid;
-  border-width: 1px;
-}
-
-#location, #distance, #totaldistance{
-    font-size: 20px;
-    text-align: center;
-    font-family: Chalkduster, fantasy;
-}
-
-#location, #distance {
-  display: inline-block;
-  margin-left: 20px;
-}
-
-
-#check, #next{
-  font-size: 15px;
-  margin-top: 15px;
-  margin-bottom: 15px;
-  border-radius: 20px;
-  width: 200px;
-}
-
-#buttons, #info{
-  text-align: center;
-}
-
-h1{
-  text-align: center;
-  font-family: Chalkduster, fantasy;
-}
-
-#next{
-  margin-left: 100px;
-}
-
-
-#center{
-  text-align: center;
-}
-
-#totaldistance{
-  bottom: 0;
-  width: 100%;
-}
-
-#round {
-  font-family: Chalkduster, fantasy;
-  font-size: 15px;
-}
-
diff --git a/clone.js b/clone.js
index befcc80..670dbd3 100644
--- a/clone.js
+++ b/clone.js
@@ -1,152 +1,171 @@
-/* jshint esversion: 6 */
-/* jshint node: true */
+
 'use strict';
 
-
-//change ablility to hit check multiple times
 var map;
 var resultmap;
 var markers = [];
 var guess_coordinates = [];
 var true_location = [];
-var us_city_set = [4699066, 5809844, 4164138, 4440906,4894465, 2562501];
-var world_city_set =[3143244, 3599699, 1857910, 4853608, 323786];
+
 var accumulated_distance = 0;
 var current_name = '';
 var distance_from_guess = [];
 var check_count = 0;
 
+const minLat = 20.9975;
+const maxLat = 21.0509;
+const minLong = 105.7881;
+const maxLong = 105.9043;
+
 
 async function getData(url) {
   return fetch(url)
-      .then(response => response.json())
-      .catch(error => console.log(error));
+    .then(response => response.json())
+    .catch(error => console.log(error));
 }
 
-async function initialize() {
-    check_count = 0;
-    disableButton('check');
-    disableButton('next');
-    if(accumulated_distance == 0){
-      document.getElementById("totaldistance").innerHTML = 'Round Score: 0 Miles'; 
+
+function initialize() {
+  check_count = 0;
+  disableButton('check');
+  if (accumulated_distance == 0) {
+    document.getElementById("totaldistance").innerHTML = 'Round Score: 0 Miles';
+  }
+  document.getElementById("location").innerHTML = ' ';
+  document.getElementById("distance").innerHTML = ' ';
+
+  var lat = (Math.random() * (maxLat - minLat) + minLat);
+  var long = (Math.random() * (maxLong - minLong) + minLong);
+
+  var streetviewService = new google.maps.StreetViewService();
+  streetviewService.getPanoramaByLocation(new google.maps.LatLng(lat, long), 50,
+    function (data, status) {
+      if (status == google.maps.StreetViewStatus.OK) {
+
+      }
+      else { location.reload(); }
     }
-    document.getElementById("location").innerHTML = ' ';
-    document.getElementById("distance").innerHTML = ' '; 
+  );
 
 
-    var number = await Promise.all([getData(`https://api.openweathermap.org/data/2.5/weather?id=${randomLoc()}&APPID=2e35570eab59959f85e835dabdddc726`)]);
-    true_location = [];
-    true_location.push(number[0].coord.lat,number[0].coord.lon);
-    current_name = (number[0].name + ", " + number[0].sys.country);
-        
-    
-    var luther = {lat: 43.31613189259254, lng: -91.80256027484972};
-  
-    var map = new google.maps.Map(document.getElementById('map'), {
-      center: luther,
-      zoom: 1,
-      streetViewControl: false,
-    });
+  true_location.push(lat, long);
+  current_name = ("VIET NAM");
 
-    var rmap = new google.maps.Map(document.getElementById('result'), {
-        center: luther,
-        zoom: 2,
-        streetViewControl: false,
-        zoomControl: true,
-        zoomControlOptions: {
-            position: google.maps.ControlPosition.LEFT_CENTER
+
+  var luther = { lat: 21.0228148, lng: 105.7957638 };
+
+  var map = new google.maps.Map(document.getElementById('map'), {
+    center: luther,
+    zoom: 12,
+    streetViewControl: false,
+    gestureHandling: 'greedy'
+  });
+
+  var rmap = new google.maps.Map(document.getElementById('result'), {
+    center: { lat: lat, lng: long },
+    zoom: 12,
+    streetViewControl: false,
+    zoomControl: true,
+    zoomControlOptions: {
+      position: google.maps.ControlPosition.LEFT_CENTER
     },
-      });
+    gestureHandling: 'greedy'
+  });
 
-    
-    google.maps.event.addListener(map, 'click', function(event) {
-        placeMarker(event.latLng);
-        if (check_count == 0){
-          enableButton('check');
-          check_count += 1;
-        }
-     });
-     
-     function placeMarker(location) {
-         deleteMarkers();
-         guess_coordinates = [];
-         var marker = new google.maps.Marker({
-             position: location, 
-             map: map,
-         });
-         markers.push(marker);
-         guess_coordinates.push(marker.getPosition().lat(),marker.getPosition().lng());
-        }
 
-    
-    var panorama = new google.maps.StreetViewPanorama(
-        document.getElementById('pano'), {
-          position: {lat: number[0].coord.lat, lng: number[0].coord.lon},
-          pov: {
-            heading: 34,
-            pitch: 10
-          },
-          addressControl: false
-        });
-    map.setStreetView(panorama);
-  
+  google.maps.event.addListener(map, 'click', function (event) {
+    placeMarker(event.latLng);
+    if (check_count == 0) {
+      enableButton('check');
+      check_count += 1;
+    }
+  });
+
+  function placeMarker(location) {
+    deleteMarkers();
+    guess_coordinates = [];
+    var marker = new google.maps.Marker({
+      position: location,
+      map: map,
+    });
+    markers.push(marker);
+    guess_coordinates.push(marker.getPosition().lat(), marker.getPosition().lng());
+  }
+
+
+  var panorama = new google.maps.StreetViewPanorama(
+    document.getElementById('pano'), {
+    position: { lat: lat, lng: long },
+    pov: {
+      heading: 180,
+      pitch: 10
+    },
+    zoom: 1,
+    preference: google.maps.StreetViewPreference.NEAREST,
+    radius: 5000,
+    addressControl: false
+  });
+  map.setStreetView(panorama);
+
 }
 
-  function setMapOnAll(map) {
-    for (var i = 0; i < markers.length; i++) {
-      markers[i].setMap(map);
-    }
+function setMapOnAll(map) {
+  for (var i = 0; i < markers.length; i++) {
+    markers[i].setMap(map);
   }
+}
 
-  function clearMarkers() {
-    setMapOnAll(null);
-  }
+function clearMarkers() {
+  setMapOnAll(null);
+}
 
-  function showMarkers() {
-    setMapOnAll(map);
-  }
+function showMarkers() {
+  setMapOnAll(map);
+}
 
-  function deleteMarkers() {
-    clearMarkers();
-    markers = [];
-  }
+function deleteMarkers() {
+  clearMarkers();
+  markers = [];
+}
 
-function check(){
+function continueGame() {
+  var resModal = new bootstrap.Modal(document.getElementById('resultModal'));
+  resModal.hide();
+  location.reload();
+}
 
-    enableButton('next');
-    distance_from_guess = [];
-    var guess_error = (distance(guess_coordinates[0],guess_coordinates[1],true_location[0], true_location[1],'K'));
-    accumulated_distance += parseFloat(guess_error);
-    distance_from_guess = guess_error;
+function check() {
+  var resModal = new bootstrap.Modal(document.getElementById('resultModal'));
+  resModal.show();
+  distance_from_guess = [];
+  var guess_error = (distance(guess_coordinates[0], guess_coordinates[1], true_location[0], true_location[1], 'M'));
+  accumulated_distance += parseFloat(guess_error);
+  distance_from_guess = guess_error;
 
-    /*
-    console.log("Guessed Location: " + guess_coordinates);
-    console.log("Actual Location: " + true_location);
-    console.log("current guess error: " + guess_error);
-    console.log("total guess error: " + accumulated_distance);
-   */
-    var true_coords = {lat: true_location[0], lng: true_location[1]};
-    var guess_coords = {lat: guess_coordinates[0], lng: guess_coordinates[1]};
-    var result_map = new google.maps.Map(document.getElementById('result'), {
-    zoom: 2,
+  var true_coords = { lat: true_location[0], lng: true_location[1] };
+  var guess_coords = { lat: guess_coordinates[0], lng: guess_coordinates[1] };
+
+
+  var result_map = new google.maps.Map(document.getElementById('result'), {
+    zoom: 12,
     center: true_coords
   });
 
   var true_marker = new google.maps.Marker({
-    position: true_coords, 
+    position: true_coords,
     map: result_map,
     title: 'True Location',
     icon: {
-        url: "http://maps.google.com/mapfiles/ms/icons/green-dot.png"
-      }
+      url: "http://maps.google.com/mapfiles/ms/icons/green-dot.png"
+    }
   });
-    var infoWindow = new google.maps.InfoWindow({
-        content: current_name
-    })
+  var infoWindow = new google.maps.InfoWindow({
+    content: current_name
+  })
 
-    true_marker.addListener('click', function(){
-        infoWindow.open(result_map, true_marker);
-    });
+  true_marker.addListener('click', function () {
+    infoWindow.open(result_map, true_marker);
+  });
 
   var guess_marker = new google.maps.Marker({
     position: guess_coords,
@@ -159,7 +178,7 @@ function check(){
 
   var flightPlanCoordinates = [
     true_coords, guess_coords,
-    
+
   ];
   var lineSymbol = {
     path: 'M 0,-1 0,1',
@@ -171,10 +190,10 @@ function check(){
     path: flightPlanCoordinates,
     strokeOpacity: 0,
     icons: [{
-        icon: lineSymbol,
-        offset: '1',
-        repeat: '15px'
-      }],
+      icon: lineSymbol,
+      offset: '1',
+      repeat: '15px'
+    }],
   });
 
   flightPath.setMap(result_map);
@@ -183,70 +202,48 @@ function check(){
 }
 
 function distance(lat1, lon1, lat2, lon2, unit) {
-	if ((lat1 == lat2) && (lon1 == lon2)) {
-		return 0;
-	}
-	else {
-		var radlat1 = Math.PI * lat1/180;
-		var radlat2 = Math.PI * lat2/180;
-		var theta = lon1-lon2;
-		var radtheta = Math.PI * theta/180;
-		var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
-		if (dist > 1) {
-			dist = 1;
-		}
-		dist = Math.acos(dist);
-		dist = dist * 180/Math.PI;
-		dist = dist * 60 * 1.1515;
-		if (unit=="K") { dist = dist * 1.609344 }
-		if (unit=="N") { dist = dist * 0.8684 }
-		return (dist / 1.609).toFixed(1)
-    ;
-	}
-}
+  if ((lat1 == lat2) && (lon1 == lon2)) {
+    return 0;
+  } else {
+    var radlat1 = Math.PI * lat1 / 180;
+    var radlat2 = Math.PI * lat2 / 180;
+    var theta = lon1 - lon2;
+    var radtheta = Math.PI * theta / 180;
+    var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
 
-
-var index = -1;
-function randomLoc(){
-    index += 1
-    if (index > world_city_set.length -1){
-        index = 0
-        //console.log(index)
-        document.getElementById("totaldistance").innerHTML = 'Round Score: 0 Miles'; 
-        swal({
-            title: "Thanks For playing!",
-            icon: "success",
-            text: "Your Guessing was only off by " + accumulated_distance.toFixed(1) + " Miles This Round!"
-        });
-        accumulated_distance = 0;
-        document.getElementById('round').innerHTML = "Round:  1/" + world_city_set.length
-        document.getElementById("next").innerHTML= "Next Location";
-        return[world_city_set[0]]
-
-    }else if(index == world_city_set.length -1){
-        document.getElementById("next").innerHTML= "Finish Round";
-        document.getElementById('round').innerHTML = "Round: " + (index + 1) + "/" + world_city_set.length
-        return[world_city_set[index]]
-    }else{
-        //console.log(index);
-        document.getElementById("next").innerHTML= "Next Location";
-        document.getElementById('round').innerHTML = "Round: " + (index + 1) + "/" + world_city_set.length
-        return[world_city_set[index]]
+    if (dist > 1) {
+      dist = 1;
     }
-   
+
+    dist = Math.acos(dist);
+    dist = dist * 180 / Math.PI;
+    dist = dist * 60 * 1.1515;
+
+    if (unit == "K") {
+      dist = dist * 1.609344;
+    }
+
+    if (unit == "N") {
+      dist = dist * 0.8684;
+    }
+
+    // Convert miles to meters
+    dist = dist * 1609.34;
+
+    return dist.toFixed(1);
+  }
 }
 
-function display_location(){
-    document.getElementById("location").innerHTML = "Correct Location: " + current_name;
-    document.getElementById("distance").innerHTML = "Your Guess was " + distance_from_guess + " Miles away";
-    document.getElementById("totaldistance").innerHTML = "Round Score: " + accumulated_distance.toFixed(1) + " Miles";
+
+function display_location() {
+  document.getElementById("score").innerHTML = "Congratulation! Your distance is " + distance_from_guess + "m away.";
 }
 
-function disableButton(id){
+function disableButton(id) {
   document.getElementById(id).disabled = true;
 }
 
-function enableButton(id){
+function enableButton(id) {
   document.getElementById(id).disabled = false;
 }
 
diff --git a/donate.png b/donate.png
new file mode 100644
index 0000000..16ad44a
Binary files /dev/null and b/donate.png differ
diff --git a/index.html b/index.html
index 7e7f6e7..092532c 100644
--- a/index.html
+++ b/index.html
@@ -1,45 +1,79 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <title>GeoGuessr Clone</title>
-    <link rel="stylesheet" href="clone.css" type="text/css">
-  </head>
-  <h1> GeoGuessr Clone Project!</h1>
-  <div id = "round"></div>
-  <body>
 
-      <div id="map"></div>
-      <div id="pano"></div>
-      
-      <div id = 'buttons' class="container" >
-          <div >
-              <button type="button" class="btn btn-primary btn-lg btn btn-dark" onclick = check() id="check">Guess!</button>
-              <button type="button" class="btn btn-primary btn-lg btn btn-dark" onclick = initialize() id="next">Next Location</button>
-          </div>
-      </div>
-      <div class = 'container' id="result"></div>
+<head>
+  <meta charset="utf-8">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 
-      <div id = 'center' class="container">
-          <div id="location"></div>
-          <div id="distance"></div>
-      </div>
-  
-      <div id = 'info'>
-      <footer id="totaldistance"></footer>
-      </div>
-     
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
-    <script src="clone.js" type="text/javascript"></script>
-    <script type='text/javascript' src='config.js'></script>
-    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
-    <script async defer
-        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD6VIchvuZI1cVQSDdrDQ6MqgPgnMqZnC0&callback=initialize">
+  <title>GeoGuessr Clone</title>
+  <link rel="stylesheet" href="style.css" type="text/css">
+
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
+   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
+
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+  <script src="clone.js" type="text/javascript"></script>
+  <script type='text/javascript' src='config.js'></script>
+  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
+  <script async defer
+    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCKZ_CNbyEvx8T1ueUC1xYzyuSrtUeIycY&callback=initialize">
     </script>
 
-    
+  <link
+    href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Kode+Mono:wght@400..700&display=swap"
+    rel="stylesheet">
+</head>
+
+<body>
+  <img id="logo" src="logo.png" />
+  <div id="pano"></div>
+  <div id="play-panel">
+    <div id="map"></div>
+  </div>
+  <div id="play-action">
+    <button type="button" class="btn btn-warning btn-lg btn" onclick=check() id="check">Go Check</button>
+  </div>
 
 
-  </body>
+
+
+
+  <div id='center' class="container">
+    <div id="location"></div>
+    <div id="distance"></div>
+  </div>
+
+  <div id='info'>
+    <footer id="totaldistance"></footer>
+  </div>
+
+  <img id="qr" src="donate.png" />
+
+
+  <div class="modal fade" id="resultModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="staticBackdropLabel">RESULT</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <div class = 'container' id="result"></div>
+          <div id='distance'>
+            <p id="score"></p>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-primary"  onClick = continueGame()>Continue</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+
+
+</body>
+
 </html>
\ No newline at end of file
diff --git a/logo.png b/logo.png
new file mode 100644
index 0000000..730ebe8
Binary files /dev/null and b/logo.png differ
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..e443621
--- /dev/null
+++ b/style.css
@@ -0,0 +1,96 @@
+html, body {
+    height: 100%;
+    width: 100%;
+    margin:0 auto;
+
+  }
+
+#pano {
+    height: 100%;
+    width: 100%;
+    border-top-right-radius: 15px;
+    border-bottom-right-radius: 15px;
+    border-top-left-radius: 15px;
+    border-bottom-left-radius: 15px;
+    border-left-width: 0px;
+  } 
+
+#logo {
+    position: absolute; top: 5px; z-index: 99;
+    width: 15%;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    -webkit-filter: drop-shadow(5px 5px 5px #222);
+    filter: drop-shadow(5px 5px 5px #222);
+}
+
+#qr {
+    position: absolute; bottom: 5px; z-index: 99;
+    left: 5px;
+    width: 5%;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    -webkit-filter: drop-shadow(5px 5px 5px #222);
+    filter: drop-shadow(5px 5px 5px #222);
+}
+  
+#map {
+    position: absolute; bottom: 10px; right: 10px; z-index: 99;
+    width: 25%;
+    height: 50%;
+    min-width: 500px;
+    
+}
+
+
+
+#infor {
+    position: absolute; top: 10px; right: 10px; z-index: 10;
+    width: 25%;
+    height: 50%;
+}
+
+#check{
+    position: absolute;
+    right: 10px; z-index: 99;
+    height: 50px;
+    bottom: 50%;
+    margin-bottom: 30px;
+    min-width: 500px;
+    width: 25%;
+    height: 50px;
+    display: block;
+    font-size: 20;
+    font-weight: bold;
+    font-family: "Kode Mono", monospace;
+    font-optical-sizing: auto;
+    font-weight: 800;
+    font-style: normal;
+}
+
+#resultModal {
+    font-size: 20;
+    font-weight: bold;
+    font-family: "Kode Mono", monospace;
+    font-optical-sizing: auto;
+    font-weight: 800;
+    font-style: normal;   
+}
+
+
+#result{
+    height: 200px;
+    width: 90%;
+    border-radius: 30px;
+    border-style: solid;
+    border-width: 1px;
+  }
+
+
+#score{
+    text-align: center;
+    font-size: 20;
+    padding-top: 10px;
+}
\ No newline at end of file