Updated 19 files and added assets/icons/new/menu.svg (automated)

20 files changed, 262 insertions, 68 deletions

diff --git a/assets/icons/new/menu.svg b/assets/icons/new/menu.svg
new file mode 100644
index 0000000..1c17c72
--- /dev/null
+++ b/assets/icons/new/menu.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M479.858-160Q460-160 446-174.142q-14-14.141-14-34Q432-228 446.142-242q14.141-14 34-14Q500-256 514-241.858q14 14.141 14 34Q528-188 513.858-174q-14.141 14-34 14Zm0-272Q460-432 446-446.142q-14-14.141-14-34Q432-500 446.142-514q14.141-14 34-14Q500-528 514-513.858q14 14.141 14 34Q528-460 513.858-446q-14.141 14-34 14Zm0-272Q460-704 446-718.142q-14-14.141-14-34Q432-772 446.142-786q14.141-14 34-14Q500-800 514-785.858q14 14.141 14 34Q528-732 513.858-718q-14.141 14-34 14Z"/></svg>
\ No newline at end of file
diff --git a/includes/components/2023ui.inc b/includes/components/2023ui.inc
index cd37e36..b69f0f5 100644
--- a/includes/components/2023ui.inc
+++ b/includes/components/2023ui.inc
@@ -1,18 +1,106 @@
+<style>
+    .new-homepage-link {
+        background-color: rgba(0, 0, 0, .01) !important;
+    }
+
+    .new-homepage-link:hover {
+        background-color: rgba(0, 0, 0, .05) !important;
+    }
+
+    .new-homepage-link:active {
+        background-color: rgba(0, 0, 0, .1) !important;
+    }
+
+    .new-homepage-system-list {
+        background: linear-gradient(180deg, rgba(216,53,124,0.1) 0%, rgba(227,65,55,0.1) 7%, rgba(231,155,96,0.1) 14%, rgba(223,191,78,0.1) 21%, rgba(203,207,117,0.1) 28%, rgba(108,224,154,0.1) 35%, rgba(106,228,205,0.1) 42%, rgba(100,217,234,0.1) 49%, rgba(83,182,238,0.1) 56%, rgba(74,158,234,0.1) 63%, rgba(164,137,238,0.1) 70%, rgba(211,142,240,0.1) 77%, rgba(230,122,238,0.1) 84%, rgba(227,113,196,0.1) 91%);
+    }
+
+    #banner-lower, #timeline-container {
+        backdrop-filter: none !important;
+        background-color: var(--palette-2) !important;
+    }
+
+    #hpd-legacy {
+        display: none !important;
+    }
+
+    #system-page, #member-page {
+        background-color: var(--palette-2) !important;
+        backdrop-filter: none !important;
+        -webkit-backdrop-filter: none !important;
+    }
+
+    @media (max-width: 926px) {
+        .mobile-hide {
+            display: none !important;
+        }
+
+        .mobile-icon-container-right {
+            margin-right: 0 !important;
+        }
+
+        #menu-bar {
+            grid-template-columns: 1fr max-content 1fr !important;
+            left: 20px !important;
+        }
+
+        #side-bar-systems {
+            display: none !important;
+        }
+
+        #side-bar-options {
+            margin: 0 !important;
+        }
+
+        #side-bar {
+            bottom: 0 !important;
+            right: 0 !important;
+            width: 100% !important;
+            height: 64px;
+            top: unset !important;
+            z-index: 9 !important;
+            align-items: center;
+        }
+
+        #app {
+            left: 0 !important;
+            right: 0 !important;
+            bottom: 64px;
+        }
+
+        .ui2023-side-bar-item:not(.mobile-hide) {
+            display: inline-block !important;
+        }
+
+        .mobile-show {
+            display: inline-block !important;
+        }
+        
+        #app {
+            z-index: -1;
+        }
+
+        body:not(.modal-open) #menu-bar {
+            z-index: 9999;
+        }
+    }
+</style>
+
 <div id="menu-bar" style="position: fixed; top: 0; left: 101px; right: 20px; height: 52px; display: grid; grid-template-columns: 1fr 1fr 1fr;">
     <div style="display: grid; grid-template-columns: max-content 1fr;">
         <div style="height: 52px; display: flex; align-items: center;">
             <a href="/" style="color: inherit; text-decoration: inherit;">
-                <img src="/assets/logo/newlogo-ng.png" style="width: 32px;">
+                <img class="antialias" src="/assets/logo/newlogo-ng.png" style="width: 32px;">
                 <span style="margin-left: 5px; vertical-align: middle; position: relative; top: -1px; font-weight: bold;">Cold Haze</span>
                 <span data-bs-toggle="tooltip" data-bs-placement="bottom" title="This is the new Cold Haze experience and it is currently experimental" class="badge bg-warning" style="margin-left: 5px; vertical-align: middle; position: relative; top: -1px; font-weight: bold;">Beta</span>
             </a>
         </div>
         <div style="display: flex; align-items: center;">
             <?php global $isLowerLoggedIn; global $isLoggedIn; global $_PROFILE; if ($isLoggedIn || $isLowerLoggedIn): ?>
-            <div style="margin-left: auto; margin-right: auto;">
-                <a data-bs-toggle="tooltip" data-bs-placement="bottom" title="Alerts" class="ui2023-side-bar-item" href="/-/alerts" style="padding: 10px; height: 48px; width: 48px; display: inline-block; border-radius: 999px;">
+            <div class="mobile-icon-container mobile-icon-container-left" style="margin-left: auto; margin-right: auto;">
+                <a data-bs-toggle="tooltip" data-bs-placement="bottom" title="Alerts" class="ui2023-side-bar-item mobile-hide" href="/-/alerts" style="padding: 10px; height: 48px; width: 48px; display: inline-block; border-radius: 999px;">
                     <img src="<?= icon("alerts") ?>" style="max-width: 28px; max-height: 28px;">
