diff --git a/webclient-vue/src/app/main.js b/webclient-vue/src/app/main.js
index 379d764..e9359f1 100644
--- a/webclient-vue/src/app/main.js
+++ b/webclient-vue/src/app/main.js
@@ -3,6 +3,7 @@
 import App from "./App.vue";
 import { router } from "../router";
 import "@phosphor-icons/web/regular";
+import "@phosphor-icons/web/fill";
 import "../styles/main.css";
 
 createApp(App)
diff --git a/webclient-vue/src/components/layout/AppShell.vue b/webclient-vue/src/components/layout/AppShell.vue
index c8d4ac6..c7dcc6d 100644
--- a/webclient-vue/src/components/layout/AppShell.vue
+++ b/webclient-vue/src/components/layout/AppShell.vue
@@ -43,7 +43,7 @@
 });
 
 const navItems = [
-  { label: "Favorites", to: "/areas/favorites", icon: "ph-star" },
+  { label: "Favorites", to: "/areas/favorites", icon: "ph-bookmarks" },
   { label: "Areas", to: "/areas/tree", icon: "ph-map-trifold" },
   { label: "Devices", to: "/devices", icon: "ph-cpu" },
   { label: "Scanning", to: "/devices/scanning", icon: "ph-magnifying-glass" },
diff --git a/webclient-vue/src/features/areas/components/AreaFavoriteButton.vue b/webclient-vue/src/features/areas/components/AreaFavoriteButton.vue
new file mode 100644
index 0000000..150ea3d
--- /dev/null
+++ b/webclient-vue/src/features/areas/components/AreaFavoriteButton.vue
@@ -0,0 +1,26 @@
+<template>
+  <button
+    class="btn-icon area-favorite-btn"
+    :class="{ 'is-active': isFavorite }"
+    type="button"
+    :aria-label="isFavorite ? 'Remove bookmark' : 'Bookmark'"
+    @click.stop="favoritesStore.toggle(areaId)"
+  >
+    <i class="ph" :class="isFavorite ? 'ph-fill ph-bookmark-simple' : 'ph-bookmark-simple'" />
+  </button>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useFavoritesStore } from "../../../stores/favorites";
+
+const props = defineProps({
+  areaId: {
+    type: [String, Number],
+    required: true,
+  },
+});
+
+const favoritesStore = useFavoritesStore();
+const isFavorite = computed(() => favoritesStore.has(props.areaId));
+</script>
diff --git a/webclient-vue/src/features/areas/components/AreaTreeNode.vue b/webclient-vue/src/features/areas/components/AreaTreeNode.vue
index 5173122..f1a2d58 100644
--- a/webclient-vue/src/features/areas/components/AreaTreeNode.vue
+++ b/webclient-vue/src/features/areas/components/AreaTreeNode.vue
@@ -20,13 +20,7 @@
       </div>
 
       <div class="area-tree-actions">
-        <GnButton
-          :variant="isFavorite ? 'warning' : 'secondary'"
-          :icon="isFavorite ? 'ph-bookmark-simple' : 'ph-bookmark'"
-          @click.stop="favoritesStore.toggle(area.id)"
-        >
-          {{ isFavorite ? "Remove bookmark" : "Bookmark" }}
-        </GnButton>
+        <AreaFavoriteButton :area-id="area.id" />
       </div>
     </article>
 
@@ -49,8 +43,8 @@
 <script setup>
 import { computed, ref } from "vue";
 import { useRouter } from "vue-router";
-import { useFavoritesStore } from "../../../stores/favorites";
-import { GnBadge, GnButton } from "gnexus-ui-kit/vue";
+import { GnBadge } from "gnexus-ui-kit/vue";
+import AreaFavoriteButton from "./AreaFavoriteButton.vue";
 
 const props = defineProps({
   area: {
@@ -64,10 +58,8 @@
 });
 
 const router = useRouter();
-const favoritesStore = useFavoritesStore();
 const isOpen = ref(false);
 const isLeaf = computed(() => !props.area.children?.length);
-const isFavorite = computed(() => favoritesStore.has(props.area.id));
 const isCycle = computed(() => props.ancestors.includes(String(props.area.id)));
 const nextAncestors = computed(() => [...props.ancestors, String(props.area.id)]);
 
diff --git a/webclient-vue/src/features/areas/components/__tests__/AreaTreeNode.spec.js b/webclient-vue/src/features/areas/components/__tests__/AreaTreeNode.spec.js
index 39815fc..2d0ea51 100644
--- a/webclient-vue/src/features/areas/components/__tests__/AreaTreeNode.spec.js
+++ b/webclient-vue/src/features/areas/components/__tests__/AreaTreeNode.spec.js
@@ -104,7 +104,7 @@
 
     expect(store.has(1)).toBe(false);
 
-    wrapper.findAll("button").find((btn) => btn.text().includes("Bookmark"))?.trigger("click");
+    wrapper.find(".area-favorite-btn").trigger("click");
 
     expect(store.has(1)).toBe(true);
   });
