diff --git a/Release/com.jk.weather.streamDeckPlugin b/Release/com.jk.weather.streamDeckPlugin
index e421115..e0e87f0 100644
Binary files a/Release/com.jk.weather.streamDeckPlugin and b/Release/com.jk.weather.streamDeckPlugin differ
diff --git a/Sources/com.jk.weather.sdPlugin/pi/main_pi.html b/Sources/com.jk.weather.sdPlugin/pi/main_pi.html
index 434843b..22da6e4 100644
--- a/Sources/com.jk.weather.sdPlugin/pi/main_pi.html
+++ b/Sources/com.jk.weather.sdPlugin/pi/main_pi.html
@@ -80,6 +80,21 @@
         </select>
       </div>
 
+      <div class="sdpi-item">
+        <div class="sdpi-item-label">Display city name</div>
+        <select
+          class="sdpi-item-value select"
+          id="displayCity"
+          onchange="updateSettings()"
+        >
+          <option value="0">Hide</option>
+          <option value="1">Show in top left</option>
+          <option value="2">Show in top right</option>
+          <option value="3">Show in bottom left</option>
+          <option value="4">Show in bottom right</option>
+        </select>
+      </div>
+
       <div class="sdpi-item">
         <button class="sdpi-item-value" onclick="openPage(getProviderUrl())">
           Get my API key
