diff --git a/assets/css/styles.css b/assets/css/styles.css
index 5a3e71db4..a70a23daa 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -3,6 +3,7 @@
     --default-title-font: RDRLino;
     --content-font: var(--default-content-font), serif;
     --title-font: var(--default-title-font), serif;
+    --button-font: RDRCatalogueBold, var(--content-font), serif;
 
     --fsb-color: #f0f0f0;
     --fsb-background: transparent;
@@ -26,6 +27,13 @@
     font-weight: 400;
 }
 
+@font-face {
+    font-family: RDRCatalogueBold;
+    src: url(../fonts/RDRCatalogueBold-Bold.woff2) format("woff2");
+    font-style: normal;
+    font-weight: 400;
+}
+
 *,
 *:before,
 *:after {
@@ -321,7 +329,6 @@ select {
 .save-button,
 .remove-button {
     text-align: center;
-    font-size: 14px;
     cursor: pointer;
     -webkit-user-select: none;
     -moz-user-select: none;
@@ -343,6 +350,7 @@ select {
 
 .marker-popup-buttons {
     display: flex;
+    align-items: center;
     justify-content: space-between;
     margin-top: 8px;
     -webkit-user-select: none;
@@ -396,11 +404,10 @@ select {
 }
 
 .links-container {
+    position: relative;
     height: 44.45px;
     display: flex;
     justify-content: space-around;
-    border-top: 1px solid #b0b0b0;
-    border-bottom: 1px solid #b0b0b0;
     padding: 10px 0;
     margin: 15px 0;
 }
@@ -685,14 +692,6 @@ select {
     height: 24px;
 }
 
-.btn-default {
-    background-color: #383838;
-    min-width: 40%;
-    font-weight: 500;
-    color: #fff;
-    border: none;
-}
-
 .input-text {
     background: #383838;
     border: none;
@@ -995,8 +994,10 @@ input.input-text.pickr-userpin {
     min-width: 42px;
     height: 38px;
     background: url(../images/arrow.png) center no-repeat;
+    background-size: 21px 21px;
     margin: auto 0 auto 5px;
     padding: 0 5px 0 0;
+    filter: brightness(0.825);
     transition: transform .2s ease-in-out;
 }
 
@@ -1044,19 +1045,43 @@ input.input-text.pickr-userpin {
 }
 
 .side-menu .collection-value {
+    position: relative;
     height: 34.45px;
     text-align: center;
-    border-top: 1px white solid;
-    border-bottom: 1px white solid;
     padding: 5px 0;
     display: flex;
     justify-content: space-around;
 }
 
+.side-menu .collection-value-bottom::after,
+.side-menu .collection-value::before,
+.side-menu .collection-value::after,
+.links-container::before,
+.links-container::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    width: 100%;
+    height: 1px;
+    background: url('../images/wanted_location_divider.png') repeat;
+    background-size: contain;
+}
+
+.side-menu .collection-value::before,
+.links-container::before {
+    top: 0;
+}
+
+.side-menu .collection-value-bottom::after,
+.side-menu .collection-value::after,
+.links-container::after {
+    bottom: 0;
+}
+
 .side-menu .collection-value-bottom {
+    position: relative;
     height: 33.65px;
     text-align: center;
-    border-bottom: 1px white solid;
     padding: 5px 0;
     display: flex;
     justify-content: space-around;
@@ -1066,19 +1091,6 @@ input.input-text.pickr-userpin {
     margin-bottom: 6px;
 }
 
-.side-menu .btn-light {
-    font-size: 16px;
-    --bs-btn-color: #fff;
-    --bs-btn-bg: transparent;
-    --bs-btn-border-color: transparent;
-    --bs-btn-hover-color: #fff;
-    --bs-btn-hover-bg: #383838;
-    --bs-btn-hover-border-color: transparent;
-    --bs-btn-active-color: #fff;
-    --bs-btn-active-bg: #aca9a9;
-    --bs-btn-line-height: 0.4; 
-}
-
 .side-menu .collection-value .camps-small-btn,
 .side-menu .collection-value .camps-large-btn,
 .side-menu .collection-value .camps-wilderness-btn {
@@ -1158,6 +1170,12 @@ input.input-text.pickr-userpin {
     width: auto;
 }
 
+.nazar-error {
+    margin-left: 4px;
+    height: 16px;
+    width: auto;
+}
+
 .lat-lng-container {
     position: absolute;
     bottom: 0;
@@ -1305,6 +1323,9 @@ a.wiki-page:visited {
 }
 
 .counter {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
     line-height: 12px;
     white-space: nowrap;
     margin-left: 6px;
@@ -1320,13 +1341,27 @@ a.wiki-page:visited {
 
 .counter-button {
     display: inline-block;
-    padding: 3px;
-    height: 20px;
-    width: 20px;
-    text-align: center;
-    background-color: #333;
-    color: #eee !important;
-    border-radius: 50%;
+    height: 16px;
+    width: 16px;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+}
+
+.counter-button.minus-circle {
+    background-image: url(../images/minus-circle.svg);
+}
+
+.counter-button.plus-circle {
+    background-image: url(../images/plus-circle.svg);
+}
+
+.counter-button:hover {
+    filter: brightness(1.2);
+}
+
+.counter-button:active {
+    filter: brightness(0.8);
 }
 
 .clickable {
@@ -1336,6 +1371,7 @@ a.wiki-page:visited {
 .marker-content-wrapper {
     display: flex;
     align-items: center;
+    justify-content: center;
 }
 
 .marker-warning-wrapper {
@@ -1777,8 +1813,8 @@ a.no-style:visited {
     height: 46px;
     border: none;
     border-radius: 50%;
-    background-color: #eee;
-    box-shadow: rgba(14, 15, 15, .3) 0px 2px 10px 0px;
+    background: url(../images/circle_white.png) no-repeat center center;
+    background-size: 100% 100%;
     opacity: 0;
     visibility: hidden;
     -webkit-transform: translateY(15px);
@@ -1802,8 +1838,8 @@ a.no-style:visited {
     top: 50%;
     -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
-    height: 50%;
-    width: 50%;
+    width: 100%;
+    height: 100%;
     filter: invert(100%) sepia(100%) saturate(10000%) hue-rotate(10deg);
     pointer-events: none;
 }
@@ -2209,64 +2245,238 @@ span.daily-checkbox {
 /* Override Bootstrap && Leaflet buttons color styling */
 
 .btn {
-    font-size: 14px;
+    color: #eee;
+    font-family: var(--button-font);
+    font-size: 17px;
+    letter-spacing: 0.075em;
+    --bs-btn-bg: transparent;
+    --bs-btn-hover-bg: transparent;
+    --bs-btn-active-bg: transparent;
+    text-transform: uppercase;
+}
+
+.btn-check:checked+.btn,
+.btn.active,
+.btn.show,
+.btn:first-child:active,
+:not(.btn-check)+.btn:active {
+    border-color: transparent;
 }
 
 .btn-default {
-    --bs-btn-hover-color: #333;
-    --bs-btn-hover-bg: #e6e6e6;
+    line-height: 0.2;
+    min-width: 40%;
+    padding: 0.75em 1.5em;
+    border-image: url(../images/double_border_gray.png) 28 repeat;
+    border-style: solid;
+    border-width: 8px;
 }
 
+.btn-default:hover {
+    color: #fff;
+    filter: brightness(2);
+}
+
+.btn-default:active {
+    color: #fff;
+    filter: brightness(0.75);
+}
+
+.btn-light {
+    line-height: 0.5;
+    border: 3px solid transparent;
+    transition: border-image 100ms ease;
+}
+
+.btn-light:hover {
+    color: #fff;
+    border-image: url(../images/border_single.png) 14 repeat;
+    border-style: solid;
+    border-width: 3px;
+    filter: brightness(2);
+}
+
+.btn-light:active {
+    color: #fff !important;
+    filter: brightness(0.75);
+}
+
+.btn-info.save-button,
+.btn-info.remove-button,
+.btn-primary,
+.btn-danger,
+.btn-secondary,
+.btn-success {
+    line-height: 0;
+    padding: 0.75em 0.75em;
+    border-style: solid;
+    border-width: 6px;
+}
+
+.btn-info.save-button,
+.btn-info.remove-button,
 .btn-primary {
-    --bs-btn-bg: #337ab7;
-    --bs-btn-hover-bg: #286090;
+    color: #12a4f3;
+    border-image: url(../images/single_border_lightblue.png) 14 repeat;
+}
+
+.btn-danger {
+    color: #990000;
+    border-image: url(../images/single_hover.png) 14 repeat;
 }
 
 .btn-secondary {
-    --bs-btn-color: #333;
-    --bs-btn-bg: #f0f0f0;
+    border-image: url(../images/single_border_lightgray.png) 14 repeat;
+}
+
+.btn-success {
+    color: #16c368;
+    border-image: url(../images/single_border_lightgreen.png) 14 repeat;
+}
+
+.btn-info.save-button:hover,
+.btn-info.remove-button:hover,
+.btn-primary:hover,
+.btn-danger:hover,
+.btn-secondary:hover,
+.btn-success:hover {
+    filter: brightness(1.25);
+}
+
+.btn-info.save-button:active,
+.btn-info.remove-button:active,
+.btn-primary:active,
+.btn-danger:active,
+.btn-secondary:active,
+.btn-success:active,
+.btn-info.remove-button.active {
+    filter: brightness(0.75);
+}
+
+.btn-info.save-button:hover,
+.btn-info.remove-button:hover,
+.btn-primary:hover,
+.btn-info.save-button:active,
+.btn-info.remove-button:active,
+.btn-primary:active {
+    color: #12a4f3 !important;
+}
+
+.btn-danger:hover,
+.btn-danger:active {
+    color: #990000 !important;
+}
+
+.btn-secondary:hover,
+.btn-secondary:active {
+    color: #fff;
+}
+
+.btn-success:hover,
+.btn-success:active {
+    color: #16c368;
+}
+
+.btn.btn-success.count-up,
+.btn.btn-danger.count-down {
+    width: 36px;
+    height: 36px;
+    border: none;
+}
+
+.btn.btn-success.count-up {
+    background: url(../images/inventory_plus.png) no-repeat center center;
+    background-size: 100% 100%;
+}
+
+.btn.btn-danger.count-down {
+    background: url(../images/inventory_minus.png) no-repeat center center;
+    background-size: 100% 100%;
+}
+
+:lang(ja) .btn-info.remove-button,
+:lang(ja) .btn-success,
+:lang(ja) .btn-default,
+:lang(ko) .btn-info.remove-button,
+:lang(ko) .btn-success,
+:lang(ko) .btn-default,
+:lang(zh-Hans) .btn-info.remove-button,
+:lang(zh-Hans) .btn-success,
+:lang(zh-Hans) .btn-default,
+:lang(zh-Hant) .btn-info.remove-button,
+:lang(zh-Hant) .btn-success,
+:lang(zh-Hant) .btn-default {
+    font-size: 14px;
+}
+
+/* Override Bootstrap accordions styling */
+
+.accordion {
+    --bs-accordion-color: #dadada;
+    --bs-accordion-bg: transparent;
+    --bs-accordion-btn-color: #12a4f3;
+    --bs-accordion-active-color: #12a4f3;
+    --bs-accordion-border-width: none;
+}
+
+.accordion-button {
+    font-family: var(--button-font);
+    font-size: 16px;
+    letter-spacing: 0.075em;
+    height: 20px;
+    padding: 2px 8px;
+    margin-top: 10px;
+    background-color: transparent;
+    border: none;
+    outline: none;
+    text-transform: uppercase;
 }
 
-.btn-info {
-    --bs-btn-color: #fff;
-    --bs-btn-hover-color: #fff;
-    --bs-btn-active-color: #222;
+.accordion-button:not(.collapsed) {
+    background-color: transparent;
 }
 
-.btn.btn-info.remove-button,
-.save-button {
-    background-color: #008fbece;
-    border: 1px solid #15b4f3af;
+.accordion-button::after {
+    display: none;
 }
 
-.btn.btn-info.remove-button:hover,
-.save-button:hover {
-    background-color: #15b4f3af;
+.accordion-button:focus {
+    box-shadow: none;
 }
 
-.remove-button,
-.btn.btn-danger {
-    background-color: #a50000ce;
-    border: 1px solid #bb0000ce;
+.accordion-body {
+    padding: 2px 8px;
 }
 
-.remove-button:hover,
-.btn.btn-danger:hover {
-    background-color: #bb0000ce;
+.leaflet-popup-content-wrapper {
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+    -webkit-mask-position: center;
+    mask-position: center;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
 }
 
-.btn.btn-success {
-    background-color: #008800ce;
-    border: 1px solid #00aa00ce;
+.leaflet-popup-content-wrapper:not(:has(.marker-popup-pin-input-name)) {
+    -webkit-mask-image: url(../images/mask_2.png);
+    mask-image: url(../images/mask_2.png);
 }
 
-.btn.btn-success:hover {
-    background-color: #00aa00ce;
+.leaflet-popup-content-wrapper:has(.marker-content-wrapper) {
+    -webkit-mask-image: url(../images/mask_1.png);
+    mask-image: url(../images/mask_1.png);
 }
 
 .leaflet-popup-content-wrapper {
     background: #222;
     color: #dadada;
+    padding: 10px 1px 1px 1px;
+    border-radius: 0;
+}
+
+.leaflet-popup-content-wrapper h1 {
+    font-family: var(--title-font);
+    font-weight: 400 !important;
 }
 
 .leaflet-container a:visited,
@@ -2297,6 +2507,27 @@ span.daily-checkbox {
     color: #d4d4d4 !important;
 }
 
+.leaflet-container a.leaflet-popup-close-button {
+    position: absolute;
+    top: 3px;
+    right: 3px;
+    width: 18px;
+    height: 14px;
+    background-color: transparent;
+    background: url('../images/close_button_popup.png') no-repeat center center;
+    background-size: 100% 100%;
+    border: none;
+    filter: brightness(0.75);
+}
+
+.leaflet-container a.leaflet-popup-close-button:hover {
+    filter: brightness(1);
+}
+
+.leaflet-popup-close-button span {
+    display: none;
+}
+
 /* Fix being able to select the overlays. */
 
 .leaflet-overlay-pane,
@@ -2335,8 +2566,14 @@ span.daily-checkbox {
 }
 
 .leaflet-popup-tip {
-    background: #222;
-    color: #d4d4d4;
+    width: 42.5%;
+    height: 42.5%;
+    background: url(../images/tank_meter_marker.png) no-repeat;
+    background-size: 100% 100%;
+    padding: 0;
+    margin: 0 0 0 11px;
+    transform: none;
+    box-shadow: none;
 }
 
 .leaflet-touch .leaflet-control-layers,
@@ -2419,13 +2656,30 @@ span.daily-checkbox {
 
 /* end dark mode styling */
 
-.properties, .legendary-properties {
-    margin: 10px 0;
-    width: 100%;
+#legendary-accordion .accordion-item:first-child {
+    filter: brightness(2);
+}
+
+#legendary-accordion .accordion-item:first-child .accordion-button,
+#legendary-accordion .accordion-item:first-child .accordion-button:not(.collapsed) {
+    color: #990000;
+}
+
+:lang(ja) #legendary-accordion .accordion-button,
+:lang(ko) #legendary-accordion .accordion-button,
+:lang(zh-Hans) #legendary-accordion .accordion-button,
+:lang(zh-Hant) #legendary-accordion .accordion-button {
+    font-size: 14px;
+}
+
+#legendary-accordion .accordion-item:first-child .accordion-body {
+    padding-top: 10px;
 }
 
 .legendary-properties {
-    line-height: 1.8rem;
+    line-height: 1.25em;
+    margin: 10px 8px;
+    width: 100%;
 }
 
 .legendary-properties p {
@@ -2436,7 +2690,7 @@ span.daily-checkbox {
 
 .legendary-spawn-time,
 .legendary-preferred-weather {
-    color: #3abce5;
+    color: #5de033;
 }
 
 .legendary-trader-materials,
@@ -2451,12 +2705,7 @@ span.daily-checkbox {
 }
 
 .legendary-sample-value {
-    color: #5de033;
-}
-
-.legendary-cooldown-timer {
-    color: #d80419;
-    margin-bottom: 10px;
+    color: #70ae25;
 }
 
 .missions-list {
diff --git a/assets/fonts/RDRCatalogueBold-Bold.woff2 b/assets/fonts/RDRCatalogueBold-Bold.woff2
new file mode 100644
index 000000000..02395d31e
Binary files /dev/null and b/assets/fonts/RDRCatalogueBold-Bold.woff2 differ
diff --git a/assets/images/arrow.png b/assets/images/arrow.png
index ad3b39a78..da1968875 100644
Binary files a/assets/images/arrow.png and b/assets/images/arrow.png differ
diff --git a/assets/images/bullet_gray.png b/assets/images/bullet_gray.png
new file mode 100644
index 000000000..fa1db7047
Binary files /dev/null and b/assets/images/bullet_gray.png differ
diff --git a/assets/images/circle_white.png b/assets/images/circle_white.png
new file mode 100644
index 000000000..586e75a24
Binary files /dev/null and b/assets/images/circle_white.png differ
diff --git a/assets/images/close_button_popup.png b/assets/images/close_button_popup.png
new file mode 100644
index 000000000..181a5b0aa
Binary files /dev/null and b/assets/images/close_button_popup.png differ
diff --git a/assets/images/direction_up_pointer.png b/assets/images/direction_up_pointer.png
new file mode 100644
index 000000000..a1b5adf95
Binary files /dev/null and b/assets/images/direction_up_pointer.png differ
diff --git a/assets/images/double_border.png b/assets/images/double_border.png
new file mode 100644
index 000000000..3ee20fa43
Binary files /dev/null and b/assets/images/double_border.png differ
diff --git a/assets/images/double_border_gray.png b/assets/images/double_border_gray.png
new file mode 100644
index 000000000..e62fd8e77
Binary files /dev/null and b/assets/images/double_border_gray.png differ
diff --git a/assets/images/double_border_red.png b/assets/images/double_border_red.png
new file mode 100644
index 000000000..3811f2b70
Binary files /dev/null and b/assets/images/double_border_red.png differ
diff --git a/assets/images/error.png b/assets/images/error.png
new file mode 100644
index 000000000..167773cd7
Binary files /dev/null and b/assets/images/error.png differ
diff --git a/assets/images/inventory_minus.png b/assets/images/inventory_minus.png
new file mode 100644
index 000000000..7d8ddebe6
Binary files /dev/null and b/assets/images/inventory_minus.png differ
diff --git a/assets/images/inventory_plus.png b/assets/images/inventory_plus.png
new file mode 100644
index 000000000..b39989b43
Binary files /dev/null and b/assets/images/inventory_plus.png differ
diff --git a/assets/images/magnifying_glass.png b/assets/images/magnifying_glass.png
new file mode 100644
index 000000000..4ce784047
Binary files /dev/null and b/assets/images/magnifying_glass.png differ
diff --git a/assets/images/mask_1.png b/assets/images/mask_1.png
new file mode 100644
index 000000000..9db2517b6
Binary files /dev/null and b/assets/images/mask_1.png differ
diff --git a/assets/images/mask_2.png b/assets/images/mask_2.png
new file mode 100644
index 000000000..5a2f5400c
Binary files /dev/null and b/assets/images/mask_2.png differ
diff --git a/assets/images/minus-circle.svg b/assets/images/minus-circle.svg
new file mode 100644
index 000000000..84afe8c02
--- /dev/null
+++ b/assets/images/minus-circle.svg
@@ -0,0 +1,8 @@
+<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M1.25 12C1.25 6.06294 6.06294 1.25 12 1.25C17.9371 1.25 22.75 6.06294 22.75 12C22.75 17.9371 17.9371 22.75 12 22.75C6.06294 22.75 1.25 17.9371 1.25 12Z"
+    fill="#333"></path>
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M17 12C17 12.4142 16.6642 12.75 16.25 12.75L7.76476 12.75C7.35055 12.75 7.01476 12.4142 7.01476 12C7.01477 11.5857 7.35055 11.25 7.76477 11.25L16.25 11.25C16.6642 11.25 17 11.5858 17 12Z"
+    fill="#eee"></path>
+</svg>
\ No newline at end of file
diff --git a/assets/images/plus-circle.svg b/assets/images/plus-circle.svg
new file mode 100644
index 000000000..dd84fa683
--- /dev/null
+++ b/assets/images/plus-circle.svg
@@ -0,0 +1,11 @@
+<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M1.25 12C1.25 6.06294 6.06294 1.25 12 1.25C17.9371 1.25 22.75 6.06294 22.75 12C22.75 17.9371 17.9371 22.75 12 22.75C6.06294 22.75 1.25 17.9371 1.25 12Z"
+    fill="#333"></path>
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M12 7.00744C12.4142 7.00744 12.75 7.34323 12.75 7.75744L12.75 16.2427C12.75 16.6569 12.4142 16.9927 12 16.9927C11.5857 16.9927 11.25 16.6569 11.25 16.2427L11.25 7.75743C11.25 7.34322 11.5858 7.00744 12 7.00744Z"
+    fill="#eee"></path>
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M17 12C17 12.4142 16.6642 12.75 16.25 12.75L7.76476 12.75C7.35055 12.75 7.01476 12.4142 7.01476 12C7.01477 11.5857 7.35055 11.25 7.76477 11.25L16.25 11.25C16.6642 11.25 17 11.5858 17 12Z"
+    fill="#eee"></path>
+</svg>
\ No newline at end of file
diff --git a/assets/images/single_border_lightblue.png b/assets/images/single_border_lightblue.png
new file mode 100644
index 000000000..81b42083d
Binary files /dev/null and b/assets/images/single_border_lightblue.png differ
diff --git a/assets/images/single_border_lightgray.png b/assets/images/single_border_lightgray.png
new file mode 100644
index 000000000..9d985064b
Binary files /dev/null and b/assets/images/single_border_lightgray.png differ
diff --git a/assets/images/single_border_lightgreen.png b/assets/images/single_border_lightgreen.png
new file mode 100644
index 000000000..73a8dde84
Binary files /dev/null and b/assets/images/single_border_lightgreen.png differ
diff --git a/assets/images/single_hover.png b/assets/images/single_hover.png
new file mode 100644
index 000000000..214219b9f
Binary files /dev/null and b/assets/images/single_hover.png differ
diff --git a/assets/images/tank_meter_marker.png b/assets/images/tank_meter_marker.png
new file mode 100644
index 000000000..faef3ba5f
Binary files /dev/null and b/assets/images/tank_meter_marker.png differ
diff --git a/assets/images/wanted_location_divider.png b/assets/images/wanted_location_divider.png
new file mode 100644
index 000000000..f36180efe
Binary files /dev/null and b/assets/images/wanted_location_divider.png differ
diff --git a/assets/images/waypoint.png b/assets/images/waypoint.png
new file mode 100644
index 000000000..79175a638
Binary files /dev/null and b/assets/images/waypoint.png differ
diff --git a/assets/js/animals.js b/assets/js/animals.js
index 1237d1509..37244bd0f 100644
--- a/assets/js/animals.js
+++ b/assets/js/animals.js
@@ -68,7 +68,7 @@ class Animal {
           <span class="marker-content-wrapper">
             <p>${description}</p>
           </span>
-          <button class="btn btn-default full-popup-width" data-text="map.remove"></button>
+          <button class="btn btn-info remove-button full-popup-width" data-text="map.remove"></button>
           <small>Latitude: ${this.marker.x} / Longitude: ${this.marker.y} / Start: ${this.marker.start} / End: ${this.marker.end}</small>
     `;
     Language.translateDom(snippet);
diff --git a/assets/js/bounties.js b/assets/js/bounties.js
index d1e51b91e..b3b6469b8 100644
--- a/assets/js/bounties.js
+++ b/assets/js/bounties.js
@@ -69,7 +69,7 @@ class Bounty {
           <p class="property" data-text="menu.${marker.type}.min" data-property="min"></p>
           <!-- <p class="property" data-text="menu.${marker.type}.config" data-property="config"></p> -->
         </span>
-        <button class="btn btn-default full-popup-width" data-text="map.remove"></button>
+        <button class="btn btn-info remove-button full-popup-width" data-text="map.remove"></button>
         <small>Latitude: ${bounty.x} / Longitude: ${bounty.y} / Type: ${marker.type} / Text: ${marker.text}</small>
     `;
     Language.translateDom(snippet);
diff --git a/assets/js/camps.js b/assets/js/camps.js
index 8cc7fef25..bb604f421 100644
--- a/assets/js/camps.js
+++ b/assets/js/camps.js
@@ -59,7 +59,7 @@ class Camp {
       <span class="marker-content-wrapper">
         <p>${description}</p>
       </span>
-      <button class="btn btn-default full-popup-width" data-text="map.remove"></button>
+      <button class="btn btn-info remove-button full-popup-width" data-text="map.remove"></button>
       <small>Latitude: ${_marker.x} / Longitude: ${_marker.y}</small>
     `;
     Language.translateDom(popup);
diff --git a/assets/js/events.js b/assets/js/events.js
index 72aec12e0..497f843d9 100644
--- a/assets/js/events.js
+++ b/assets/js/events.js
@@ -76,7 +76,7 @@ class CondorEgg {
     popup.classList.add('handover-wrapper-with-no-influence');
     popup.innerHTML = `
         <h1 data-text="map.${this.text}.name"></h1>
-        <button class="btn btn-default full-popup-width" data-text="map.remove"></button>
+        <button class="btn btn-info remove-button full-popup-width" data-text="map.remove"></button>
     `;
     Language.translateDom(popup);
     popup.querySelector('button').addEventListener('click', () => CondorEgg.condorEggOnMap = false);
@@ -213,7 +213,7 @@ class Salvage {
     popup.innerHTML = `
         <h1 data-text="map.${this.text}.name"></h1>
         ${type ? `<p data-text="map.salvage.${type}.desc"></p>` : ''}
-        <button class="btn btn-default full-popup-width" data-text="map.remove"></button>
+        <button class="btn btn-info remove-button full-popup-width" data-text="map.remove"></button>
     `;
     Language.translateDom(popup);
     popup.querySelector('button').addEventListener('click', () => Salvage.salvageOnMap = false);
diff --git a/assets/js/gfh.js b/assets/js/gfh.js
index a0c6018c8..7d516406d 100644
--- a/assets/js/gfh.js
+++ b/assets/js/gfh.js
@@ -70,7 +70,7 @@ class GunForHire {
           <br>
           <p data-text="map.gfh.missions_header"></p>
           ${missionsEl.outerHTML}
-          <button class="btn btn-default full-popup-width" data-text="map.remove"></button>
+          <button class="btn btn-info remove-button full-popup-width" data-text="map.remove"></button>
           ${Settings.isDebugEnabled ? debugDisplayLatLng.outerHTML : ''}
     `;
     Language.translateDom(snippet);
diff --git a/assets/js/language.js b/assets/js/language.js
index e2da44ef8..c590b3d14 100644
--- a/assets/js/language.js
+++ b/assets/js/language.js
@@ -100,6 +100,8 @@ const Language = {
   setMenuLanguage: function () {
     'use strict';
 
+    document.documentElement.setAttribute('lang', Settings.language);
+
     if (Language.data[Settings.language] === undefined) {
       const xhr = new XMLHttpRequest();
       xhr.open(
diff --git a/assets/js/legendary.js b/assets/js/legendary.js
index 58166d052..72681be40 100644
--- a/assets/js/legendary.js
+++ b/assets/js/legendary.js
@@ -114,9 +114,35 @@ class Legendary {
     snippet.innerHTML = `
         <img class="legendary-animal-popup-image" src="assets/images/icons/game/animals/legendaries/${this.text}.svg" alt="Animal">
         <h1 data-text="${this.text}"></h1>
-        <p class="legendary-cooldown-timer" data-text="map.legendary_animal_cooldown_end_time"></p>
-        <p data-text="${Language.get(this.text + '.desc')}"></p>
-        <br><p data-text="map.legendary_animal.desc"></p>
+        <div class="accordion accordion-flush" id="legendary-accordion">
+          <div class="accordion-item">
+            <h2 class="accordion-header">
+              <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#legendary-collapse-cooldown" aria-expanded="true" aria-controls="legendary-collapse-cooldown">Cooldown end</button>
+            </h2>
+            <div id="legendary-collapse-cooldown" class="accordion-collapse collapse show" data-bs-parent="#legendary-accordion">
+              <div class="accordion-body">
+              </div>
+            </div>
+          </div>
+          <div class="accordion-item">
+            <h2 class="accordion-header">
+              <button class="accordion-button" type="button" data-text="map.user_pins.placeholder_desc" data-bs-toggle="collapse" data-bs-target="#legendary-collapse-desc" aria-expanded="true" aria-controls="legendary-collapse-desc">Description</button>
+            </h2>
+            <div id="legendary-collapse-desc" class="accordion-collapse collapse" data-bs-parent="#legendary-accordion">
+              <div class="accordion-body" data-text="${Language.get(this.text + '.desc')}">
+              </div>
+            </div>
+          </div>
+          <div class="accordion-item">
+            <h2 class="accordion-header">
+              <button class="accordion-button collapsed" type="button" data-text="map.tips" data-bs-toggle="collapse" data-bs-target="#legendary-collapse-tips" aria-expanded="false" aria-controls="legendary-collapse-tips">Tips</button>
+            </h2>
+            <div id="legendary-collapse-tips" class="accordion-collapse collapse" data-bs-parent="#legendary-accordion">
+              <div class="accordion-body" data-text="map.legendary_animal.desc">
+              </div>
+            </div>
+          </div>
+        </div>
         <span class="legendary-properties">
           <p class="legendary-spawn-time" data-text="map.legendary.spawn_time_string"></p>
           <p class="legendary-preferred-weather" data-text="map.legendary.preferred_weather"></p>
@@ -128,7 +154,7 @@ class Legendary {
           <p class="legendary-sample-value" data-text="map.legendary.sample_value"></p>
         </span>
         <button type="button" class="btn btn-info remove-button remove-animal-category" data-text="map.remove.animal_category"></button>
-        <button type="button" class="btn btn-info remove-button reset-animal-timer" data-text="map.reset_animal_timer"></button>
+        <button type="button" class="btn btn-info remove-button reset-animal-timer ${this.isGreyedOut ? 'active' : ''}" data-text="map.reset_animal_timer" aria-pressed="${this.isGreyedOut ? 'true' : ''}"></button>
         <button type="button" class="btn btn-info remove-button remove-animal" data-text="map.remove"></button>
     `;
     Language.translateDom(snippet);
@@ -144,19 +170,16 @@ class Legendary {
       p.textContent = propertyText;
     });
 
+    const cooldownBtn = snippet.querySelector('#legendary-collapse-cooldown').closest('.accordion-item').querySelector('button');
     if (this.isGreyedOut) {
-      const cooldownTimer = snippet.querySelector('.legendary-cooldown-timer');
-      cooldownTimer.textContent = Language.get(cooldownTimer.getAttribute('data-text'))
-        .replace('{timer}', () => {
-          const timeMilliseconds = +localStorage.getItem(this.animalSpeciesKey);
-          return new Date(timeMilliseconds)
-            .toLocaleString(Settings.language, {
-              weekday: 'long', day: 'numeric', month: 'short', hour: 'numeric', minute: '2-digit',
-            });
-        });
+      cooldownBtn.textContent = Language.get('map.legendary_animal_cooldown_end_time').split(/[:：]/)[0];
+      snippet.querySelector('#legendary-collapse-cooldown .accordion-body').textContent = new Date(
+        +localStorage.getItem(this.animalSpeciesKey)
+      ).toLocaleString(Settings.language, { weekday: 'long', day: 'numeric', month: 'short', hour: 'numeric', minute: '2-digit' });
     }
 
-    snippet.querySelector('.legendary-cooldown-timer').style.display = this.isGreyedOut ? '' : 'none';
+    snippet.querySelector('#legendary-collapse-desc').classList.toggle('show', !this.isGreyedOut);
+    cooldownBtn.style.display = this.isGreyedOut ? '' : 'none';
     const btnRemoveAnimalCategory = snippet.querySelector('button.remove-animal-category');
     btnRemoveAnimalCategory.style.display = !this.isGreyedOut ? '' : 'none';
     btnRemoveAnimalCategory.addEventListener('click', () => this.isGreyedOut = true);
@@ -167,12 +190,14 @@ class Legendary {
 
     return snippet;
   }
+
   static toggleAnimalSpecies(animalSpecies) {
     Legendary.animals.forEach(animal => {
       if (animal.species === animalSpecies)
         animal.reinitMarker();
     });
   }
+
   static checkSpawnTime() {
     const animalSpeciesSet = new Set();
     Legendary.animals.forEach(animal => {
@@ -192,6 +217,7 @@ class Legendary {
       });
     }, 2000);
   }
+
   set isGreyedOut(state) {
     if (state)
       localStorage.setItem(this.animalSpeciesKey, Date.now() + 259200000); // 259200000 ms = 72 hours
@@ -200,6 +226,7 @@ class Legendary {
 
     Legendary.toggleAnimalSpecies(this.species);
   }
+
   get isGreyedOut() {
     return !!localStorage.getItem(this.animalSpeciesKey);
   }
@@ -222,6 +249,7 @@ class Legendary {
   get onMap() {
     return !!localStorage.getItem(`rdo.${this._shownKey}`);
   }
+  
   static onCategoryToggle() {
     Legendary.animals.forEach(animal => animal.onMap = animal.onMap);
   }
diff --git a/assets/js/marker.js b/assets/js/marker.js
index ad91964f7..1e8b2598f 100644
--- a/assets/js/marker.js
+++ b/assets/js/marker.js
@@ -53,7 +53,7 @@ class Marker {
         <p>${this.description}</p>
       </span>
       <p></p>
-      <button class="btn btn-default full-popup-width" data-text="map.remove"></button>
+      <button class="btn btn-info remove-button full-popup-width" data-text="map.remove"></button>
       <small>Text: ${this.text} / Latitude: ${this.lat} / Longitude: ${this.lng}</small>
     `;
 
diff --git a/assets/js/menu.js b/assets/js/menu.js
index e6905724d..489ff9cbe 100644
--- a/assets/js/menu.js
+++ b/assets/js/menu.js
@@ -79,7 +79,7 @@ class Menu {
     });
     createInputContainer({
       key: 'map_zoom_delta',
-      min: 0, max: 2, value: Settings.zoomDelta, defaultValue: 0.5,
+      min: 0.1, max: 2, value: Settings.zoomDelta, defaultValue: 0.5,
       step: 0.1, isFloat: true,
     });
     createInputContainer({
@@ -95,8 +95,7 @@ class Menu {
 
     const reset = document.getElementById('reset-map-zoom');
     reset.addEventListener('click', () => {
-      const zoomSettings = ['map_zoom_snap', 'map_zoom_delta', 'map_wheel_debounce_time', 'map_wheel_px_per_zoom_level'
-      ].map((key) =>
+      const zoomSettings = ['map_zoom_snap', 'map_zoom_delta', 'map_wheel_debounce_time', 'map_wheel_px_per_zoom_level'].map((key) =>
         key
           .replace(/^map_/, '')
           .split('_')
diff --git a/assets/js/nazar.js b/assets/js/nazar.js
index c8b7725fa..96fb41acf 100644
--- a/assets/js/nazar.js
+++ b/assets/js/nazar.js
@@ -44,6 +44,9 @@ class MadamNazar {
       return;
 
     MadamNazar.layer.clearLayers();
+
+    document.querySelector('.nazar-error').classList.toggle('hidden', MadamNazar.currentLocation !== -1);
+
     const cl = MadamNazar.possibleLocations[MadamNazar.currentLocation];
 
     const shadow = Settings.isShadowsEnabled ? `<img class="shadow" width="${35 * Settings.markerSize}" height="${16 * Settings.markerSize}" src="./assets/images/markers-shadow.png" alt="Shadow">` : '';
@@ -82,7 +85,7 @@ class MadamNazar {
           <p style="text-align: center;">
             ${Language.get('map.madam_nazar.desc').replace('{link}', '<a href="https://twitter.com/MadamNazarIO" target="_blank">@MadamNazarIO</a>')}
           </p>
-          <button class="btn btn-default reload-nazar" data-text="menu.madam_nazar_reload_position"></button>
+          <button class="btn btn-success reload-nazar" data-text="menu.madam_nazar_reload_position"></button>
     `;
     Language.translateDom(popup);
     const buttonEl = popup.querySelector('button');
diff --git a/assets/js/plants.js b/assets/js/plants.js
index 8cc5da8d3..969039c3e 100644
--- a/assets/js/plants.js
+++ b/assets/js/plants.js
@@ -57,7 +57,7 @@ class Plants {
           <span class="marker-content-wrapper">
             <p>${description}</p>
           </span>
-          <button class="btn btn-default full-popup-width" data-text="map.remove"></button>
+          <button class="btn btn-info remove-button full-popup-width" data-text="map.remove"></button>
           <small>Latitude: ${_marker.x} / Longitude: ${_marker.y}</small>
     `;
     Language.translateDom(popup);
diff --git a/assets/js/scripts.js b/assets/js/scripts.js
index 995963a59..33b82defb 100644
--- a/assets/js/scripts.js
+++ b/assets/js/scripts.js
@@ -285,11 +285,17 @@ backToTop.addEventListener('click', () => {
   }
 });
 
-sideMenu.addEventListener('touchend', e => {
-  if (e.target.classList.contains('btn-light'))
-    e.target.style.setProperty('--bs-btn-hover-bg', 'transparent');
-  e.stopImmediatePropagation();
-});
+sideMenu.addEventListener('touchend', event => {
+  const target = event.target;
+  const btnClasses = ['btn-light', 'btn-default'];
+  if (target.classList.contains('btn-light')) {
+    target.style.setProperty('border', '3px solid transparent');
+  }
+  if (btnClasses.some(cls => target.classList.contains(cls))) {
+    target.style.setProperty('filter', 'brightness(1)');
+  }
+  event.stopImmediatePropagation();
+}, true);
 
 //TODO: re-implement this function
 document.getElementById('show-all-markers').addEventListener('change', function () {
diff --git a/assets/js/treasures.js b/assets/js/treasures.js
index c34b1dd1f..91c60fc14 100644
--- a/assets/js/treasures.js
+++ b/assets/js/treasures.js
@@ -96,8 +96,7 @@ class Treasure {
     snippet.classList.add('handover-wrapper-with-no-influence');
     snippet.innerHTML = `
         <h1 data-text="${this.text}"></h1>
-        <button type="button" class="btn btn-info remove-button" data-text="map.remove">
-          </button>
+        <button type="button" class="btn btn-info remove-button treasure-button" data-text="map.remove"></button>
     `;
     Language.translateDom(snippet);
     snippet.querySelector('button').addEventListener('click', () => this.onMap = false);
diff --git a/index.html b/index.html
index bc42cc612..0d1153e26 100644
--- a/index.html
+++ b/index.html
@@ -50,11 +50,11 @@
   <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
   <link rel="stylesheet" href="assets/css/nano.min.css"/>
   <link rel="stylesheet" href="assets/css/fancyselect.min.css"/>
-  <link rel="stylesheet" href="assets/css/styles.css?nocache=1550" />
-  <link rel="stylesheet" href="assets/css/tippy.css?nocache=1550" />
+  <link rel="stylesheet" href="assets/css/styles.css?nocache=1551" />
+  <link rel="stylesheet" href="assets/css/tippy.css?nocache=1551" />
 
   <script>
-    var nocache = 1550;
+    var nocache = 1551;
   </script>
 </head>
 
@@ -398,6 +398,7 @@ <h2 data-text="menu.utils">Utilities</h2>
         <span>
           <img class="icon" src="./assets/images/icons/nazar.png" alt="Category icon" />
           <span class="menu-option-text" data-text="menu.madam_nazar">Madam Nazar</span>
+          <img class="nazar-error" src="./assets/images/error.png" alt="">
         </span>
       </div>
       <div class="menu-option clickable" data-type="fasttravel" data-help="item_category">
@@ -980,7 +981,7 @@ <h2 class="header-title" data-text="menu.customization_title">Customization</h2>
         </div>
         <div class="input-container" data-help="map_zoom_delta">
           <label for="map-zoom-delta" data-text="menu.map_zoom_delta">Map zoom delta</label>
-          <input id="map-zoom-delta" class="input-text narrow-select-menu" type="number" min="0" max="2" value="1"/>
+          <input id="map-zoom-delta" class="input-text narrow-select-menu" type="number" min="0.1" max="2" value="1"/>
         </div>
         <div class="input-container" data-help="map_wheel_debounce_time">
           <label for="map-wheel-debounce-time" data-text="menu.map_wheel_debounce_time">Map wheel debounce time</label>
@@ -1201,7 +1202,7 @@ <h4 class="no-margin-top" data-text="menu.sponsors">Sponsors</h4>
     </div>
 
     <button id="back-to-top" title="Scroll back to top (Draggable)">
-      <img src="./assets/images/selection_arrow_up.png" alt="">
+      <img src="./assets/images/direction_up_pointer.png" alt="">
     </button>
   </aside>
   <div class="menu-toggle" data-menu-opened="false">
@@ -1329,7 +1330,7 @@ <h4 class="modal-title" id="remove-all-pins-title" data-text="menu.modal_remove_
   <script src='https://js.sentry-cdn.com/a130f51c41c747c5b3ff6d39a6a31e41.min.js' crossorigin="anonymous" data-lazy="no"></script>
   <script src="assets/js/lib/bootstrap.min.js"></script>
   <script src="assets/js/lib/fancyselect.min.js"></script>
-  <script src="assets/js/loader.js?nocache=1550"></script>
+  <script src="assets/js/loader.js?nocache=1551"></script>
   <script src="assets/js/lib/popper.min.js"></script>
   <script src="assets/js/lib/tippy-bundle.umd.min.js"></script>
   <script src="assets/js/lib/leaflet.js"></script>
@@ -1343,31 +1344,31 @@ <h4 class="modal-title" id="remove-all-pins-title" data-text="menu.modal_remove_
   <script>var module = {};</script>
   <script src="assets/js/lib/leaflet.canvas-markers.js"></script>
   <script>module.exports(L);</script>
-  <script src="assets/js/layers.js?nocache=1550"></script>
-  <script src="assets/js/settings.js?nocache=1550"></script>
-  <script src="assets/js/nazar.js?nocache=1550"></script>
-  <script src="assets/js/marker.js?nocache=1550"></script>
-  <script src="assets/js/treasures.js?nocache=1550"></script>
-  <script src="assets/js/bounties.js?nocache=1550"></script>
-  <script src="assets/js/legendary.js?nocache=1550"></script>
-  <script src="assets/js/encounters.js?nocache=1550"></script>
-  <script src="assets/js/locations.js?nocache=1550"></script>
-  <script src="assets/js/plants.js?nocache=1550"></script>
-  <script src="assets/js/camps.js?nocache=1550"></script>
-  <script src="assets/js/shops.js?nocache=1550"></script>
-  <script src="assets/js/singleplayer.js?nocache=1550"></script>
-  <script src="assets/js/gfh.js?nocache=1550"></script>
-  <script src="assets/js/events.js?nocache=1550"></script>
-  <script src="assets/js/animals.js?nocache=1550"></script>
-  <script src="assets/js/discoverables.js?nocache=1550"></script>
-  <script src="assets/js/overlays.js?nocache=1550"></script>
-  <script src="assets/js/pins.js?nocache=1550"></script>
-  <script src="assets/js/map.js?nocache=1550"></script>
-  <script src="assets/js/language.js?nocache=1550"></script>
-  <script src="assets/js/menu.js?nocache=1550"></script>
-  <script src="assets/js/dailies.js?nocache=1550"></script>
-  <script src="assets/js/scripts.js?nocache=1550"></script>
-  <script src="assets/js/fme.js?nocache=1550"></script>
+  <script src="assets/js/layers.js?nocache=1551"></script>
+  <script src="assets/js/settings.js?nocache=1551"></script>
+  <script src="assets/js/nazar.js?nocache=1551"></script>
+  <script src="assets/js/marker.js?nocache=1551"></script>
+  <script src="assets/js/treasures.js?nocache=1551"></script>
+  <script src="assets/js/bounties.js?nocache=1551"></script>
+  <script src="assets/js/legendary.js?nocache=1551"></script>
+  <script src="assets/js/encounters.js?nocache=1551"></script>
+  <script src="assets/js/locations.js?nocache=1551"></script>
+  <script src="assets/js/plants.js?nocache=1551"></script>
+  <script src="assets/js/camps.js?nocache=1551"></script>
+  <script src="assets/js/shops.js?nocache=1551"></script>
+  <script src="assets/js/singleplayer.js?nocache=1551"></script>
+  <script src="assets/js/gfh.js?nocache=1551"></script>
+  <script src="assets/js/events.js?nocache=1551"></script>
+  <script src="assets/js/animals.js?nocache=1551"></script>
+  <script src="assets/js/discoverables.js?nocache=1551"></script>
+  <script src="assets/js/overlays.js?nocache=1551"></script>
+  <script src="assets/js/pins.js?nocache=1551"></script>
+  <script src="assets/js/map.js?nocache=1551"></script>
+  <script src="assets/js/language.js?nocache=1551"></script>
+  <script src="assets/js/menu.js?nocache=1551"></script>
+  <script src="assets/js/dailies.js?nocache=1551"></script>
+  <script src="assets/js/scripts.js?nocache=1551"></script>
+  <script src="assets/js/fme.js?nocache=1551"></script>
 
   <!-- Global site tag (gtag.js) - Google Analytics -->
   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-39999584-5"></script>
diff --git a/langs/en.json b/langs/en.json
index e75b6c85e..f60d1311e 100644
--- a/langs/en.json
+++ b/langs/en.json
@@ -89,6 +89,7 @@
   "menu.dailies": "Daily Challenges",
   "menu.condor_egg": "Condor Egg",
   "menu.back_to_top": "Scroll back to top (Draggable)",
+  "map.tips": "Tips",
   "map.draggable": "Draggable",
   "map.latitude": "Latitude",
   "map.longitude": "Longitude",