diff --git a/mitama/app/templates/lists.macro.html b/mitama/app/templates/lists.macro.html
index 3e360ac..b9e819d 100644
--- a/mitama/app/templates/lists.macro.html
+++ b/mitama/app/templates/lists.macro.html
@@ -15,24 +15,6 @@
 </div>
 {% endif %}
 {%- endmacro %}
-{% macro userItemEx(user, id=None, link=None, small=False) -%}
-{% if link != None %}
-<a href="{{link}}" class="user-item {% if small %}small{% endif %}" id='{{id}}'>
-{% else %}
-<div href="{{link}}" class="user-item {% if small %}small{% endif %}" id='{{id}}'>
-{% endif %}
-    <img src='{{ dataurl(user.icon) }}' class='icon' />
-    <div class='detail'>
-        <div class='name'>{{ user.name }}</div>
-        <div class='screen-name'>{{ user.screen_name }}</div>
-        {{ caller() }}
-    </div>
-{% if link != None %}
-</a>
-{% else %}
-</div>
-{% endif %}
-{%- endmacro %}
 {% macro groupItem(group, id=None, link=None, tree=False, small=False) -%}
 <div class="group-item {% if small %}small{% endif %}" id='{{id}}'>
     <div class='branch'></div>
@@ -50,24 +32,6 @@
     {% endif %}
 </div>
 {%- endmacro %}
-{% macro groupItemEx(group, id=None, link=None, tree=False, small=False) -%}
-<div class="group-item {% if small %}small{% endif %}" id='{{id}}'>
-    <div class='branch'></div>
-    <a {% if link != None %}href="{{link}}"{% endif %} class='profile'>
-        <img src='{{ dataurl(group.icon) }}' class='icon' />
-        <div class='detail'>
-            <div class='name'>{{ group.name }}</div>
-            <div class='screen-name'>{{ group.screen_name }}</div>
-            {{ caller() }}
-        </div>
-    </a>
-    {% if tree and group.groups.length != 0 %}
-    <div class='children'>
-        {{ tree(group.groups) }}
-    </div>
-    {% endif %}
-</div>
-{%- endmacro %}
 {% macro appItem(app, id=None, link=None, small=False) -%}
 {% if link != None %}
 <a href="{{link}}" class="app-item {% if small %}small{% endif %}" id='{{id}}'>
@@ -86,22 +50,3 @@
 </div>
 {% endif %}
 {%- endmacro %}
-{% macro appItemEx(app, id=None, link=None, small=False) -%}
-{% if link != None %}
-<a href="{{link}}" class="app-item {% if small %}small{% endif %}" id='{{id}}'>
-{% else %}
-<div href="{{link}}" class="app-item {% if small %}small{% endif %}" id='{{id}}'>
-{% endif %}
-    <img src='{{ dataurl(app.icon) }}' class='icon' />
-    <div class='detail'>
-        <div class='name'>{{ app.name }}</div>
-        <div class='screen-name'>{{ app.screen_name }}</div>
-        <p class='description'>{{ app.description }}</p>
-        {{ caller() }}
-    </div>
-{% if link != None %}
-</a>
-{% else %}
-</div>
-{% endif %}
-{%- endmacro %}
diff --git a/mitama/models/nodes.py b/mitama/models/nodes.py
index 48d0592..077433a 100644
--- a/mitama/models/nodes.py
+++ b/mitama/models/nodes.py
@@ -374,7 +374,8 @@ def is_ancestor(self, node):
                         return True
             layer_ = list()
             for node_ in layer:
-                layer_.extend([node_.parent])
+                if node_.parent is not None:
+                    layer_.extend([node_.parent])
             layer = layer_
         return False
 
diff --git a/mitama/portal/controller.py b/mitama/portal/controller.py
index b648209..8d053be 100644
--- a/mitama/portal/controller.py
+++ b/mitama/portal/controller.py
@@ -441,6 +441,7 @@ class GroupsController(Controller):
     def create(self, req):
         template = self.view.get_template("group/create.html")
         groups = Group.list()
+        error = ""
         if req.method == "POST":
             form = GroupCreateForm(req.post())
             try:
@@ -454,12 +455,13 @@ def create(self, req):
                 group.append(req.user)
                 return Response.redirect(self.app.convert_url("/groups"))
             except ValidationError as err:
