diff --git a/group/templates/group/groups.html b/group/templates/group/groups.html
index bdf640437f..3f8f91acf2 100644
--- a/group/templates/group/groups.html
+++ b/group/templates/group/groups.html
@@ -13,21 +13,22 @@
 
 <h3>我的小组</h3>
 {% if groups %}
-<table>
-    <tr>
-        <th width="30%">名字</th>
-        <th width="40%">创建者</th>
-        <th width="30%">创建时间</th>
-    </tr>
-
+<ul class="group-list w100 ovhd">
     {% for group in groups %}
-    <tr>
-        <td><a href="{{ SITE_ROOT }}group/{{ group.props.id }}/">{{ group.props.group_name }}</a></td>
-        <td>{{ group.props.creator_name }}</td>
-        <td>{{ group.props.timestamp|tsstr_sec }}</td>
-    </tr>
+    <li class="group fleft">
+    <div class="pic fleft">
+        <a href="{{ SITE_ROOT }}group/{{ group.props.id }}/">
+            <img src="{{ MEDIA_URL }}img/group.jpg" alt="小组图标" />
+        </a>
+    </div>
+    <div class="txt fright">
+        <h4><a href="{{ SITE_ROOT }}group/{{ group.props.id }}/">{{ group.props.group_name }}</a></h4>
+        <p><span class="item-name">创建者：</span>{{ group.props.creator_name }}</p>
+        <p><span class="item-name">创建时间：</span>{{ group.props.timestamp|tsstr_sec }}</p>
+    </div>
+    </li>
     {% endfor %}
-</table>
+</ul>
 {% else %}
 <p>暂无</p>
 {% endif %}
diff --git a/media/css/seahub.css b/media/css/seahub.css
index 2df5768d74..f82f06cfdc 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -444,6 +444,25 @@ table img {
     text-decoration:none;
 }
 /* group, org */
+.group-list {
+    margin-top:20px;
+}
+.group {
+    width:315px;
+    margin:0 25px 15px 0;
+}
+.group .txt {
+    color:#333;
+    width:250px;
+}
+.group h4 {
+    margin:0 0 4px;
+}
+.group .item-name {
+    display:inline-block;
+    width:5em;
+    color:#666;
+}
 .group-member .avatar,
 .org-member .avatar {
 	border-radius: 2px;