diff --git a/html/src/app.js b/html/src/app.js
index 84d8e138..038cab94 100644
--- a/html/src/app.js
+++ b/html/src/app.js
@@ -210,6 +210,32 @@ speechSynthesis.getVoices();
     };
     Vue.filter('timeToText', timeToText);
 
+    var timeToTextMin = function (sec) {
+        var n = Number(sec);
+        if (isNaN(n)) {
+            return escapeTag(sec);
+        }
+        n = Math.floor(n / 1000);
+        var arr = [];
+        if (n < 0) {
+            n = -n;
+        }
+        if (n >= 86400) {
+            arr.push(`${Math.floor(n / 86400)}d`);
+            n %= 86400;
+        }
+        if (n >= 3600) {
+            arr.push(`${Math.floor(n / 3600)}h`);
+            n %= 3600;
+        }
+        if (n >= 60) {
+            arr.push(`${Math.floor(n / 60)}m`);
+            n %= 60;
+        }
+        return arr.join(' ');
+    };
+    Vue.filter('timeToTextMin', timeToTextMin);
+
     Vue.use(VueLazyload, {
         preLoad: 1,
         observer: true,
@@ -10148,7 +10174,8 @@ speechSynthesis.getVoices();
             fileCreatedAt: ''
         },
         lastSeen: '',
-        joinCount: 0
+        joinCount: 0,
+        timeSpent: ''
     };
 
     $app.watch['userDialog.memo'] = function () {
@@ -10350,6 +10377,7 @@ speechSynthesis.getVoices();
         D.instance = {};
         D.lastSeen = '';
         D.joinCount = 0;
+        D.timeSpent = '';
         API.getCachedUser({
             userId
         })
@@ -10440,6 +10468,11 @@ speechSynthesis.getVoices();
                             D.joinCount = ref2.joinCount;
                         }
                     });
+                    database.getTimeSpent(D.ref).then((ref3) => {
+                        if (ref3.userId === D.id) {
+                            D.timeSpent = timeToTextMin(ref3.timeSpent);
+                        }
+                    });
                 }
                 return args;
             });
diff --git a/html/src/index.pug b/html/src/index.pug
index 89d440a3..0a065e60 100644
--- a/html/src/index.pug
+++ b/html/src/index.pug
@@ -1234,6 +1234,10 @@ html
                                         .detail
                                             span.name Join Count
                                             span.extra(v-text="userDialog.joinCount")
+                                    .x-friend-item(style="cursor:default")
+                                        .detail
+                                            span.name Time Together
+                                            span.extra(v-text="userDialog.timeSpent")
                                 .x-friend-item(style="cursor:default")
                                     .detail
                                         span.name(v-if="userDialog.ref.state === 'online' && userDialog.ref.$online_for") Online For
diff --git a/html/src/repository/database.js b/html/src/repository/database.js
index 2d1b11c8..fca32931 100644
--- a/html/src/repository/database.js
+++ b/html/src/repository/database.js
@@ -790,6 +790,21 @@ class Database {
         }, `SELECT COUNT(*) FROM gamelog_join_leave WHERE (type = 'OnPlayerJoined') AND (user_id = '${userId}' OR display_name = '${displayName}')`);
         return ref;
     }
+
+    async getTimeSpent(input) {
+        var userId = input.id.replaceAll("'", '');
+        var displayName = input.displayName.replaceAll("'", "''");
+        var ref = {
+            timeSpent: 0,
+            userId
+        };
+        await sqliteService.execute((row) => {
+            if (typeof row[0] === 'number') {
+                ref.timeSpent += row[0];
+            }
+        }, `SELECT time FROM gamelog_join_leave WHERE (type = 'OnPlayerLeft') AND (user_id = '${userId}' OR display_name = '${displayName}')`);
+        return ref;
+    }
 }
 
 var self = new Database();