-                return Response.render(
-                    template,
-                    {"groups": groups, "icon": load_noimage_group(), "error": str(err)},
-                )
+                error = str(err)
         return Response.render(
-            template, {"groups": groups, "icon": load_noimage_group()}
+            template, {
+                "groups": groups,
+                "icon": load_noimage_group(),
+                "error": error
+            }
         )
 
     def retrieve(self, req):
@@ -474,14 +476,15 @@ def retrieve(self, req):
 
     def update(self, req):
         template = self.view.get_template("group/update.html")
-        roles = Role.list()
-        inner_roles = InnerRole.list()
         group = Group.retrieve(screen_name=req.params["id"])
+
         groups = list()
         for g in Group.list():
             if not (group.is_ancestor(g) or group.is_descendant(g) or g == group):
                 groups.append(g)
         users = list()
+        error = ""
+        message = ""
         for u in User.list():
             if not group.is_in(u):
                 users.append(u)
@@ -491,6 +494,7 @@ def update(self, req):
                 icon = resize_icon(form["icon"]) if form["icon"] is not None else group.icon
                 group.screen_name = form["screen_name"]
                 group.name = form["name"]
+                group.parent = Group.retrieve(form["parent"]) if form["parent"] is not None else None
                 for role in form["roles"]:
                     group.roles.append(Role.retrieve(screen_name=role))
                 group.icon = icon
@@ -501,39 +505,16 @@ def update(self, req):
                     rel = UserGroup.retrieve(group = group, user = User.retrieve(user))
                     rel.roles = [InnerRole.retrieve(screen_name = role) for role in roles]
                 group.update()
-                return Response.render(
-                    template,
-                    {
-                        "message": "変更を保存しました",
-                        "group": group,
-                        "screen_name": group.screen_name,
-                        "name": group.name,
-                        "all_groups": groups,
-                        "all_users": users,
-                        "icon": group.icon,
-                        "roles": Role.list(),
-                        "inner_roles": inner_roles
-                    },
-                )
+                message = "変更を保存しました"
             except ValidationError as err:
                 error = str(err)
