diff --git a/api/v1/gateway/index.js b/api/v1/gateway/index.js
index e647e9d..275ff02 100644
--- a/api/v1/gateway/index.js
+++ b/api/v1/gateway/index.js
@@ -128,8 +128,9 @@ GatewayServer.prototype.eventSetup = function() {
             socket.user = {
                 username: data.username,
                 _id: user._id,
-                token, // Maybe not secure
-                permissionLevel
+                token, // NOTE(hippoz): Maybe not secure
+                permissionLevel,
+                color: user.color
             };
             console.log(`[*] [gateway] [handshake] User ${data.username} has successfully authenticated`);
             return callback();
@@ -168,7 +169,8 @@ GatewayServer.prototype.eventSetup = function() {
                 const messageObject = {
                     author: {
                         username: socket.user.username,
-                        _id: socket.user._id
+                        _id: socket.user._id,
+                        color: socket.user.color
                     },
                     category: {
                         title: categoryTitle,
@@ -236,7 +238,8 @@ GatewayServer.prototype._getSocketsInRoom = async function(room) {
         updatedClientList.push({
             user: {
                 username: client.user.username,
-                _id: client.user._id
+                _id: client.user._id,
+                color: client.user.color
             }
         });
     });
diff --git a/api/v1/users.js b/api/v1/users.js
index 26a1340..08f345c 100755
--- a/api/v1/users.js
+++ b/api/v1/users.js
@@ -53,7 +53,8 @@ app.post('/account/create', [
             username,
             email,
             password: hashedPassword,
-            role: startingRole
+            role: startingRole,
+            color: User.generateColorFromUsername(username)
         });
 
         const userObject = await user.getPublicObject();
diff --git a/app/app.html b/app/app.html
index 23f9d77..8477e53 100755
--- a/app/app.html
+++ b/app/app.html
@@ -142,7 +142,7 @@
                 <h3 v-if="!selection.category.isCategory && !selection.category.isChatContext" class="md-title" style="flex: 1">Browsing {{ selection.category.title }}</h3>
                 <h3 v-if="!selection.category.isCategory && selection.category.isChatContext" class="md-title" style="flex: 1">
                     Browsing {{ selection.category.title }} with    
-                    <a v-for="user in userLists[selection.category._id]" class="md-dense cursor" v-on:click="viewProfile(user.user._id)">{{ user.user.username }} </a>
+                    <a v-for="user in userLists[selection.category._id]" class="md-dense cursor" v-on:click="viewProfile(user.user._id)" v-bind:style="{ 'color': user.user.color }">{{ user.user.username }} </a>
                 </h3>
                 <md-button @click="browseCategories()" v-if="selection.category.isCategory || selection.category.isChatContext"><md-icon>arrow_back</md-icon></md-button>
                 <md-button @click="refresh()" v-if="!selection.category.isChatContext"><md-icon>refresh</md-icon></md-button>
@@ -152,7 +152,7 @@
                 <md-card v-for="post in selection.posts" v-bind:key="post._id" v-if="!selection.category.isChatContext">
                     <md-card-header>
                         <div class="md-title" v-html="post.title"></div>
-                        <span>by <a class="md-dense cursor" v-on:click="viewProfile(post.creator._id)">{{ post.creator.username }}</a></span>
+                        <span>by <a class="md-dense cursor" v-on:click="viewProfile(post.creator._id)" v-bind:style="{ 'color': post.creator.color}">{{ post.creator.username }}</a></span>
                     </md-card-header>
 
                     <md-card-content v-html="post.body"></md-card-content>
@@ -164,7 +164,7 @@
                 <div v-for="post,k in messages[selection.category._id]" v-if="selection.category.isChatContext" :key="post._id + post.author._id">
                     <md-card class="message-card">
                         <md-card-header>
-                            <a class="md-dense cursor md-title" v-on:click="viewProfile(post.author._id)"><span>{{ post.author.username }}</span></a>
+                            <a class="md-dense cursor md-title" v-on:click="viewProfile(post.author._id)" v-bind:style="{ 'color': post.author.color}"><span>{{ post.author.username }}</span></a>
                         </md-card-header>
     
                         <md-card-content>{{ post.content }}</md-card-content>
diff --git a/models/User.js b/models/User.js
index fe86fef..3bfe5e8 100755
--- a/models/User.js
+++ b/models/User.js
@@ -6,7 +6,8 @@ const userSchema = new mongoose.Schema({
     username: String,
     password: String,
     email: String,
-    role: String
+    role: String,
+    color: String
 });
 
 userSchema.method('getPublicObject', function() {
@@ -14,6 +15,7 @@ userSchema.method('getPublicObject', function() {
         username: this.username,
         permissionLevel: config.roleMap[this.role],
         role: this.role,
+        color: this.color,
         _id: this._id
     }
 });
@@ -25,6 +27,7 @@ userSchema.method('getFullObject', function() {
         email: this.email,
         permissionLevel: config.roleMap[this.role],
         role: this.role,
+        color: this.color,
         _id: this._id
     }
 });
@@ -65,7 +68,7 @@ User.findByUsername = async function(username) {
 };
 
 User.getPulicFields = function() {
-    return 'username role _id';
+    return 'username role _id color';
 };
 
 module.exports = User;
\ No newline at end of file