-                </a><a data-bs-toggle="tooltip" data-bs-placement="bottom" title="Member lists" class="ui2023-side-bar-item" href="/-/lists" style="padding: 10px; height: 48px; width: 48px; display: inline-block; border-radius: 999px;">
+                </a><a data-bs-toggle="tooltip" data-bs-placement="bottom" title="Member lists" class="ui2023-side-bar-item mobile-hide" href="/-/lists" style="padding: 10px; height: 48px; width: 48px; display: inline-block; border-radius: 999px;">
                     <img src="<?= icon("lists") ?>" style="max-width: 28px; max-height: 28px;">
                 </a>
             </div>
@@ -27,12 +115,30 @@
     <div style="display: grid; grid-template-columns: 1fr max-content;">
         <div style="display: flex; align-items: center;">
             <?php global $isLowerLoggedIn; global $isLoggedIn; global $_PROFILE; if ($isLoggedIn || $isLowerLoggedIn): ?>
-                <div style="margin-left: auto; margin-right: auto;">
-                    <a data-bs-toggle="tooltip" data-bs-placement="bottom" title="Jobs" class="ui2023-side-bar-item" href="/-/jobs" style="padding: 10px; height: 48px; width: 48px; display: inline-block; border-radius: 999px;">
+                <div style="margin-left: auto; margin-right: auto;" class="mobile-icon-container mobile-icon-container-right">
+                    <a data-bs-toggle="tooltip" data-bs-placement="bottom" title="Jobs" class="ui2023-side-bar-item mobile-hide" href="/-/jobs" style="padding: 10px; height: 48px; width: 48px; display: inline-block; border-radius: 999px;">
                         <img src="<?= icon("jobs") ?>" style="max-width: 28px; max-height: 28px;">
-                    </a><a data-bs-toggle="tooltip" data-bs-placement="bottom" title="Account" class="ui2023-side-bar-item" href="/-/account" style="padding: 10px; height: 48px; width: 48px; display: inline-block; border-radius: 999px;">
+                    </a><a data-bs-toggle="tooltip" data-bs-placement="bottom" title="Account" class="ui2023-side-bar-item mobile-hide" href="/-/account" style="padding: 10px; height: 48px; width: 48px; display: inline-block; border-radius: 999px;">
                         <img src="<?= icon("sessions") ?>" style="max-width: 28px; max-height: 28px;">
-                    </a>
+                    </a><div class="ui2023-side-bar-item mobile-show dropdown" style="padding: 10px; height: 48px; width: 48px; display: none; border-radius: 999px;">
+                        <a data-bs-toggle="dropdown" href="#">
+                            <img src="<?= icon("menu") ?>" style="max-width: 28px; max-height: 28px;">
+                        </a>
+                        <ul class="dropdown-menu">
+                            <li><a class="dropdown-item" href="/-/alerts">
+                                <img src="<?= icon("alerts") ?>" style="vertical-align: middle; width: 24px; height: 24px;"><span style="vertical-align: middle; margin-left: 5px;">Alerts</span>
+                            </a></li>
+                            <li><a class="dropdown-item" href="/-/lists">
+                                <img src="<?= icon("lists") ?>" style="vertical-align: middle; width: 24px; height: 24px;"><span style="vertical-align: middle; margin-left: 5px;">Lists</span>
+                            </a></li>
+                            <li><a class="dropdown-item" href="/-/jobs">
+                                <img src="<?= icon("jobs") ?>" style="vertical-align: middle; width: 24px; height: 24px;"><span style="vertical-align: middle; margin-left: 5px;">Jobs</span>
+                            </a></li>
+                            <li><a class="dropdown-item" href="/-/account">
+                                <img src="<?= icon("sessions") ?>" style="vertical-align: middle; width: 24px; height: 24px;"><span style="vertical-align: middle; margin-left: 5px;">Account</span>
+                            </a></li>
+                        </ul>
+                    </div>
                 </div>
             <?php endif; ?>
         </div>
@@ -40,16 +146,16 @@
             <?php global $isLowerLoggedIn; global $isLoggedIn; global $_PROFILE; if ($isLoggedIn || $isLowerLoggedIn): ?>
                 <a href="https://account.equestria.dev/hub/users/<?= $_PROFILE["id"] ?>" target="_blank" style="color: inherit; text-decoration: inherit;">
                     <?php $fronters = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/" . ($_PROFILE["login"] === "raindrops" ? "gdapd" : ($_PROFILE["login"] === "cloudburst" ? "ynmuc" : "other")) . "/fronters.json"), true); if (isset($fronters["members"][0])): ?>
-                        <span style="margin-right: 5px; vertical-align: middle; margin-top: -2px;"><?= $fronters["members"][0]["display_name"] ?? $fronters["members"][0]["name"] ?></span>
+                        <span class="mobile-hide" style="margin-right: 5px; vertical-align: middle; margin-top: -2px;"><?= $fronters["members"][0]["display_name"] ?? $fronters["members"][0]["name"] ?></span>
                         <img src="<?= getAsset(($_PROFILE["login"] === "raindrops" ? "gdapd" : ($_PROFILE["login"] === "cloudburst" ? "ynmuc" : "other")), $fronters["members"][0]["id"]) ?>" style="width: 32px; height: 32px; border-radius: 999px; background-color: var(--palette-2);">
                     <?php else: ?>
-                        <span style="margin-right: 5px; vertical-align: middle; margin-top: -2px;"><?= $_PROFILE["name"] ?></span>
-                        <img src="https://account.equestria.dev/hub/api/rest/avatar/<?= $_PROFILE["id"] ?>?dpr=2&size=32" style="width: 32px; height: 32px; border-radius: 999px; background-color: var(--palette-2);">
+                        <span class="mobile-hide" style="margin-right: 5px; vertical-align: middle; margin-top: -2px;"><?= $_PROFILE["name"] ?></span>
+                        <img class="antialias" src="https://account.equestria.dev/hub/api/rest/avatar/<?= $_PROFILE["id"] ?>?dpr=2&size=32" style="width: 32px; height: 32px; border-radius: 999px; background-color: var(--palette-2);">
                     <?php endif; ?>
                 </a>
             <?php else: ?>
                 <a href="/login" style="color: inherit; text-decoration: inherit;">
