diff --git a/htdocs/js/mumble.js b/htdocs/js/mumble.js
new file mode 100644
index 0000000..5ba9ab1
--- /dev/null
+++ b/htdocs/js/mumble.js
@@ -0,0 +1,96 @@
+// kate: space-indent on; indent-width 4; replace-tabs on;
+
+Ext.namespace('Ext.ux');
+
+Ext.ux.MumbleChannelViewer = function( config ){
+    Ext.apply( this, config );
+
+    Ext.applyIf( this, {
+        title: "Channel View",
+        root: {
+            text: "ohai",
+            leaf: true
+        }
+    } );
+
+    var conn = new Ext.data.Connection();
+    conn.request({
+        url:    this.source_url,
+        scope:  this,
+        success: function( resp, opt ){
+            respdata = Ext.decode( resp.responseText );
+            root = {
+                text: respdata.name,
+                id:   "mumbroot",
+                leaf: false,
+                icon: '/static/mumble/mumble.16x16.png',
+                children: [],
+            };
+            function populateNode( node, json ){
+                subchan_users = 0;
+                for( var i = 0; i < json.channels.length; i++ ){
+                    child = {
+                        text: json.channels[i].name,
+                        id:   ("channel_" + json.channels[i].id),
+                        leaf: false,
+                        icon: '/static/mumble/channel.png',
+                        children: [],
+                    };
+                    node.children.push( child );
+                    subchan_users += populateNode( child, json.channels[i] );
+                }
+                for( var i = 0; i < json.users.length; i++ ){
+                    child = {
+                        text: json.users[i].name,
+                        id:   ("user_" + json.users[i].id),
+                        leaf: true,
+                        icon: '/static/mumble/talking_off.png',
+                    };
+                    node.children.push( child );
+                }
+                if( json.id == 0 || json.users.length > 0 || subchan_users )
+                    node.expanded = true;
+                return subchan_users + json.users.length;
+            }
+            populateNode( root, respdata.root );
+            this.setRootNode( root );
+        },
+        failure: function( resp, opt ){
+            alert("fail");
+        },
+    });
+
+    Ext.ux.MumbleChannelViewer.superclass.constructor.call( this );
+}
+
+Ext.extend( Ext.ux.MumbleChannelViewer, Ext.tree.TreePanel, {
+    
+} );
+
+Ext.reg( 'mumblechannelviewer', Ext.ux.MumbleChannelViewer );
+
+function render_mumble( divname, data_url ){
+    var mainpanel = new Ext.Panel({
+        renderTo: divname,
+        height:   600,
+        layout:   "border",
+        items: [{
+            xtype: "mumblechannelviewer",
+            region: "west",
+            width: 350,
+            split: true,
+            source_url: data_url,
+        }, {
+            xtype: "tabpanel",
+            region: "center",
+            activeTab: 0,
+            items: [{
+                title: "fail",
+                html: "fail",
+            }, {
+                title: "omg",
+                html: "omg"
+            }],
+        }],
+    });
+}
diff --git a/pyweb/mumble/templates/mumble/mumble.html b/pyweb/mumble/templates/mumble/mumble.html
index 30b0596..14e8463 100644
--- a/pyweb/mumble/templates/mumble/mumble.html
+++ b/pyweb/mumble/templates/mumble/mumble.html
@@ -7,394 +7,14 @@
 {% block Headline %}
   {{ DBaseObject.name }}
 {% endblock %}
-{% block LeftColumn %}
-  {{ DBaseObject|chanview:MumbleAccount }}
+{% block ContentMaster %}
+  <div id="ext_container"></div>
 {% endblock %}
