some Changes

public/styles/sass/_base.scss

@@ -42,3 +42,6 @@ body {
   font-family: "Merienda", sans-serif;
   background: $primaryColor;
 }
+a {
+  text-decoration: none;
+}

public/styles/sass/page/_play.scss

@@ -13,14 +13,15 @@ body {
   @extend %flexbox;
   width: 100%;
   padding: 5px;
-  padding-top: 1rem;
+  padding-top: 0.3rem;
   position: absolute;
   top: 0;
   z-index: 10;
   .user-click-counter {
     border: 1px solid $scrollBarColor;
     background: $citiesCardBorder;
     padding: 1rem;
+    padding-bottom: 0;
     border-radius: 5px;
     color: $greyColor;
     width: 100%;
@@ -39,6 +40,38 @@ body {
       text-align: center;
       background: $primaryColor;
     }
+
+    .info {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-top: 10px;
+      @media screen and (max-width: 400px) {
+        // display: block;
+        flex-direction: column;
+      }
+      img {
+        width: 20px;
+        object-fit: contain;
+        margin-left: 10px;
+      }
+      .item {
+        cursor: pointer;
+        margin: 2px;
+        background: $greyColor;
+        border: 1px solid $scrollBarColor;
+        color: $cardColor;
+        padding: 2px;
+        border-radius: 3px;
+        display: flex;
+        align-items: center;
+        transition: 200ms;
+        &:hover {
+          background: darken($greyColor, 10%);
+          transform: scale(1.03);
+        }
+      }
+    }
   }
 }
 

views/play.ejs

@@ -18,7 +18,21 @@
         <div class="user-click-counter">
             <h1 id="city"></h1>
             <h1 id="userClicks">0</h1>
+
+            <div class="info">
+                <div class="item change-my-city">
+                    <small>Change your city</small>
+                    <img src="images/icons/change.svg" alt="change icon svg">
+                </div>
+                <a href="#">
+                    <div class="item view-on-github">
+                        <small>View on github</small>
+                        <img src="images/icons/github.svg" alt="github svg icon">
+                    </div>
+                </a>
+            </div>
         </div>
+
     </div>
 
     <div class="main-image"></div>
@@ -84,6 +98,13 @@
 
         let topCity = document.querySelector('#top-city');
         let theCityName = document.querySelector('.theCityName');
+
+        let changeTheCity = document.querySelector('.change-my-city');
+        changeTheCity.addEventListener('click', () => {
+            localStorage.clear()
+            document.location.reload()
+        })
+
         userCityName.innerText = data.userCity
         topCity.innerText = theCityName.innerText