diff --git a/webclient-vue/src/features/areas/pages/AreaDetailPage.vue b/webclient-vue/src/features/areas/pages/AreaDetailPage.vue
index f0e7935..c2e0694 100644
--- a/webclient-vue/src/features/areas/pages/AreaDetailPage.vue
+++ b/webclient-vue/src/features/areas/pages/AreaDetailPage.vue
@@ -185,7 +185,7 @@
   },
   {
     label: isFavorite.value ? "Remove bookmark" : "Bookmark",
-    icon: isFavorite.value ? "ph-bookmark-simple" : "ph-bookmark",
+    icon: isFavorite.value ? "ph-fill ph-bookmark-simple" : "ph-bookmark-simple",
     onSelect: () => favoritesStore.toggle(area.value?.id),
   },
   { label: "Remove", icon: "ph-trash", danger: true, onSelect: openRemove },
diff --git a/webclient-vue/src/features/areas/pages/AreaFavoritesPage.vue b/webclient-vue/src/features/areas/pages/AreaFavoritesPage.vue
index 02562e7..5bbfaba 100644
--- a/webclient-vue/src/features/areas/pages/AreaFavoritesPage.vue
+++ b/webclient-vue/src/features/areas/pages/AreaFavoritesPage.vue
@@ -29,7 +29,7 @@
       >
         <article class="area-favorite-card" @click="goToDetail(area)">
           <div class="area-favorite-icon">
-            <i class="ph ph-bookmarks" />
+            <i class="ph ph-fill ph-bookmark-simple" />
           </div>
 
           <div class="area-favorite-info">
@@ -50,14 +50,7 @@
           </div>
 
           <div class="area-favorite-actions">
-            <button
-              class="btn-icon area-favorite-remove"
-              type="button"
-              :aria-label="'Remove ' + area.display_name + ' from favorites'"
-              @click.stop="favoritesStore.remove(area.id)"
-            >
-              <i class="ph ph-x" />
-            </button>
+            <AreaFavoriteButton :area-id="area.id" />
           </div>
         </article>
       </li>
@@ -71,6 +64,7 @@
 import { useAreasStore } from "../../../stores/areas";
 import { useFavoritesStore } from "../../../stores/favorites";
 import { GnPageHeader, GnBadge } from "gnexus-ui-kit/vue";
+import AreaFavoriteButton from "../components/AreaFavoriteButton.vue";
 import AppLoadingState from "../../../components/feedback/AppLoadingState.vue";
 import AppErrorState from "../../../components/feedback/AppErrorState.vue";
 import AppEmptyState from "../../../components/feedback/AppEmptyState.vue";
@@ -173,20 +167,6 @@
   text-decoration: underline;
 }
 
-.area-favorite-remove {
-  width: 40px;
-  height: 40px;
-  color: var(--color-muted);
-}
-
-.area-favorite-remove:hover {
-  color: var(--color-danger);
-}
-
-.area-favorite-remove .ph {
-  font-size: 22px;
-}
-
 @media (max-width: 720px) {
   .area-favorite-card {
     grid-template-columns: auto 1fr;
diff --git a/webclient-vue/src/styles/main.css b/webclient-vue/src/styles/main.css
index 50c76ed..24ce5d5 100644
--- a/webclient-vue/src/styles/main.css
+++ b/webclient-vue/src/styles/main.css
@@ -152,6 +152,22 @@
   color: var(--color-muted);
 }
 
+.area-favorite-btn {
+  color: var(--color-muted);
+}
+
+.area-favorite-btn:hover {
+  color: var(--color-text);
+}
+
+.area-favorite-btn.is-active {
+  color: var(--color-warning);
+}
+
+.area-favorite-btn.is-active:hover {
+  color: var(--color-warning-hover, #d69e2e);
+}
+
 .devices-panel {
   display: grid;
   gap: 16px;