-{% block Content %}
-  <noscript>
-    <p>
-      {% blocktrans %}
-      <b>Hint:</b><br />
-      This area is used to display additional information for each channel and player, but requires JavaScript to be
-      displayed correctly. You will not see the detail pages, but you can use all links and forms
-      that are displayed.
-      {% endblocktrans %}
-    </p>
-  </noscript>
-    <div id="mumble_ext_container"></div>
-        <div id="mumble_motd" class="mumble-ext x-hide-display">
-          <ul>
-            {% if DBaseObject.connecturl %}
-              <li>{% trans "Server Address" %}: <a href="{{ DBaseObject.connecturl }}">{{ DBaseObject.connecturl }}</a></li>
-            {% endif %}
-            {% if DBaseObject.url %}
-              <li>{% trans "Website" %}: {{ DBaseObject.url|urlize }}</li>
-            {% endif %}
-            <li>{% trans "Server version" %}: {{ DBaseObject.prettyversion }}</li>
-            <li><a href="{% url mumble.views.mobile_show DBaseObject.id %}">{% trans "Minimal view"   %}</a></li>
-          </ul>
-          <fieldset>
-            <legend>{% trans "Welcome message" %}</legend>
-            {{ DBaseObject.motd|removetags:"script link meta html head body style"|safe }}
-          </fieldset>
-        </div>
-    <div id="mumble_registration" class="mumble-ext">
-  {% if user.is_authenticated %}
-      <h2>{% trans "Server registration" %}</h2>
-      <form action="{% url mumble.views.show DBaseObject.id %}" method="post">{% csrf_token %}
-        {% if Registered %}
-          {% trans "You are registered on this server" %}.<br />
-        {% else %}
-          {% trans "You do not have an account on this server" %}.<br />
-        {% endif %}
-        <table>
-          {{ RegForm }}
-        </table>
-        <input type="hidden" name="mode" value="reg" />
-        <input type="submit" />
-      </form>
-  {% else %}
-    {% blocktrans %}
-      <p>You need to be <a href="{{ login_url }}">logged in</a> to be able to register an account on this Mumble server.</p>
-    {% endblocktrans %}
-  {% endif %}
-    </div>
-
-  {% if Registered %}
-    <div id="mumble_texture" class="mumble-ext">
-      <h2>{% trans "User Texture" %}</h2>
-      {% if DBaseObject|mmversion_eq:"1.2.2" %}
-        {% blocktrans %}
-          Sorry, due to a bug in Murmur 1.2.2, displaying and setting the Texture is disabled.
-        {% endblocktrans %}
-      {% else %}
-        <p>
-          {% blocktrans with DBaseObject.id as serverid %}
-            You can upload an image that you would like to use as your user texture here.
-          {% endblocktrans %}<br />
-          <br />
-          <div float="right">
-            {% if MumbleAccount.gravatar %}
-              Gravatar:
-              <img src="{{ MumbleAccount.gravatar }}" alt="your gravatar" />
-            {% endif %}
-          </div>
-          {% if MumbleAccount.hasTexture %}
-            {% trans "Your current texture is" %}:<br />
-            <img src="{% url mumble.views.showTexture DBaseObject.id MumbleAccount.id %}" alt="user texture" /><br />
-          {% else %}
-            {% trans "You don't currently have a texture set" %}.<br />
-          {% endif %}
-          <br />
-          {% if DBaseObject|mmversion_lt:"1.2.3" %}
-            {% blocktrans with DBaseObject.id as serverid %}
-              Hint: The texture image <b>needs</b> to be 600x60 in size. If you upload an image with
-              a different size, it will be resized accordingly.<br />
-            {% endblocktrans %}
-          {% endif %}
-        </p>
-        <form action="{% url mumble.views.show DBaseObject.id %}" method="post" enctype="multipart/form-data">{% csrf_token %}
-          <table>
-            {{ TextureForm }}
-          </table>
-          <input type="hidden" name="mode" value="texture" />
-          <input type="submit" />
-        </form>
-      {% endif %}
-    </div>
-  {% endif %}
-
-  {% if CurrentUserIsAdmin %}
-    <div id="mumble_admin" class="mumble-ext">
-      <h2>{% trans "Server administration" %}</h2>
-      <form action="{% url mumble.views.show DBaseObject.id %}" method="post">{% csrf_token %}
-        <table>
-          {{ AdminForm }}
-        </table>
-        <input type="hidden" name="mode" value="admin" />
-        <input type="submit" />
-      </form>
-    </div>
-  {% endif %}
-
-  {% for item in ChannelTable %}
-    {% if item.is_player %}
-    <div id="mumble_{{ item.id }}" class="mumble-ext x-hide-display">
-      <h2>{% trans "Player" %} {{ item.name }}</h2>
-      <ul>
-        <li>{% trans "Online since"     %}: {{ item.onlinesince|time }}</li>
-        <li>{% trans "Authenticated"    %}: {{ item.isAuthed|yesno   }}</li>
-        <li>{% trans "Admin"            %}: {{  item.isAdmin|yesno   }}</li>
-        <li>{% trans "Muted"            %}: {{     item.mute|yesno   }}</li>
-        <li>{% trans "Deafened"         %}: {{     item.deaf|yesno   }}</li>
-        <li>{% trans "Muted by self"    %}: {{ item.selfMute|yesno   }}</li>
-        <li>{% trans "Deafened by self" %}: {{ item.selfDeaf|yesno   }}</li>
-        {% if CurrentUserIsAdmin or user.is_staff %}
-          <li>{% trans "IP Address" %}: <acronym title="{{ item.ipaddress }}">{{ item.fqdn }}</acronym></li>
-        {% endif %}
-      </ul>
-      {% if item.mumbleuser and item.mumbleuser.owner %}
-        <h2>{% trans "User" %} {{ item.mumbleuser.owner.username|capfirst }}</h2>
-        <ul>
-          {% if item.mumbleuser.owner.first_name and item.mumbleuser.owner.last_name %}
-            <li>{% trans "Full Name" %}:  {{ item.mumbleuser.owner.first_name }} {{ item.mumbleuser.owner.last_name }}</li>
-          {% endif %}
-          <li>{% trans "Admin" %}:        {{ item.mumbleuser.owner.is_staff|yesno }}</li>
-          <li>{% trans "Sign-up date" %}: {{ item.mumbleuser.owner.date_joined|date }}</li>
-        </ul>
-      {% endif %}
-      {% if item.comment %}
-        <fieldset>
-          <legend>{% trans "User Comment" %}</legend>
-          {{ item.comment|removetags:"script link meta html head body style"|safe }}
-        </fieldset>
-      {% endif %}
-      {% if item.mumbleuser and item.mumbleuser.gravatar %}
-        <fieldset>
-          <legend>Gravatar</legend>
-          <img src="{{ item.mumbleuser.gravatar }}" alt="{{ item.name }}'s gravatar" />
-        </fieldset>
-      {% endif %}
-      {% if item.mumbleuser and item.mumbleuser.hasTexture %}
-        <fieldset>
-          <legend>{% trans "User Texture" %}</legend>
-          <img src="{% url mumble.views.showTexture DBaseObject.id item.mumbleuser.id %}" alt="user texture" />
-        </fieldset>
-      {% endif %}
-      {% if CurrentUserIsAdmin or user.is_staff %}
-        <fieldset>
-          <legend>{% trans "Kick user" %}</legend>
-          <form action="{% url mumble.views.show DBaseObject.id %}" method="POST">{% csrf_token %}
-            <input type="hidden" name="mode"    value="kick" />
-            <input type="hidden" name="session" value="{{ item.session }}" />
-            <ul>
-              <li>
-                <label for="inp_reason">{% trans "Reason" %}</label>
-                <input type="text"   name="reason"  value="" id="inp_reason" />
-              </li>
-              <li>
-                <input type="checkbox" name="ban"   value="1" id="inp_ban" />
-                <label for="inp_ban">{% trans "Ban user" %}</label>
-              </li>
-            </ul>
-            <input type="submit" value="{% trans "Kick user" %}" />
-          </form>
-        </fieldset>
-      {% endif %}
-    </div>
-    {% else %}
-    <div id="mumble_{{ item.id }}" class="mumble-ext x-hide-display">
-      <h2>{% trans "Channel" %} {{ item.name }}</h2>
-        {% if CurrentUserIsAdmin or user.is_staff %}
-          {% trans "Channel ID" %}: {{ item.chanid }}<br />
-        {% endif %}
-      <a href="{{ item|chanurl:MumbleAccount }}" class="mumble">{% trans "Connect" %}</a>
-        {% if item.description %}
-          <fieldset>
-            <legend>{% trans "Channel description" %}</legend>
-            {{ item.description|removetags:"script link meta html head body style"|safe }}
-          </fieldset>
-        {% endif %}
-    </div>
-    {% endif %}
-  {% endfor %}
-{% endblock %}
-
 {% block HeadTag %}
