diff --git a/html/src/app.js b/html/src/app.js
index cd592a10..651e7fbc 100644
--- a/html/src/app.js
+++ b/html/src/app.js
@@ -1160,6 +1160,8 @@ import gameLogService from './service/gamelog.js'
                 // VRCX
                 $location: {},
                 $location_at: Date.now(),
+                $online_for: Date.now(),
+                $offline_for: '',
                 $isVRCPlus: false,
                 $isModerator: false,
                 $isTroll: false,
@@ -4060,7 +4062,24 @@ import gameLogService from './service/gamelog.js'
                 this.friendsGroup3_.push(ctx);
                 this.friendsGroupD_.unshift(ctx);
             }
+            if (ctx.ref !== undefined) {
+                console.log(ctx.name + ' ' + ctx.state + ' ref: ' + ctx.ref.state);
+                if ((ctx.ref.$offline_for == '') &&
+                    ((ctx.state == 'offline') && ctx.ref.state == '') ||
+                    (((ctx.state == 'offline') || (ctx.state == 'active')) &&
+                    ((ctx.ref.state != 'offline') && (ctx.ref.state != 'active') && (ctx.ref.state != '')))) {
+                    ctx.ref.$online_for = '';
+                    ctx.ref.$offline_for = Date.now();
+                    console.log('^update offline^');
+                }
+                if ((ctx.ref.$online_for == '') && (ctx.state == 'online')) {
+                    ctx.ref.$online_for = Date.now();
+                    ctx.ref.$offline_for = '';
+                    console.log('^update online^');
+                }
+            }
         }
+
     };
 
     // ascending
diff --git a/html/src/index.pug b/html/src/index.pug
index 6dad0ce5..94a4b8a2 100644
--- a/html/src/index.pug
+++ b/html/src/index.pug
@@ -767,6 +767,14 @@ html
                                         span.name Avatar Copying
                                         span.extra(v-if="userDialog.ref.allowAvatarCopying" style="color:#67C23A") Allow
                                         span.extra(v-else style="color:#F56C6C") Deny
+                                .x-friend-item
+                                    .detail
+                                        span.name(v-if="userDialog.ref.state != 'offline' && userDialog.ref.state != 'active' && userDialog.ref.state != ''") Online For
+                                        span.name(v-else) Offline For
+                                        span.extra
+                                            timer(v-if="userDialog.ref.state != 'offline' && userDialog.ref.state != 'active' && userDialog.ref.state != ''" :epoch="userDialog.ref.$online_for")
+                                            timer(v-else-if="userDialog.ref.$offline_for" :epoch="userDialog.ref.$offline_for")
+                                            span(v-else) -
                                 .x-friend-item
                                     .detail
                                         span.name Last Login