diff --git a/Sources/com.jk.weather.sdPlugin/pi/main_pi.js b/Sources/com.jk.weather.sdPlugin/pi/main_pi.js
index 4862c12..66ea097 100644
--- a/Sources/com.jk.weather.sdPlugin/pi/main_pi.js
+++ b/Sources/com.jk.weather.sdPlugin/pi/main_pi.js
@@ -42,6 +42,7 @@ function connectElgatoStreamDeckSocket(
       const payload = jsonObj.payload.settings;
       initiateElement("cityName", payload.cityName);
       initiateElement("frequency", payload.frequency, 0);
+      initiateElement("displayCity", payload.displayCity, 0);
       initiateElement("unit", payload.unit, "celsius");
     }
     if (jsonObj.event === "didReceiveGlobalSettings") {
@@ -68,6 +69,9 @@ function updateSettings() {
     payload.cityName = document.getElementById("cityName").value;
     payload.frequency = document.getElementById("frequency").value;
     payload.unit = document.getElementById("unit").value;
+    payload.displayCity = parseInt(
+      document.getElementById("displayCity").value
+    );
     const json = {
       event: "setSettings",
       context: uuid,
@@ -104,7 +108,7 @@ function openPage(site) {
 }
 
 function getProviderUrl() {
-  const provider = document.getElementById("provider").value || 'weatherApi';
+  const provider = document.getElementById("provider").value || "weatherApi";
   let url;
   switch (provider) {
     case "weatherApi":
diff --git a/Sources/com.jk.weather.sdPlugin/pi/sdpi.css b/Sources/com.jk.weather.sdPlugin/pi/sdpi.css
index 9ef7647..9f41ba3 100644
--- a/Sources/com.jk.weather.sdPlugin/pi/sdpi.css
+++ b/Sources/com.jk.weather.sdPlugin/pi/sdpi.css
@@ -33,24 +33,12 @@ body {
   -webkit-font-smoothing: antialiased;
 }
 
-mark {
-  background-color: var(--sdpi-bgcolor);
-  color: var(--sdpi-color);
-}
+
 
 .hidden {
   display: none;
 }
 
-hr,
-hr2 {
-  -webkit-margin-before: 1em;
-  -webkit-margin-after: 1em;
-  border-style: none;
-  background: var(--sdpi-background);
-  height: 1px;
-}
-
 hr2,
 .sdpi-heading {
   display: flex;
@@ -72,16 +60,6 @@ hr2,
   margin: 0px 16px;
 }
 
-hr2 {
-  height: 2px;
-}
-
-hr,
-hr2 {
-  margin-left: 16px;
-  margin-right: 16px;
-}
-
 .sdpi-item-value,
 option,
 input,
@@ -92,92 +70,10 @@ button {
   letter-spacing: var(--sdpi-letterspacing);
 }
 
-.win .sdpi-item-value,
-.win option,
-.win input,
-.win select,
-.win button {
-  font-size: 11px;
-  font-style: normal;
-  letter-spacing: inherit;
-  font-weight: 100;
-}
-
-.win button {
-  font-size: 12px;
-}
-
-::-webkit-progress-value,
-meter::-webkit-meter-optimum-value {
-  border-radius: 2px;
-}
-
-::-webkit-progress-bar,
-meter::-webkit-meter-bar {
-  border-radius: 3px;
-  background: var(--sdpi-background);
-}
-
-::-webkit-progress-bar:active,
-meter::-webkit-meter-bar:active {
-  border-radius: 3px;
-  background: #222222;
-}
-
-::-webkit-progress-value:active,
-meter::-webkit-meter-optimum-value:active {
-  background: #99f;
-}
-
-progress,
-progress.sdpi-item-value {
-  min-height: 5px !important;
-  height: 5px;
-  background-color: #303030;
-}
-
-progress {
-  margin-top: 8px !important;
-  margin-bottom: 8px !important;
-}
-
-.full progress,
-progress.full {
-  margin-top: 3px !important;
-}
-
-::-webkit-progress-inner-element {
-  background-color: transparent;
-}
-
-.sdpi-item[type="progress"] {
-  margin-top: 4px !important;
-  margin-bottom: 12px;
-  min-height: 15px;
-}
-
 .sdpi-item-child.full:last-child {
   margin-bottom: 4px;
 }
 
-.tabs {
-  display: flex;
-
-  border-bottom: 1px solid #d7dbdd;
-}
-
-.tab {
-  cursor: pointer;
-  padding: 5px 30px;
-  color: #16a2d7;
-  font-size: 9pt;
-  border-bottom: 2px solid transparent;
-}
-
-.tab.is-tab-selected {
-  border-bottom-color: #4ebbe4;
-}
-
 select {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -215,17 +111,6 @@ button {
   margin-right: 8px;
 }
 
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input[type="file"] {
-  border-radius: var(--sdpi-borderradius);
-  max-width: 220px;
-}
-
 option {
   height: 1.5em;
   padding: 4px;
@@ -290,33 +175,6 @@ meter.sdpi-item-value {
   padding-left: 4px;
 }
 
-dl,
-ul,
-ol {
-  -webkit-margin-before: 0px;
-  -webkit-margin-after: 4px;
-  -webkit-padding-start: 1em;
-  max-height: 90px;
-  overflow-y: scroll;
-  cursor: pointer;
-  user-select: none;
-}
-
-table.sdpi-item-value,
-dl.sdpi-item-value,
-ul.sdpi-item-value,
-ol.sdpi-item-value {
-  -webkit-margin-before: 4px;
-  -webkit-margin-after: 8px;
-  -webkit-padding-start: 1em;
-  width: var(--sdpi-width);
-  text-align: center;
-}
-
-table > caption {
-  margin: 2px;
-}
-
 .list,
 .sdpi-item[type="list"] {
   align-items: baseline;
@@ -344,7 +202,6 @@ table > caption {
   content: "";
 }
 
-.sdpi-test,
 .sdpi-item-value {
   flex: 1 0 0;
   /* flex-grow: 1;
@@ -377,104 +234,6 @@ button.sdpi-item-value {
   margin-left: 0px;
 }
 
-table,
-dl.sdpi-item-value,
-ul.sdpi-item-value,
-ol.sdpi-item-value,
-.sdpi-item-value > dl,
-.sdpi-item-value > ul,
-.sdpi-item-value > ol {
-  list-style-type: none;
-  list-style-position: outside;
-  margin-left: -4px;
-  margin-right: -4px;
-  padding: 4px;
-  border: 1px solid var(--sdpi-bordercolor);
-}
-
-dl.sdpi-item-value,
-ul.sdpi-item-value,
-ol.sdpi-item-value,
-.sdpi-item-value > ol {
-  list-style-type: none;
-  list-style-position: inside;
-  margin-left: 5px;
-  margin-right: 12px;
-  padding: 4px !important;
-}
-
-ol.sdpi-item-value,
-.sdpi-item-value > ol[listtype="none"] {
-  list-style-type: none;
-}
-
-ol.sdpi-item-value[type="decimal"],
-.sdpi-item-value > ol[type="decimal"] {
-  list-style-type: decimal;
-}
-
-ol.sdpi-item-value[type="decimal-leading-zero"],
-.sdpi-item-value > ol[type="decimal-leading-zero"] {
-  list-style-type: decimal-leading-zero;
-}
-
-ol.sdpi-item-value[type="lower-alpha"],
-.sdpi-item-value > ol[type="lower-alpha"] {
-  list-style-type: lower-alpha;
-}
-
-ol.sdpi-item-value[type="upper-alpha"],
-.sdpi-item-value > ol[type="upper-alpha"] {
-  list-style-type: upper-alpha;
-}
-
-ol.sdpi-item-value[type="upper-roman"],
-.sdpi-item-value > ol[type="upper-roman"] {
-  list-style-type: upper-roman;
-}
-
-ol.sdpi-item-value[type="lower-roman"],
-.sdpi-item-value > ol[type="lower-roman"] {
-  list-style-type: upper-roman;
-}
-
-tr:nth-child(even),
-.sdpi-item-value > ul > li:nth-child(even),
-.sdpi-item-value > ol > li:nth-child(even),
-li:nth-child(even) {
-  background-color: rgba(0, 0, 0, 0.2);
-}
-
-td:hover,
-.sdpi-item-value > ul > li:hover:nth-child(even),
-.sdpi-item-value > ol > li:hover:nth-child(even),
-li:hover:nth-child(even),
-li:hover {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-
-td.selected,
-td.selected:hover,
-li.selected:hover,
-li.selected {
-  color: white;
-  background-color: #77f;
-}
-
-tr {
-  border: 1px solid var(--sdpi-bordercolor);
-}
-
-td {
-  border-right: 1px solid var(--sdpi-bordercolor);
-  -webkit-user-select: none;
-}
-
-tr:last-child,
-td:last-child {
-  border: none;
-}
-
 .sdpi-item-value.select,
 .sdpi-item-value > select {
   margin-right: 13px;
@@ -487,29 +246,10 @@ td:last-child {
   margin-right: 4px;
 }
 
-.full,
-.full *,
-.sdpi-item-value.full,
-.sdpi-item-child > full > *,
-.sdpi-item-child.full,
-.sdpi-item-child.full > *,
-.full > .sdpi-item-child,
-.full > .sdpi-item-child > * {
-  display: flex;
-  flex: 1 1 0;
-  margin-bottom: 4px;
-  margin-left: 0px;
-  width: 100%;
-
-  justify-content: space-evenly;
-}
-
 .sdpi-item-group > .sdpi-item > input[type="color"] {
   margin-top: 0px;
 }
 
-::-webkit-calendar-picker-indicator:focus,
-input[type="file"]::-webkit-file-upload-button:focus,
 button:focus,
 textarea:focus,
 input:focus,
@@ -588,41 +328,6 @@ details.message h1 {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23999' d='M10,18 C5.581722,18 2,14.418278 2,10 C2,5.581722 5.581722,2 10,2 C14.418278,2 18,5.581722 18,10 C18,14.418278 14.418278,18 10,18 Z M6.77783203,7.65332031 C6.77783203,7.84798274 6.85929281,8.02888914 7.0222168,8.19604492 C7.18514079,8.36320071 7.38508996,8.44677734 7.62207031,8.44677734 C8.02409055,8.44677734 8.29703704,8.20768468 8.44091797,7.72949219 C8.59326248,7.27245865 8.77945854,6.92651485 8.99951172,6.69165039 C9.2195649,6.45678594 9.56233491,6.33935547 10.027832,6.33935547 C10.4256205,6.33935547 10.7006836,6.37695313 11.0021973,6.68847656 C11.652832,7.53271484 10.942627,8.472229 10.3750916,9.1321106 C9.80755615,9.79199219 8.29492188,11.9897461 10.027832,12.1347656 C10.4498423,12.1700818 10.7027991,11.9147157 10.7832031,11.4746094 C11.0021973,9.59857178 13.1254883,8.82415771 13.1254883,7.53271484 C13.1254883,7.07568131 12.9974785,6.65250846 12.7414551,6.26318359 C12.4854317,5.87385873 12.1225609,5.56600048 11.652832,5.33959961 C11.1831031,5.11319874 10.6414419,5 10.027832,5 C9.36767248,5 8.79004154,5.13541531 8.29492187,5.40625 C7.79980221,5.67708469 7.42317837,6.01879677 7.16503906,6.43139648 C6.90689975,6.8439962 6.77783203,7.25130007 6.77783203,7.65332031 Z M10.0099668,15 C10.2713191,15 10.5016601,14.9108147 10.7009967,14.7324415 C10.9003332,14.5540682 11,14.3088087 11,13.9966555 C11,13.7157177 10.9047629,13.4793767 10.7142857,13.2876254 C10.5238086,13.0958742 10.2890379,13 10.0099668,13 C9.72646591,13 9.48726565,13.0958742 9.2923588,13.2876254 C9.09745196,13.4793767 9,13.7157177 9,13.9966555 C9,14.313268 9.10077419,14.5596424 9.30232558,14.735786 C9.50387698,14.9119295 9.73975502,15 10.0099668,15 Z'/%3E%3C/svg%3E%0A");
 }
 
-.sdpi-more-info {
-  position: fixed;
-  left: 0px;
-  right: 0px;
-  bottom: 0px;
-  min-height: 16px;
-  padding-right: 16px;
-  text-align: right;
-  -webkit-touch-callout: none;
-  cursor: pointer;
-  user-select: none;
-  background-position: right center;
-  background-repeat: no-repeat;
-  border-radius: var(--sdpi-borderradius);
-  text-decoration: none;
-  color: var(--sdpi-color);
-}
-
-.sdpi-more-info-button {
-  display: flex;
-  align-self: right;
-  margin-left: auto;
-  position: fixed;
-  right: 17px;
-  bottom: 0px;
-}
-
-details a {
-  background-position: right !important;
-  min-height: 24px;
-  display: inline-block;
-  line-height: 24px;
-  padding-right: 28px;
-}
-
 input:not([type="range"]),
 textarea {
   -webkit-appearance: none;
@@ -635,102 +340,6 @@ textarea {
   margin-bottom: 2px;
 }
 
-textarea + label {
-  display: flex;
-  justify-content: flex-end;
-}
-
-input[type="radio"],
-input[type="checkbox"] {
-  display: none;
-}
-
-input[type="radio"] + label,
-input[type="checkbox"] + label {
-  font-size: 9pt;
-  color: var(--sdpi-color);
-  font-weight: normal;
-  margin-right: 8px;
-  -webkit-user-select: none;
-}
-
-input[type="radio"] + label:after,
-input[type="checkbox"] + label:after {
-  content: " " !important;
-}
-
-.sdpi-item[type="radio"] > .sdpi-item-value,
-.sdpi-item[type="checkbox"] > .sdpi-item-value {
-  padding-top: 2px;
-}
-
-.sdpi-item[type="checkbox"] > .sdpi-item-value > * {
-  margin-top: 4px;
-}
-
-.sdpi-item[type="checkbox"] .sdpi-item-child,
-.sdpi-item[type="radio"] .sdpi-item-child {
-  display: inline-block;
-}
-
-.sdpi-item[type="range"] .sdpi-item-value,
-.sdpi-item[type="meter"] .sdpi-item-child,
-.sdpi-item[type="progress"] .sdpi-item-child {
-  display: flex;
-}
-
-.sdpi-item[type="range"] .sdpi-item-value {
-  min-height: 26px;
-}
-
-.sdpi-item[type="range"] .sdpi-item-value span,
-.sdpi-item[type="meter"] .sdpi-item-child span,
-.sdpi-item[type="progress"] .sdpi-item-child span {
-  margin-top: -2px;
-  min-width: 8px;
-  text-align: right;
-  user-select: none;
-  cursor: pointer;
-}
-
-.sdpi-item[type="range"] .sdpi-item-value span {
-  margin-top: 7px;
-  text-align: right;
-}
-
-span + input[type="range"] {
-  display: flex;
-  max-width: 168px;
-}
-
-.sdpi-item[type="range"] .sdpi-item-value span:first-child,
-.sdpi-item[type="meter"] .sdpi-item-child span:first-child,
-.sdpi-item[type="progress"] .sdpi-item-child span:first-child {
-  margin-right: 4px;
-}
-
-.sdpi-item[type="range"] .sdpi-item-value span:last-child,
-.sdpi-item[type="meter"] .sdpi-item-child span:last-child,
-.sdpi-item[type="progress"] .sdpi-item-child span:last-child {
-  margin-left: 4px;
-}
-
-.reverse {
-  transform: rotate(180deg);
-}
-
-.sdpi-item[type="meter"] .sdpi-item-child meter + span:last-child {
-  margin-left: -10px;
-}
-
-.sdpi-item[type="progress"] .sdpi-item-child meter + span:last-child {
-  margin-left: -14px;
-}
-
-.sdpi-item[type="radio"] > .sdpi-item-value > * {
-  margin-top: 2px;
-}
-
 details {
   padding: 8px 18px 8px 12px;
   min-width: 86px;
@@ -740,362 +349,6 @@ details > h4 {
   border-bottom: 1px solid var(--sdpi-bordercolor);
 }
 
-legend {
-  display: none;
-}
-
-.sdpi-item-value > textarea {
-  padding: 0px;
-  width: 227px;
-  margin-left: 1px;
-}
-
-input[type="radio"] + label span,
-input[type="checkbox"] + label span {
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  margin: 2px 4px 2px 0;
-  border-radius: 3px;
-  vertical-align: middle;
-  background: var(--sdpi-background);
-  cursor: pointer;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-}
-
-input[type="radio"] + label span {
-  border-radius: 100%;
-}
-
-input[type="radio"]:checked + label span,
-input[type="checkbox"]:checked + label span {
-  background-color: #77f;
-  background-image: url(check.svg);
-  background-repeat: no-repeat;
-  background-position: center center;
-  border: 1px solid rgb(0, 0, 0, 0.4);
-}
-
-input[type="radio"]:active:checked + label span,
-input[type="radio"]:active + label span,
-input[type="checkbox"]:active:checked + label span,
-input[type="checkbox"]:active + label span {
-  background-color: #303030;
-}
-
-input[type="radio"]:checked + label span {
-  background-image: url(rcheck.svg);
-}
-
-input[type="range"] {
-  width: var(--sdpi-width);
-  height: 30px;
-  overflow: hidden;
-  cursor: pointer;
-  background: transparent !important;
-}
-
-.sdpi-item > input[type="range"] {
-  margin-left: 8px;
-  max-width: var(--sdpi-width);
-  width: var(--sdpi-width);
-  padding: 0px;
-}
-
-input[type="range"]::-webkit-slider-runnable-track {
-  height: 5px;
-  background: #979797;
-  border-radius: 3px;
-  padding: 0px !important;
-  border: 1px solid var(--sdpi-background);
-}
-
-input[type="range"]::-webkit-slider-thumb {
-  position: relative;
-  -webkit-appearance: none;
-  background-color: var(--sdpi-color);
-  width: 12px;
-  height: 12px;
-  border-radius: 20px;
-  margin-top: -5px;
-  border: none;
-}
-
-input[type="range"i] {
-  margin: 0;
-}
-
-input[type="range"]::-webkit-slider-thumb::before {
-  position: absolute;
-  content: "";
-  height: 5px;
-  /* equal to height of runnable track or 1 less */
-  width: 500px;
-  /* make this bigger than the widest range input element */
-  left: -502px;
-  /* this should be -2px - width */
-  top: 8px;
-  /* don't change this */
-  background: #77f;
-}
-
-input[type="color"] {
-  min-width: 32px;
-  min-height: 32px;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  background-color: var(--sdpi-bgcolor);
-  flex: none;
-}
-
-::-webkit-color-swatch {
-  min-width: 24px;
-}
-
-textarea {
-  height: 3em;
-  word-break: break-word;
-  line-height: 1.5em;
-}
-
-.textarea {
-  padding: 0px !important;
-}
-
-textarea {
-  width: 221px;
-  /*98%;*/
-  height: 96%;
-  min-height: 6em;
-  resize: none;
-  border-radius: var(--sdpi-borderradius);
-}
-
-/* CAROUSEL */
-
-.sdpi-item[type="carousel"] {
-}
-
-.sdpi-item.card-carousel-wrapper,
-.sdpi-item > .card-carousel-wrapper {
-  padding: 0;
-}
-
-.card-carousel-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 12px auto;
-  color: #666a73;
-}
-
-.card-carousel {
-  display: flex;
-  justify-content: center;
-  width: 278px;
-}
-
-.card-carousel--overflow-container {
-  overflow: hidden;
-}
-
-.card-carousel--nav__left,
-.card-carousel--nav__right {
-  /* display: inline-block; */
-  width: 12px;
-  height: 12px;
-  border-top: 2px solid #42b883;
-  border-right: 2px solid #42b883;
-  cursor: pointer;
-  margin: 0 4px;
-  transition: transform 150ms linear;
-}
-
-.card-carousel--nav__left[disabled],
-.card-carousel--nav__right[disabled] {
-  opacity: 0.2;
-  border-color: black;
-}
-
-.card-carousel--nav__left {
-  transform: rotate(-135deg);
-}
-
-.card-carousel--nav__left:active {
-  transform: rotate(-135deg) scale(0.85);
-}
-
-.card-carousel--nav__right {
-  transform: rotate(45deg);
-}
-
-.card-carousel--nav__right:active {
-  transform: rotate(45deg) scale(0.85);
-}
-
-.card-carousel-cards {
-  display: flex;
-  transition: transform 150ms ease-out;
-  transform: translatex(0px);
-}
-
-.card-carousel-cards .card-carousel--card {
-  margin: 0 5px;
-  cursor: pointer;
-  /* box-shadow: 0 4px 15px 0 rgba(40, 44, 53, 0.06), 0 2px 2px 0 rgba(40, 44, 53, 0.08); */
-  background-color: #fff;
-  border-radius: 4px;
-  z-index: 3;
-}
-
-.xxcard-carousel-cards .card-carousel--card:first-child {
-  margin-left: 0;
-}
-
-.xxcard-carousel-cards .card-carousel--card:last-child {
-  margin-right: 0;
-}
-
-.card-carousel-cards .card-carousel--card img {
-  vertical-align: bottom;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
-  transition: opacity 150ms linear;
-  width: 60px;
-}
-
-.card-carousel-cards .card-carousel--card img:hover {
-  opacity: 0.5;
-}
-
-.card-carousel-cards .card-carousel--card--footer {
-  border-top: 0;
-  max-width: 80px;
-  overflow: hidden;
-  display: flex;
-  height: 100%;
-  flex-direction: column;
-}
-
-.card-carousel-cards .card-carousel--card--footer p {
-  padding: 3px 0;
-  margin: 0;
-  margin-bottom: 2px;
-  font-size: 15px;
-  font-weight: 500;
-  color: #2c3e50;
-}
-
-.card-carousel-cards .card-carousel--card--footer p:nth-of-type(2) {
-  font-size: 12px;
-  font-weight: 300;
-  padding: 6px;
-  color: #666a73;
-}
-
-h1 {
-  font-size: 1.3em;
-  font-weight: 500;
-  text-align: center;
-  margin-bottom: 12px;
-}
-
-::-webkit-datetime-edit {
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol";
-  background: url(elg_calendar_inv.svg) no-repeat left center;
-  padding-right: 1em;
-  padding-left: 25px;
-  background-position: 4px 0px;
-}
-
-::-webkit-datetime-edit-fields-wrapper {
-}
-
-::-webkit-datetime-edit-text {
-  padding: 0 0.3em;
-}
-
-::-webkit-datetime-edit-month-field {
-}
-
-::-webkit-datetime-edit-day-field {
-}
-
-::-webkit-datetime-edit-year-field {
-}
-
-::-webkit-inner-spin-button {
-  /* display: none; */
-}
-
-::-webkit-calendar-picker-indicator {
-  background: transparent;
-  font-size: 17px;
-}
-
-::-webkit-calendar-picker-indicator:focus {
-  background-color: rgba(0, 0, 0, 0.2);
-}
-
-input[type="date"] {
-  -webkit-align-items: center;
-  display: -webkit-inline-flex;
-  font-family: monospace;
-  overflow: hidden;
-  padding: 0;
-  -webkit-padding-start: 1px;
-}
-
-input::-webkit-datetime-edit {
-  -webkit-flex: 1;
-  -webkit-user-modify: read-only !important;
-  display: inline-block;
-  min-width: 0;
-  overflow: hidden;
-}
-
-input[type="file"] {
-  opacity: 0;
-  display: none;
-}
-
-.sdpi-item > input[type="file"] {
-  opacity: 1;
-  display: flex;
-}
-
-input[type="file"] + span {
-  display: flex;
-  flex: 0 1 auto;
-  background-color: #0000ff50;
-}
-
-label.sdpi-file-label {
-  cursor: pointer;
-  user-select: none;
-  display: inline-block;
-  min-height: 21px !important;
-  height: 21px !important;
-  line-height: 20px;
-  padding: 0px 4px;
-  margin: auto;
-  margin-right: 0px;
-  float: right;
-}
-
-.sdpi-file-label > label:active,
-.sdpi-file-label.file:active,
-label.sdpi-file-label:active,
-label.sdpi-file-info:active,
-input[type="file"]::-webkit-file-upload-button:active,
-button:active {
-  background-color: var(--sdpi-color);
-  color: #303030;
-}
-
 input:required:invalid,
 input:focus:invalid {
   background: var(--sdpi-background)
@@ -1115,68 +368,6 @@ input:required:valid {
   color: yellow;
 }
 
-[title]:hover {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-[title]:hover::after {
-  content: "";
-  position: absolute;
-  bottom: -1000px;
-  left: 8px;
-  display: none;
-  color: #fff;
-  border: 8px solid transparent;
-  border-bottom: 8px solid #000;
-}
-
-[title]:hover::before {
-  content: attr(title);
-  display: flex;
-  justify-content: center;
-  align-self: center;
-  padding: 6px 12px;
-  border-radius: 5px;
-  background: rgba(0, 0, 0, 0.8);
-  color: var(--sdpi-color);
-  font-size: 9pt;
-  font-family: sans-serif;
-  opacity: 1;
-  position: absolute;
-  height: auto;
-  /* width: 50%;
-        left: 35%; */
-  text-align: center;
-  bottom: 2px;
-  z-index: 100;
-  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.5);
-  /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
-}
-
-.sdpi-item-group.file {
-  width: 232px;
-  display: flex;
-  align-items: center;
-}
-
-.sdpi-file-info {
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-  hyphens: auto;
-
-  min-width: 132px;
-  max-width: 144px;
-  max-height: 32px;
-  margin-top: 0px;
-  margin-left: 5px;
-  display: inline-block;
-  overflow: hidden;
-  padding: 6px 4px;
-  background-color: var(--sdpi-background);
-}
-
 ::-webkit-scrollbar {
   width: 8px;
 }
@@ -1195,51 +386,6 @@ a {
   color: #7397d2;
 }
 
-.testcontainer {
-  display: flex;
-  background-color: #0000ff20;
-  max-width: 400px;
-  height: 200px;
-  align-content: space-evenly;
-}
-
-input[type="range"] {
-  -webkit-appearance: none;
-  /* background-color: green; */
-  height: 6px;
-  margin-top: 12px;
-  z-index: 0;
-  overflow: visible;
-}
-
-::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  background-color: var(--sdpi-color);
-  width: 16px;
-  height: 16px;
-  border-radius: 20px;
-  margin-top: -6px;
-  border: 1px solid #999999;
-}
-
-.sdpi-item[type="range"] .sdpi-item-group {
-  display: flex;
-  flex-direction: column;
-}
-
-.xxsdpi-item[type="range"] .sdpi-item-group input {
-  max-width: 204px;
-}
-
-.sdpi-item[type="range"] .sdpi-item-group span {
-  margin-left: 0px !important;
-}
-
-.sdpi-item[type="range"] .sdpi-item-group > .sdpi-item-child {
-  display: flex;
-  flex-direction: row;
-}
-
 :disabled {
   color: #993333;
 }
@@ -1255,74 +401,3 @@ select option:disabled {
   font-style: italic;
 }
 
-.runningAppsContainer {
-  display: none;
-}
-
-/* debug
-  div {
-    background-color: rgba(64,128,255,0.2);
-  }
-  */
-
-.min80 > .sdpi-item-child {
-  min-width: 80px;
-}
-
-.min100 > .sdpi-item-child {
-  min-width: 100px;
-}
-
-.min120 > .sdpi-item-child {
-  min-width: 120px;
-}
-
-.min140 > .sdpi-item-child {
-  min-width: 140px;
-}
-
-.min160 > .sdpi-item-child {
-  min-width: 160px;
-}
-
-.min200 > .sdpi-item-child {
-  min-width: 200px;
-}
-
-.max40 {
-  flex-basis: 40%;
-  flex-grow: 0;
-}
-
-.max30 {
-  flex-basis: 30%;
-  flex-grow: 0;
-}
-
-.max20 {
-  flex-basis: 20%;
-  flex-grow: 0;
-}
-
-.up20 {
-  margin-top: -20px;
-}
-
-.alignCenter {
-  align-items: center;
-}
-
-.alignTop {
-  align-items: flex-start;
-}
-
-.alignBaseline {
-  align-items: baseline;
-}
-
-.noMargins,
-.noMargins *,
-.noInnerMargins * {
-  margin: 0;
-  padding: 0;
-}
diff --git a/Sources/com.jk.weather.sdPlugin/plugin/main.html b/Sources/com.jk.weather.sdPlugin/plugin/main.html
index 91e4e21..41213ee 100644
--- a/Sources/com.jk.weather.sdPlugin/plugin/main.html
+++ b/Sources/com.jk.weather.sdPlugin/plugin/main.html
@@ -7,6 +7,6 @@
   </head>
 
   <body>
-    <canvas id="idCanvas" width="70" height="70" dir="rtl"></canvas>
+    <canvas id="idCanvas" width="70" height="70"></canvas>
   </body>
 </html>
diff --git a/Sources/com.jk.weather.sdPlugin/plugin/main.js b/Sources/com.jk.weather.sdPlugin/plugin/main.js
index 02c5c22..c2100e7 100644
--- a/Sources/com.jk.weather.sdPlugin/plugin/main.js
+++ b/Sources/com.jk.weather.sdPlugin/plugin/main.js
@@ -32,7 +32,9 @@ function connectElgatoStreamDeckSocket(
     if (jsonObj["event"] === "keyUp") {
       let cityName = "";
       let unit = "";
+      let displayCity = 0;
       let frequency = null;
+
       if (
         jsonObj.payload.settings != null &&
         jsonObj.payload.settings.hasOwnProperty("cityName") &&
@@ -41,6 +43,7 @@ function connectElgatoStreamDeckSocket(
       ) {
         cityName = jsonObj.payload.settings["cityName"].toLowerCase();
         unit = jsonObj.payload.settings["unit"];
+        displayCity = jsonObj.payload.settings["displayCity"];
         frequency =
           jsonObj.payload.settings["frequency"] !== "0"
             ? parseInt(jsonObj.payload.settings["frequency"])
@@ -54,9 +57,12 @@ function connectElgatoStreamDeckSocket(
         };
         websocket.send(JSON.stringify(json));
       } else {
-        sendRequest(context, cityName, unit);
+        sendRequest(context, cityName, displayCity, unit);
         if (frequency) {
-          setInterval(() => sendRequest(context, cityName, unit), frequency);
+          setInterval(
+            () => sendRequest(context, cityName, displayCity, unit),
+            frequency
+          );
         }
       }
     } else if (jsonObj["event"] === "didReceiveGlobalSettings") {
@@ -65,7 +71,7 @@ function connectElgatoStreamDeckSocket(
         jsonObj.payload.settings.hasOwnProperty("apiKey")
       ) {
         apiKey = jsonObj.payload.settings["apiKey"];
-        provider = jsonObj.payload.settings["provider"] || 'weatherApi';
+        provider = jsonObj.payload.settings["provider"] || "weatherApi";
       }
     } else if (jsonObj["event"] === "keyDown") {
       const json = {
@@ -115,7 +121,7 @@ function prepareTemperature(response, unit) {
   return temp;
 }
 
-function setImageAndCity(response, context, city) {
+function setImageAndCity(response, context, city, displayCity) {
   let url;
   const defaultImg =
     "https://raw.githubusercontent.com/JaouherK/streamDeck-weatherPlugin/master/Sources/com.jk.weather.sdPlugin/resources/actionIcon.png";
@@ -135,7 +141,7 @@ function setImageAndCity(response, context, city) {
           : defaultImg;
       break;
   }
-  dataFromCanvasDraw(url, city, (dataUrl) => {
+  dataFromCanvasDraw(url, city, displayCity, (dataUrl) => {
     let json = {
       event: "setImage",
       context,
@@ -149,7 +155,7 @@ function setImageAndCity(response, context, city) {
   return url;
 }
 
-function sendRequest(context, cityName, unit) {
+function sendRequest(context, cityName, displayCity, unit) {
   const request = new XMLHttpRequest();
   const url = prepareUrl(cityName, unit);
   request.open("GET", url);
@@ -170,7 +176,7 @@ function sendRequest(context, cityName, unit) {
 
         websocket.send(JSON.stringify(jsonDeck));
 
-        setImageAndCity(response, context, cityName);
+        setImageAndCity(response, context, cityName, displayCity);
       } else {
         const json = {
           event: "showAlert",
@@ -182,13 +188,13 @@ function sendRequest(context, cityName, unit) {
   };
 }
 
-function dataFromCanvasDraw(url, city, callback) {
+function dataFromCanvasDraw(url, city, displayCity = 0, callback) {
   const canvas = document.getElementById("idCanvas");
   const context = canvas.getContext("2d");
   let imageObj = new Image();
   imageObj.setAttribute("crossOrigin", "anonymous");
 
-  imageObj.onload = ((city) => {
+  imageObj.onload = ((city, displayCity) => {
     const canvas = document.getElementById("idCanvas");
     context.clearRect(0, 0, canvas.width, canvas.height);
     context.drawImage(
@@ -197,16 +203,36 @@ function dataFromCanvasDraw(url, city, callback) {
       0,
       imageObj.width,
       imageObj.height,
-      0,
-      0,
-      canvas.width,
-      canvas.height
+      5,
+      10,
+      canvas.width - 10,
+      canvas.height - 20
     );
-    context.font = "small-caps bold 13px Arial";
-    context.fillStyle = "white";
-    context.fillText(city, 65, 13);
+    if (displayCity !== 0) {
+      context.font = "small-caps bold 13px Arial";
+      context.fillStyle = "white";
+      let align = "right";
+      let x = 65;
+      let y = 13;
+      switch (displayCity) {
+        case 1:
+          x = 10;
+          align = "left";
+          break;
+        case 3:
+          x = 10;
+          y = 65;
+          align = "left";
+          break;
+        case 4:
+          y = 65;
+          break;
+      }
+      context.textAlign = align;
+      context.fillText(city, x, y);
+    }
     const dataURL = canvas.toDataURL();
     callback(dataURL);
-  }).bind(this, city);
+  }).bind(this, city, displayCity);
   imageObj.src = url;
 }