-                    <span style="margin-right: 5px; vertical-align: middle; margin-top: -2px;">Log in</span>
+                    <span class="mobile-hide" style="margin-right: 5px; vertical-align: middle; margin-top: -2px;">Log in</span>
                     <img src="<?= icon("login", false) ?>" class="light-only" style="width: 24px; height: 24px; margin: 4px;">
                     <img src="<?= icon("login", true) ?>" class="dark-only" style="width: 24px; height: 24px; margin: 4px;">
                 </a>
@@ -74,27 +180,28 @@
 
 <div id="side-bar" style="position: fixed; top: 62px; bottom: 20px; left: 0; width: 64px; display: flex; justify-content: center;">
     <div>
-        <div style="background-color: var(--palette-4); height: max-content; border-radius: 999px;">
+        <div id="side-bar-systems" style="background-color: var(--palette-4); height: max-content; border-radius: 999px;">
             <a data-bs-toggle="tooltip" data-bs-placement="right" title="Raindrops System" class="ui2023-side-bar-system" href="/raindrops" style="padding: 8px; height: 48px; width: 48px; display: block; border-top-left-radius: 999px; border-top-right-radius: 999px;">
-                <img src="<?= getAsset("gdapd") ?>" style="max-width: 32px; max-height: 32px;">
+                <img class="antialias" class="antialias" src="<?= getAsset("gdapd") ?>" style="max-width: 32px; max-height: 32px;">
             </a>
             <?php global $app; if ($isLoggedIn || $isLowerLoggedIn): ?>
                 <a data-bs-toggle="tooltip" data-bs-placement="right" title="<?= $app["other"]["name"] ?>" class="ui2023-side-bar-system" href="/<?= $app["other"]["slug"] ?>" style="padding: 8px; height: 48px; width: 48px; display: block;">
-                    <img src="<?= getAsset("other") ?>" style="max-width: 32px; max-height: 32px;">
+                    <img class="antialias" class="antialias" src="<?= getAsset("other") ?>" style="max-width: 32px; max-height: 32px;">
                 </a>
             <?php endif; ?>
             <a data-bs-toggle="tooltip" data-bs-placement="right" title="Cloudburst System" class="ui2023-side-bar-system" href="/cloudburst" style="padding: 8px; height: 48px; width: 48px; display: block; border-bottom-left-radius: 999px; border-bottom-right-radius: 999px;">
-                <img src="<?= getAsset("ynmuc") ?>" style="max-width: 32px; max-height: 32px;">
+                <img class="antialias" src="<?= getAsset("ynmuc") ?>" style="max-width: 32px; max-height: 32px;">
             </a>
         </div>
 
-        <div style="margin-top: 20px;">
+        <div id="side-bar-options" style="margin-top: 20px;">
             <a data-bs-toggle="tooltip" data-bs-placement="right" title="Relations" class="ui2023-side-bar-item" href="/-/relations" style="padding: 10px; height: 48px; width: 48px; display: block; border-radius: 999px;">
                 <img src="<?= icon("relations") ?>" style="max-width: 28px; max-height: 28px;">
             </a>
 
             <?php if ($isLowerLoggedIn || $isLoggedIn): ?>
-            <div style="margin: 10px 0; width: 48px; height: 2px; background-color: var(--palette-2);"></div>
+            <div class="mobile-hide" style="margin: 10px 0; width: 48px; height: 2px; background-color: var(--palette-2);"></div>
+            <div class="mobile-show" style="display: none; margin: 0 10px; height: 48px; width: 2px; background-color: var(--palette-2); vertical-align: middle;"></div>
 
             <a data-bs-toggle="tooltip" data-bs-placement="right" title="Schedules" class="ui2023-side-bar-item" href="/-/schedules" style="padding: 10px; height: 48px; width: 48px; display: block; border-radius: 999px;">
                 <img src="<?= icon("schedule") ?>" style="max-width: 28px; max-height: 28px;">
diff --git a/includes/components/details.inc b/includes/components/details.inc
index 271978e..39f8c21 100644
--- a/includes/components/details.inc
+++ b/includes/components/details.inc
@@ -119,9 +119,6 @@
                 <span title="Consent is absolutely required every time when having sex with this pony." data-bs-toggle="tooltip">Required</span>
             <?php endif; ?>
         </span>
-        <?php if (!((isset($age) && $age >= 15 && $metadata["little"] !== 1) || (!isset($age) && $metadata["little"] !== 1))): ?>
-        <img src="/assets/icons/warning.svg" style="width: 16px;" title="Although this pony is able to engage in sexual relationships, this pony is not allowed to have sex with ponies who are over 15 years old." data-bs-toggle="tooltip">
-        <?php endif; ?>
     </div>
     <?php endif; ?>
     <div>
diff --git a/includes/components/emergency.inc b/includes/components/emergency.inc
index 2de7134..0a1401c 100644
--- a/includes/components/emergency.inc
+++ b/includes/components/emergency.inc
@@ -10,6 +10,7 @@
 <p style="text-align:center;margin-top:10px;">Sending next notification <b><span id="next-notification">never</span></b></p>
 
 <style>
+    <?php global $use2023UI; if (!$use2023UI): ?>
     .modal-header {
         border-bottom: 1px solid #353738;
     }
@@ -22,6 +23,7 @@
     .btn-close {
         filter: invert(1);
     }
+    <?php endif; ?>
 
     #btn-on.disabled, #btn-off.disabled {
         opacity: .5;
diff --git a/includes/components/footer.inc b/includes/components/footer.inc
index 26114a5..a348ce4 100644
--- a/includes/components/footer.inc
+++ b/includes/components/footer.inc
@@ -24,7 +24,7 @@ global $use2023UI;
 
         ?>
         © 2022-<?= date("Y") ?> <a href="https://equestria.dev" target="_blank" class="text-muted"><?= $lang["footer"]["copyright"] ?></a> · build <?= $version["build"] ?>.<?= $version["revision"] ?>, took <?= round($time * 1000, 2) ?> ms
