diff --git a/src/pages/Home/_MapPage.scss b/src/pages/Home/_MapPage.scss
index 42aa713..cd79b10 100644
--- a/src/pages/Home/_MapPage.scss
+++ b/src/pages/Home/_MapPage.scss
@@ -215,7 +215,7 @@
   }
   @media (max-width: 500px) {
     left: calc(50% - 30px);
-    top: 60px !important;
+    top: 60px;
   }
 }
 
diff --git a/src/pages/Home/subcomponents/NewUserCity.js b/src/pages/Home/subcomponents/NewUserCity.js
index f666bba..6558e34 100644
--- a/src/pages/Home/subcomponents/NewUserCity.js
+++ b/src/pages/Home/subcomponents/NewUserCity.js
@@ -48,6 +48,7 @@ function NewUserCity(props) {
   const [travelScoreIndexArray, handleTravelScoreIndexArray] = useState([]);
   const [clickedCityArray, handleClickedCityArray] = useState([]);
   const [newLiveCity, handleNewLiveCity] = useState();
+  const [showSideMenu, handleSideMenu] = useState(false);
   const mapRef = useRef();
   const clusterPast = useRef();
   const clusterFuture = useRef();
@@ -778,14 +779,17 @@ function NewUserCity(props) {
 
   function showPopup() {
     handleActivePopup(!activePopup);
+    handleSideMenu(false);
   }
 
   function showSuggest() {
     handleSuggestedPopup(!suggestPopup);
+    handleSideMenu(false);
   }
 
   function showImport() {
     handleImportPopup(!importPopup);
+    handleSideMenu(false);
   }
 
   function handleContinents(contArray) {
@@ -830,6 +834,93 @@ function NewUserCity(props) {
   return (
     <>
       <div className="city-new-map-container">
+        <div
+          className="city-new-side-menu"
+          style={showSideMenu ? { width: "250px" } : { width: "40px" }}
+        >
+          {!showSideMenu ? (
+            <a className="opennav" onClick={() => handleSideMenu(true)}>
+              &raquo;
+            </a>
+          ) : (
+            <>
+              <a className="closebtn" onClick={() => handleSideMenu(false)}>
+                &times;
+              </a>
+              <div className="side-menu-container">
+                <div
+                  className="city-new-map-scorecard"
+                  id="scorecard-side-menu"
+                >
+                  <MapScorecard
+                    tripTimingCounts={tripTimingCounts}
+                    activeTimings={activeTimings}
+                    sendActiveTimings={handleActiveTimings}
+                  />
+                </div>
+                <div
+                  id="new-country-map-button-side-menu"
+                  className="sc-controls sc-controls-left"
+                  onClick={goToCountryMap}
+                >
+                  <span className="new-map-suggest">
+                    <span className="sc-control-label">Country map</span>
+                    <span id="map-change-icon" onClick={goToCountryMap}>
+                      <MapChangeIcon />
+                    </span>
+                  </span>
+                </div>
+                <div className="sc-controls" id="sc-controls-side-menu">
+                  {timingState !== 2 ? (
+                    <span className="new-map-suggest">
+                      <span className="sc-control-label">Tap cities</span>
+                      <span onClick={showSuggest}>
+                        <SuggestionsIcon />
+                      </span>
+                    </span>
+                  ) : null}
+                  <span className="new-map-clear">
+                    <span className="sc-control-label">Clear</span>
+                    <button
+                      onClick={() => handleDeletePrompt(true)}
+                      className="clear-map-button"
+                    ></button>
+                    <div
+                      className={
+                        deletePrompt ? "delete-prompt" : "delete-prompt-hide"
+                      }
+                    >
+                      Are you sure you wish to delete all cities?
+                      <span>
+                        <button className="button confirm" onClick={deleteAll}>
+                          Yes
+                        </button>
+                        <button
+                          className="button deny"
+                          onClick={() => handleDeletePrompt(false)}
+                        >
+                          No
+                        </button>
+                      </span>
+                    </div>
+                  </span>
+                  <span className="new-map-share">
+                    <span className="sc-control-label">Share/Save</span>
+                    <span onClick={showPopup}>
+                      <ShareIcon />
+                    </span>
+                  </span>
+                  <span className="new-map-import">
+                    <span className="sc-control-label">Import</span>
+                    <span onClick={showImport}>
+                      <ImportIcon />
+                    </span>
+                  </span>
+                </div>
+              </div>
+            </>
+          )}
+        </div>
         <div className="map-header-button">
           <div
             id="new-country-map-button"
@@ -966,7 +1057,7 @@ function NewUserCity(props) {
           sendActiveTimings={handleActiveTimings}
         />
       </div>
-      <span className="georney-score">
+      <span className="georney-score" id="new-map-georney-score">
         <span className="gs-title">{"GeorneyScore"}</span>
         <span className="gs-score">{Math.ceil(travelScore)}</span>
       </span>
diff --git a/src/pages/Home/subcomponents/_NewUserCity.scss b/src/pages/Home/subcomponents/_NewUserCity.scss
index e81b198..2ebd230 100644
--- a/src/pages/Home/subcomponents/_NewUserCity.scss
+++ b/src/pages/Home/subcomponents/_NewUserCity.scss
@@ -12,8 +12,9 @@
   font-family: "Segoe UI", sans-serif;
   font-size: 30px;
   color: rgb(248, 248, 252);
-  @media screen and (max-width: 450px) {
+  @media screen and (max-width: 520px) {
     flex-direction: column;
+    font-size: 24px;
   }
   select {
     background: none;
@@ -23,6 +24,10 @@
     color: rgb(248, 248, 252);
     margin-left: 4px;
     border-bottom: 1px solid rgb(248, 248, 252);
+    @media screen and (max-width: 520px) {
+      flex-direction: column;
+      font-size: 24px;
+    }
     option {
       background: #dee2e6;
       color: rgb(74, 89, 90);
@@ -254,17 +259,26 @@
         min-width: 600px;
         box-shadow: 0 3px 6px 2px rgba(black, 0.15);
         background: rgb(248, 248, 252);
-        @media screen and (max-width: 600px) {
+        @media screen and (max-width: 700px) {
           min-width: 500px;
         }
-        @media screen and (max-width: 450px) {
+        @media screen and (max-width: 600px) {
+          min-width: 450px;
+        }
+        @media screen and (max-width: 550px) {
           min-width: 400px;
           top: 80px;
         }
-        @media screen and (max-width: 320px) {
-          max-width: 300px;
+        @media screen and (max-width: 500px) {
+          min-width: 350px;
+        }
+        @media screen and (max-width: 450px) {
           min-width: 300px;
         }
+        @media screen and (max-width: 400px) {
+          max-width: 280px;
+          min-width: 280px;
+        }
         input {
           color: rgb(74, 89, 90) !important;
           min-width: 560px;
@@ -517,14 +531,19 @@
   }
 }
 
-.georney-score {
+#new-map-georney-score {
   position: absolute;
   bottom: 60px;
-  left: calc(50%);
+  left: calc(50% - 100px);
   display: flex;
   flex-direction: column;
   align-items: center;
-
+  @media screen and (max-height: 1200px) {
+    bottom: 80px;
+  }
+  @media screen and (max-height: 600px) {
+    display: none;
+  }
   .gs-title {
     color: #cfd4da;
     font-weight: 550;
@@ -546,3 +565,88 @@
     background: #f1f3f5;
   }
 }
+
+.city-new-side-menu {
+  height: 100%; /* 100% Full-height */
+  width: 250px; /* 0 width - change this with JavaScript */
+  position: fixed; /* Stay in place */
+  z-index: 1; /* Stay on top */
+  top: 0; /* Stay at the top */
+  left: 0;
+  background-color: rgba(#4F5867, 0.95); /* Black*/
+  overflow-x: hidden; /* Disable horizontal scroll */
+  padding-top: 60px; /* Place content 60px from the top */
+  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
+  z-index: 5000;
+  a {
+    padding: 8px 8px 8px 32px;
+    text-decoration: none;
+    font-size: 25px;
+    color: rgb(248, 248, 252);
+    display: block;
+    transition: 0.3s;
+  }
+  .opennav {
+    position: absolute;
+    top: 0;
+    right: 0px;
+    font-size: 48px;
+    margin-left: 50px;
+    cursor: pointer;
+  }
+  .closebtn {
+    position: absolute;
+    top: 0;
+    right: 25px;
+    font-size: 36px;
+    margin-left: 50px;
+    cursor: pointer;
+  }
+  .side-menu-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    #scorecard-side-menu {
+      position: relative;
+      display: flex;
+      top: 80px;
+      left: 25px;
+    }
+    #new-country-map-button-side-menu {
+      display: flex;
+      position: relative;
+      top: 140px;
+      left: 0px;
+      width: 60px;
+      height: 42px;
+      svg {
+        transform: none;
+      }
+      .sc-control-label {
+        top: 40px;
+        left: -14px;
+        color: rgb(228, 228, 232);
+      }
+    }
+    #sc-controls-side-menu {
+      display: flex;
+      flex-direction: column;
+      width: 80px;
+      height: 300px;
+      left: 85px;
+      top: 400px;
+    }
+    .delete-prompt {
+      right: -100px;
+      min-width: 240px;
+      span {
+        margin-top: 10px;
+      }
+    }
+  }
+  @media screen and (min-width: 900px) {
+    display: none;
+  }
+}