diff --git a/module/block/js/preference.js b/module/block/js/preference.js
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/module/block/view/preference.html.php b/module/block/view/preference.html.php
index f4568ab44d..6239654a97 100644
--- a/module/block/view/preference.html.php
+++ b/module/block/view/preference.html.php
@@ -1,31 +1,89 @@
 <style>
 .preference .table-form > tbody > tr > th {font-weight: 400; color: #0B0F18;}
 .preference .chosen-container-single .chosen-single > span {color: #313C52;}
+.tip {margin-top: 10px;}
+
+.has-img > .border {
+    display: flex;
+    padding: 5px 16px;
+    border: 1px solid #EDEEF2;
+}
+.has-img.picker-option-active >.border {
+    border: 2px solid #2E7FFF;
+}
+.has-img.picker-option-active {
+    background: rgba(230,240,255, 0.4)!important;
+}
+.has-img-text {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    padding-left: 5px;
+}
+.has-img-text > .title {
+    color: #0B0F18;
+    font-size: 13px;
+}
+.has-img-text > .context {
+    color: #838A9D;
+    font-size: 12px;
+}
+
+#pickerDropMenu-pk_URSR > .picker-option-list{
+    display: flex;
+    flex-wrap: wrap;
+}
+.option-ursr {
+    flex: 1 1 200px;
+}
+.option-ursr.picker-option-selected > .border,
+.option-ursr.picker-option-active> .border {
+    border: none;
+}
+.option-ursr > .border  {
+    height: 46px;
+    display: flex;
+    padding: 5px 16px;
+    border: 1px solid #EDEEF2;
+    align-items: center;
+}
+.option-ursr > .border > .value {
+    margin-right: 20px;
+    width: 20px;
+    height: 20px;
+    border-radius: 100%;
+    background: rgba(230,240,255, 0.4);
+}
+.option-ursr > .border > .value > p { 
+    line-height: 20px;
+    text-align: center;
+}
+
 </style>
 <div class='preference'>
 <form method='post' target='hiddenwin' action='<?php echo $this->createLink('my', 'preference', "showTip=false")?>'>
     <table align='center' class='table table-form w-320px'>
       <tr>
         <th class='w-120px'><?php echo $lang->my->storyConcept;?></th>
-        <td><?php echo html::select('URSR', $URSRList, $URSR, "class='form-control chosen'");?></td>
+        <td><?php echo html::select('URSR', $URSRList, $URSR, "class='form-control picker'");?></td>
       </tr>
       <?php if($this->config->systemMode == 'ALM'):?>
       <tr>
         <th><?php echo $lang->my->programLink;?></th>
-        <td><?php echo html::select('programLink', $lang->my->programLinkList, $programLink, "class='form-control chosen'");?></td>
+        <td><?php echo html::select('programLink', $lang->my->programLinkList, $programLink, "class='form-control picker'");?></td>
       </tr>
       <?php endif;?>
       <tr>
         <th><?php echo $lang->my->productLink;?></th>
-        <td><?php echo html::select('productLink', $lang->my->productLinkList, $productLink, "class='form-control chosen'");?></td>
+        <td><?php echo html::select('productLink', $lang->my->productLinkList, $productLink, "class='form-control picker'");?></td>
       </tr>
       <tr>
         <th><?php echo $lang->my->projectLink;?></th>
-        <td><?php echo html::select('projectLink', $lang->my->projectLinkList, $projectLink, "class='form-control chosen'");?></td>
+        <td><?php echo html::select('projectLink', $lang->my->projectLinkList, $projectLink, "class='form-control picker'");?></td>
       </tr>
       <tr>
         <th><?php echo $lang->my->executionLink;?></th>
-        <td><?php echo html::select('executionLink', $lang->my->executionLinkList, $executionLink, "class='form-control chosen'");?></td>
+        <td><?php echo html::select('executionLink', $lang->my->executionLinkList, $executionLink, "class='form-control picker'");?></td>
       </tr>
       <tr>
         <td colspan='2' class='text-center form-actions'>
@@ -35,3 +93,69 @@
     </table>
   </form>
 </div>
+<script>
+function initPreference() {
+    var objPngSrc = {
+        'program-browse': 'list',
+        'program-project': 'list-recent',
+        'program-kanban': 'kanban',
+
+        'product-index': 'panel-recent-browse',
+        'product-all': 'list',
+        'product-dashboard': 'panel',
+        'product-browse': 'list-recent',
+        'product-kanban': 'kanban',
+
+        'project-browse': 'list',
+        'project-execution': 'list-recent',
+        'project-index': 'panel-recent-browse',
+        'project-kanban': 'kanban',
+
+        'execution-all': 'list',
+        'execution-task': 'kanban',
+        'execution-executionkanban': 'list-recent',
+    }
+    function optionRenderProgram($option, b) {
+        /* transform ， to , then split to fit lang */
+        var textArr = b.text.replace(/[\uff0c]/g,",").split(',');
+        $option.empty();
+        $option.addClass('has-img')
+        /** dom to prepend
+         *  <div class="border>
+         *    <div class="has-img-img"><img src="theme/default/images/guide/' + b.value + '.png"></div>
+         *    <div class="has-img-text">
+         *      <div class="title"></div>
+         *      <div class="context"></div>
+         *     </div>
+         *  </div> 
+         **/
+        $option.prepend('<div class="border"><div class="has-img-img"><img src="theme/default/images/guide/' + objPngSrc[b.value] + '.png"></div><div class="has-img-text"><div class="title">' + textArr[0] + '</div><div class="context">' + textArr[1] + '</div></div></div>');
+        return $option;
+    }
+    function optionRenderURSR($option, b) {
+        $option.addClass('option-ursr');
+        $option.parent().addClass('list-ursr');
+        $option.empty();
+        $option.prepend('<div class="border"><div class="value"><p>' + b.value + '</p></div><div class="context">' + b.text + '</div></div>');
+        return $option;
+    }
+    
+    $('#programLink').picker({
+        optionRender: optionRenderProgram
+    });
+    $('#productLink').picker({
+        optionRender: optionRenderProgram
+    });
+    $('#projectLink').picker({
+        optionRender: optionRenderProgram
+    });
+    $('#executionLink').picker({
+        optionRender: optionRenderProgram
+    });
+    $('#URSR').picker({
+        optionRender: optionRenderURSR
+    });
+}
+
+initPreference();
+</script>
\ No newline at end of file
diff --git a/module/my/css/preference.css b/module/my/css/preference.css
index 5d5414d9d2..2303a7c83f 100644
--- a/module/my/css/preference.css
+++ b/module/my/css/preference.css
@@ -33,7 +33,7 @@
     flex-wrap: wrap;
 }
 .option-ursr {
-    flex: 1 1 220px;
+    flex: 1 1 200px;
 }
 .option-ursr.picker-option-selected > .border,
 .option-ursr.picker-option-active> .border {