diff --git a/resources/in-content/system.css b/resources/in-content/system.css
index e0befee..487dfe0 100644
--- a/resources/in-content/system.css
+++ b/resources/in-content/system.css
@@ -491,6 +491,258 @@
             border-color: transparent !important;
         }
     }
+
+    @-moz-document url-prefix("about:pocket") {
+        html,
+        body {
+            background-color: var(--uc-arrowpanel-background) !important;
+            font-size: 12px !important;
+            color: var(--uc-arrowpanel-color) !important;
+            user-select: none !important;
+        }
+
+        hr {
+            background: none !important;
+            height: 0 !important;
+            border-top: 1px solid var(--uc-desaturate-dimmed) !important;
+        }
+
+        .stp_header .stp_header_logo {
+            filter: hue-rotate(-103deg) saturate(150%);
+        }
+
+        .stp_button {
+            text-decoration: none !important;
+            border-radius: var(--general-button-border-radius) !important;
+        }
+
+        .stp_button_wide .stp_button {
+            margin-block: -2px 0px !important;
+            margin-inline: -6px !important;
+            border-radius: 4px !important;
+        }
+
+        .stp_button.stp_button_primary {
+            background-color: var(--uc-parent-primary-button-background) !important;
+            color: var(--uc-parent-primary-button-text-color) !important;
+            cursor: default !important;
+        }
+
+        .stp_button.stp_button_primary:hover {
+            background-color: var(--uc-parent-primary-button-background-hover) !important;
+        }
+
+        .stp_button.stp_button_primary:hover:active {
+            background-color: var(--uc-parent-primary-button-background-active) !important;
+        }
+
+        .stp_button.stp_button_secondary {
+            background-color: var(--uc-arrowpanel-faint) !important;
+            color: var(--in-content-text-color) !important;
+            cursor: default !important;
+        }
+
+        .stp_button.stp_button_secondary:hover {
+            background-color: var(--uc-arrowpanel-dimmed) !important;
+        }
+
+        .stp_button.stp_button_secondary:hover:active {
+            background-color: var(--uc-arrowpanel-dimmed-further) !important;
+        }
+
+        .stp_button:focus-visible {
+            outline: none !important;
+            box-shadow: 0 0 0 2px var(--global-focus-outline-color) !important;
+        }
+
+        a {
+            color: var(--in-content-link-color) !important;
+            text-decoration: none !important;
+        }
+
+        .stp_button.stp_button_text:hover {
+            color: var(--in-content-link-color-hover) !important;
+        }
+
+        .stp_button.stp_button_text:hover:active {
+            color: var(--in-content-link-color-active) !important;
+        }
+
+        .stp_button.stp_button_text:focus {
+            text-decoration: underline !important;
+        }
+
+        .stp_popular_topics .stp_popular_topic .stp_popular_topic_link {
+            background-color: var(--uc-arrowpanel-faint) !important;
+            color: var(--in-content-text-color) !important;
+            border-radius: var(--general-button-border-radius) !important;
+            text-decoration: none !important;
+        }
+
+        .stp_popular_topics .stp_popular_topic .stp_popular_topic_link:hover {
+            background-color: var(--uc-arrowpanel-dimmed) !important;
+        }
+
+        .stp_popular_topics .stp_popular_topic .stp_popular_topic_link:hover:active {
+            background-color: var(--uc-arrowpanel-dimmed-further) !important;
+        }
+
+        .stp_article_list .stp_article_list_link {
+            border-radius: 4px !important;
+        }
+
+        .stp_article_list .stp_article_list_link:is(:hover, :focus) {
+            background-color: var(--uc-arrowpanel-dimmed) !important;
+        }
+
+        .stp_article_list .stp_article_list_thumb:not(.stp_article_list_thumb_placeholder) {
+            background-color: transparent !important;
+            border-radius: 3px !important;
+        }
+
+        .stp_article_list .stp_article_list_thumb_placeholder {
+            background-color: var(--uc-arrowpanel-dimmed) !important;
+        }
+
+        .stp_article_list .stp_article_list_publisher {
+            color: var(--uc-panel-description-color) !important;
+        }
+
+        .stp_article_list_meta {
+            display: flex;
+            flex-flow: column nowrap;
+            justify-content: center;
+            row-gap: 5px;
+        }
+
+        .stp_article_list :is(.stp_article_list_saved_article, .stp_article_list_link) {
+            flex-flow: row nowrap;
+            align-items: center;
+        }
+
+        .stp_article_list_meta > * {
+            margin-block: 0 !important;
+        }
+
+        .stp_tag_picker {
+            margin-bottom: 16px !important;
+        }
+
+        .stp_tag_picker .stp_tag_picker_tags {
+            border: none !important;
+            background-color: transparent !important;
+            padding: 0 !important;
+            color: inherit !important;
+        }
+
+        .stp_tag_picker .stp_tag_picker_input_wrapper,
+        .stp_tag_picker .stp_tag_picker_input {
+            min-width: 0 !important;
+        }
+
+        .stp_tag_picker .stp_tag_picker_input_wrapper {
+            border: 1px solid var(--uc-desaturate-dimmed) !important;
+            border-radius: var(--general-button-border-radius) !important;
+            background-color: var(--uc-arrowpanel-very-faint) !important;
+            overflow: clip !important;
+        }
+
+        .stp_tag_picker .stp_tag_picker_input_wrapper:focus-within {
+            box-shadow: 0 0 0 2px var(--global-focus-shadow-color) !important;
+            outline: 1px solid var(--global-focus-outline-color) !important;
+            border-color: var(--global-focus-outline-color) !important;
+        }
+
+        .stp_tag_picker .stp_tag_picker_input,
+        .stp_tag_picker .stp_tag_picker_button {
+            border: none !important;
+            outline: none !important;
+            border-radius: 0 !important;
+            color: inherit !important;
+        }
+
+        .stp_tag_picker .stp_tag_picker_button {
+            border-left: 1px solid var(--uc-desaturate-dimmed) !important;
+            background-color: var(--uc-arrowpanel-very-faint) !important;
+            cursor: default !important;
+        }
+
+        .stp_tag_picker .stp_tag_picker_button:disabled {
+            color: var(--uc-menu-disabled-color) !important;
+        }
+
+        .stp_tag_picker .stp_tag_picker_button:hover:enabled {
+            background-color: var(--uc-arrowpanel-dimmed) !important;
+        }
+
+        .stp_tag_picker .stp_tag_picker_button:focus:enabled {
+            border-color: var(--global-focus-outline-color) !important;
+            outline: 1px solid var(--global-focus-outline-color) !important;
+            background-color: var(--uc-arrowpanel-dimmed-further) !important;
+            color: var(--uc-parent-primary-button-text-color) !important;
+        }
+
+        .stp_tag_picker .stp_tag_picker_tag {
+            padding-block: 4px !important;
+            padding-inline: 6px 4px !important;
+            background-color: var(--uc-arrowpanel-faint) !important;
+            border-radius: var(--general-button-border-radius) !important;
+        }
+
+        .stp_tag_picker .stp_tag_picker_tag_remove {
+            width: 14px !important;
+            height: 14px !important;
+            box-sizing: content-box !important;
+            padding: 0 !important;
+            margin-inline-start: 4px !important;
+            background: url(chrome://userchrome/content/close.svg) center/11px no-repeat !important;
+            -moz-context-properties: fill, fill-opacity;
+            fill: var(--uc-panel-description-color);
+            color: transparent !important;
+            cursor: default !important;
+            border-radius: 2px !important;
+        }
+
+        .stp_tag_picker .stp_tag_picker_tag_remove:hover {
+            fill: var(--uc-arrowpanel-color) !important;
+            background-color: var(--uc-arrowpanel-dimmed) !important;
+        }
+
+        .stp_tag_picker .stp_tag_picker_tag_remove:focus {
+            outline-offset: 0 !important;
+            box-shadow: 0 0 0 2px var(--global-focus-shadow-color) !important;
+            outline: 1px solid var(--global-focus-outline-color) !important;
+        }
+
+        @supports -moz-bool-pref("userChrome.css.mac-ui-fonts") {
+            body {
+                font-family: SF Pro Text, SF Arabic, Segoe UI, sans-serif !important;
+                font-kerning: normal !important;
+            }
+
+            h3,
+            :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {
+                font-weight: var(--uc-font-weight-bold, 500);
+            }
+
+            .stp_button {
+                font-weight: var(--uc-font-weight-bold, 500) !important;
+                font-family: SF Pro Display, SF Arabic, Segoe UI, sans-serif !important;
+            }
+
+            .stp_article_list .stp_article_list_header {
+                font-weight: var(--uc-font-weight-bold, 500) !important;
+            }
+
+            .stp_popular_topics .stp_popular_topic .stp_popular_topic_link {
+                font-weight: var(--uc-font-weight-thin, 400) !important;
+            }
+
+            .stp_tag_picker .stp_tag_picker_tag {
+                font-weight: var(--uc-font-weight-thin, 400) !important;
+            }
+        }
+    }
 }
 
 @-moz-document url("about:processes") {
diff --git a/resources/layout/dirListing.css b/resources/layout/dirListing.css
index c7a7f9b..7ae3e12 100644
--- a/resources/layout/dirListing.css
+++ b/resources/layout/dirListing.css
@@ -5,130 +5,133 @@
 @import url(chrome://userchrome/content/layout/uc-low-globals.css);
 
 :root {
-    background-color: -moz-dialog;
-    color: -moz-dialogtext;
-    font: message-box;
-    padding-inline: 2em;
+  background-color: -moz-dialog;
+  color: -moz-dialogtext;
+  font: message-box;
+  padding-inline: 2em;
+  color-scheme: light dark;
 }
 
 body {
-    border: 1px solid ThreeDShadow;
-    border-radius: 10px;
-    padding: 3em;
-    min-width: 30em;
-    max-width: 65em;
-    margin: 4em auto;
-    background-color: Field;
-    color: FieldText;
+  border: 1px solid ThreeDShadow;
+  border-radius: 10px;
+  padding: 3em;
+  min-width: 30em;
+  max-width: 65em;
+  margin: 4em auto;
+  background-color: Field;
+  color: FieldText;
 }
 
 h1 {
-    font-size: 160%;
-    margin: 0 0 0.6em;
-    border-bottom: 1px solid ThreeDLightShadow;
-    font-weight: normal;
+  font-size: 160%;
+  margin: 0 0 0.6em;
+  border-bottom: 1px solid ThreeDLightShadow;
+  font-weight: normal;
 }
 
 a {
-    text-decoration: none;
+  text-decoration: none;
 }
 
 a:hover {
-    text-decoration: underline;
+  text-decoration: underline;
 }
 
 /* ensure multiple spaces are shown correctly. */
 td:first-child > a {
-    white-space: pre;
+  white-space: pre;
 }
 
 p {
-    font-size: 110%;
+  font-size: 110%;
 }
 
 #UI_goUp {
-    margin-top: 0;
-    float: inline-start;
+  margin-top: 0;
+  float: inline-start;
 }
 
 #UI_showHidden {
-    margin-top: 0;
-    float: inline-end;
+  margin-top: 0;
+  float: inline-end;
 }
 
 table {
-    clear: both;
-    width: 90%;
-    margin: 0 auto;
-    border-spacing: 0;
+  clear: both;
+  width: 90%;
+  margin: 0 auto;
+  border-spacing: 0;
 }
 
 th,
 td {
-    padding: 2px;
+  padding: 2px;
 }
 
 thead {
-    font-size: 130%;
+  font-size: 130%;
 }
 
 /* last modified */
 th:last-child {
-    text-align: center;
+  text-align: center;
 }
 
 th:hover > a {
-    text-decoration: underline;
+  text-decoration: underline;
 }
 
 body > table > tbody > tr:hover {
-    outline: 1px solid ThreeDLightShadow;
+  outline: 1px solid ThreeDLightShadow;
 }
 
 /* let 'Size' and 'Last Modified' take only as much space as they need and 'Name' all the rest */
 td:not(:first-child) {
-    width: 0;
+  width: 0;
 }
 
 .up {
-    padding: 0 0.5em;
-    margin-inline-start: 20px;
+  padding: 0 0.5em;
+  margin-inline-start: 20px;
 }
 
 .up::before {
-    margin-inline: -20px 4px;
-    vertical-align: middle;
-    content: url(chrome://global/skin/dirListing/up.png);
+  content: "";
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  margin-inline: -20px 4px;
+  vertical-align: middle;
+  background: url(chrome://global/skin/dirListing/up.png) center/16px no-repeat;
 }
 
 .dir::before {
-    content: url(chrome://global/skin/dirListing/folder.png);
-}
-
-@-moz-document unobservable-document() {
-    :root {
-        color-scheme: light dark;
-    }
+  content: "";
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background: url(chrome://global/skin/dirListing/folder.png) center/16px no-repeat;
 }
 
 @media (prefers-color-scheme: dark) {
-    :root {
-        background-color: var(--in-content-bg-dark);
-        color: var(--plaintext-color);
-    }
-
-    body {
-        border: 1px solid var(--in-content-border-color-dim);
-        background-color: var(--in-content-box-bg-dark);
-        color: var(--plaintext-color);
-    }
-
-    h1 {
-        border-bottom: 1px solid var(--in-content-separator-dim);
-    }
-
-    body > table > tbody > tr:hover {
-        outline: 1px solid var(--in-content-separator-dim);
-        background-color: var(--in-content-button-highlight-dark);
-    }
+  :root {
+    background-color: var(--in-content-bg-dark);
+    color: var(--plaintext-color);
+  }
+
+  body {
+    border: 1px solid var(--in-content-border-color-dim);
+    background-color: var(--in-content-box-bg-dark);
+    color: var(--plaintext-color);
+  }
+
+  h1 {
+    border-bottom: 1px solid var(--in-content-separator-dim);
+  }
+
+  body > table > tbody > tr:hover {
+    outline: 1px solid var(--in-content-separator-dim);
+    background-color: var(--in-content-button-highlight-dark);
+  }
 }
diff --git a/uc-context-menu-icons.css b/uc-context-menu-icons.css
index 13af0ca..9bf2bbb 100644
--- a/uc-context-menu-icons.css
+++ b/uc-context-menu-icons.css
@@ -1027,11 +1027,11 @@ menuitem#sanitizeItem::before {
 }
 
 #context-savelinktopocket::before {
-    background-image: url(chrome://userchrome/content/skin/pocket.svg);
+    background-image: url(chrome://userchrome/content/skin/pocket-outline.svg);
 }
 
 #context-pocket::before {
-    background-image: url(chrome://userchrome/content/skin/pocket.svg);
+    background-image: url(chrome://userchrome/content/skin/pocket-outline.svg);
 }
 
 #context-take-frame-screenshot::before,
diff --git a/uc-globals.css b/uc-globals.css
index 3bdec2d..268333c 100644
--- a/uc-globals.css
+++ b/uc-globals.css
@@ -380,7 +380,7 @@ but other than that these variables should be available everywhere. */
     --uc-parent-primary-button-background: var(--purple-40);
     --uc-parent-primary-button-background-hover: var(--purple-35);
     --uc-parent-primary-button-background-active: var(--purple-30);
-    --uc-parent-primary-button-text-color: #fff;
+    --uc-parent-primary-button-text-color: var(--light-on-dark-button-text-color);
 
     --uc-content-page-background: var(--in-content-bg-dark);
     --uc-content-page-background-light: hsl(240, 3%, 12%);