+  <script type="text/javascript" src="{{ MEDIA_URL }}/js/mumble.js"></script>
   <script type="text/javascript">
     Ext.onReady( function(){
-      Ext.get( 'mumble_registration' ).addClass( 'x-hide-display' );
-      {% if Registered %}
-        Ext.get( 'mumble_texture' ).addClass( 'x-hide-display' );
-      {% endif %}
-      {% if CurrentUserIsAdmin %}
-        Ext.get( 'mumble_admin' ).addClass( 'x-hide-display' );
-      {% endif %}
-
-      {% if CurrentUserIsAdmin %}
-      userRecord = Ext.data.Record.create([
-        { name: 'id',       type: 'int'    },
-        { name: 'name',     type: 'string' },
-        { name: 'password', type: 'string' },
-        { name: 'owner',    type: 'int'    },
-        { name: 'admin',    type: 'bool'   },
-        { name: 'delete',   type: 'bool'   }
-        ]);
-
-      userAdminStore = new Ext.data.Store({
-        url:    '{% url mumble.views.users DBaseObject.id %}',
-        reader: new Ext.data.JsonReader({
-          root:    'objects',
-          fields:  userRecord
-          }),
-        autoLoad: true,
-        remoteSort: false
-        });
-
-      adminColumn = new Ext.grid.CheckColumn({
-        header:    '{% trans "Admin on root channel" %}',
-        dataIndex: 'admin',
-        width:     50
-        });
-
-      deleteColumn = new Ext.grid.CheckColumn({
-        header:    '{% trans "Delete" %}',
-        dataIndex: 'delete',
-        width:     50
-        });
-
-      ownerCombo = new Ext.form.ComboBox({
-        name:     'owner',
-        hiddenName:     'owner_id',
-        forceSelection: true,
-        triggerAction:  'all',
-        valueField:     'uid',
-        displayField:   'uname',
-        store: new Ext.data.Store({
-          url:    '{% url mumble.views.djangousers %}',
-          reader: new Ext.data.JsonReader({
-            fields:  [ 'uid', 'uname' ],
-            root:    'objects'
-            }),
-          autoLoad: true
-          })
-        });
-      {% endif %}
-
-      var cardpanel = new Ext.Panel({
-        renderTo:   'mumble_ext_container',
-        layout:     'card',
-        id:   'mumble_container',
-        height:     570,
-        activeItem: 0,
-        border:     false,
-        items:      [ {
-          id:  'mumble_tabpanel',
-          xtype:     'tabpanel',
-          defaults:  { autoheight: true },
-          activeTab: {{ DisplayTab }},
-          items: [
-            { contentEl: 'mumble_motd',     title: '{% trans "Server Info" %}',    autoScroll: true },
-            {  contentEl: 'mumble_registration', title: '{% trans "Registration" %}', autoScroll: true,
-
-              {% if user.is_authenticated %}
-                listeners: {
-                  activate: function(){ Ext.fly("id_name").focus() }
-                  }
-              {% endif %}
-            },
-            {% if CurrentUserIsAdmin %}
-              { contentEl: 'mumble_admin',  title: '{% trans "Administration" %}', autoScroll: true },
-            {% endif %}
-            {% if Registered %}
-              { contentEl: 'mumble_texture',title: '{% trans "User Texture" %}',   autoScroll: true },
-            {% endif %}
-            {% if CurrentUserIsAdmin %}
-              {
-              title:  '{% trans "User List" %}',
-              xtype:  'editorgrid',
-              store:  userAdminStore,
-              cm:     new Ext.grid.ColumnModel( [ {
-                  header:    '{% trans "name" %}',
-                  dataIndex: 'name',
-                  sortable:  true,
-                  editor:    new Ext.form.TextField({
-                  allowBlank: false
-                    })
-                }, {
-                  header:    '{% trans "Account owner" %}',
-                  dataIndex: 'owner',
-                  editor:    ownerCombo,
-                  sortable:  true,
-                  renderer:  function( value ){
-                    if( value == '' ) return '';
-                    items = ownerCombo.store.data.items;
-                    for( i = 0; i < items.length; i++ )
-                      if( items[i].data.uid == value )
-                        return items[i].data.uname;
-                    }
-
-                }, adminColumn, {
-                  header:    '{% trans "Change password" %}',
-                  dataIndex: 'password',
-                  editor: new Ext.form.TextField({
-                    inputType: 'password'
-                    }),
-                  renderer: function( value ){
-                    ret = '';
-                    for( i = 0; i < value.length; i++ )
-                      ret += '*';
-                    return ret;
-                    }
-                }, deleteColumn ] ),
-              tbar:   [{
-                text:     '{% trans "Add" %}',
-                handler : function(){
-                  userAdminStore.add( new userRecord( {
-                    id:       -1,
-                    name:     'New User',
-                    admin:    false,
-                    owner:    '',
-                    password: '',
-                    'delete': false
-                    } ) );
-                  }
-                }, {
-                text:     '{% trans "Save" %}',
-                handler : function(){
-                  data = [];
-                  for( i = 0; i < userAdminStore.data.items.length; i++ ){
-                    rec = userAdminStore.data.items[i];
-                    if( rec.dirty ){
-                      data.push(rec.data);
-                      }
-                    }
-                  var conn = new Ext.data.Connection();
-                  conn.request( {
-                    url:     userAdminStore.url,
-                    params:  { data: Ext.encode( data ) },
-                    success: function(){
-                      for( i = 0; i < userAdminStore.data.items.length; i++ ){
-                        rec = userAdminStore.data.items[i];
-                        if( rec.data['delete'] == true )
-                          userAdminStore.remove( rec );
-                        else if( rec.dirty ){
-                          rec.commit();
-                          }
-                        }
-                      }
-                    } );
-                  }
-                }, {
-                text:    '{% trans "Resync with Murmur" %}',
-                handler: function(){
-                  userAdminStore.reload({
-                    params: { 'resync': 'true' }
-                    });
-                  }
-                }],
-              plugins: [ adminColumn, deleteColumn ]
-              }
-            {% endif %}
-            ]
-          },
-          {% for item in ChannelTable %}
-            { contentEl: 'mumble_{{ item.id }}', id: 'carditem_{{ item.id }}' }{% if not forloop.last %},{% endif %}
-          {% endfor %}
-          ]
-        });
-
-      Ext.get( 'link_server' ).on( 'click', function( event, target ){
-        cardpanel.layout.setActiveItem( 'mumble_tabpanel' );
-        event.preventDefault();
-        });
-      {% for item in ChannelTable %}
-        Ext.get( 'link_{{ item.id }}' ).on( 'click', function( event, target ){
-          cardpanel.layout.setActiveItem( 'carditem_{{ item.id }}' );
-          event.preventDefault();
-          });
-      {% endfor %}
+      render_mumble( "ext_container", "{% url mumble.views.cvp_json DBaseObject.id %}" );
       } );
   </script>
-  <meta http-equiv="refresh" content="300" />
 {% endblock %}