-                return Response.render(
-                    template,
-                    {
-                        "error": error,
-                        "all_groups": groups,
-                        "all_users": users,
-                        "group": group,
-                        "screen_name": form["screen_name"],
-                        "name": form["name"],
-                        "icon": group.icon,
-                        "roles": Role.list(),
-                        "inner_roles": inner_roles
-                    },
-                )
+        roles = Role.list()
+        inner_roles = InnerRole.list()
         return Response.render(
             template,
             {
+                "message": message,
+                "error": error,
                 "group": group,
                 "all_groups": groups,
                 "all_users": users,
diff --git a/mitama/portal/static/mitama-style.css b/mitama/portal/static/mitama-style.css
index b14aabb..f03512b 100644
--- a/mitama/portal/static/mitama-style.css
+++ b/mitama/portal/static/mitama-style.css
@@ -12,6 +12,11 @@
   object-fit: cover;
 }
 
+:root {
+  --main-text-lighter: #777;
+  --main-color: #ccc;
+}
+
 .no-item {
   color: var(--main-text-lighter);
   font-size: 0.8rem;
@@ -36,7 +41,6 @@
   grid-column: 2/3;
   grid-template-columns: 56px 1fr;
   grid-gap: 16px;
-  padding: 8px;
 }
 .group-item .profile .icon {
   width: 56px;
@@ -54,7 +58,7 @@
   font-weight: bold;
 }
 .group-item .profile .detail .screen-name {
-  font-size: 0.85rem;
+  font-size: 0.75rem;
   color: var(--main-text-lighter);
 }
 .group-item.small .profile {
@@ -65,20 +69,20 @@
   height: 32px;
   border-radius: 16px;
 }
+.group-item.small .profile .screen-name {
+  font-size: 0.9rem;
+  color: #000;
+  font-weight: 600;
+}
+.group-item.small .profile .name {
+  display: none;
+}
 
 .children {
   grid-column: 2/3;
+  grid-gap: 8px;
   position: relative;
 }
-.children::before {
-  content: "";
-  display: block;
-  position: absolute;
-  width: 2px;
-  height: calc(100% - 45px);
-  left: 16px;
-  background: var(--main-color);
-}
 .children .branch {
   width: 24px;
   display: block;
@@ -111,7 +115,6 @@
   grid-gap: 16px;
   text-decoration: none;
   color: var(--main-text);
-  padding: 8px;
 }
 .user-item .icon,
 .invite-item .icon {
@@ -129,6 +132,7 @@
 .invite-item .detail {
   display: flex;
   flex-direction: column;
+  justify-content: center;
 }
 .user-item .detail .name,
 .invite-item .detail .name {
@@ -137,7 +141,7 @@
 }
 .user-item .detail .screen-name,
 .invite-item .detail .screen-name {
-  font-size: 0.85rem;
+  font-size: 0.75rem;
   color: var(--main-text-lighter);
 }
 .user-item .detail .buttons,
@@ -158,13 +162,24 @@
 }
 .user-item.small,
 .invite-item.small {
-  grid-template-columns: 32px 1fr;
+  grid-template-columns: 40px 1fr;
+  grid-gap: 8px;
 }
 .user-item.small .icon,
 .invite-item.small .icon {
-  width: 32px;
-  height: 32px;
-  border-radius: 16px;
+  width: 40px;
+  height: 40px;
+  border-radius: 20px;
+}
+.user-item.small .screen-name,
+.invite-item.small .screen-name {
+  font-size: 0.9rem;
+  color: #000;
+  font-weight: 600;
+}
+.user-item.small .name,
+.invite-item.small .name {
+  display: none;
 }
 
 .member-control-list h4 {
@@ -197,7 +212,7 @@
   font-weight: bold;
 }
 .member-control-item .detail .screen-name {
-  font-size: 0.85rem;
+  font-size: 0.65rem;
   color: var(--main-text-lighter);
 }
 .member-control-item .actions {
@@ -216,6 +231,14 @@
   height: 32px;
   border-radius: 16px;
 }
+.member-control-item.small .screen-name {
+  color: #000;
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+.member-control-item.small .name {
+  display: none;
+}
 
 .app-list {
   display: grid;
diff --git a/mitama/portal/static/mitama-style.css.map b/mitama/portal/static/mitama-style.css.map
index 198c208..cf5027f 100644
--- a/mitama/portal/static/mitama-style.css.map
+++ b/mitama/portal/static/mitama-style.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../scss/main.scss","../../../scss/list.scss"],"names":[],"mappings":"AAAA;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;;;ACRJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;AAKR;EACI;;AACA;EACI;EACA;EACA;;;AAMhB;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAOR;AAAA;EACI;EACA;;;AAIR;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;;AACA;AAAA;EACI;EACA;EACA;EACA;EACA;;AAEJ;AAAA;EACI;;AAEJ;AAAA;EACI;EACA;;AACA;AAAA;EACI;EACA;;AAEJ;AAAA;EACI;EACA;;AAEJ;AAAA;EACI;EACA;;AACA;AAAA;EACI;;AAEJ;AAAA;EACI;EACA;EACA;EACA;;AAIZ;AAAA;EACI;;AACA;AAAA;EACI;EACA;EACA;;;AAMR;EACI;EACA;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;AAGR;EACI;EACA;EACA;;AACA;EACI;;AAGR;EACI;;AACA;EACI;EACA;EACA;;;AAKZ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AACA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA","file":"mitama-style.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../../scss/main.scss","../../../scss/list.scss"],"names":[],"mappings":"AAAA;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;;;ACTJ;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;AAKR;EACI;;AACA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;;;AAMhB;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAOR;AAAA;EACI;EACA;;;AAIR;AAAA;EAEI;EACA;EACA;EACA;EACA;;AACA;AAAA;EACI;EACA;EACA;EACA;EACA;;AAEJ;AAAA;EACI;;AAEJ;AAAA;EACI;EACA;EACA;;AACA;AAAA;EACI;EACA;;AAEJ;AAAA;EACI;EACA;;AAEJ;AAAA;EACI;EACA;;AACA;AAAA;EACI;;AAEJ;AAAA;EACI;EACA;EACA;EACA;;AAIZ;AAAA;EACI;EACA;;AACA;AAAA;EACI;EACA;EACA;;AAEJ;AAAA;EACI;EACA;EACA;;AAEJ;AAAA;EACI;;;AAMR;EACI;EACA;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;AAGR;EACI;EACA;EACA;;AACA;EACI;;AAGR;EACI;;AACA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;;;AAKZ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AACA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA","file":"mitama-style.css"}
\ No newline at end of file
diff --git a/mitama/portal/templates/group/list.html b/mitama/portal/templates/group/list.html
index d3874ca..696082a 100644
--- a/mitama/portal/templates/group/list.html
+++ b/mitama/portal/templates/group/list.html
@@ -28,7 +28,9 @@
             <div class='group-list'>
             {% if groups|length %}
             {% for group in groups recursive %}
+            <div class='mt-2'>
                 {{ lists.groupItem(group, link=url("/groups/" + group.screen_name), tree=loop) }}
+            </div>
             {% endfor %}
             {% else%}
                 <div class='no-item'>グループは存在しません</div>
diff --git a/mitama/portal/templates/group/retrieve.html b/mitama/portal/templates/group/retrieve.html
index 760769f..b84434b 100644
--- a/mitama/portal/templates/group/retrieve.html
+++ b/mitama/portal/templates/group/retrieve.html
@@ -29,7 +29,9 @@ <h2 class="name">{{group.name}}</h2>
         <h3 class="mini-title">メンバー</h3>
         <div class="user-list">
             {% for user in group.users %}
+            <div class='mb-2'>
                 {{ lists.userItem(user, link=url('/users/'+user.screen_name)) }}
+            </div>
             {% endfor %}
         </div>
     </div>
diff --git a/mitama/portal/templates/group/update.html b/mitama/portal/templates/group/update.html
index d8573be..a85544e 100644
--- a/mitama/portal/templates/group/update.html
+++ b/mitama/portal/templates/group/update.html
@@ -35,9 +35,10 @@ <h2 class='mt-4 mb-3'>{{ group.name }}の設定</h2>
         </div>
         <div class='mb-3'>
             <label class='form-label'>親チーム</label>
-            <select class='form-select' name='parent' value='{{ name }}'>
-                {% for group in groups %}
-                <option value='{{group._id}}'>{{group.name}}</option>
+            <select class='form-select' name='parent'>
+                <option value=''></option>
+                {% for group_ in all_groups %}
+                <option value='{{group_._id}}' {% if group._id == group_._id %}selected{% endif %}>{{group_.name}}</option>
                 {% endfor %}
             </select>
         </div>
@@ -68,32 +69,37 @@ <h3 class="mt-3 mb-3 d-flex">
         </h3>
         <div class='user-list mt-2 mb-2'>
             {% for user in group.users %}
-            {% call lists.userItemEx(user, id='user_'+user._id) %}
-            <div data-bs-toggle='collapse' data-bs-target='#user_{{user.screen_name}}'><i class='bi-gear'></i>設定</div>
-            <div class='mt-1 collapse' id='user_{{user.screen_name}}'>
-                <input type='hidden' name='users' value='{{user._id}}'/>
-                {% for inner_role in inner_roles %}
-                <div class='form-check form-check-inline'>
-                    <input
-                        class='form-check-input'
-                        id='inner_role_{{user.screen_name}}_{{inner_role.screen_name}}'
-                        type='checkbox'
-                        name='inner_roles.{{user._id}}'
-                        value='{{inner_role.screen_name}}'
-                        {% if inner_role.exists(group, user) %}
-                        checked
-                        {% endif %}
-                        />
-                    <label class='form-check-label' for='inner_role_{{user.screen_name}}_{{inner_role.screen_name}}'>{{ inner_role.name }}</label>
+            <div class='container'>
+                <div class='d-flex justify-content-between'>
+                    {{ lists.userItem(user, id='user_'+user._id) }}
+                    <div class='d-flex justify-content-end'>
+                        <button type='button' data-bs-toggle='collapse' data-bs-target='#user_{{user.screen_name}}' class='btn bi bi-gear-fill'></button>
+                    </div>
                 </div>
-                {% endfor %}
-                {% if permission('update_group', request.user) or inner_permission('remove_user', group, request.user) %}
-                <div class='d-flex'>
-                    <button class='ms-auto btn btn-danger' onclick='exclude("{{user._id}}")'>外す</button>
+                <div class='mt-2 collapse' id='user_{{user.screen_name}}'>
+                    <input type='hidden' name='users' value='{{user._id}}'/>
+                    {% for inner_role in inner_roles %}
+                    <div class='form-check form-check-inline'>
+                        <input
+                            class='form-check-input'
+                            id='inner_role_{{user.screen_name}}_{{inner_role.screen_name}}'
+                            type='checkbox'
+                            name='inner_roles.{{user._id}}'
+                            value='{{inner_role.screen_name}}'
+                            {% if inner_role.exists(group, user) %}
+                            checked
+                            {% endif %}
+                            />
+                        <label class='form-check-label' for='inner_role_{{user.screen_name}}_{{inner_role.screen_name}}'>{{ inner_role.name }}</label>
+                    </div>
+                    {% endfor %}
+                    {% if permission('update_group', request.user) or inner_permission('remove_user', group, request.user) %}
+                    <div class='d-flex'>
+                        <button class='ms-auto btn btn-danger' onclick='exclude("{{user._id}}")'>外す</button>
+                    </div>
+                    {% endif %}
                 </div>
-                {% endif %}
             </div>
-            {% endcall %}
             {% endfor %}
         </div>
         <script>
diff --git a/mitama/portal/templates/user/list.html b/mitama/portal/templates/user/list.html
index 3c96e64..27153ed 100644
--- a/mitama/portal/templates/user/list.html
+++ b/mitama/portal/templates/user/list.html
@@ -28,7 +28,9 @@
             <div class='user-list'>
             {% if users|length %}
             {% for user in users %}
+            <div class='mb-3 mt-3'>
                 {{ lists.userItem(user, link=url("/users/"+user.screen_name)) }}
+            </div>
             {% endfor %}
             {% else%}
                 <div class='no-item'>ユーザーはいません</div>
diff --git a/mitama/portal/templates/user/retrieve.html b/mitama/portal/templates/user/retrieve.html
index 8138879..ee3a1d0 100644
--- a/mitama/portal/templates/user/retrieve.html
+++ b/mitama/portal/templates/user/retrieve.html
@@ -22,7 +22,9 @@ <h2 class="name">{{user.name}}</h2>
         <h3>所属</h3>
         <div class='group-list'>
         {% for g in user.groups %}
+            <div class='mb-2'>
             {{ lists.groupItem(g, link=url('/groups/'+g.screen_name)) }}
+            </div>
         {% endfor %}
         </div>
     </div>
diff --git a/scss/list.scss b/scss/list.scss
index 8d8fa6f..d80e307 100644
--- a/scss/list.scss
+++ b/scss/list.scss
@@ -1,4 +1,7 @@
-
+:root {
+    --main-text-lighter: #777;
+    --main-color: #ccc;
+}
 .no-item{
     color: var(--main-text-lighter);
     font-size: 0.8rem;
@@ -22,7 +25,6 @@
         grid-column: 2/3;
         grid-template-columns: 56px 1fr;
         grid-gap: 16px;
-        padding: 8px;
         .icon {
             width: 56px;
             height: 56px;
@@ -38,7 +40,7 @@
                 font-weight: bold;
             }
             .screen-name{ 
-                font-size: 0.85rem;
+                font-size: 0.75rem;
                 color: var(--main-text-lighter);
             }
         }
@@ -51,22 +53,22 @@
                 height: 32px;
                 border-radius: 16px;
             }
+            .screen-name {
+                font-size: 0.9rem;
+                color: #000;
+                font-weight: 600;
+            }
+            .name { 
+                display: none;
+            }
         }
     }
 }
 
 .children {
     grid-column: 2/3;
+    grid-gap: 8px;
     position: relative;
-    &::before{
-        content: '';
-        display: block;
-        position: absolute;
-        width: 2px;
-        height: calc(100% - 45px);
-        left: 16px;
-        background: var(--main-color);
-    }
     .branch {
         width: 24px;
         display: block;
@@ -102,7 +104,6 @@
     grid-gap: 16px;
     text-decoration: none;
     color: var(--main-text);
-    padding: 8px;
     .icon {
         display: block;
         width: 56px;
@@ -116,12 +117,13 @@
     .detail {
         display: flex;
         flex-direction: column;
+        justify-content: center;
         .name{
             font-size: 1rem;
             font-weight: bold;
         }
         .screen-name{ 
-            font-size: 0.85rem;
+            font-size: 0.75rem;
             color: var(--main-text-lighter);
         }
         .buttons{
@@ -139,11 +141,20 @@
         }
     }
     &.small {
-        grid-template-columns: 32px 1fr;
+        grid-template-columns: 40px 1fr;
+        grid-gap: 8px;
         .icon {
-            width: 32px;
-            height: 32px;
-            border-radius: 16px;
+            width: 40px;
+            height: 40px;
+            border-radius: 20px;
+        }
+        .screen-name {
+            font-size: 0.9rem;
+            color: #000;
+            font-weight: 600;
+        }
+        .name { 
+            display: none;
         }
     }
 }
@@ -178,7 +189,7 @@
             font-weight: bold;
         }
         .screen-name{ 
-            font-size: 0.85rem;
+            font-size: 0.65rem;
             color: var(--main-text-lighter);
         }
     }
