diff --git a/module/my/js/epic.ui.js b/module/my/js/epic.ui.js
index b2d71163be..de0aaec60d 100644
--- a/module/my/js/epic.ui.js
+++ b/module/my/js/epic.ui.js
@@ -17,3 +17,36 @@ $(document).off('click', '.batch-btn').on('click', '.batch-btn', function()
         postAndLoadPage(url, form);
     }
 });
+
+/**
+ * 对标题列进行重定义。
+ * Redefine the title column.
+ *
+ * @param  array  result
+ * @param  array  info
+ * @access public
+ * @return string|array
+ */
+window.renderCell = function(result, info)
+{
+    if(info.col.name == 'title' && result[0])
+    {
+        const story = info.row.data;
+        if(story.shadow == 1) result[0].props.href += '#app=project';
+
+        let html = '';
+        let gradeLabel = gradeGroup[story.type][story.grade]?.name;
+        if(!showGrade && story.grade < 2) gradeLabel = '';
+        if(gradeLabel) html += "<span class='label gray-pale rounded-xl clip'>" + gradeLabel + "</span> ";
+        if(story.color) result[0].props.style = 'color: ' + story.color;
+        if(html) result.unshift({html});
+    }
+    return result;
+}
+
+$(document).off('click', '.switchButton').on('click', '.switchButton', function()
+{
+    var storyViewType = $(this).attr('data-type');
+    $.cookie.set('storyViewType', storyViewType, {expires:config.cookieLife, path:config.webRoot});
+    loadCurrentPage();
+});
diff --git a/module/my/js/requirement.ui.js b/module/my/js/requirement.ui.js
index b2d71163be..de0aaec60d 100644
--- a/module/my/js/requirement.ui.js
+++ b/module/my/js/requirement.ui.js
@@ -17,3 +17,36 @@ $(document).off('click', '.batch-btn').on('click', '.batch-btn', function()
         postAndLoadPage(url, form);
     }
 });
+
+/**
+ * 对标题列进行重定义。
+ * Redefine the title column.
+ *
+ * @param  array  result
+ * @param  array  info
+ * @access public
+ * @return string|array
+ */
+window.renderCell = function(result, info)
+{
+    if(info.col.name == 'title' && result[0])
+    {
+        const story = info.row.data;
+        if(story.shadow == 1) result[0].props.href += '#app=project';
+
+        let html = '';
+        let gradeLabel = gradeGroup[story.type][story.grade]?.name;
+        if(!showGrade && story.grade < 2) gradeLabel = '';
+        if(gradeLabel) html += "<span class='label gray-pale rounded-xl clip'>" + gradeLabel + "</span> ";
+        if(story.color) result[0].props.style = 'color: ' + story.color;
+        if(html) result.unshift({html});
+    }
+    return result;
+}
+
+$(document).off('click', '.switchButton').on('click', '.switchButton', function()
+{
+    var storyViewType = $(this).attr('data-type');
+    $.cookie.set('storyViewType', storyViewType, {expires:config.cookieLife, path:config.webRoot});
+    loadCurrentPage();
+});
diff --git a/module/my/js/story.ui.js b/module/my/js/story.ui.js
index 3cc1577f8d..de0aaec60d 100644
--- a/module/my/js/story.ui.js
+++ b/module/my/js/story.ui.js
@@ -33,11 +33,20 @@ window.renderCell = function(result, info)
     {
         const story = info.row.data;
         if(story.shadow == 1) result[0].props.href += '#app=project';
-        if(story.parent > 0)
-        {
-            let html = "<span class='label gray-pale rounded-xl' title='" + children + "'>" + childrenAB + "</span>";
-            result.unshift({html});
-        }
+
+        let html = '';
+        let gradeLabel = gradeGroup[story.type][story.grade]?.name;
+        if(!showGrade && story.grade < 2) gradeLabel = '';
+        if(gradeLabel) html += "<span class='label gray-pale rounded-xl clip'>" + gradeLabel + "</span> ";
+        if(story.color) result[0].props.style = 'color: ' + story.color;
+        if(html) result.unshift({html});
     }
     return result;
 }
+
+$(document).off('click', '.switchButton').on('click', '.switchButton', function()
+{
+    var storyViewType = $(this).attr('data-type');
+    $.cookie.set('storyViewType', storyViewType, {expires:config.cookieLife, path:config.webRoot});
+    loadCurrentPage();
+});