-        <?php global $use2023UI; if (($isLoggedIn || $isLowerLoggedIn) && !$use2023UI && isset($_COOKIE["enable2023UIcta"]) && $_COOKIE["enable2023UIcta"] === "yes") { ?>
+        <?php global $use2023UI; global $isLoggedIn; global $isLowerLoggedIn; global $_PROFILE; if (($isLoggedIn || $isLowerLoggedIn) && !$use2023UI && ((isset($_COOKIE["enable2023UIcta"]) && $_COOKIE["enable2023UIcta"] === "yes") || ($_PROFILE["login"] === "raindrops"))) { ?>
             <br>
             <a class="text-muted" href="#" data-bs-toggle="modal" data-bs-target="#new-ui-cta" onclick="newShape();">Enable Cold Haze's experimental new shape</a>
         <?php } ?>
diff --git a/includes/components/header.inc b/includes/components/header.inc
index fdae55a..548716d 100644
--- a/includes/components/header.inc
+++ b/includes/components/header.inc
@@ -244,15 +244,21 @@ require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/util/functions.inc";
 
         $selectedPalette = $palettes["default"];
 
-        global $memberID; if (isset($memberID)) {
-            $member = getMemberWithoutSystem($memberID);
+        global $memberID; global $systemID; if (isset($memberID) || isset($systemID)) {
+            if (isset($memberID)) {
+                $member = getMemberWithoutSystem($memberID);
+                $color = $member["color"];
+            } else {
+                $systemDataForColor = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/$systemID/general.json"), true);
+                $color = $systemDataForColor["color"] ?? "000000";
+            }
 
             if (isset($_GET["debug"])) {
                 ob_clean();
                 echo("<pre>");
 
                 echo("Color difference debug\n======================\n\n");
-                echo("Member color: #" . $member["color"] . "\n\n");
+                echo("Color: #" . $member["color"] . "\n\n");
             }
 
             $sr = hexdec(substr($member["color"], 0, 2));
@@ -388,6 +394,7 @@ require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/util/functions.inc";
                     }
 
                     .dropdown-menu {
+                        background-color: #<?= $palette[1] ?> !important;
                         --bs-dropdown-bg: #<?= $palette[1] ?> !important;
                         --bs-dropdown-link-color: #<?= $palette[6] ?> !important;
                         --bs-dropdown-link-disabled-color: #<?= $palette[6] ?>77 !important;
@@ -397,6 +404,24 @@ require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/util/functions.inc";
                         --bs-dropdown-link-active-color: #<?= $palette[6] ?> !important;
                     }
 
+                    .dropdown-item {
+                        color: #<?= $palette[6] ?> !important;
+                    }
+
+                    .dropdown-item:hover {
+                        color: #<?= $palette[6] ?> !important;
+                        background-color: #<?= $palette[3] ?> !important;
+                    }
+
+                    .dropdown-item:active {
+                        color: #<?= $palette[6] ?> !important;
+                        background-color: #<?= $palette[6] ?> !important;
+                    }
+
+                    .dropdown-item.disabled {
+                        color: #<?= $palette[6] ?>77 !important;
+                    }
+
                     .coins {
                         color: #<?= $palette[6] ?> !important;
                         background-color: #<?= $palette[1] ?> !important;
@@ -425,10 +450,6 @@ require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/util/functions.inc";
                         color: #<?= $palette[0] ?>77 !important;
                     }
 
-                    .dropdown-item:active span, .dropdown-item:active img {
-                        filter: invert(1);
-                    }
-
                     .list-group, .list-group-item, .list-group-item-action {
                         --bs-list-group-color: var(--bs-body-color) !important;
                         --bs-list-group-action-color: var(--bs-body-color) !important;
@@ -463,6 +484,10 @@ require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/util/functions.inc";
                         --bs-alert-border-color: var(--bs-body-color);
                     }
 
+                    .alert-danger .btn-close, .alert-success .btn-close, .alert-warning .btn-close {
+                        background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23<?= $palette[0] ?>'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat
+                    }
+
                     .alert-danger, .alert-success, .alert-warning, .list-group-item-warning {
                         --bs-alert-color: var(--bs-body-bg) !important;
                         --bs-alert-bg: #<?= $palette[9] ?> !important;
@@ -545,14 +570,37 @@ require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/util/functions.inc";
                         --bs-gradient: none;
                     }
 
-                    .form-control, .form-control:focus, .form-select, .form-select:focus {
+                    .progress {
+                        background-color: #<?= $palette[2] ?> !important;
+                    }
+
+                    .progress-bar.bg-success {
+                        background-color: #<?= $palette[9] ?> !important;
+                    }
+
+                    .progress-bar.bg-danger {
+                        background-color: #<?= $palette[7] ?> !important;
+                    }
+
+                    .card {
+                        background-color: #<?= $palette[2] ?> !important;
+                        border-color: #<?= $palette[5] ?> !important;
+                    }
+
+                    .form-control, .form-control:focus, .form-select, .form-select:focus, .form-check-input, .form-check-input:focus {
                         color: var(--bs-body-color);
-                        background-color: #<?= $palette[2] ?>;
-                        border-color: #<?= $palette[3] ?>;
+                        background-color: #<?= $palette[2] ?> !important;
+                        border-color: #<?= $palette[3] ?> !important;
+                    }
+
+                    .form-check-input:checked, .form-check-input:checked:focus {
+                        background-color: #<?= $palette[9] ?> !important;
+                        border-color: #<?= $palette[9] ?> !important;
                     }
 
-                    .form-control:focus, .form-select:focus {
+                    .form-control:focus, .form-select:focus, .form-check-input:focus {
                         box-shadow: 0 0 0 0.25rem rgba(<?= rgb($palette[9]) ?>, .25);
+                        transition: box-shadow 200ms;
                     }
 
                     .form-control::placeholder, .form-select::placeholder {
@@ -569,7 +617,24 @@ require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/util/functions.inc";
                     }
 
                     .btn-close {
-                        background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23<?= $palette[6] ?>'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat
+                        background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23<?= $palette[6] ?>'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
+                        opacity: 1 !important;
+                    }
+
+                    .antialias, #new-homepage img, #hpd-other img, #hpd-raindrops img, #hpd-cloudburst img, .ck img, #system-info img, #member-card img {
+                        image-rendering: auto !important;
+                    }
+
+                    #member-relations img {
+                        image-rendering: pixelated !important;
+                    }
+
+                    .btn-close:hover {
+                        opacity: .75 !important;
+                    }
+
+                    .btn-close:active {
+                        opacity: .5 !important;
                     }
 
                     .ck-editor {
@@ -631,7 +696,8 @@ require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/util/functions.inc";
 
 if (
     (($isLoggedIn || $isLowerLoggedIn) && !$use2023UI && isset($_COOKIE["enable2023UIcta"]) && $_COOKIE["enable2023UIcta"] === "yes") ||
-    (isset($_COOKIE["force2023UIcta"]) && $_COOKIE["force2023UIcta"] === "yes" && !$use2023UI)
+    (isset($_COOKIE["force2023UIcta"]) && $_COOKIE["force2023UIcta"] === "yes" && !$use2023UI) ||
+    (($isLoggedIn || $isLowerLoggedIn) && isset($_PROFILE) && $_PROFILE["login"] === "raindrops" && !$use2023UI)
 ) { ?>
     <div class="modal fade" id="new-ui-cta">
         <div class="modal-dialog">
diff --git a/includes/components/pleasure.inc b/includes/components/pleasure.inc
index b9f9cd0..5749bd7 100644
--- a/includes/components/pleasure.inc
+++ b/includes/components/pleasure.inc
@@ -69,6 +69,7 @@
 </script>
 
 <style>
+    <?php global $use2023UI; if (!$use2023UI): ?>
     .modal-header {
         border-bottom: 1px solid #353738;
     }
@@ -81,6 +82,7 @@
     .btn-close {
         filter: invert(1);
     }
+    <?php endif; ?>
 
     #btn-on.disabled, #btn-off.disabled {
         opacity: .5;
diff --git a/includes/components/sysbanner.inc b/includes/components/sysbanner.inc
index 2dd1dd4..a97169a 100644
--- a/includes/components/sysbanner.inc
+++ b/includes/components/sysbanner.inc
@@ -66,12 +66,13 @@ $pages = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/pa
         setInterval(refreshTimeline, 10000);
         refreshTimeline();
     </script>
+    <?php global $use2023UI; ?>
     <div style="display:grid;grid-template-columns: repeat(2, 1fr);">
         <div style="display: flex; align-items: center; justify-content: center; text-align: center;">
             Last switch&nbsp;<span data-bs-toggle="tooltip" title="<?= date("D j M Y, G:i:s (e)", strtotime(json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/$systemID/fronters.json"), true)["timestamp"])) ?>"><?= timeAgo(json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/$systemID/fronters.json"), true)["timestamp"]) ?></span>
         </div>
         <a title="<?= $pages["s:history"]["name"][$lang["_name"]] ?>" data-bs-toggle="tooltip" style="display:inline-block;padding:5px 10px;text-align: center" class="system-action tooltip-nohelp" href="/<?= $system ?>/-/history">
