diff --git a/html/app.js b/html/app.js
index 59d845dc..e5fce1a7 100644
--- a/html/app.js
+++ b/html/app.js
@@ -6580,6 +6580,48 @@ CefSharp.BindObjectAsync(
 		D.visible = true;
 	};
 
+	// App: Bio Dialog
+
+	$app.data.bioDialog = {
+		visible: false,
+		loading: false,
+		bio: '',
+		bioLinks: []
+	};
+
+	API.$on('LOGOUT', function () {
+		$app.bioDialog.visible = false;
+	});
+
+	$app.methods.saveBio = function () {
+		var D = this.bioDialog;
+		if (D.loading) {
+			return;
+		}
+		D.loading = true;
+		API.saveCurrentUser({
+			bio: D.bio,
+			bioLinks: D.bioLinks
+		}).finally(() => {
+			D.loading = false;
+		}).then((args) => {
+			D.visible = false;
+			this.$message({
+				message: 'Bio updated',
+				type: 'success'
+			});
+			return args;
+		});
+	};
+
+	$app.methods.showBioDialog = function () {
+		this.$nextTick(() => adjustDialogZ(this.$refs.bioDialog.$el));
+		var D = this.bioDialog;
+		D.bio = API.currentUser.bio;
+		D.bioLinks = API.currentUser.bioLinks.slice();
+		D.visible = true;
+	};
+
 	// App: New Instance Dialog
 
 	$app.data.newInstanceDialog = {
diff --git a/html/index.html b/html/index.html
index 79abb4a7..cf744e70 100644
--- a/html/index.html
+++ b/html/index.html
@@ -601,6 +601,19 @@
 						</span>
 					</div>
 				</div>
+				<div class="x-friend-item" @click="showBioDialog()">
+					<div class="detail">
+						<span class="name"><i class="el-icon-edit"></i> Bio</span>
+						<pre class="extra" style="font-family:inherit;font-size:12px;white-space:pre-wrap;margin:0 0.5em 0 0">{{ API.currentUser.bio || '-' }}</pre>								<div style="margin-top:5px">
+							<el-tooltip v-for="(link, index) in API.currentUser.bioLinks" :key="index">
+								<template #content>
+									<span v-text="link"></span>
+								</template>
+								<img :src="getFaviconUrl(link)" style="width:16px;height:16px;vertical-align:middle;margin-right:5px">
+							</el-tooltip>
+						</div>
+					</div>
+				</div>
 				<div class="x-friend-item">
 					<div class="detail">
 						<span class="name">Languages</span>
@@ -1429,6 +1442,19 @@
 		</template>
 	</el-dialog>
 
+	<!-- dialog: bio -->
+	<el-dialog ref="bioDialog" :visible.sync="bioDialog.visible" title="Bio" width="400px" class="x-dialog">
+		<el-input type="textarea" v-model="bioDialog.bio" size="mini" maxlength="512" show-word-limit :autosize="{ minRows:2, maxRows:5 }" placeholder="Please input a bio"></el-input>
+		<el-input v-for="(link, index) in bioDialog.bioLinks" :key="index" :value="link" v-model="bioDialog.bioLinks[index]" size="small" style="margin-top:5px">
+			<img slot="prepend" :src="getFaviconUrl(link)" style="width:16px;height:16px">
+			<el-button slot="append" icon="el-icon-delete" @click="bioDialog.bioLinks.splice(index, 1)"></el-button>
+		</el-input>
+		<el-button @click="bioDialog.bioLinks.push('')" size="mini" style="margin-top:5px">Add Link</el-button>
+		<template #footer>
+			<el-button type="primary" size="small" :disabled="bioDialog.loading" @click="saveBio">Update</el-button>
+		</template>
+	</el-dialog>
+
 	<!-- dialog: new instance -->
 	<el-dialog ref="newInstanceDialog" :visible.sync="newInstanceDialog.visible" title="New Instance" width="600px" class="x-dialog">
 		<el-form :model="newInstanceDialog" label-width="100px">