diff --git a/public/script.js b/public/script.js
index bc50d9770..8e59f1164 100644
--- a/public/script.js
+++ b/public/script.js
@@ -694,7 +694,8 @@ function printCharacters() {
         template.find('img').attr('src', this_avatar);
         template.find('.avatar').attr('title', item.avatar);
         template.find('.ch_name').text(item.name);
-        template.find('.ch_fav_icon').css("display", item.fav == "true" ? '' : 'none');
+        template.find('.ch_fav_icon').css("display", 'none');
+        template.find('.ch_fav_icon').addClass(item.fav == "true" ? 'is_fav' : '');
         template.find('.ch_fav').val(item.fav);
 
         // Display inline tags
diff --git a/public/scripts/group-chats.js b/public/scripts/group-chats.js
index 6bc95578d..e4781f18d 100644
--- a/public/scripts/group-chats.js
+++ b/public/scripts/group-chats.js
@@ -215,7 +215,9 @@ function printGroups() {
         template.data("id", group.id);
         template.attr("grid", group.id);
         template.find(".ch_name").html(group.name);
-        group.fav ? template.find(".group_fav_icon").show() : template.find(".group_fav_icon").hide();
+        template.find('.group_fav_icon').css("display", 'none');
+        template.find('.group_fav_icon').addClass(group.fav ? 'is_fav' : '');
+        //group.fav ? template.find(".group_fav_icon").show() : template.find(".group_fav_icon").hide();
         template.find(".ch_fav").val(group.fav);
         $("#rm_print_characters_block").prepend(template);
         updateGroupAvatar(group);
@@ -621,7 +623,7 @@ async function groupChatAutoModeWorker() {
     await generateGroupWrapper(true);
 }
 
-async function modifyGroupMember(chat_id, groupMember, isDelete) { 
+async function modifyGroupMember(chat_id, groupMember, isDelete) {
     const id = groupMember.data("id");
 
     const template = groupMember.clone();
@@ -677,7 +679,7 @@ async function reorderGroupMember(chat_id, groupMember, direction) {
                 group.members[indexOf] = prev;
             }
         }
-        
+
         await editGroup(chat_id);
         updateGroupAvatar(group);
         // stupid but lifts the manual reordering
@@ -777,7 +779,7 @@ function select_group_chats(chat_id, skipAnimation) {
     });
 
     $("#rm_group_fav").off();
-    $("#rm_group_fav").on("input", async function(){
+    $("#rm_group_fav").on("input", async function () {
         if (group) {
             let _thisGroup = groups.find((x) => x.id == chat_id);
             const value = $(this).prop("checked");
@@ -815,11 +817,11 @@ function select_group_chats(chat_id, skipAnimation) {
         if (action == 'remove') {
             await modifyGroupMember(chat_id, member, true);
         }
-        
+
         if (action == 'add') {
             await modifyGroupMember(chat_id, member, false);
         }
-        
+
         if (action == 'up' || action == 'down') {
             await reorderGroupMember(chat_id, member, action);
         }
@@ -844,7 +846,7 @@ $(document).ready(() => {
                 await getGroupChat(id);
                 //to avoid the filter being lit up yellow and left at true while the list of character and group reseted.
                 $("#filter_by_fav").removeClass("fav_on");
-                filterByFav = false; 
+                filterByFav = false;
             }
 
             select_group_chats(id);
diff --git a/public/style.css b/public/style.css
index 3998ec76d..7bfa075b6 100644
--- a/public/style.css
+++ b/public/style.css
@@ -922,7 +922,7 @@ select option:not(:checked) {
 }
 
 .fav_on {
-    color: #ffff00 !important;
+    color: #c5b457 !important;
 }
 
 .displayBlock {
@@ -1037,8 +1037,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
 
 /*applies to both groups and solos chars in the char list*/
 #rm_print_characters_block .ch_name {
-    margin-left: 5px;
-    gap: 5px;
+    /* margin-left: 5px; */
     width: 100%;
     white-space: nowrap;
     max-width: calc(100% - 29px);
@@ -1185,12 +1184,31 @@ input[type=search]:focus::-webkit-search-cancel-button {
 
 
 .ch_fav_icon {
+    /* on topright corner */
+    /*
     filter: drop-shadow(0px 0px 1px black);
-    color: yellow;
-    font-size: 12px;
+    color: #e9dd4b;
+    font-size: 14px;
     order: -1;
-    margin-left: -18px;
+    margin-left: -16px;
     margin-top: 3px;
+    position: relative;
+    */
+
+    /* on topleft corner*/
+    filter: drop-shadow(1px 1px 2px black);
+    color: #c5b457;
+    font-size: 14px;
+    order: -1;
+    margin-left: -75px;
+    padding-right: 54px;
+    margin-top: 3px;
+    position: relative;
+}
+
+.character_select:has(.is_fav) .avatar,
+.group_select:has(.is_fav) .avatar {
+    outline: 3px solid #c5b457;
 }
 
 #fav_chara_wrap {
@@ -2395,8 +2413,8 @@ h5 {
 
 .tags.tags_inline {
     /* position: absolute; */
-    margin-right: 5px;
-    margin-left: 5px;
+    /* margin-right: 5px;
+    margin-left: 5px; */
     /*     top: 30px;
     left: 70px; */
     opacity: 0.6;
@@ -2656,7 +2674,7 @@ body .ui-widget-content {
 
 .group_select .group_fav_icon {
     filter: drop-shadow(0px 0px 1px black);
-    color: yellow;
+    color: #c5b457;
     font-size: 12px;
     order: -1;
     margin-left: -18px;