-            <img src="/assets/icons/history.svg" style="vertical-align: middle;height: 24px;width: 24px;filter: invert(1)" alt="">
+            <img src="<?= $use2023UI ? icon("history") : "/assets/icons/history.svg" ?>" style="vertical-align: middle;height: 24px;width: 24px;" alt="">
             <span style="vertical-align: middle;" class="list-separator-desktop"><?= $pages["s:history"]["name"][$lang["_name"]] ?></span>
         </a>
         <div></div>
diff --git a/includes/components/wakeup.inc b/includes/components/wakeup.inc
index cc54821..994bbdc 100644
--- a/includes/components/wakeup.inc
+++ b/includes/components/wakeup.inc
@@ -10,6 +10,7 @@
 <p style="text-align:center;margin-top:10px;">Sending next notification <b><span id="next-notification">never</span></b></p>
 
 <style>
+    <?php global $use2023UI; if (!$use2023UI): ?>
     .modal-header {
         border-bottom: 1px solid #353738;
     }
@@ -22,6 +23,7 @@
     .btn-close {
         filter: invert(1);
     }
+    <?php endif; ?>
 
     #btn-on.disabled, #btn-off.disabled {
         opacity: .5;
diff --git a/includes/fragments/member.inc b/includes/fragments/member.inc
index 7672529..e927fd4 100644
--- a/includes/fragments/member.inc
+++ b/includes/fragments/member.inc
@@ -163,10 +163,10 @@ if (file_exists($_SERVER['DOCUMENT_ROOT'] . "/assets/ponies/" . $memberID . ".pn
                         <b><input onkeyup="updateDesignName('<?= $id ?>');" maxlength="100" class="input-inherit" value="<?= $design["name"] ?>" id="design-<?= $id ?>-name"></b><br><input onkeyup="updateDesignNote('<?= $id ?>');" maxlength="100" class="input-inherit" value="<?= $design["note"] ?>" id="design-<?= $id ?>-note">
                     </div>
                 </div>
-                <?php endif; endforeach; ?>
+                <?php endif; endforeach; global $use2023UI; ?>
 
                 <div onclick="uploadNewDesign();" style="cursor: pointer; display: flex; height: 256px; align-items: center; justify-content: center; width: 64px;">
-                    <img src="/assets/icons/add.svg" style="filter: invert(1); opacity: .5; width: 64px;">
+                    <img src="<?= $use2023UI ? icon("add") : "/assets/icons/add.svg" ?>" style="filter: invert(1); opacity: .5; width: 64px;">
                 </div>
             </div>
         </div>
diff --git a/includes/util/homepage.inc b/includes/util/homepage.inc
index 1846cba..497fe2e 100644
--- a/includes/util/homepage.inc
+++ b/includes/util/homepage.inc
@@ -10,7 +10,7 @@ function newHomepage($id, $page, $title) {
     ?>
     <div class="new-homepage-system" id="new-homepage-system-<?= $id ?>">
         <?php if ($title): ?>
-        <a href="/<?= $page ?>" style="height: 48px; display: flex; align-items: center; justify-content: center; border-top-left-radius: 10px; border-top-right-radius: 10px; text-align: center; text-decoration: none; color: white; background-color: #<?= $system["color"] ?? "000000" ?>55" class="new-homepage-system-title" id="new-homepage-system-<?= $id ?>-title">
+        <a href="/<?= $page ?>" style="height: 48px; display: flex; align-items: center; justify-content: center; border-top-left-radius: 10px; border-top-right-radius: 10px; text-align: center; text-decoration: none; color: white; background-color: #<?= $system["color"] ?? "000000" ?>55; box-shadow: 0 20px 20px 0 #<?= $system["color"] ?? "000000" ?>55;" class="new-homepage-system-title" id="new-homepage-system-<?= $id ?>-title">
             <div>
                 <img src="<?= getAsset($id) ?>" style="border-radius: 5px;width: 48px; vertical-align: middle;"><b style="vertical-align: middle; margin-left: 5px;"><?= $system["name"] ?></b>
             </div>
diff --git a/pages/api/docs.php b/pages/api/docs.php
index a60a6e6..31cd961 100644
--- a/pages/api/docs.php
+++ b/pages/api/docs.php
@@ -20,10 +20,10 @@ if (isset($select)) {
     die("Not set");
 }
 
-if ($json_object["content"])  $data["contents"] = $json_object["content"];
-if ($json_object["name"])     $data["name"]     = $json_object["name"];
-if ($json_object["explicit"]) $data["nsfw"]     = $json_object["explicit"];
-if ($json_object["category"]) $data["category"] = trim($json_object["category"]) !== "" && trim($json_object["category"]) !== "Unsorted" && trim($json_object["category"]) !== "unsorted" && trim($json_object["category"]) !== "/no" && trim($json_object["category"]) !== "Unsort" && trim($json_object["category"]) !== "unsort" ? $json_object["category"] : null;
+if (isset($json_object["content"]))  $data["contents"] = $json_object["content"];
+if (isset($json_object["name"]))     $data["name"]     = $json_object["name"];
+if (isset($json_object["explicit"])) $data["nsfw"]     = $json_object["explicit"];
+if (isset($json_object["category"])) $data["category"] = trim($json_object["category"]) !== "" && trim($json_object["category"]) !== "Unsorted" && trim($json_object["category"]) !== "unsorted" && trim($json_object["category"]) !== "/no" && trim($json_object["category"]) !== "Unsort" && trim($json_object["category"]) !== "unsort" ? $json_object["category"] : null;
 
 $data["last"]["date"] = time();
 $data["last"]["author"] = $_PROFILE['login'];
diff --git a/pages/api/reauthenticate.php b/pages/api/reauthenticate.php
index 2b5a8ca..b194098 100644
--- a/pages/api/reauthenticate.php
+++ b/pages/api/reauthenticate.php
@@ -26,9 +26,10 @@ if (isset($_COOKIE['PEH2_SESSION_TOKEN']) && $isLoggedIn) {
     $old["last"] = time();
     $old["profile"] = $_PROFILE;
 
-    file_put_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/tokens/" . $newToken, json_encode($old));
+    file_put_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/sessions/" . $newToken, json_encode($old));
+    file_put_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/tokens/" . $newToken, json_encode($_PROFILE));
 } else if (isset($_COOKIE['PEH2_SESSION_TOKEN']) && $isLowerLoggedIn) {
-    $old = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/lowertokens/" . $_COOKIE['PEH2_SESSION_TOKEN']), true);
+    $old = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/sessions/" . $_COOKIE['PEH2_SESSION_TOKEN']), true);
 
     if (!isset($_GET["plain"])) {
         $old["name"] = base64_decode($_GET["name"] ?? "LQo=");
@@ -41,7 +42,8 @@ if (isset($_COOKIE['PEH2_SESSION_TOKEN']) && $isLoggedIn) {
     $old["last"] = time();
     $old["profile"] = $_PROFILE;
 
-    file_put_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/lowertokens/" . $newToken, json_encode($old));
+    file_put_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/sessions/" . $newToken, json_encode($old));
+    file_put_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/lowertokens/" . $newToken, json_encode($_PROFILE));
 }
 
 die($newToken);
\ No newline at end of file
diff --git a/pages/byfront.inc b/pages/byfront.inc
index f845378..a8ff483 100644
--- a/pages/byfront.inc
+++ b/pages/byfront.inc
@@ -111,30 +111,27 @@ $travelling = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includ
             }
 
             if ((isset($age) && $age > 0 && time() > 1677628800) || time() <= 1677628800): ?>
-            <div class="relation" style="background-color:<?php if ($member["_metadata"]["less_frequent"] || $member["_metadata"]["persecutor"]): ?><?php if ($member["_lastFronted"] > time() - (86400 * 21)): ?>rgba(128, 54, 54, .1)<?php else: ?><?php if ($member["_lastFronted"] > time() - (86400 * 37)): ?>rgba(255, 227, 0, 0.17)<?php else: ?>rgba(255, 255, 255, .1)<?php endif; ?>;<?php endif; ?><?php else: ?><?php if ($member["_lastFronted"] > time() - (86400 * 21)): ?>rgba(255, 255, 255, .1)<?php else: ?><?php if ($member["_lastFronted"] > time() - (86400 * 30)): ?>rgba(255, 227, 0, 0.17)<?php else: ?>rgba(255,55,55,0.17)<?php endif; ?>;<?php endif; ?><?php endif; ?>;margin-bottom:10px;padding:10px;border-radius:10px;display:grid;grid-template-columns: 1fr 2fr max-content;<?php if ($travelling[$member['id']]["travelling"] || ($member["_metadata"]["punished"] ?? false)): ?>opacity: 0.75;<?php endif; ?><?php if (isset($member["_metadata"]["not_fronting"]) && $member["_metadata"]["not_fronting"]): ?>background-color:rgba(255, 255, 255, .1) !important;<?php endif; ?>">
+            <div class="relation" style="margin-bottom:10px;padding:10px;border-radius:10px;display:grid;grid-template-columns: 1fr 2fr max-content;<?php if ($travelling[$member['id']]["travelling"] || ($member["_metadata"]["punished"] ?? false)): ?>opacity: 0.75;<?php endif; ?>">
                 <a class="relation-intro" style="background-color:rgba(255, 255, 255, .05);border-right:1px solid rgba(255, 255, 255, .1);margin:-10px;padding:10px;border-top-left-radius:10px;border-bottom-left-radius:10px;color: white;display:flex;align-items:center;text-decoration: none;" href="/<?= $member["name"] ?>">
                     <img src="<?= getAsset($member['system'], $member["id"], "heads") ?>" style="width:24px;">&nbsp;<?= $member["display_name"] ?? $member["name"] ?>
                     <span style="display: inline-block;margin-left: auto;">
                         <?php if ($member["_metadata"]["not_fronting"]): ?>
-                            <span class="badge bg-info rounded-pill text-black">No</span>
+                            <span class="badge <?= isset($use2023UI) && $use2023UI ? "bg-success" : "bg-info text-black" ?> rounded-pill">Not fronting</span>
                         <?php endif; ?>
                         <?php if ($member["_metadata"]["less_frequent"] && !(isset($member["_metadata"]["not_fronting"]) && $member["_metadata"]["not_fronting"])): ?>
                             <span class="badge bg-success rounded-pill">Less</span>
                         <?php endif; ?>
                         <?php if ($member["_metadata"]["persecutor"]): ?>
-                            <span class="badge bg-light text-black rounded-pill">Persecutor</span>
+                            <span class="badge <?= isset($use2023UI) && $use2023UI ? "bg-success" : "bg-light text-black" ?> rounded-pill">Persecutor</span>
                         <?php endif; ?>
                         <?php if (isset($member["_metadata"]["punished"]) && $member["_metadata"]["punished"]): ?>
-                            <span class="badge bg-light text-black rounded-pill">Punished</span>
+                            <span class="badge <?= isset($use2023UI) && $use2023UI ? "bg-success" : "bg-light text-black" ?> rounded-pill">Punished</span>
                         <?php endif; ?>
                         <?php if ($member["_metadata"]["shared_memory"] !== 2): ?>
-                            <span class="badge text-black bg-warning rounded-pill">Memory</span>
+                            <span class="badge <?= isset($use2023UI) && $use2023UI ? "bg-success" : "text-black bg-warning" ?> rounded-pill">Memory</span>
                         <?php endif; ?>
                         <?php if ($travelling[$member['id']]["travelling"]): ?>
-                            <span class="badge text-white bg-secondary rounded-pill">Travelling</span>
-                        <?php endif; ?>
-                        <?php if ($member["_lastFronted"] < time() - (86400 * 30) && !$member["_metadata"]["not_fronting"]): ?>
-                            <span class="badge text-white bg-danger rounded-pill">Must front</span>
+                            <span class="badge <?= isset($use2023UI) && $use2023UI ? "bg-success" : "text-white bg-secondary" ?> rounded-pill">Travelling</span>
                         <?php endif; ?>
                     </span>
                 </a>
diff --git a/pages/home.inc b/pages/home.inc
index 7485cfd..fcd04ab 100644
--- a/pages/home.inc
+++ b/pages/home.inc
@@ -13,7 +13,7 @@ function banner() { global $isLoggedIn; global $isLowerLoggedIn; $byColor = getM
         <img alt="" src="/assets/logo/newlogo<?= $isLoggedIn || $isLowerLoggedIn ? "3" : "" ?>.png" style="width:128px;" class="old-ui">
         <img alt="" src="/assets/logo/newlogo-ng.png" style="width:128px;" class="new-ui">
         <p style="z-index:999;position:relative;background:transparent;margin: 20px -10px 0 -20px;padding-right:30px;height:32px;text-align: center;display:grid;grid-template-columns: repeat(<?= count($byColor) ?>, 1fr);">
-            <?php foreach ($byColor as $member): ?><a class="rainbow-item" style="overflow: hidden;"><img src="<?= getAsset($member["_system"], $member["id"], "heads") ?>" style="height:32px;position:absolute;z-index:99;"></a><?php endforeach; ?>
+            <?php foreach ($byColor as $member): ?><a class="rainbow-item" style="overflow: hidden;"><img title="<?= $member["display_name"] ?? $member["name"] ?>" data-bs-toggle="tooltip" src="<?= getAsset($member["_system"], $member["id"], "heads") ?>" style="height:32px;position:absolute;z-index:99;"></a><?php endforeach; ?>
         </p>
         <div style="margin-top:-33px;margin-bottom:0;margin-left:-20px;margin-right:20px;height:32px;text-align: center;display:grid;grid-template-columns: repeat(<?= count($byColor) ?>, 1fr);position:relative;left:10px;">
             <?php foreach ($byColor as $member): ?><div>
diff --git a/pages/login.inc b/pages/login.inc
index 1522ab3..157794f 100644
--- a/pages/login.inc
+++ b/pages/login.inc
@@ -4,7 +4,7 @@ if (isset($_GET["return"])) {
     setcookie("PEH2_RETURN_PAGE", $_GET["return"], 0, "/");
 }
 
-if (isset($_GET["immediate"])) {
+if (isset($_GET["immediate"]) || (isset($_COOKIE["new2023UI"]) && !isset($_GET["no2023"]))) {
     header("Location: /auth/init");
     die();
 }
diff --git a/pages/money.inc b/pages/money.inc
index aa2e57e..67a9a56 100644
--- a/pages/money.inc
+++ b/pages/money.inc
@@ -27,6 +27,12 @@ if (isset($parts[2])) {
 $systemID = $_PROFILE["login"] === "cloudburst" ? "ynmuc" : "gdapd";
 $fronters = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/" . ($_PROFILE["login"] === "cloudburst" ? "ynmuc" : "gdapd") . "/fronters.json"), true)["members"];
 
+if (!isset($parts[2])) {
+    unset($systemID);
+} else {
+    $systemID = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/money/" . $parts[2] . ".json"), true)["owner"] === "cloudburst" ? "ynmuc" : "gdapd";
+}
+
 if (count($fronters) > 0) {
     $myId = $fronters[0]["id"];
 } else {
diff --git a/pages/pair.inc b/pages/pair.inc
index 2fafc31..8b0bb09 100644
--- a/pages/pair.inc
+++ b/pages/pair.inc
@@ -60,6 +60,7 @@ require_once $_SERVER['DOCUMENT_ROOT'] . '/includes/components/header.inc'; glob
 </div>
 
 <style>
+    <?php global $use2023UI; if (!$use2023UI): ?>
     .modal-header {
         border-bottom: 1px solid #353738;
     }
@@ -76,11 +77,12 @@ require_once $_SERVER['DOCUMENT_ROOT'] . '/includes/components/header.inc'; glob
     .alert-dismissible .btn-close {
         filter: none !important;
     }
+    <?php endif ?>
 
     blockquote {
         margin-left: 5px;
         padding-left: 10px;
-        border-left: 3px solid rgba(255, 255, 255, .25);
+        border-left: 3px solid var(--palette-5, rgba(255, 255, 255, .25));
     }
 </style>
 
diff --git a/pages/ponytown.inc b/pages/ponytown.inc
index 08d71ea..08c3f27 100644
--- a/pages/ponytown.inc
+++ b/pages/ponytown.inc
@@ -73,15 +73,15 @@ $member = getMemberWithoutSystem($parts[2]);
                     <div id="uploader">
                         <ol>
                             <li>Open Pony Town [<a href="https://pony.town/" target="_blank">main</a>, <a href="https://event.pony.town/" target="_blank">event</a>, <a href="https://eventblue.pony.town/" target="_blank">eventblue</a>, <a href="https://eventgreen.pony.town/" target="_blank">eventgreen</a>, <a href="https://breezy.pony.town/" target="_blank">breezy</a>, <a href="https://building.pony.town/" target="_blank">building</a>], login if needed, and select the right pony</li>
-                            <li>Click on <img alt="edit" src="/assets/editor/ponytown/step1.png" style="height: 2rem;"></li>
-                            <li>Focus on <img alt="Export" src="/assets/editor/ponytown/step2.png" style="height: 2rem;"> and click on <img alt="Image export zoom" src="/assets/editor/ponytown/step2b.png" style="height: 2rem;"></li>
-                            <li>In the menu, select <img alt="1x" src="/assets/editor/ponytown/step3.png" style="height: 2rem;"></li>
-                            <li>Click on <img alt="Image export settings" src="/assets/editor/ponytown/step4.png" style="height: 2rem;"> and uncheck everything, like this:<br><img alt="[all settings unchecked]" src="/assets/editor/ponytown/step4b.png" style="width: 25%;"></li>
-                            <li>Click on <img alt="PNG" src="/assets/editor/ponytown/step5.png" style="height: 2rem;"> and download the file to your device</li>
+                            <li>Click on <img class="antialias" alt="edit" src="/assets/editor/ponytown/step1.png" style="height: 2rem;"></li>
+                            <li>Focus on <img class="antialias" alt="Export" src="/assets/editor/ponytown/step2.png" style="height: 2rem;"> and click on <img class="antialias" alt="Image export zoom" src="/assets/editor/ponytown/step2b.png" style="height: 2rem;"></li>
+                            <li>In the menu, select <img class="antialias" alt="1x" src="/assets/editor/ponytown/step3.png" style="height: 2rem;"></li>
+                            <li>Click on <img class="antialias" alt="Image export settings" src="/assets/editor/ponytown/step4.png" style="height: 2rem;"> and uncheck everything, like this:<br><img class="antialias" alt="[all settings unchecked]" src="/assets/editor/ponytown/step4b.png" style="width: 25%;"></li>
+                            <li>Click on <img class="antialias" alt="PNG" src="/assets/editor/ponytown/step5.png" style="height: 2rem;"> and download the file to your device</li>
                             <li>Upload this file here (yes this is a button):<br><input type="file" id="file-uploader"></li>
-                            <li>Go back to Pony Town, click on <img alt="Image export settings" src="/assets/editor/ponytown/step4.png" style="height: 2rem;"> again</li>
-                            <li>Check "Head only", and nothing else, like this:<br><img alt="[Head only checked]" src="/assets/editor/ponytown/step9.png" style="width: 25%;"></li>
-                            <li>Click on <img alt="PNG" src="/assets/editor/ponytown/step5.png" style="height: 2rem;"> once again and download the file to your device</li>
+                            <li>Go back to Pony Town, click on <img class="antialias" alt="Image export settings" src="/assets/editor/ponytown/step4.png" style="height: 2rem;"> again</li>
+                            <li>Check "Head only", and nothing else, like this:<br><img class="antialias" alt="[Head only checked]" src="/assets/editor/ponytown/step9.png" style="width: 25%;"></li>
+                            <li>Click on <img class="antialias" alt="PNG" src="/assets/editor/ponytown/step5.png" style="height: 2rem;"> once again and download the file to your device</li>
                             <li>Upload this file (the second one) here (yes this is also a button):<br><input type="file" id="file-uploader2"></li>
                             <li>We will check if you used the correct settings and save it if everything is good.</li>
                         </ol>
diff --git a/pages/sessions.inc b/pages/sessions.inc
index f324494..0e4e779 100644
--- a/pages/sessions.inc
+++ b/pages/sessions.inc
@@ -157,6 +157,7 @@ $verifiedNames = [
 </script>
 
 <style>
+    <?php global $use2023UI; if (!$use2023UI): ?>
     .modal-header {
         border-bottom: 1px solid #353738;
     }
@@ -193,6 +194,14 @@ $verifiedNames = [
         color: #bbb;
     }
 
+    <?php else: ?>
+
+    .list-group-item .text-muted {
+        color: var(--palette-9) !important;
+    }
+
+    <?php endif; ?>
+
     .member-link, .list-group-item-action {
         cursor: pointer !important;
     }
@@ -206,13 +215,13 @@ $verifiedNames = [
         margin-top: 10px;
         margin-left: 5px;
         padding-left: 10px;
-        border-left: 3px solid rgba(255, 255, 255, .25);
+        border-left: 3px solid var(--palette-5, rgba(255, 255, 255, .25));
     }
 
     #device-bq {
         margin-left: 5px;
         padding-left: 10px;
-        border-left: 3px solid rgba(255, 255, 255, .25);
+        border-left: 3px solid var(--palette-5, rgba(255, 255, 255, .25));
     }
 </style>