diff --git a/app/components/map.gjs b/app/components/map.gjs
index a922c1f..e434fc6 100644
--- a/app/components/map.gjs
+++ b/app/components/map.gjs
@@ -63,7 +63,10 @@ export default class MapComponent extends Component {
 
     const bookmarkStyleFunction = (feature) => {
       const originalPlace = feature.get('originalPlace');
-      let color = '#ffcc33'; // Default Yellow
+      let color =
+        getComputedStyle(document.documentElement)
+          .getPropertyValue('--default-list-color')
+          .trim() || '#000000'; // Fallback to black if variable is missing to make error obvious
 
       if (
         originalPlace &&
diff --git a/app/components/place-lists-manager.gjs b/app/components/place-lists-manager.gjs
index 7d40a88..eb01d4b 100644
--- a/app/components/place-lists-manager.gjs
+++ b/app/components/place-lists-manager.gjs
@@ -71,7 +71,8 @@ export default class PlaceListsManager extends Component {
             checked={{this.isSaved}}
             {{on "change" this.toggleSaved}}
           />
-          <span class="list-name">Saved</span>
+          <span class="list-color"></span>
+          <span class="list-name">Saved places</span>
         </label>
       </div>
 
diff --git a/app/styles/app.css b/app/styles/app.css
index 28f5924..cff9913 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -1,5 +1,9 @@
 /* Ember supports plain CSS out of the box. More info: https://cli.emberjs.com/release/advanced-use/stylesheets/ */
 
+:root {
+  --default-list-color: #ffcc33;
+}
+
 html,
 body {
   height: 100%;
@@ -1031,6 +1035,7 @@ button.create-place {
 .place-lists-manager .list-color {
   width: 12px;
   height: 12px;
+  background-color: var(--default-list-color);
   border-radius: 50%;
   flex-shrink: 0;
   border: 1px solid rgb(0 0 0 / 10%);