diff --git a/apps/media/avatar/default/default1.png b/apps/media/avatar/default/default1.png
new file mode 100644
index 000000000..b90e5efd7
Binary files /dev/null and b/apps/media/avatar/default/default1.png differ
diff --git a/apps/media/avatar/default/default2.png b/apps/media/avatar/default/default2.png
new file mode 100644
index 000000000..5afa17403
Binary files /dev/null and b/apps/media/avatar/default/default2.png differ
diff --git a/apps/media/avatar/default/default3.png b/apps/media/avatar/default/default3.png
new file mode 100644
index 000000000..e13e00c70
Binary files /dev/null and b/apps/media/avatar/default/default3.png differ
diff --git a/apps/media/avatar/default/default4.png b/apps/media/avatar/default/default4.png
new file mode 100644
index 000000000..213295c9c
Binary files /dev/null and b/apps/media/avatar/default/default4.png differ
diff --git a/apps/media/avatar/default/default5.png b/apps/media/avatar/default/default5.png
new file mode 100644
index 000000000..1893c0aea
Binary files /dev/null and b/apps/media/avatar/default/default5.png differ
diff --git a/apps/media/avatar/default/default6.png b/apps/media/avatar/default/default6.png
new file mode 100644
index 000000000..448775e55
Binary files /dev/null and b/apps/media/avatar/default/default6.png differ
diff --git a/apps/static/css/plugins/chosen/chosen.css b/apps/static/css/plugins/chosen/chosen.css
index 8603ce5c6..a7e9b5e19 100755
--- a/apps/static/css/plugins/chosen/chosen.css
+++ b/apps/static/css/plugins/chosen/chosen.css
@@ -2,9 +2,9 @@
 Chosen, a Select Box Enhancer for jQuery and Prototype
 by Patrick Filler for Harvest, http://getharvest.com
 
-Version 1.6.2
+Version 1.1.0
 Full source at https://github.com/harvesthq/chosen
-Copyright (c) 2011-2016 Harvest http://getharvest.com
+Copyright (c) 2011 Harvest http://getharvest.com
 
 MIT License, https://github.com/harvesthq/chosen/blob/master/LICENSE.md
 This file is generated by `grunt build`, do not edit it by hand.