@@ -197,6 +208,14 @@
             height: 32px;
             border-radius: 16px;
         }
+        .screen-name {
+            color: #000;
+            font-weight: 600;
+            font-size: 0.9rem;
+        }
+        .name { 
+            display: none;
+        }
     }
 }
 
diff --git a/tests/test_apps/hello/controller.py b/tests/test_apps/hello/controller.py
index ae4ae37..c5d5d9a 100644
--- a/tests/test_apps/hello/controller.py
+++ b/tests/test_apps/hello/controller.py
@@ -7,15 +7,7 @@
 class WelcomeController(Controller):
     def handle(self, request):
         template = self.view.get_template("welcome.html")
-        return Response.render(template)
+        return Response.render(template, {
+            "users": User.list()
+        })
 
-    def sock(self, request):
-        ws = request.websocket
-        while True:
-            mes = ws.receive()
-            print(mes)
-            try:
-                ws.send(mes)
-            except:
-                break
-        return Response()
diff --git a/tests/test_apps/hello/templates/welcome.html b/tests/test_apps/hello/templates/welcome.html
index f198a78..b0010e2 100644
--- a/tests/test_apps/hello/templates/welcome.html
+++ b/tests/test_apps/hello/templates/welcome.html
@@ -1,77 +1,9 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset='utf-8'>
-        <title>Welcome to 棺桶</title>
-        <style type='text/css'>
-            body{
-                margin: 0;
-                height: 100vh;
-                width: 100vw;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-            }
-            #wrapper{
-                width: 100%;
-                max-width: 300px;
-            }
-            #logo{
-                width: 80%;
-                display: block;
-                margin: 0 auto;
-            }
-            menu {
-                display: flex;
-                justify-content: space-around;
-                margin-top: 16px;
-                height: 40px;
-                padding: 0;
-            }
-            menu button{
-                height: 40px;
-                width: 120px;
-                display: inline-flex;
-                justify-content: center;
-                align-items: center;
-                border-radius: 4px;
-                color: #000;
-                background: #0000;
-                border: 1px solid #000;
-                padding: 0 16px;
-            }
-            a{
-                text-decoration: none;
-            }
-            h1{
-                font-size: 1.2rem;
-                color: #444;
-                text-align: center;
-                margin: 24px 0;
-            }
-        </style>
-    </head>
-    <body>
-        <pre id='hogehoge'></pre>
-        <input type='text' id='input' />
-        <button id='send'>butn</button>
-        <script>
-            window.onload = () => {
-                const input = document.querySelector("#input")
-                const hogehoge = document.querySelector("#hogehoge")
-                const send = document.querySelector("#send")
-                const ws = new WebSocket("{{ fullurl(request, "/sock", "ws") }}")
-                send.onclick=() => {
-                    hogehoge.append(input.value + '\n')
-                    ws.send(input.value)
-                }
-                ws.onopen = e => {
-                    ws.send('open')
-                }
-                ws.onmessage = e => {
-                    hogehoge.append(e.data + '\n')
-                }
-            }
-        </script>
-    </body>
-</html>
+{% extends "base/plain" %}
+{% block body %}
+{% for user in users %}
+{{ lists.userItem(user) }}
+{% endfor %}
+{% for user in users %}
+{{ lists.userItem(user, small=True) }}
+{% endfor %}
+{% endblock %}