@@ -12,436 +12,418 @@ This file is generated by `grunt build`, do not edit it by hand.
 
 /* @group Base */
 .chosen-container {
-  position: relative;
-  display: inline-block;
-  vertical-align: middle;
-  font-size: 13px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-.chosen-container * {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
+    position: relative;
+    display: inline-block;
+    vertical-align: middle;
+    font-size: 13px;
+    zoom: 1;
+    *display: inline;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
 }
 .chosen-container .chosen-drop {
-  position: absolute;
-  top: 100%;
-  left: -9999px;
-  z-index: 1010;
-  width: 100%;
-  border: 1px solid #aaa;
-  border-top: 0;
-  background: #fff;
-  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
+    position: absolute;
+    top: 100%;
+    left: -9999px;
+    z-index: 1010;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    width: 100%;
+    border: 1px solid #aaa;
+    border-top: 0;
+    background: #fff;
+    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
 }
 .chosen-container.chosen-with-drop .chosen-drop {
-  left: 0;
+    left: 0;
 }
 .chosen-container a {
-  cursor: pointer;
-}
-.chosen-container .search-choice .group-name, .chosen-container .chosen-single .group-name {
-  margin-right: 4px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  font-weight: normal;
-  color: #999999;
-}
-.chosen-container .search-choice .group-name:after, .chosen-container .chosen-single .group-name:after {
-  content: ":";
-  padding-left: 2px;
-  vertical-align: top;
+    cursor: pointer;
 }
 
 /* @end */
 /* @group Single Chosen */
 .chosen-container-single .chosen-single {
-  position: relative;
-  display: block;
-  overflow: hidden;
-  padding: 0 0 0 8px;
-  height: 25px;
-  border: 1px solid #aaa;
-  border-radius: 5px;
-  background-color: #fff;
-  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #ffffff), color-stop(50%, #f6f6f6), color-stop(52%, #eeeeee), color-stop(100%, #f4f4f4));
-  background: -webkit-linear-gradient(#ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
-  background: -moz-linear-gradient(#ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
-  background: -o-linear-gradient(#ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
-  background: linear-gradient(#ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
-  background-clip: padding-box;
-  box-shadow: 0 0 3px white inset, 0 1px 1px rgba(0, 0, 0, 0.1);
-  color: #444;
-  text-decoration: none;
-  white-space: nowrap;
-  line-height: 24px;
+    position: relative;
+    display: block;
+    overflow: hidden;
+    padding: 0 0 0 8px;
+    height: 23px;
+    border: 1px solid #aaa;
+    border-radius: 5px;
+    background-color: #fff;
+    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #ffffff), color-stop(50%, #f6f6f6), color-stop(52%, #eeeeee), color-stop(100%, #f4f4f4));
+    background: -webkit-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
+    background: -moz-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
+    background: -o-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
+    background: linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
+    background-clip: padding-box;
+    box-shadow: 0 0 3px white inset, 0 1px 1px rgba(0, 0, 0, 0.1);
+    color: #444;
+    text-decoration: none;
+    white-space: nowrap;
+    line-height: 24px;
 }
 .chosen-container-single .chosen-default {
-  color: #999;
+    color: #999;
 }
 .chosen-container-single .chosen-single span {
-  display: block;
-  overflow: hidden;
-  margin-right: 26px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+    display: block;
+    overflow: hidden;
+    margin-right: 26px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 .chosen-container-single .chosen-single-with-deselect span {
-  margin-right: 38px;
+    margin-right: 38px;
 }
 .chosen-container-single .chosen-single abbr {
-  position: absolute;
-  top: 6px;
-  right: 26px;
-  display: block;
-  width: 12px;
-  height: 12px;
-  background: url('../../../../../../../Downloads/chosen_v1.6.2/chosen-sprite.png') -42px 1px no-repeat;
-  font-size: 1px;
+    position: absolute;
+    top: 6px;
+    right: 26px;
+    display: block;
+    width: 12px;
+    height: 12px;
+    background: url('chosen-sprite.png') -42px 1px no-repeat;
+    font-size: 1px;
 }
 .chosen-container-single .chosen-single abbr:hover {
-  background-position: -42px -10px;
+    background-position: -42px -10px;
 }
 .chosen-container-single.chosen-disabled .chosen-single abbr:hover {
-  background-position: -42px -10px;
+    background-position: -42px -10px;
 }
 .chosen-container-single .chosen-single div {
-  position: absolute;
-  top: 0;
-  right: 0;
-  display: block;
-  width: 18px;
-  height: 100%;
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: block;
+    width: 18px;
+    height: 100%;
 }
 .chosen-container-single .chosen-single div b {
-  display: block;
-  width: 100%;
-  height: 100%;
-  background: url('../../../../../../../Downloads/chosen_v1.6.2/chosen-sprite.png') no-repeat 0px 2px;
+    display: block;
+    width: 100%;
+    height: 100%;
+    background: url('chosen-sprite.png') no-repeat 0px 2px;
 }
 .chosen-container-single .chosen-search {
-  position: relative;
-  z-index: 1010;
-  margin: 0;
-  padding: 3px 4px;
-  white-space: nowrap;
+    position: relative;
+    z-index: 1010;
+    margin: 0;
+    padding: 3px 4px;
+    white-space: nowrap;
 }
 .chosen-container-single .chosen-search input[type="text"] {
-  margin: 1px 0;
-  padding: 4px 20px 4px 5px;
-  width: 100%;
-  height: auto;
-  outline: 0;
-  border: 1px solid #aaa;
-  background: white url('../../../../../../../Downloads/chosen_v1.6.2/chosen-sprite.png') no-repeat 100% -20px;
-  background: url('../../../../../../../Downloads/chosen_v1.6.2/chosen-sprite.png') no-repeat 100% -20px;
-  font-size: 1em;
-  font-family: sans-serif;
-  line-height: normal;
-  border-radius: 0;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    margin: 1px 0;
+    padding: 4px 20px 4px 5px;
+    width: 100%;
+    height: auto;
+    outline: 0;
+    border: 1px solid #aaa;
+    background: white url('chosen-sprite.png') no-repeat 100% -20px;
+    background: url('chosen-sprite.png') no-repeat 100% -20px;
+    font-size: 1em;
+    font-family: sans-serif;
+    line-height: normal;
+    border-radius: 0;
 }
 .chosen-container-single .chosen-drop {
-  margin-top: -1px;
-  border-radius: 0 0 4px 4px;
-  background-clip: padding-box;
+    margin-top: -1px;
+    border-radius: 0 0 4px 4px;
+    background-clip: padding-box;
 }
 .chosen-container-single.chosen-container-single-nosearch .chosen-search {
-  position: absolute;
-  left: -9999px;
+    position: absolute;
+    left: -9999px;
 }
 
 /* @end */
 /* @group Results */
 .chosen-container .chosen-results {
-  color: #444;
-  position: relative;
-  overflow-x: hidden;
-  overflow-y: auto;
-  margin: 0 4px 4px 0;
-  padding: 0 0 0 4px;
-  max-height: 240px;
-  -webkit-overflow-scrolling: touch;
+    position: relative;
+    overflow-x: hidden;
+    overflow-y: auto;
+    margin: 0 4px 4px 0;
+    padding: 0 0 0 4px;
+    max-height: 240px;
+    -webkit-overflow-scrolling: touch;
 }
 .chosen-container .chosen-results li {
-  display: none;
-  margin: 0;
-  padding: 5px 6px;
-  list-style: none;
-  line-height: 15px;
-  word-wrap: break-word;
-  -webkit-touch-callout: none;
+    display: none;
+    margin: 0;
+    padding: 5px 6px;
+    list-style: none;
+    line-height: 15px;
+    -webkit-touch-callout: none;
 }
 .chosen-container .chosen-results li.active-result {
-  display: list-item;
-  cursor: pointer;
+    display: list-item;
+    cursor: pointer;
 }
 .chosen-container .chosen-results li.disabled-result {
-  display: list-item;
-  color: #ccc;
-  cursor: default;
+    display: list-item;
+    color: #ccc;
+    cursor: default;
 }
 .chosen-container .chosen-results li.highlighted {
-  background-color: #3875d7;
-  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #3875d7), color-stop(90%, #2a62bc));
-  background-image: -webkit-linear-gradient(#3875d7 20%, #2a62bc 90%);
-  background-image: -moz-linear-gradient(#3875d7 20%, #2a62bc 90%);
-  background-image: -o-linear-gradient(#3875d7 20%, #2a62bc 90%);
-  background-image: linear-gradient(#3875d7 20%, #2a62bc 90%);
-  color: #fff;
+    background-color: #3875d7;
+    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #3875d7), color-stop(90%, #2a62bc));
+    background-image: -webkit-linear-gradient(#3875d7 20%, #2a62bc 90%);
+    background-image: -moz-linear-gradient(#3875d7 20%, #2a62bc 90%);
+    background-image: -o-linear-gradient(#3875d7 20%, #2a62bc 90%);
+    background-image: linear-gradient(#3875d7 20%, #2a62bc 90%);
+    color: #fff;
 }
 .chosen-container .chosen-results li.no-results {
-  color: #777;
-  display: list-item;
-  background: #f4f4f4;
+    display: list-item;
+    background: #f4f4f4;
 }
 .chosen-container .chosen-results li.group-result {
-  display: list-item;
-  font-weight: bold;
-  cursor: default;
+    display: list-item;
+    font-weight: bold;
+    cursor: default;
 }
 .chosen-container .chosen-results li.group-option {
-  padding-left: 15px;
+    padding-left: 15px;
 }
 .chosen-container .chosen-results li em {
-  font-style: normal;
-  text-decoration: underline;
+    font-style: normal;
+    text-decoration: underline;
 }
 
 /* @end */
 /* @group Multi Chosen */
 .chosen-container-multi .chosen-choices {
-  position: relative;
-  overflow: hidden;
-  margin: 0;
-  padding: 0 5px;
-  width: 100%;
-  height: auto;
-  border: 1px solid #aaa;
-  background-color: #fff;
-  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
-  background-image: -webkit-linear-gradient(#eeeeee 1%, #ffffff 15%);
-  background-image: -moz-linear-gradient(#eeeeee 1%, #ffffff 15%);
-  background-image: -o-linear-gradient(#eeeeee 1%, #ffffff 15%);
-  background-image: linear-gradient(#eeeeee 1%, #ffffff 15%);
-  cursor: text;
+    -moz-box-sizing: border-box;
+    background-color: #FFFFFF;
+    border: 1px solid #CBD5DD;
+    border-radius: 2px;
+    cursor: text;
+    height: auto !important;
+    margin: 0;
+    min-height: 30px;
+    overflow: hidden;
+    padding: 2px;
+    position: relative;
+    width: 100%;
 }
 .chosen-container-multi .chosen-choices li {
-  float: left;
-  list-style: none;
+    float: left;
+    list-style: none;
 }
 .chosen-container-multi .chosen-choices li.search-field {
-  margin: 0;
-  padding: 0;
-  white-space: nowrap;
+    margin: 0;
+    padding: 0;
+    white-space: nowrap;
 }
 .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
-  margin: 1px 0;
-  padding: 0;
-  height: 25px;
-  outline: 0;
-  border: 0 !important;
-  background: transparent !important;
-  box-shadow: none;
-  color: #999;
-  font-size: 100%;
-  font-family: sans-serif;
-  line-height: normal;
-  border-radius: 0;
+    margin: 1px 0;
+    padding: 5px;
+    height: 25px;
+    outline: 0;
+    border: 0 !important;
+    background: transparent !important;
+    box-shadow: none;
+    color: #666;
+    font-size: 100%;
+    font-family: sans-serif;
+    line-height: normal;
+    border-radius: 0;
+}
+.chosen-container-multi .chosen-choices li.search-field .default {
+    color: #999;
 }
 .chosen-container-multi .chosen-choices li.search-choice {
-  position: relative;
-  margin: 3px 5px 3px 0;
-  padding: 3px 20px 3px 5px;
-  border: 1px solid #aaa;
-  max-width: 100%;
-  border-radius: 3px;
-  background-color: #eeeeee;
-  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
-  background-image: -webkit-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
-  background-image: -moz-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
-  background-image: -o-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
-  background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
-  background-size: 100% 19px;
-  background-repeat: repeat-x;
-  background-clip: padding-box;
-  box-shadow: 0 0 2px white inset, 0 1px 0 rgba(0, 0, 0, 0.05);
-  color: #333;
-  line-height: 13px;
-  cursor: default;
-}
-.chosen-container-multi .chosen-choices li.search-choice span {
-  word-wrap: break-word;
+    position: relative;
+    margin: 3px 0 3px 5px;
+    padding: 3px 20px 3px 5px;
+    border: 1px solid #aaa;
+    border-radius: 3px;
+    background-color: #e4e4e4;
+    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
+    background-image: -webkit-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
+    background-image: -moz-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
+    background-image: -o-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
+    background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
+    background-clip: padding-box;
+    box-shadow: 0 0 2px white inset, 0 1px 0 rgba(0, 0, 0, 0.05);
+    color: #333;
+    line-height: 13px;
+    cursor: default;
 }
 .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
-  position: absolute;
-  top: 4px;
-  right: 3px;
-  display: block;
-  width: 12px;
-  height: 12px;
-  background: url('../../../../../../../Downloads/chosen_v1.6.2/chosen-sprite.png') -42px 1px no-repeat;
-  font-size: 1px;
+    position: absolute;
+    top: 4px;
+    right: 3px;
+    display: block;
+    width: 12px;
+    height: 12px;
+    background: url('chosen-sprite.png') -42px 1px no-repeat;
+    font-size: 1px;
 }
 .chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover {
-  background-position: -42px -10px;
+    background-position: -42px -10px;
 }
 .chosen-container-multi .chosen-choices li.search-choice-disabled {
-  padding-right: 5px;
-  border: 1px solid #ccc;
-  background-color: #e4e4e4;
-  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
-  background-image: -webkit-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
-  background-image: -moz-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
-  background-image: -o-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
-  background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
-  color: #666;
+    padding-right: 5px;
+    border: 1px solid #ccc;
+    background-color: #e4e4e4;
+    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
+    background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
+    background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
+    background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
+    background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
+    color: #666;
 }
 .chosen-container-multi .chosen-choices li.search-choice-focus {
-  background: #d4d4d4;
+    background: #d4d4d4;
 }
 .chosen-container-multi .chosen-choices li.search-choice-focus .search-choice-close {
-  background-position: -42px -10px;
+    background-position: -42px -10px;
 }
 .chosen-container-multi .chosen-results {
-  margin: 0;
-  padding: 0;
+    margin: 0;
+    padding: 0;
 }
 .chosen-container-multi .chosen-drop .result-selected {
-  display: list-item;
-  color: #ccc;
-  cursor: default;
+    display: list-item;
+    color: #ccc;
+    cursor: default;
 }
 
 /* @end */
 /* @group Active  */
 .chosen-container-active .chosen-single {
-  border: 1px solid #5897fb;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+    border: 1px solid #5897fb;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
 }
 .chosen-container-active.chosen-with-drop .chosen-single {
-  border: 1px solid #aaa;
-  -moz-border-radius-bottomright: 0;
-  border-bottom-right-radius: 0;
-  -moz-border-radius-bottomleft: 0;
-  border-bottom-left-radius: 0;
-  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #eeeeee), color-stop(80%, #ffffff));
-  background-image: -webkit-linear-gradient(#eeeeee 20%, #ffffff 80%);
-  background-image: -moz-linear-gradient(#eeeeee 20%, #ffffff 80%);
-  background-image: -o-linear-gradient(#eeeeee 20%, #ffffff 80%);
-  background-image: linear-gradient(#eeeeee 20%, #ffffff 80%);
-  box-shadow: 0 1px 0 #fff inset;
+    border: 1px solid #aaa;
+    -moz-border-radius-bottomright: 0;
+    border-bottom-right-radius: 0;
+    -moz-border-radius-bottomleft: 0;
+    border-bottom-left-radius: 0;
+    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #eeeeee), color-stop(80%, #ffffff));
+    background-image: -webkit-linear-gradient(#eeeeee 20%, #ffffff 80%);
+    background-image: -moz-linear-gradient(#eeeeee 20%, #ffffff 80%);
+    background-image: -o-linear-gradient(#eeeeee 20%, #ffffff 80%);
+    background-image: linear-gradient(#eeeeee 20%, #ffffff 80%);
+    box-shadow: 0 1px 0 #fff inset;
 }
 .chosen-container-active.chosen-with-drop .chosen-single div {
-  border-left: none;
-  background: transparent;
+    border-left: none;
+    background: transparent;
 }
 .chosen-container-active.chosen-with-drop .chosen-single div b {
-  background-position: -18px 2px;
+    background-position: -18px 2px;
 }
 .chosen-container-active .chosen-choices {
-  border: 1px solid #5897fb;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+    border: 1px solid #5897fb;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
 }
 .chosen-container-active .chosen-choices li.search-field input[type="text"] {
-  color: #222 !important;
+    color: #111 !important;
 }
 
 /* @end */
 /* @group Disabled Support */
 .chosen-disabled {
-  opacity: 0.5 !important;
-  cursor: default;
+    opacity: 0.5 !important;
+    cursor: default;
 }
 .chosen-disabled .chosen-single {
-  cursor: default;
+    cursor: default;
 }
 .chosen-disabled .chosen-choices .search-choice .search-choice-close {
-  cursor: default;
+    cursor: default;
 }
 
 /* @end */
 /* @group Right to Left */
 .chosen-rtl {
-  text-align: right;
+    text-align: right;
 }
 .chosen-rtl .chosen-single {
-  overflow: visible;
-  padding: 0 8px 0 0;
+    overflow: visible;
+    padding: 0 8px 0 0;
 }
 .chosen-rtl .chosen-single span {
-  margin-right: 0;
-  margin-left: 26px;
-  direction: rtl;
+    margin-right: 0;
+    margin-left: 26px;
+    direction: rtl;
 }
 .chosen-rtl .chosen-single-with-deselect span {
-  margin-left: 38px;
+    margin-left: 38px;
 }
 .chosen-rtl .chosen-single div {
-  right: auto;
-  left: 3px;
+    right: auto;
+    left: 3px;
 }
 .chosen-rtl .chosen-single abbr {
-  right: auto;
-  left: 26px;
+    right: auto;
+    left: 26px;
 }
 .chosen-rtl .chosen-choices li {
-  float: right;
+    float: right;
 }
 .chosen-rtl .chosen-choices li.search-field input[type="text"] {
-  direction: rtl;
+    direction: rtl;
 }
 .chosen-rtl .chosen-choices li.search-choice {
-  margin: 3px 5px 3px 0;
-  padding: 3px 5px 3px 19px;
+    margin: 3px 5px 3px 0;
+    padding: 3px 5px 3px 19px;
 }
 .chosen-rtl .chosen-choices li.search-choice .search-choice-close {
-  right: auto;
-  left: 4px;
+    right: auto;
+    left: 4px;
 }
 .chosen-rtl.chosen-container-single-nosearch .chosen-search,
 .chosen-rtl .chosen-drop {
-  left: 9999px;
+    left: 9999px;
 }
 .chosen-rtl.chosen-container-single .chosen-results {
-  margin: 0 0 4px 4px;
-  padding: 0 4px 0 0;
+    margin: 0 0 4px 4px;
+    padding: 0 4px 0 0;
 }
 .chosen-rtl .chosen-results li.group-option {
-  padding-right: 15px;
-  padding-left: 0;
+    padding-right: 15px;
+    padding-left: 0;
 }
 .chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div {
-  border-right: none;
+    border-right: none;
 }
 .chosen-rtl .chosen-search input[type="text"] {
-  padding: 4px 5px 4px 20px;
-  background: white url('../../../../../../../Downloads/chosen_v1.6.2/chosen-sprite.png') no-repeat -30px -20px;
-  background: url('../../../../../../../Downloads/chosen_v1.6.2/chosen-sprite.png') no-repeat -30px -20px;
-  direction: rtl;
+    padding: 4px 5px 4px 20px;
+    background: white url('chosen-sprite.png') no-repeat -30px -20px;
+    background: url('chosen-sprite.png') no-repeat -30px -20px;
+    direction: rtl;
 }
 .chosen-rtl.chosen-container-single .chosen-single div b {
-  background-position: 6px 2px;
+    background-position: 6px 2px;
 }
 .chosen-rtl.chosen-container-single.chosen-with-drop .chosen-single div b {
-  background-position: -12px 2px;
+    background-position: -12px 2px;
 }
 
 /* @end */
 /* @group Retina compatibility */
-@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 1.5dppx) {
-  .chosen-rtl .chosen-search input[type="text"],
-  .chosen-container-single .chosen-single abbr,
-  .chosen-container-single .chosen-single div b,
-  .chosen-container-single .chosen-search input[type="text"],
-  .chosen-container-multi .chosen-choices .search-choice .search-choice-close,
-  .chosen-container .chosen-results-scroll-down span,
-  .chosen-container .chosen-results-scroll-up span {
-    background-image: url('../../../../../../../Downloads/chosen_v1.6.2/chosen-sprite@2x.png') !important;
-    background-size: 52px 37px !important;
-    background-repeat: no-repeat !important;
-  }
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi) {
+    .chosen-rtl .chosen-search input[type="text"],
+    .chosen-container-single .chosen-single abbr,
+    .chosen-container-single .chosen-single div b,
+    .chosen-container-single .chosen-search input[type="text"],
+    .chosen-container-multi .chosen-choices .search-choice .search-choice-close,
+    .chosen-container .chosen-results-scroll-down span,
+    .chosen-container .chosen-results-scroll-up span {
+        background-image: url('chosen-sprite@2x.png') !important;
+        background-size: 52px 37px !important;
+        background-repeat: no-repeat !important;
+    }
 }
 /* @end */
diff --git a/apps/static/css/style.css b/apps/static/css/style.css
index 1e8eaa02b..794a62db7 100644
--- a/apps/static/css/style.css
+++ b/apps/static/css/style.css
@@ -981,6 +981,22 @@ button.dim:active:before {
   padding: 3px 20px 3px 5px;
   position: relative;
 }
+
+.chosen-container .chosen-results li.highlighted {
+    background-color: #1ab394;
+    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #1ab394), color-stop(90%, #1ab394));
+    /*background-image: -webkit-linear-gradient(#1ab394 20%, #2a62bc 100%);*/
+    /*background-image: -moz-linear-gradient(#1ab394 20%, #2a62bc 100%);*/
+    /*background-image: -o-linear-gradient(#1ab394 20%, #2a62bc 100%);*/
+    /*background-image: linear-gradient(#1ab394 20%, #2a62bc 100%);*/
+    color: #fff;
+}
+
+.chosen-container-active .chosen-choices {
+    border: 1px solid #1ab394;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+}
+
 /* PAGINATIN */
 .pagination > .active > a,
 .pagination > .active > span,
diff --git a/apps/templates/_head_css_js.html b/apps/templates/_head_css_js.html
index b7295bb2c..f326a3698 100644
--- a/apps/templates/_head_css_js.html
+++ b/apps/templates/_head_css_js.html
@@ -5,7 +5,7 @@
 <link href="{% static "css/font-awesome.css" %}" rel="stylesheet">
 {#<link href="{% static "css/plugins/iCheck/custom.css" %}" rel="stylesheet">#}
 {#<link href="{% static "css/animate.css" %}" rel="stylesheet">#}
-<link href="{% static "css/style.css" %}" rel="stylesheet">
+
 {#<link href="{% static "css/colorbox.css" %}" rel="stylesheet">#}
 <link href="{% static "css/plugins/vaildator/jquery.validator.css" %}" rel="stylesheet">
 {#<link href="{% static "css/magnific/magnific-popup.css" %}" rel="stylesheet">#}
@@ -15,7 +15,6 @@
 <!-- scripts -->
 <script src="{% static "js/jquery-2.1.1.js" %}"></script>
 <script src="{% static "js/bootstrap.min.js" %}"></script>
-<script src="{% static "js/base.js" %}"></script>
 
 <!-- validator js -->
 {#<script src="{% static "js/validator/jquery.validator.js" %}"></script>#}
diff --git a/apps/templates/base.html b/apps/templates/base.html
index 0f27fa607..7abe00099 100644
--- a/apps/templates/base.html
+++ b/apps/templates/base.html
@@ -11,6 +11,8 @@
     <link rel="shortcut icon" href={% static "img/facio.ico" %} type="image/x-icon">
     {% include '_head_css_js.html' %}
     {% block custom_head_css_js %} {% endblock %}
+    <link href="{% static "css/style.css" %}" rel="stylesheet">
+    <script src="{% static "js/base.js" %}"></script>
 </head>
 
 <body>
@@ -25,5 +27,5 @@
 
 </body>
 {% include '_foot_js.html' %}
-{% block custom_footer_js %} {% endblock %}
+{% block custom_foot_js %} {% endblock %}
 </html>
\ No newline at end of file
diff --git a/apps/users/migrations/0008_auto_20160817_2303.py b/apps/users/migrations/0008_auto_20160817_2303.py
new file mode 100644
index 000000000..dac68a94c
--- /dev/null
+++ b/apps/users/migrations/0008_auto_20160817_2303.py
@@ -0,0 +1,20 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.10 on 2016-08-17 15:03
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('users', '0007_auto_20160817_0032'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='user',
+            name='avatar',
+            field=models.ImageField(upload_to='avatar', verbose_name='\u5934\u50cf'),
+        ),
+    ]
diff --git a/apps/users/models.py b/apps/users/models.py
index 0fad694a9..089fde22b 100644
--- a/apps/users/models.py
+++ b/apps/users/models.py
@@ -60,7 +60,7 @@ class User(AbstractUser):
     username = models.CharField(max_length=20, unique=True, verbose_name='用户名', help_text='* required')
     name = models.CharField(max_length=20, verbose_name='姓名', help_text='* required')
     email = models.EmailField(max_length=30, unique=True, verbose_name='邮件', help_text='* required')
-    groups = models.ManyToManyField(UserGroup, verbose_name='用户组')
+    groups = models.ManyToManyField(UserGroup, verbose_name='用户组', help_text='* required')
     avatar = models.ImageField(upload_to="avatar", verbose_name='头像')
     wechat = models.CharField(max_length=30, blank=True, verbose_name='微信')
     phone = models.CharField(max_length=20, blank=True, verbose_name='手机号')
diff --git a/apps/users/templates/users/_user.html b/apps/users/templates/users/_user.html
index 36d20ceec..0c4339043 100644
--- a/apps/users/templates/users/_user.html
+++ b/apps/users/templates/users/_user.html
@@ -49,7 +49,6 @@
                             </div>
                             <div class="hr-line-dashed"></div>
                             <h3>信息</h3>
-                            {{ form.avatar|bootstrap_horizontal }}
                             {{ form.phone|bootstrap_horizontal }}
                             {{ form.wechat|bootstrap_horizontal }}
                             {{ form.comment|bootstrap_horizontal }}
@@ -67,7 +66,7 @@
         </div>
     </div>
 {% endblock %}
-{% block custom_footer_js %}
+{% block custom_foot_js %}
 <script type="text/javascript">
 {#$(document).ready(function() {#}
 {#    var config = {#}
diff --git a/apps/users/templates/users/user_detail.html b/apps/users/templates/users/user_detail.html
index cc8a32907..c49ac0cbe 100644
--- a/apps/users/templates/users/user_detail.html
+++ b/apps/users/templates/users/user_detail.html
@@ -3,6 +3,10 @@
 {% load users_tags %}
 {% load static %}
 
+{% block custom_head_css_js %}
+    <link href="{% static "css/plugins/chosen/chosen.css" %}" rel="stylesheet">
+    <script src="{% static "js/plugins/chosen/chosen.jquery.min.js" %}"></script>
+{% endblock %}
 {% block content %}
     <div class="wrapper wrapper-content animated fadeInRight">
         <div class="row">
@@ -177,28 +181,38 @@
                             </div>
 
                             <div class="ibox float-e-margins">
-                                <div class="ibox-title bg-primary" style="background: #23c6c8">
+                                <div class="ibox-title bg-primary" style="background: #1ab394">
                                     <span style="color: white">用户组</span>
                                     <div class="ibox-tools">
                                     </div>
                                 </div>
-                                <div class="ibox-content info-panel">
+                                <div class="ibox-content primary-panel">
                                     <table class="table">
                                         <tbody>
-                                        <tr>
-                                            <td>
-                                                
-                                            </td>
+                                        <form>
+                                            <tr>
+                                                <td colspan="2" class="no-borders">
+                                                    <select data-placeholder="选择用户组" class="chosen-select" style="width: 100%" multiple="" tabindex="4">
+                                                        {% for group in groups %}
+                                                        <option value="{{ group.id }}">{{ group.name }}</option>
+                                                        {% endfor %}
+                                                    </select>
+                                                </td>
 
-                                        </tr>
+                                            </tr>
+                                            <tr>
+                                                <td colspan="2" class="no-borders">
+                                                    <button type="button" class="btn btn-primary btn-small">添加到用户组</button>
+                                                </td>
+                                            </tr>
+                                        </form>
+
+                                        {% for group in user.groups.all %}
                                         <tr>
-                                            <td width="20%">姓名:</td>
-                                            <td>{{ user.name }}</td>
-                                        </tr>
-                                        <tr>
-                                            <td>描述:</td>
-                                            <td>{{ user.comment }}</td>
+                                            <td width="40%"><b>{{ group.name }}</b></td>
+                                            <td></td>
                                         </tr>
+                                        {% endfor %}
                                         </tbody>
                                     </table>
                                 </div>
@@ -212,9 +226,19 @@
     </div>
 
 {% endblock %}
-{% block custom_footer_js %}
+{% block custom_foot_js %}
     <script>
         $(document).ready(function () {
+            var config = {
+                '.chosen-select'           : {},
+                '.chosen-select-deselect'  : {allow_single_deselect:true},
+                '.chosen-select-no-single' : {disable_search_threshold:10},
+                '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
+                '.chosen-select-width'     : {width:"95%"}
+            };
+            for (var selector in config) {
+                $(selector).chosen(config[selector]);
+            }
         })
     </script>
 {% endblock %}
\ No newline at end of file
diff --git a/apps/users/templatetags/users_tags.py b/apps/users/templatetags/users_tags.py
index 64451bd3e..d3efec18b 100644
--- a/apps/users/templatetags/users_tags.py
+++ b/apps/users/templatetags/users_tags.py
@@ -1,12 +1,12 @@
 # ~*~ coding: utf-8 ~*~
 
+import os
 import urllib
 import hashlib
 
 from django import template
 from django.utils import timezone
 from django.conf import settings
-from django.conf.urls.static import static
 
 
 register = template.Library()
@@ -26,13 +26,16 @@ def is_expired(datetime):
 
 
 @register.filter
-def user_avatar_url(user, size=64):
+def user_avatar_url(user):
     if user.avatar:
         return user.avatar.url
-    gravatar_url = "https://www.gravatar.com/avatar/" \
-                   + hashlib.md5(user.email.lower()).hexdigest() + "?"
-    gravatar_url += urllib.urlencode({'d': 'identicon', 's': str(size)})
-    return gravatar_url
+    else:
+        default_dir = os.path.join(settings.MEDIA_ROOT, 'avatar', 'default')
+        if os.path.isdir(default_dir):
+            default_avatar_list = os.listdir(default_dir)
+            default_avatar = default_avatar_list[len(user.username) % len(default_avatar_list)]
+            return os.path.join(settings.MEDIA_URL, 'avatar', 'default',  default_avatar)
+    return 'https://www.gravatar.com/avatar/c6812ab450230979465d7bf288eadce2a?s=120&d=identicon'
 
 
 
diff --git a/apps/users/views.py b/apps/users/views.py
index 1ff8474db..0e0d481f8 100644
--- a/apps/users/views.py
+++ b/apps/users/views.py
@@ -87,5 +87,6 @@ class UserDetailView(DetailView):
 
     def get_context_data(self, **kwargs):
         context = super(UserDetailView, self).get_context_data(**kwargs)
-        context.update({'path1': '用户管理', 'path2': '用户详情', 'title': '用户详情'})
+        groups = [group for group in UserGroup.objects.iterator() if group not in self.object.groups.iterator()]
+        context.update({'path1': '用户管理', 'path2': '用户详情', 'title': '用户详情', 'groups': groups})
         return context